/* assets/site.css */
/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: 0.25rem;
    --container-6xl: 72rem;
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --font-weight-semibold: 600;
    --font-weight-extrabold: 800;
    --tracking-tight: -0.025em;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .relative {
    position: relative;
  }
  .sticky {
    position: sticky;
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .isolate {
    isolation: isolate;
  }
  .z-10 {
    z-index: 10;
  }
  .z-50 {
    z-index: 50;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-9 {
    margin-top: calc(var(--spacing) * 9);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .mt-14 {
    margin-top: calc(var(--spacing) * 14);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .h-\[72px\] {
    height: 72px;
  }
  .w-full {
    width: 100%;
  }
  .max-w-6xl {
    max-width: var(--container-6xl);
  }
  .max-w-\[430px\] {
    max-width: 430px;
  }
  .max-w-\[460px\] {
    max-width: 460px;
  }
  .max-w-\[580px\] {
    max-width: 580px;
  }
  .max-w-\[600px\] {
    max-width: 600px;
  }
  .max-w-\[750px\] {
    max-width: 750px;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-9 {
    gap: calc(var(--spacing) * 9);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .gap-11 {
    gap: calc(var(--spacing) * 11);
  }
  .space-y-5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .py-7 {
    padding-block: calc(var(--spacing) * 7);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-16 {
    padding-top: calc(var(--spacing) * 16);
  }
  .pb-20 {
    padding-bottom: calc(var(--spacing) * 20);
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .sm\:inline {
    @media (width >= 40rem) {
      display: inline;
    }
  }
  .sm\:inline-flex {
    @media (width >= 40rem) {
      display: inline-flex;
    }
  }
  .sm\:w-auto {
    @media (width >= 40rem) {
      width: auto;
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:items-center {
    @media (width >= 40rem) {
      align-items: center;
    }
  }
  .sm\:gap-7 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 7);
    }
  }
  .sm\:px-7 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 7);
    }
  }
  .sm\:pt-20 {
    @media (width >= 40rem) {
      padding-top: calc(var(--spacing) * 20);
    }
  }
  .sm\:pb-24 {
    @media (width >= 40rem) {
      padding-bottom: calc(var(--spacing) * 24);
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:mt-12 {
    @media (width >= 64rem) {
      margin-top: calc(var(--spacing) * 12);
    }
  }
  .lg\:ml-auto {
    @media (width >= 64rem) {
      margin-left: auto;
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-4 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-\[\.9fr_1\.1fr\] {
    @media (width >= 64rem) {
      grid-template-columns: .9fr 1.1fr;
    }
  }
  .lg\:grid-cols-\[\.78fr_1\.22fr\] {
    @media (width >= 64rem) {
      grid-template-columns: .78fr 1.22fr;
    }
  }
  .lg\:grid-cols-\[1\.15fr_\.85fr\] {
    @media (width >= 64rem) {
      grid-template-columns: 1.15fr .85fr;
    }
  }
  .lg\:gap-16 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 16);
    }
  }
  .lg\:gap-20 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 20);
    }
  }
  .lg\:px-10 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 10);
    }
  }
  .lg\:pt-28 {
    @media (width >= 64rem) {
      padding-top: calc(var(--spacing) * 28);
    }
  }
  .lg\:pb-28 {
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 28);
    }
  }
}
:root {
  color-scheme: dark;
  --bg: #0f172a;
  --surface: #151f34;
  --surface-elevated: #1b2941;
  --surface-muted: #111b2f;
  --text: #f8fafc;
  --body: #b8c5d7;
  --muted: #95a5bd;
  --border: #314158;
  --border-strong: #475569;
  --accent: #818cf8;
  --accent-strong: #a5b4fc;
  --accent-wash: rgba(129, 140, 248, .13);
  --accent-ink: #e0e7ff;
  --nav-bg: rgba(15, 23, 42, .96);
  --input-bg: #101b2e;
  --shadow: rgba(0, 0, 0, .22);
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f8fafc;
  --surface: #fff;
  --surface-elevated: #f1f5f9;
  --surface-muted: #f1f5f9;
  --text: #172033;
  --body: #475569;
  --muted: #64748b;
  --border: #dce3ed;
  --border-strong: #b6c2d4;
  --accent: #4f46e5;
  --accent-strong: #4338ca;
  --accent-wash: rgba(79, 70, 229, .08);
  --accent-ink: #3730a3;
  --nav-bg: rgba(248, 250, 252, .97);
  --input-bg: #f8fafc;
  --shadow: rgba(17, 24, 39, .08);
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 86px;
}
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  transition: background-color .2s ease, color .2s ease;
}
body, button, input, textarea {
  -webkit-font-smoothing: antialiased;
}
button, a, input, textarea {
  -webkit-tap-highlight-color: transparent;
}
a, button {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 4px;
}
::selection {
  background: var(--accent);
  color: white;
}
.section-anchor {
  scroll-margin-top: 78px;
}
.skip-link {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--accent);
  color: white;
  border-radius: 12px;
}
.skip-link:focus {
  top: 10px;
}
.site-header {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
}
.brand {
  color: var(--text);
  font-size: 14px;
  white-space: nowrap;
}
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: 13px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: -.07em;
}
.brand-mark span {
  color: var(--accent);
}
.primary-nav {
  display: flex;
  gap: clamp(12px, 1.7vw, 26px);
  align-items: center;
}
.nav-link {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  transition: color .15s ease;
}
.nav-link:hover, .nav-link.is-current {
  color: var(--text);
}
.nav-link.is-current {
  position: relative;
}
.nav-link.is-current::after {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--body);
  background: var(--surface);
  transition: border-color .15s ease, background .15s ease;
}
.icon-button:hover {
  border-color: var(--accent);
  background: var(--accent-wash);
}
.icon-button svg {
  width: 19px;
  height: 19px;
}
.theme-sun {
  display: none;
}
html[data-theme="light"] .theme-sun {
  display: block;
}
html[data-theme="light"] .theme-moon {
  display: none;
}
.nav-contact {
  gap: 8px;
  align-items: center;
  padding: 10px 15px;
  border-radius: 11px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  transition: filter .15s ease;
}
.nav-contact:hover {
  filter: brightness(1.12);
}
.menu-toggle {
  display: none;
}
.hero {
  border-bottom: 1px solid var(--border);
}
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 700px 430px at 93% 11%, var(--accent-wash), transparent 77%), linear-gradient(90deg, transparent 97%, rgba(148,163,184,.04) 100%);
}
.eyebrow, .section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .115em;
  line-height: 1.6;
}
.eyebrow-dot {
  display: inline-block;
  flex: 0 0 7px;
  height: 7px;
  border-radius: 100%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash);
}
.hero-heading {
  font-size: clamp(2.75rem, 6vw, 5.1rem);
  line-height: 1.075;
  max-width: 760px;
  letter-spacing: -.065em;
  text-wrap: balance;
}
.accent-gradient {
  background: linear-gradient(120deg, var(--accent-strong) 8%, #8ad2ff 78%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="light"] .accent-gradient {
  background-image: linear-gradient(120deg, #4338ca, #2563eb);
}
.body-lead {
  color: var(--body);
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  line-height: 1.78;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 48px;
  padding: 12px 19px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
  transition: transform .17s ease, background .17s ease, border-color .17s ease;
}
.button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.button-primary {
  background: #6366f1;
  color: white;
  box-shadow: 0 9px 22px rgba(99,102,241,.14);
}
.button-primary:hover {
  background: #5653e8;
}
.button-quiet {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
}
.button-quiet:hover {
  border-color: var(--accent);
  background: var(--accent-wash);
}
.hero-proof {
  border-color: var(--border);
}
.hero-proof div {
  min-width: 0;
}
.hero-proof strong {
  display: block;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 830;
  letter-spacing: -.055em;
  line-height: 1.2;
}
.hero-proof .stat-suffix {
  margin-left: 1px;
  color: var(--accent-strong);
  font-size: .58em;
  letter-spacing: -.03em;
}
.hero-proof div > span {
  display: block;
  margin-top: 5px;
  max-width: 150px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.hero-visual {
  padding: 16px 8px 20px;
}
.portrait-halo {
  position: absolute;
  inset: 2% 4% 1%;
  border: 1px solid var(--border);
  border-radius: 49% 51% 46% 54% / 50% 40% 60% 50%;
  transform: rotate(-8deg);
}
.portrait-card {
  position: relative;
  margin: 16px auto 10px;
  width: min(100%, 385px);
  padding: 16px;
  border: 1px solid var(--border-strong);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: 0 28px 65px var(--shadow);
}
.portrait-card-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .08em;
}
.portrait-card-header > span:first-child {
  display: flex;
  gap: 7px;
  align-items: center;
}
.status-dot {
  display: inline-block;
  flex: 0 0 7px;
  height: 7px;
  border-radius: 50%;
  background: #818cf8;
}
.portrait-wrap {
  margin-top: 16px;
  display: grid;
  place-items: center;
  aspect-ratio: 1.14 / 1;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(145deg, #253451, #101c34);
}
.portrait-wrap img {
  display: block;
  width: 77%;
  max-width: 265px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  background: #334155;
  border: 5px solid rgba(255,255,255,.07);
}
.portrait-wrap > * {
  grid-area: 1 / 1;
}
.portrait-fallback {
  display: grid;
  place-items: center;
  width: 77%;
  max-width: 265px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 5px solid rgba(255,255,255,.07);
  background: linear-gradient(145deg,#384368,#161d3a);
  color: white;
  font-size: 68px;
  font-weight: 900;
  letter-spacing: -.12em;
}
.portrait-fallback span {
  color: #a5b4fc;
}
.portrait-wrap img[hidden] {
  display: none;
}
.portrait-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 3px 0;
}
.portrait-card-footer strong {
  display: block;
  font-size: 16px;
  font-weight: 780;
}
.portrait-card-footer span:not(.portrait-chevron) {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}
.portrait-chevron {
  color: var(--accent-strong);
  font-size: 21px;
}
.portrait-side-note {
  position: relative;
  width: fit-content;
  margin: 17px auto 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .015em;
}
.mini-spark {
  margin-right: 6px;
  color: var(--accent-strong);
  font-size: 16px;
}
.section-block {
  padding: clamp(70px, 9vw, 116px) 0;
}
.section-alt {
  background: var(--surface-muted);
  border-block: 1px solid var(--border);
}
.section-heading {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.15;
  font-weight: 820;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.accent-text {
  color: var(--accent-strong);
}
html[data-theme="light"] .accent-text {
  color: #4f46e5;
}
.body-copy {
  color: var(--body);
  font-size: 15px;
  line-height: 1.8;
}
.about-intro {
  max-width: 650px;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.7;
  font-weight: 570;
  letter-spacing: -.012em;
}
.about-callout {
  display: flex;
  gap: 17px;
  align-items: start;
  padding: 15px 19px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.about-callout p {
  color: var(--text);
  line-height: 1.65;
  font-size: 14px;
  font-weight: 650;
}
.callout-rule {
  flex: 0 0 3px;
  height: 37px;
  border-radius: 4px;
  background: var(--accent);
}
.subtle-pill {
  display: inline-block;
  padding: 8px 11px;
  color: var(--body);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
}
.section-intro {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(240px,.8fr);
  align-items: end;
  gap: 26px;
}
.section-intro > p {
  max-width: 380px;
  justify-self: end;
}
.skill-card {
  min-width: 0;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
}
.skill-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.skill-icon {
  display: inline-grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border-radius: 11px;
  background: var(--accent-wash);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 850;
}
html[data-theme="light"] .skill-icon {
  color: var(--accent-ink);
}
.skill-kind {
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .11em;
}
.skill-card h3 {
  margin: 22px 0 9px;
  font-size: 19px;
  font-weight: 780;
  letter-spacing: -.03em;
}
.skill-card p {
  min-height: 66px;
  color: var(--body);
  font-size: 13px;
  line-height: 1.7;
}
.skill-tags, .project-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.skill-tags {
  margin-top: 19px;
}
.skill-tags span {
  padding: 6px 9px;
  border-radius: 8px;
  background: var(--surface-elevated);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}
.project-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.project-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  overflow: hidden;
  isolation: isolate;
}
.project-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 46%, rgba(255,255,255,.08), transparent 54%);
}
.project-art-corner {
  position: absolute;
  left: 18px;
  top: 17px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  opacity: .78;
}
.project-art img {
  max-width: 58%;
  max-height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 9px 18px rgba(0,0,0,.19));
}
.project-art .project-art-fallback {
  font-size: 58px;
  font-weight: 900;
  letter-spacing: -.1em;
}
.project-art-fallback span {
  color: #c7d2fe;
}
.project-art-floor {
  position: absolute;
  inset: auto 12% 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}
.project-art-gold {
  color: #e5cf82;
  background: linear-gradient(125deg,#242119,#0d141e);
}
.project-art-aspirva {
  color: #164e63;
  background: linear-gradient(125deg,#eaf6f8,#c5e6e7);
}
.project-art-aspirva img {
  max-height: 82px;
  border-radius: 17px;
  box-shadow: 0 9px 28px rgba(12,80,93,.13);
}
.project-art-aspirva .project-art-fallback span {
  color: #0d9488;
}
.project-art-studio { color: #9bffe8; background: radial-gradient(circle at 44% 42%,rgba(185,244,59,.12),transparent 55%),linear-gradient(125deg,#122923,#101b29); }
.project-art-studio img { max-width: 86%; max-height: 83px; }
.project-art-studio .project-art-fallback span { color: #b9f43b; }
.project-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px;
}
.project-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .09em;
}
.gold-dot {
  background: #facc6b;
}
.teal-dot {
  background: #34bdbb;
}
.mint-dot {
  background: #6ee7b7;
}
.project-content h3 {
  margin-top: 11px;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.25;
  font-weight: 780;
  letter-spacing: -.03em;
}
.project-content > p {
  margin-top: 10px;
  color: var(--body);
  font-size: 13px;
  line-height: 1.7;
}
.project-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  padding-top: 22px;
}
.project-metric strong {
  font-size: 24px;
  font-weight: 820;
  letter-spacing: -.055em;
  line-height: 1.2;
}
.project-metric span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.project-stack {
  margin-top: 17px;
  padding-top: 17px;
  border-top: 1px solid var(--border);
}
.project-stack span {
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--body);
  font-size: 11px;
}
.project-disclaimer {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}
.experience-timeline {
  position: relative;
  border-left: 1px solid var(--border-strong);
  margin-left: 8px;
  padding-left: 29px;
}
.timeline-entry {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,.33fr) minmax(0,.67fr);
  gap: clamp(18px,3vw,40px);
  padding: 5px 0 32px;
}
.timeline-entry + .timeline-entry {
  border-top: 1px solid var(--border);
  padding-top: 27px;
}
.timeline-entry::before {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  left: -35px;
  top: 12px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 4px var(--accent-wash);
}
.timeline-entry + .timeline-entry::before {
  top: 34px;
}
.timeline-period {
  display: block;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: .08em;
}
.timeline-company {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .08em;
}
.timeline-copy h3 {
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 780;
  letter-spacing: -.025em;
  line-height: 1.35;
}
.timeline-copy > p {
  margin-top: 9px;
  color: var(--body);
  font-size: 13px;
  line-height: 1.75;
}
.timeline-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 15px;
}
.timeline-highlights span {
  display: inline-block;
  padding: 7px 10px;
  color: var(--accent-strong);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--accent-wash);
  font-size: 11px;
  font-weight: 700;
}
.timeline-copy .timeline-extra {
  color: var(--muted);
  font-size: 12px;
}
.education-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.education-strip > div:first-child {
  display: grid;
  gap: 6px;
}
.education-strip strong {
  font-size: 16px;
  font-weight: 750;
}
.education-strip > div:first-child > span:last-child {
  color: var(--muted);
  font-size: 12px;
}
.education-strip-badge {
  flex: 0 0 auto;
  color: var(--accent-strong);
  font-size: 14px;
  font-weight: 850;
}
.education-strip-badge span {
  font-size: 18px;
}
.contact-section {
  border-bottom: 1px solid var(--border);
}
.contact-details a {
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 4px;
  transition: color .15s ease;
}
.contact-details a:hover {
  color: var(--accent-strong);
}
.contact-details a span {
  color: var(--accent-strong);
}
.resume-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  max-width: 440px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface);
}
.resume-panel > div {
  display: grid;
  gap: 4px;
}
.resume-panel-label {
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: .1em;
}
.resume-panel strong {
  font-size: 14px;
  font-weight: 760;
}
.resume-panel > div > span:last-child {
  color: var(--muted);
  font-size: 11px;
}
.resume-icon-link {
  display: inline-grid;
  flex: 0 0 44px;
  place-items: center;
  height: 44px;
  border-radius: 12px;
  background: var(--accent);
  color: white;
  transition: filter .16s ease;
}
.resume-icon-link svg {
  width: 21px;
  height: 21px;
}
.resume-icon-link:hover {
  filter: brightness(1.12);
}
.contact-form-panel {
  padding: clamp(22px,3vw,34px);
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
}
.contact-form-panel h3 {
  font-size: 22px;
  font-weight: 790;
  letter-spacing: -.03em;
}
.contact-form-panel label {
  display: block;
  margin-bottom: 9px;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}
.contact-form-panel label span {
  color: var(--accent-strong);
}
.contact-form-panel input, .contact-form-panel textarea {
  display: block;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--input-bg);
  color: var(--text);
  padding: 13px 15px;
  font-size: 14px;
  line-height: 1.45;
  outline: none;
  transition: border-color .15s ease;
}
.contact-form-panel textarea {
  resize: vertical;
  min-height: 140px;
}
.contact-form-panel input::placeholder, .contact-form-panel textarea::placeholder {
  color: var(--muted);
  opacity: .8;
}
.contact-form-panel input:focus, .contact-form-panel textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.form-status {
  min-height: 21px;
  color: var(--muted);
  font-size: 12px;
}
.copy-email {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer {
  color: var(--muted);
  font-size: 12px;
}
.site-footer a:hover {
  color: var(--accent-strong);
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .project-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: 0 14px 34px var(--shadow);
  }
  .button:hover {
    transform: translateY(-2px);
  }
}
@media (max-width: 1000px) {
  .primary-nav {
    gap: 12px;
  }
  .nav-link {
    font-size: 12px;
  }
}
@media (max-width: 850px) {
  .menu-toggle {
    display: inline-grid;
  }
  .primary-nav {
    position: absolute;
    top: 71px;
    left: 12px;
    right: 12px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 11px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: 0 18px 42px var(--shadow);
  }
  .primary-nav[data-open="true"] {
    display: flex;
  }
  .nav-link {
    padding: 12px 14px;
    border-radius: 9px;
    font-size: 14px;
  }
  .nav-link:hover, .nav-link.is-current {
    background: var(--accent-wash);
  }
  .nav-link.is-current::after {
    display: none;
  }
  .section-intro {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .section-intro > p {
    justify-self: start;
    max-width: 600px;
  }
}
@media (max-width: 650px) {
  .hero-heading {
    font-size: clamp(2.52rem, 10.6vw, 3.6rem);
    line-height: 1.08;
  }
  .hero-proof strong {
    font-size: clamp(1.4rem, 6.3vw, 1.85rem);
  }
  .hero-proof div > span {
    font-size: 11px;
  }
  .hero-visual {
    max-width: 380px;
  }
  .section-block {
    padding: 72px 0;
  }
  .section-heading {
    font-size: clamp(2rem, 8vw, 2.7rem);
  }
  .skill-card {
    padding: 22px;
  }
  .skill-card p {
    min-height: 0;
  }
  .timeline-entry {
    grid-template-columns: 1fr;
    gap: 11px;
  }
  .timeline-copy h3 {
    font-size: 18px;
  }
  .experience-timeline {
    padding-left: 22px;
  }
  .timeline-entry::before {
    left: -28px;
  }
  .contact-form-panel {
    padding: 21px;
  }
}
@media (max-width: 375px) {
  .eyebrow {
    font-size: 9px;
    letter-spacing: .08em;
  }
  .hero-proof {
    gap: 9px;
  }
  .hero-proof strong {
    font-size: 1.35rem;
  }
  .hero-proof div > span {
    font-size: 10px;
  }
  .button {
    padding-inline: 15px;
    font-size: 13px;
  }
  .education-strip-badge {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
.challenge-section {
  background: var(--bg);
}
.challenge-card {
  min-width: 0;
  padding: 25px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 19px;
}
.challenge-number {
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .085em;
}
.challenge-card h3 {
  font-size: 19px;
  font-weight: 780;
  letter-spacing: -.035em;
  line-height: 1.3;
  margin-top: 21px;
}
.challenge-card p {
  color: var(--body);
  font-size: 13px;
  line-height: 1.7;
  margin-top: 10px;
}
.results-section {
  border-block: 1px solid var(--border);
}
.result-tile {
  min-width: 0;
  padding: 23px;
  border-radius: 19px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.result-tile>strong {
  display: block;
  font-size: clamp(2.3rem,4vw,3.5rem);
  letter-spacing: -.07em;
  line-height: 1.03;
  font-weight: 830;
}
.result-tile>strong span {
  font-size: .42em;
  color: var(--accent-strong);
  letter-spacing: -.02em;
}
.result-tile h3 {
  font-size: 14px;
  margin-top: 15px;
  font-weight: 790;
}
.result-tile p {
  color: var(--body);
  font-size: 12px;
  line-height: 1.7;
  margin-top: 7px;
}
.impact-story {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(240px,.8fr);
  gap: clamp(20px,4vw,50px);
  padding: clamp(23px,4vw,36px);
  border: 1px solid var(--border-strong);
  border-radius: 21px;
  background: var(--surface);
}
.impact-story h3 {
  font-size: clamp(22px,2.8vw,32px);
  letter-spacing: -.05em;
  font-weight: 800;
  line-height: 1.2;
  margin-top: 15px;
}
.impact-story>div:first-child p {
  font-size: 14px;
  color: var(--body);
  line-height: 1.75;
  margin-top: 14px;
}
.impact-outcome {
  padding: 20px;
  border-radius: 16px;
  background: var(--accent-wash);
  border: 1px solid var(--border);
}
.impact-outcome>span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--accent-strong);
}
.impact-outcome strong {
  display: block;
  margin-top: 12px;
  font-size: clamp(2.6rem,5vw,4.4rem);
  font-weight: 840;
  letter-spacing: -.07em;
  line-height: 1.05;
}
.impact-outcome p {
  font-size: 13px;
  color: var(--body);
  line-height: 1.65;
  margin-top: 10px;
}
.impact-outcome small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}
.recognition-line {
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
}
.case-expand {
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
}
.case-expand summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
  list-style: none;
}
.case-expand summary::-webkit-details-marker {
  display: none;
}
.case-expand summary span {
  font-size: 20px;
  line-height: 1;
  transition: transform .2s ease;
}
.case-expand[open] summary span {
  transform: rotate(45deg);
}
.case-steps {
  display: grid;
  gap: 14px;
  padding-top: 17px;
}
.case-steps>div {
  border-left: 2px solid var(--border-strong);
  padding-left: 12px;
}
.case-steps span {
  font-size: 9px;
  color: var(--accent-strong);
  font-weight: 790;
  letter-spacing: .085em;
}
.case-steps p {
  font-size: 12px;
  color: var(--body);
  line-height: 1.65;
  margin-top: 5px;
}
.plan-section {
  border-top: 1px solid var(--border);
}
.method-step {
  padding: 23px;
  border: 1px solid var(--border);
  border-radius: 19px;
  background: var(--surface);
}
.method-step>span,.first90-grid li>span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  color: var(--accent-strong);
}
.method-step h3 {
  font-size: 18px;
  font-weight: 790;
  letter-spacing: -.03em;
  margin-top: 23px;
  line-height: 1.25;
}
.method-step p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--body);
  margin-top: 10px;
}
.first90 {
  padding: clamp(23px,3vw,35px);
  border: 1px solid var(--border);
  border-radius: 23px;
  background: var(--surface-muted);
}
.first90-heading h3,.kpi-heading {
  font-size: clamp(1.65rem,3vw,2.5rem);
  font-weight: 820;
  letter-spacing: -.05em;
  line-height: 1.2;
  margin-top: 10px;
}
.first90-heading p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
  margin-top: 12px;
  max-width: 660px;
}
.first90-grid li {
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  padding: 21px;
}
.first90-grid li h4 {
  font-size: 17px;
  font-weight: 780;
  margin-top: 13px;
}
.first90-grid li p {
  font-size: 12px;
  color: var(--body);
  line-height: 1.7;
  margin-top: 10px;
}
.kpi-grid>div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 17px 20px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
}
.kpi-grid strong {
  font-size: 14px;
  font-weight: 770;
}
.kpi-grid span {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.risk-line {
  padding: 17px 20px;
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: var(--accent-wash);
  color: var(--body);
  font-size: 13px;
  line-height: 1.7;
}
@media (max-width:850px) {
  .impact-story {
    grid-template-columns: 1fr;
  }
  .results-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (max-width:650px) {
  .challenge-card,.result-tile,.method-step {
    padding: 20px;
  }
  .section-block {
    padding: 64px 0;
  }
  .result-tile>strong {
    font-size: 2.5rem;
  }
  .impact-story {
    padding: 21px;
  }
  .first90 {
    padding: 20px;
  }
  .case-expand summary {
    min-height: 44px;
  }
}
@media (max-width:355px) {
  .results-grid {
    grid-template-columns: 1fr;
  }
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-tracking: initial;
    }
  }
}

/* Live project links. In-card links are distinct from expandable case studies. */
.project-links { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:9px 12px; margin-top:17px; }
.project-live-link { display:inline-flex; justify-content:space-between; align-items:center; gap:10px; min-height:42px; padding:10px 13px; border:1px solid var(--border-strong); border-radius:11px; color:var(--accent-strong); background:var(--accent-wash); font-size:12px; font-weight:800; text-decoration:none; transition:transform .18s ease,border-color .18s ease; }
.project-live-link:hover { transform:translateY(-2px); border-color:var(--accent-strong); }
.project-live-link:focus-visible { outline:3px solid var(--accent-strong); outline-offset:3px; }
.project-live-link span { font-size:16px; line-height:1; }
.project-link-note { color:var(--muted); font-size:10px; line-height:1.4; }
.project-metric code { font:inherit; overflow-wrap:anywhere; }
@media(max-width:390px) { .project-links { align-items:flex-start; flex-direction:column; } .project-live-link { width:100%; } }
@media(prefers-reduced-motion:reduce) { .project-live-link { transition:none; } }

/* assets/theme-audit.css */
/* Token-complete light/dark audit, layered after precompiled Tailwind. */
:root {
  --accent-on:#0f172a;--primary-bg:#4f46e5;--primary-hover:#4338ca;--primary-on:#fff;
  --portrait-matte:linear-gradient(145deg,#253451,#101c34);--portrait-fallback:linear-gradient(145deg,#384368,#161d3a);
  --portrait-ink:#fff;--portrait-image-bg:#334155;
  --art-gold-bg:linear-gradient(125deg,#242119,#0d141e);--art-gold-ink:#e5cf82;
  --art-aspirva-bg:linear-gradient(125deg,#10303b,#123e49);--art-aspirva-ink:#bcf5f7;
  --art-studio-bg:radial-gradient(circle at 44% 42%,rgba(185,244,59,.12),transparent 55%),linear-gradient(125deg,#122923,#101b29);--art-studio-ink:#9bffe8;
}
html[data-theme="light"] {
  --accent-on:#fff;--primary-bg:#4338ca;--primary-hover:#3730a3;--primary-on:#fff;
  --portrait-matte:linear-gradient(145deg,#e5edff,#d6e1f5);--portrait-fallback:linear-gradient(145deg,#dbe7fc,#b7caed);
  --portrait-ink:#1e2e4e;--portrait-image-bg:#dae6f7;
  --art-gold-bg:linear-gradient(125deg,#fff4db,#e9d3a7);--art-gold-ink:#684009;
  --art-aspirva-bg:linear-gradient(125deg,#f1fcfd,#c9e8ef);--art-aspirva-ink:#164e63;
  --art-studio-bg:radial-gradient(circle at 44% 42%,rgba(30,163,176,.12),transparent 55%),linear-gradient(125deg,#f2faef,#ccebdc);--art-studio-ink:#164b42;
}
::selection,.skip-link,.nav-contact,.resume-icon-link { color:var(--accent-on); }
.button-primary { background:var(--primary-bg);color:var(--primary-on); }
.button-primary:hover { background:var(--primary-hover); }
.portrait-wrap { background:var(--portrait-matte); }
.portrait-wrap img { background:var(--portrait-image-bg);border-color:var(--surface); }
.portrait-fallback {background:var(--portrait-fallback);color:var(--portrait-ink);}
.portrait-fallback span {color:var(--accent-strong);}
.project-art-gold {color:var(--art-gold-ink);background:var(--art-gold-bg);}
.project-art-aspirva {color:var(--art-aspirva-ink);background:var(--art-aspirva-bg);}
.project-art-aspirva .project-art-fallback span {color:#5eead4;}
html[data-theme="light"] .project-art-aspirva .project-art-fallback span {color:#0d9488;}
.project-art-studio {color:var(--art-studio-ink);background:var(--art-studio-bg);}
.project-art .studio-logo--light { display:none; }
html[data-theme="light"] .project-art .studio-logo--dark { display:none; }
html[data-theme="light"] .project-art .studio-logo--light { display:block; }
html[data-theme="light"] .project-art-gold img { filter:brightness(.62) drop-shadow(0 7px 12px rgba(72,47,9,.12)); }
html[data-theme="light"] .project-art-gold .project-art-fallback span { color:#946012; }
html[data-theme="light"] .project-art .project-art-floor { background:linear-gradient(90deg,transparent,rgba(15,23,42,.16),transparent); }
.project-art-studio img { max-width:86%; width:auto; }
.visitor-explorer { margin-top:38px; padding:clamp(20px,4vw,32px); border-radius:22px; border:1px solid var(--border-strong); background:var(--surface); box-shadow:0 12px 30px var(--shadow); }
.visitor-explorer-intro h3 { font-size:clamp(1.45rem,2.9vw,2.15rem); line-height:1.2; letter-spacing:-.045em; font-weight:800; margin-top:10px; }
.visitor-explorer-intro p { color:var(--body); margin-top:8px; font-size:13px; line-height:1.65; }
.visitor-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin:22px 0 18px; }
.visitor-tab { min-width:0; padding:12px 10px; border-radius:11px; border:1px solid var(--border); background:var(--surface-elevated); color:var(--body); font-size:12px; font-weight:760; text-align:center; transition:border-color .15s ease,background-color .15s ease,color .15s ease; }
.visitor-tab:hover { border-color:var(--accent-strong); }
.visitor-tab.is-selected,[role="tab"][aria-selected="true"] { border-color:var(--accent-strong); color:var(--accent-on); background:var(--accent); }
.visitor-focus-panel { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(195px,.65fr); gap:clamp(18px,3vw,35px); padding:clamp(18px,3vw,27px); border:1px solid var(--border); border-radius:16px; background:var(--surface-muted); }
.visitor-focus-copy > span,.visitor-focus-proof > span { color:var(--accent-strong); font-size:10px; font-weight:800; letter-spacing:.085em; }
.visitor-focus-copy h4 { margin:10px 0; font-size:clamp(1.22rem,2vw,1.55rem); line-height:1.28; letter-spacing:-.035em; font-weight:800; }
.visitor-focus-copy p,.visitor-focus-proof p { font-size:13px; line-height:1.65; color:var(--body); }
.visitor-focus-copy a { display:inline-flex; align-items:center; gap:12px; margin-top:16px; color:var(--accent-strong); font-size:13px; font-weight:800; text-decoration:underline; text-underline-offset:4px; }
.visitor-focus-copy a:hover { color:var(--text); }
.visitor-focus-proof { border-left:2px solid var(--accent); padding-left:20px; align-self:center; }
.visitor-focus-proof strong { display:block; font-size:clamp(1.5rem,3vw,2rem); line-height:1.15; font-weight:850; letter-spacing:-.055em; margin:12px 0 8px; }
.project-tools { display:flex; justify-content:flex-end; margin-top:24px; }
.case-toggle-all { display:inline-flex; align-items:center; gap:11px; min-height:42px; padding:9px 13px; border:1px solid var(--border-strong); border-radius:11px; background:var(--surface); color:var(--accent-strong); font-size:12px; font-weight:780; }
.case-toggle-all:hover { background:var(--accent-wash); }
.case-toggle-all span { font-size:19px; line-height:1; }
.case-expand[open] summary { color:var(--text); }
@media(max-width:800px) { .visitor-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); } .visitor-focus-panel { grid-template-columns:1fr; } .visitor-focus-proof { border-left:0; border-top:2px solid var(--accent); padding:16px 0 0; } }
@media(max-width:380px) { .visitor-explorer { padding:17px; } .visitor-tab { font-size:11px; padding:11px 7px; } }
@media(prefers-reduced-motion:reduce) { .visitor-tab { transition:none; } }

/* Portfolio identity: responsive MJ monogram and matching portrait fallback */
:root{
  --brand-ink:#f5f7ff;--brand-electric:#a5b4fc;
  --brand-shell:linear-gradient(145deg,#253354,#161e35 55%,#101827);
  --brand-edge:rgba(165,180,252,.32);--brand-glow:rgba(49,46,129,.18);
}
html[data-theme="light"]{
  --brand-ink:#1e2b49;--brand-electric:#4338ca;
  --brand-shell:linear-gradient(145deg,#fff,#f0f3ff 58%,#e6eaff);
  --brand-edge:rgba(67,56,202,.26);--brand-glow:rgba(67,56,202,.1);
}
.brand{gap:11px;min-width:0;}
.brand-mark{
  position:relative;flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;
  overflow:hidden;border-radius:15px;border:1px solid var(--brand-edge);
  color:var(--brand-ink);background:var(--brand-shell);
  box-shadow:0 5px 15px var(--brand-glow),inset 0 1px 0 rgba(255,255,255,.13);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.brand-mark::before{content:"";position:absolute;inset:4px;border-radius:11px;border:1px solid var(--brand-edge);opacity:.45;pointer-events:none;}
.brand-mark__glyph{position:relative;z-index:1;width:33px;height:33px;display:block;flex:none;}
.brand-mark__m{stroke:var(--brand-ink);}
.brand-mark__j{stroke:var(--brand-electric);}
.brand-mark__dot{fill:var(--brand-electric);}
.brand-wordmark{display:inline-flex;align-items:baseline;gap:.28em;min-width:0;color:var(--text);font-size:14px;letter-spacing:-.038em;line-height:1.1;}
.brand-wordmark strong{font-weight:780;}
.brand-wordmark__last{font-weight:540;color:var(--muted);}
.brand:hover .brand-mark{transform:translateY(-2px);border-color:var(--brand-electric);box-shadow:0 8px 21px var(--brand-glow),inset 0 1px 0 rgba(255,255,255,.16);}
.brand:focus-visible{outline:0;}
.brand:focus-visible .brand-mark{outline:2px solid var(--brand-electric);outline-offset:3px;}
.portrait-fallback__monogram{width:55%;max-width:155px;height:auto;display:block;}
.portrait-fallback .brand-mark__m{stroke:var(--portrait-ink);}
@media(max-width:639px){.brand-wordmark__last{display:none}.brand-wordmark{font-size:13px;letter-spacing:-.03em}}
@media(max-width:359px){.brand{gap:8px}.brand-mark{flex-basis:40px;width:40px;height:40px}.brand-wordmark{font-size:12px}}
@media(prefers-reduced-motion:reduce){.brand-mark{transition:none}.brand:hover .brand-mark{transform:none}}

/* assets/typography.css */
/* Mobile-first portfolio type scale, loaded after the existing theme stylesheet.
   Uses system fonts only: zero extra font downloads and no new animation. */
:root {
  --type-body: clamp(.975rem, .18vw + .94rem, 1.05rem);
  --type-small: clamp(.875rem, .14vw + .855rem, .95rem);
  --type-label: .75rem;
  --type-lead: clamp(1.0625rem, .6vw + .99rem, 1.25rem);
  --type-h1: clamp(2.15rem, 1.3rem + 4.2vw, 4.65rem);
  --type-h2: clamp(1.85rem, 1.2rem + 2.3vw, 3.2rem);
  --type-h3: clamp(1.16rem, .8vw + 1.05rem, 1.5rem);
  --measure: 68ch;
}
html { text-size-adjust:100%; -webkit-text-size-adjust:100%; }
body {
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  font-size:var(--type-body); line-height:1.65; font-synthesis:none; font-optical-sizing:auto;
}
p,li,label,input,textarea,small,span {overflow-wrap:break-word;}
p {hanging-punctuation:first last;}
.hero-heading {
  font-size:var(--type-h1);line-height:1.1;letter-spacing:-.047em;
  font-weight:800;text-wrap:balance;max-width:16ch;
}
.section-heading {
  font-size:var(--type-h2);line-height:1.14;letter-spacing:-.042em;
  font-weight:790;text-wrap:balance;
}
.hero-heading,.section-heading,.visitor-explorer-intro h3,.project-content h3,
.timeline-copy h3,.method-step h3 {overflow-wrap:normal;word-break:normal;hyphens:auto;}
.body-lead {font-size:var(--type-lead);line-height:1.65;max-width:57ch;letter-spacing:-.008em;}
.body-copy,.about-intro,.hero-manifesto p,
.challenge-card p,.skill-card p,.project-content>p,.method-step p,
.timeline-copy>p,.impact-story>div:first-child p,
.visitor-explorer-intro p,.visitor-focus-copy p,.visitor-focus-proof p,
.first90-heading p,.first90-grid li p,.case-steps p,
.kpi-grid span,.risk-line,.recognition-line {
  font-size:var(--type-body);line-height:1.67;
}
.body-copy,.about-intro,.impact-story>div:first-child p,.risk-line {max-width:var(--measure);}
.about-intro {font-size:clamp(1.075rem,.65vw + 1.02rem,1.34rem);line-height:1.65;letter-spacing:-.01em;}
.section-intro>p {max-width:53ch;}
.section-kicker,.eyebrow,.challenge-number,.skill-kind,.project-status,
.project-art-corner,.timeline-period,.timeline-company,.resume-panel-label,
.method-step>span,.first90-grid li>span,.impact-outcome>span,.case-steps span,
.visitor-focus-copy>span,.visitor-focus-proof>span {
  font-size:var(--type-label);letter-spacing:.06em;line-height:1.45;
}
.eyebrow {letter-spacing:.055em;}
.brand-wordmark {font-size:.9375rem;letter-spacing:-.025em;}
.nav-link {font-size:.875rem;line-height:1.4;}
.nav-contact,.button,.project-live-link,.visitor-tab,.case-toggle-all {font-size:.925rem;line-height:1.35;}
.button {min-height:48px;}
.hero-proof strong,.result-tile>strong,.project-metric strong,.impact-outcome strong,
.visitor-focus-proof strong {font-variant-numeric:tabular-nums lining-nums;}
.hero-proof strong {font-size:clamp(1.5rem,2.3vw,1.96rem);line-height:1.12;letter-spacing:-.035em;}
.hero-proof div>span {font-size:clamp(.78rem,.3vw + .74rem,.86rem);line-height:1.45;}
.result-tile>strong {font-size:clamp(2.2rem,3.8vw,3.2rem);line-height:1.08;letter-spacing:-.045em;}
.result-tile h3 {font-size:1rem;line-height:1.38;}
.result-tile p,.project-disclaimer,.recognition-line,.timeline-copy .timeline-extra,
.project-link-note,.impact-outcome small {font-size:var(--type-small);line-height:1.6;}
.challenge-card h3,.skill-card h3,.method-step h3,.timeline-copy h3,
.project-content h3,.impact-story h3,.first90-grid li h4,
.visitor-focus-copy h4 {font-size:var(--type-h3);line-height:1.33;letter-spacing:-.025em;}
.visitor-explorer-intro h3,.contact-form-panel h3,.first90-heading h3,.kpi-heading {
  font-size:clamp(1.45rem,1.75vw + 1.08rem,2.15rem);line-height:1.22;letter-spacing:-.035em;
}
.visitor-focus-copy h4 {margin-top:11px;}
.project-metric strong {font-size:clamp(1.5rem,2vw,1.72rem);letter-spacing:-.035em;}
.project-metric span {font-size:.875rem;line-height:1.52;}
.project-stack span,.skill-tags span,.timeline-highlights span,.subtle-pill {font-size:.8rem;line-height:1.35;}
.case-expand summary {font-size:.9rem;line-height:1.4;min-height:44px;}
.case-steps p {font-size:.9rem;}
.kpi-grid strong,.education-strip strong {font-size:1rem;line-height:1.4;}
.portrait-card-header {font-size:.7rem;letter-spacing:.045em;}
.portrait-card-footer strong {font-size:1.0625rem;}
.portrait-card-footer span:not(.portrait-chevron),.portrait-side-note {font-size:.8rem;line-height:1.4;}
.visitor-explorer-intro p,.visitor-focus-copy p,.visitor-focus-proof p {max-width:62ch;}
.visitor-tab {font-weight:700;min-height:46px;}
.contact-form-panel label {font-size:.9rem;line-height:1.4;}
.contact-form-panel input,.contact-form-panel textarea {font-size:1rem;line-height:1.5;min-height:48px;}
.contact-details a,.resume-panel strong,.copy-email {font-size:.9375rem;}
.form-status,.site-footer {font-size:.8125rem;line-height:1.5;}
.contact-details a,.project-content h3,.project-live-link {overflow-wrap:anywhere;}
@media (max-width:760px) {
  .hero-heading {line-height:1.09;letter-spacing:-.038em;max-width:18ch;}
  .section-heading {line-height:1.17;letter-spacing:-.035em;}
  .section-block {padding-block:clamp(57px,8vw,78px);}
  .body-lead {font-size:1.04rem;line-height:1.66;}
  .hero-proof strong {font-size:clamp(1.45rem,5.5vw,1.75rem);}
  .visitor-tab {font-size:.84rem;padding-inline:9px;}
  .brand-wordmark {font-size:.84rem;}
  .section-intro {gap:19px;}
}
@media (max-width:380px) {
  .hero-heading {font-size:clamp(2.05rem,1.3rem + 4.2vw,2.65rem);}
  .section-heading {font-size:clamp(1.77rem,1.2rem + 2.3vw,2.25rem);}
  .hero-proof div>span {font-size:.78rem;}
  .visitor-tab {font-size:.8rem;}
  .brand-wordmark {font-size:.8rem;}
}
@media (prefers-reduced-motion:reduce) {html {scroll-behavior:auto;}}

/* assets/hybrid-ui.css */

/* Mark Jay portfolio / Hybrid UI v1.
   Aspirva's editorial clarity + Gold Ops OS's precise dark surfaces.
   Theme-variable driven, fully static, no continuous effects. */
:root{
 --bg:#09121a;--surface:#111e29;--surface-elevated:#172834;--surface-muted:#0c1821;
 --text:#f4f7f7;--body:#c4d0d6;--muted:#9fb0b9;--border:#30414b;--border-strong:#536574;
 --accent:#62d4d0;--accent-strong:#86e4df;--accent-wash:rgba(98,212,208,.1);--accent-ink:#9af2e9;
 --nav-bg:rgba(9,18,26,.97);--input-bg:#101f29;--shadow:rgba(0,0,0,.26);
 --hy-gold:#e5bc6d;--hy-gold-wash:rgba(229,188,109,.09);--hy-gold-line:rgba(229,188,109,.31);
 --hy-rail:#304651;--hy-ring:rgba(116,226,220,.22);--hy-hero:rgba(12,28,39,.86);
 --primary-bg:#c79a49;--primary-hover:#e0b96e;--primary-on:#11151b;
 --brand-ink:#f5f7ff;--brand-electric:#e5bc6d;
 --brand-shell:linear-gradient(145deg,#263b47,#101d29 58%,#0c141c);
 --brand-edge:rgba(229,188,109,.42);--brand-glow:rgba(229,188,109,.09);
 --art-gold-bg:linear-gradient(135deg,#32291d,#111b23);
 --art-aspirva-bg:linear-gradient(135deg,#123640,#102832);
 --art-studio-bg:linear-gradient(135deg,#1d312c,#10222b);
 --portrait-matte:linear-gradient(145deg,#263b47,#0d1b26);
 --portrait-fallback:linear-gradient(145deg,#2d4850,#10212c);
 --portrait-image-bg:#243b44;--portrait-ink:#f6fbfc;
}
html[data-theme="light"]{
 --bg:#f4f8f8;--surface:#fff;--surface-elevated:#edf5f5;--surface-muted:#f0f5f6;
 --text:#182c36;--body:#344b55;--muted:#465e69;--border:#ccdde0;--border-strong:#91abb2;
 --accent:#137c87;--accent-strong:#0a5b68;--accent-wash:rgba(18,133,143,.09);--accent-ink:#084b58;
 --nav-bg:rgba(249,252,252,.97);--input-bg:#f7fbfb;--shadow:rgba(25,58,68,.09);
 --hy-gold:#80571b;--hy-gold-wash:rgba(128,87,27,.08);--hy-gold-line:rgba(128,87,27,.35);
 --hy-rail:#d5e3e4;--hy-ring:rgba(18,133,143,.17);--hy-hero:rgba(241,248,249,.95);
 --primary-bg:#126f7b;--primary-hover:#075865;--primary-on:#fff;
 --brand-ink:#203541;--brand-electric:#a57432;
 --brand-shell:linear-gradient(145deg,#fff,#eef5f5 58%,#e1ecef);
 --brand-edge:rgba(154,108,48,.32);--brand-glow:rgba(18,111,123,.09);
 --art-gold-bg:linear-gradient(135deg,#fff5e0,#e9d7ba);
 --art-aspirva-bg:linear-gradient(135deg,#f0fbfb,#d8edf0);
 --art-studio-bg:linear-gradient(135deg,#edf6ed,#d8ece5);
 --portrait-matte:linear-gradient(145deg,#ebf5f7,#d4e9eb);
 --portrait-fallback:linear-gradient(145deg,#e3f0f4,#b9d7df);
 --portrait-image-bg:#e8f4f6;--portrait-ink:#1a3740;
}
html,body{background:var(--bg);color:var(--text)}
::selection{background:var(--accent);color:var(--primary-on)}
.site-header{position:sticky;border-bottom:1px solid var(--hy-gold-line);background:var(--nav-bg);box-shadow:0 7px 28px var(--shadow)}
.site-header::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--hy-gold-line) 26%,transparent 74%);pointer-events:none}
.brand-mark{border-radius:11px;box-shadow:0 7px 20px var(--brand-glow)}
.brand-wordmark{font-size:14px;letter-spacing:-.015em}
.brand-wordmark strong{font-weight:780}.brand-wordmark__last{color:var(--muted)}
.primary-nav{gap:clamp(7px,.7vw,14px)}
.nav-link{position:relative;padding:13px 6px;transition:color .15s ease}
.nav-link:is(:hover,:focus-visible,.is-current){color:var(--text)}
.nav-link.is-current::after{bottom:0;height:2px;background:var(--hy-gold);border-radius:2px}
.icon-button{border-color:var(--border-strong);background:var(--surface);box-shadow:none}
.nav-contact{min-height:40px;border:1px solid var(--hy-gold-line);border-radius:8px;background:var(--hy-gold-wash);color:var(--hy-gold);box-shadow:none;font-weight:760}
.nav-contact:hover{border-color:var(--hy-gold);background:var(--hy-gold-wash)}
.section-block{padding:clamp(68px,7vw,96px) 0;border-top:1px solid var(--border)}
.section-alt,.results-section{background:var(--surface-muted)}
.section-intro{align-items:end;gap:24px;margin-bottom:0}
.section-intro>p{max-width:49ch}
.section-kicker,.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--hy-gold);font-weight:800;letter-spacing:.105em;line-height:1.4}
.section-kicker::before{content:"";width:19px;height:2px;flex:none;background:var(--hy-gold)}
.eyebrow-dot{background:var(--hy-gold);box-shadow:0 0 0 4px var(--hy-gold-wash)}
.section-heading{max-width:17ch;line-height:1.11;letter-spacing:-.038em}
.accent-text{color:var(--accent-strong)}
.body-copy{color:var(--body)}
.hero{position:relative;background:var(--bg);border-bottom:1px solid var(--hy-gold-line)}
.hero-grid{inset:0;background-image:linear-gradient(var(--hy-ring) 1px,transparent 1px),linear-gradient(90deg,var(--hy-ring) 1px,transparent 1px);background-size:56px 56px;opacity:.17;mask-image:linear-gradient(90deg,transparent 2%,#000 45%,#000 85%,transparent 100%)}
.hero::after{position:absolute;content:"";pointer-events:none;inset:0;background:radial-gradient(circle at 84% 25%,var(--hy-gold-wash),transparent 38%),linear-gradient(180deg,transparent 60%,var(--bg));z-index:0}
.hero>.mx-auto{position:relative;z-index:1;max-width:1250px;gap:clamp(30px,4vw,72px);padding-top:clamp(64px,7.5vw,114px);padding-bottom:clamp(62px,7vw,108px)}
.hero-heading{max-width:15.5ch;font-size:clamp(2.65rem,4.75vw,4.55rem);line-height:1.065;letter-spacing:-.05em}
.accent-gradient{display:inline;color:var(--hy-gold);background:linear-gradient(110deg,var(--hy-gold) 4%,var(--hy-gold) 37%,var(--accent-strong) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero .body-lead{max-width:57ch;color:var(--body);line-height:1.65}
.button{border-radius:8px;font-weight:760;box-shadow:none;transition:transform .16s ease,border-color .16s ease,background-color .16s ease}
.button-primary{border:1px solid var(--primary-bg);background:var(--primary-bg);color:var(--primary-on);box-shadow:0 10px 25px var(--hy-gold-wash)}
.button-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);transform:translateY(-2px)}
.button-quiet{border:1px solid var(--border-strong);background:var(--surface);color:var(--text)}
.button-quiet:hover{border-color:var(--accent);background:var(--accent-wash)}
.hero-proof{gap:0;border-top:1px solid var(--hy-gold-line);border-bottom:1px solid var(--border);background:var(--hy-hero);max-width:620px;border-radius:0}
.hero-proof>div{min-width:0;padding:17px clamp(8px,1.3vw,19px);border-right:1px solid var(--border)}
.hero-proof>div:first-child{padding-left:0}.hero-proof>div:last-child{border-right:0}
.hero-proof strong{font-weight:800;color:var(--text)}.hero-proof div>span{color:var(--muted)}
.hero-proof .stat-suffix{color:var(--hy-gold)}
.hero-visual{max-width:434px}
.portrait-halo{opacity:.16;filter:blur(40px);background:radial-gradient(circle,var(--hy-gold),transparent 65%)}
.portrait-card{position:relative;border:1px solid var(--hy-gold-line);border-radius:15px;background:var(--surface);box-shadow:0 20px 70px var(--shadow);padding:20px;overflow:hidden}
.portrait-card::before{position:absolute;content:"";left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--hy-gold),var(--accent),transparent 95%)}
.portrait-card-header{color:var(--muted);border-bottom:1px solid var(--border);padding-bottom:12px}
.portrait-card-header .status-dot{background:var(--accent-strong)}
.portrait-wrap{background:var(--portrait-matte);border:1px solid var(--border)}
.portrait-card-footer{border-top:1px solid var(--border);margin-top:16px;padding-top:16px}
.portrait-side-note{display:none}
.hybrid-project-rail__label{margin-top:16px;display:flex;align-items:center;gap:8px;color:var(--hy-gold);font-size:.68rem;font-weight:800;letter-spacing:.1em}
.hybrid-project-rail__label::after{content:"";height:1px;flex:1;background:var(--hy-gold-line)}
.hybrid-project-rail{margin-top:13px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.hybrid-project-rail a{display:flex;flex-direction:column;justify-content:center;gap:5px;min-height:73px;min-width:0;padding:11px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);text-decoration:none;transition:border-color .16s ease,transform .16s ease}
.hybrid-project-rail a:hover{border-color:var(--hy-gold);transform:translateY(-2px)}
.hybrid-project-rail strong{font-size:.81rem;line-height:1.28;font-weight:760;overflow-wrap:anywhere}
.hybrid-project-rail small{color:var(--muted);font-size:.68rem;line-height:1.35}

/* Reader guidance and compact case-study surfaces. */
.challenge-card,.skill-card,.method-step{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:11px;background:var(--surface);box-shadow:none}
.challenge-card::before,.skill-card::before,.method-step::before{content:"";position:absolute;top:0;left:0;width:52px;height:2px;background:var(--hy-gold)}
.challenge-card:hover,.skill-card:hover,.method-step:hover{border-color:var(--border-strong)}
.challenge-number,.skill-kind{color:var(--hy-gold)}
.challenge-card h3,.skill-card h3,.method-step h3{color:var(--text)}
.skill-icon{background:var(--hy-gold-wash);color:var(--hy-gold);border:1px solid var(--hy-gold-line);border-radius:8px}
.skill-tags span,.project-stack span,.subtle-pill{background:var(--surface-muted);color:var(--body);border:1px solid var(--border);border-radius:7px}
.visitor-explorer{position:relative;background:var(--surface);border:1px solid var(--hy-gold-line);border-radius:15px;box-shadow:0 16px 44px var(--shadow)}
.visitor-explorer::before{position:absolute;content:"";top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--hy-gold),var(--accent),transparent);border-radius:15px 15px 0 0}
.visitor-tabs{gap:9px}
.visitor-tab{border:1px solid var(--border-strong);border-radius:8px;background:var(--surface-muted);color:var(--body);box-shadow:none}
.visitor-tab:is(:hover,:focus-visible){border-color:var(--accent)}
.visitor-tab.is-selected{background:var(--accent-wash);border-color:var(--accent);color:var(--text);box-shadow:inset 0 -2px 0 var(--hy-gold)}
.visitor-focus-panel{border:1px solid var(--border);border-radius:11px;background:var(--surface-muted)}
.visitor-focus-proof{border-color:var(--hy-gold)}
.visitor-focus-copy>span,.visitor-focus-proof>span{color:var(--hy-gold)}
.visitor-focus-proof strong{color:var(--text)}
.visitor-focus-copy a{color:var(--accent-strong)}
.about-callout{border:1px solid var(--hy-gold-line);border-left:3px solid var(--hy-gold);background:var(--hy-gold-wash);border-radius:0 10px 10px 0;padding:17px 20px}
.about-callout .callout-rule{display:none}
.results-grid{gap:0;overflow:hidden;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.result-tile{border:0;border-right:1px solid var(--border);border-bottom:1px solid var(--border);border-radius:0;background:var(--surface);box-shadow:none}
.result-tile:last-child{border-right:0}
.result-tile>strong{color:var(--text)}
.result-tile>strong span{color:var(--hy-gold)}
.impact-story{border:1px solid var(--hy-gold-line);border-radius:12px;background:var(--surface);box-shadow:none}
.impact-outcome{border-left:1px solid var(--hy-gold-line);padding-left:clamp(17px,3vw,31px)}
.impact-outcome strong,.impact-outcome>span{color:var(--hy-gold)}
.project-tools{display:flex;justify-content:flex-end;margin-top:24px}
.case-toggle-all{border-radius:7px;border-color:var(--border-strong);background:var(--surface);color:var(--accent-strong)}
#project-cases{align-items:stretch}
.project-card{position:relative;border:1px solid var(--border);border-radius:13px;background:var(--surface);box-shadow:none;overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.project-card:hover{transform:translateY(-4px);border-color:var(--hy-gold-line);box-shadow:0 17px 36px var(--shadow)}
.project-art{border-radius:0;border-bottom:1px solid var(--border)}
.project-art::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,var(--hy-gold),transparent 76%);pointer-events:none}
.project-art-gold{background:var(--art-gold-bg)}.project-art-aspirva{background:var(--art-aspirva-bg)}.project-art-studio{background:var(--art-studio-bg)}
.project-art-corner{letter-spacing:.09em;font-size:.69rem;opacity:.85}
.project-content{padding:clamp(20px,2.25vw,25px)}
.project-status{font-size:.72rem;color:var(--muted);letter-spacing:.06em}
.project-content>p{color:var(--body)}
.project-metric{background:var(--surface-muted);border:1px solid var(--border);border-left:2px solid var(--hy-gold);border-radius:7px;padding:13px 14px}
.project-metric strong{color:var(--text)}.project-metric span{color:var(--muted)}
.project-links{margin-top:19px}
.project-live-link{display:inline-flex;justify-content:center;gap:15px;min-height:44px;border:1px solid var(--hy-gold-line);border-radius:7px;color:var(--hy-gold);background:var(--hy-gold-wash);font-weight:800}
.project-live-link:is(:hover,:focus-visible){border-color:var(--hy-gold);background:var(--hy-gold-wash)}
.project-link-note{font-size:.72rem}
.case-expand{border-top:1px solid var(--border)}
.case-expand summary{color:var(--accent-strong);font-weight:760}
.case-steps{border-color:var(--border)}
.plan-section{background:var(--bg)}
.method-grid{gap:12px}.method-step{border-top:2px solid var(--hy-gold-line)}
.method-step>span,.first90-grid li>span{color:var(--hy-gold)}
.first90{border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.first90-grid li{position:relative;border:1px solid var(--border);border-radius:9px;background:var(--surface-muted)}
.first90-grid li::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:var(--hy-gold);border-radius:2px}
.kpi-grid{gap:8px}
.kpi-grid>div{background:var(--surface);border:1px solid var(--border);border-radius:9px}
.risk-line{border-left:2px solid var(--hy-gold);background:var(--hy-gold-wash)}
.experience-timeline{border-color:var(--hy-rail)}
.timeline-entry::before{border-color:var(--hy-gold);background:var(--surface);box-shadow:0 0 0 5px var(--hy-gold-wash)}
.timeline-period{color:var(--hy-gold)}
.timeline-highlights span{background:var(--accent-wash);border-color:var(--hy-ring);color:var(--accent-strong)}
.education-strip{border:1px solid var(--hy-gold-line);border-radius:10px;background:var(--surface)}
.education-strip-badge{color:var(--hy-gold)}
.contact-section{background:linear-gradient(130deg,var(--surface-muted),var(--bg) 64%)}
.contact-details a{color:var(--text)}
.resume-panel{border:1px solid var(--hy-gold-line);border-radius:10px;background:var(--surface)}
.resume-panel-label{color:var(--hy-gold)}
.resume-icon-link{background:var(--primary-bg);color:var(--primary-on);border-radius:8px}
.contact-form-panel{border:1px solid var(--border-strong);border-top:2px solid var(--hy-gold);border-radius:12px;background:var(--surface);box-shadow:0 18px 44px var(--shadow)}
.contact-form-panel input,.contact-form-panel textarea{border-color:var(--border-strong);background:var(--input-bg);color:var(--text)}
.contact-form-panel input:focus,.contact-form-panel textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.site-footer{background:var(--surface-muted);border-top:1px solid var(--hy-gold-line)}
.site-footer a:hover{color:var(--hy-gold)}
@media(max-width:1100px){.primary-nav{gap:5px}.nav-link{padding-inline:4px}}
@media(max-width:900px){
 .hero>.mx-auto{padding-top:58px;padding-bottom:74px}.hero-heading{font-size:clamp(2.4rem,6vw,3.9rem)}
 .hero-grid{opacity:.09}.portrait-halo{display:none}.site-header{backdrop-filter:none;-webkit-backdrop-filter:none}
 .project-card:hover,.hybrid-project-rail a:hover,.button-primary:hover{transform:none}.project-card:hover{box-shadow:none}
}
@media(max-width:760px){
 .hero>.mx-auto{gap:38px;padding-top:46px;padding-bottom:66px}
 .hero-heading{font-size:clamp(2.3rem,8.4vw,3.4rem);line-height:1.12}
 .hero-proof>div{padding:13px 10px}.hybrid-project-rail{gap:7px}.hybrid-project-rail a{min-height:64px;padding:10px}
 .section-block{padding:clamp(55px,9vw,73px) 0}.section-intro{gap:18px}
 .results-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.result-tile:nth-child(2){border-right:0}
 .impact-story{grid-template-columns:1fr}.impact-outcome{border-left:0;border-top:1px solid var(--hy-gold-line);padding:19px 0 0}
 .project-card{border-radius:11px}.visitor-tabs{gap:8px}.visitor-focus-panel{grid-template-columns:1fr}
 .visitor-focus-proof{border:0;border-top:2px solid var(--hy-gold);padding:14px 0 0}
}
@media(max-width:520px){
 .hero-heading{font-size:clamp(2.12rem,8.7vw,3rem);max-width:17ch}
 .hero-proof strong{font-size:clamp(1.3rem,5vw,1.68rem)}.hero-proof div>span{font-size:.77rem;line-height:1.35}
 .hero-proof>div{padding:13px 7px}.hybrid-project-rail a{min-height:67px;padding:8px}
 .hybrid-project-rail strong{font-size:.75rem}.hybrid-project-rail small{font-size:.64rem}
 .section-heading{font-size:clamp(1.95rem,8vw,2.5rem)}
 .visitor-explorer{padding:18px}.project-links{align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
 .project-card,.hybrid-project-rail a,.button,.brand-mark{transition:none!important}
 .project-card:hover,.hybrid-project-rail a:hover,.button-primary:hover{transform:none!important}
}
@media(forced-colors:active){
 .project-card,.skill-card,.challenge-card,.method-step,.visitor-explorer,.contact-form-panel{border:1px solid CanvasText}
 .accent-gradient{-webkit-text-fill-color:currentColor;color:CanvasText;background:none}
}

/* Light-theme legibility audit (Sep 2026).
   Light-specific corrections only: existing dark palette and page layouts
   remain unchanged. Small text aims for comfortably >4.5:1 on light panels. */
html[data-theme="light"] :is(.orbit-card__action,.orbit-preview-dialog__actions a){
  background:var(--hy-gold);color:#fff;
  border:1px solid #80571b;
  text-shadow:none;
}
html[data-theme="light"] :is(.orbit-card__action,.orbit-preview-dialog__actions a):is(:hover,:focus-visible){
  background:#69460f;color:#fff;
  border-color:#69460f;
}
html[data-theme="light"] .orbit-card:not(.is-front) :is(.orbit-card__top,.orbit-card__info){
  /* Side mockups are visual hints, not faded copies of interactive copy. */
  visibility:hidden;
}
html[data-theme="light"] :is(.contact-form-panel input,.contact-form-panel textarea){
  border-color:#718d96;
  color:var(--text);
  background:var(--input-bg);
}
html[data-theme="light"] :is(input,textarea)::placeholder{
  color:#465e69;opacity:1;
}
html[data-theme="light"] :is(.orbit-controls button,.screen-switcher button,.copy-email,.copy-message,.portfolio-rail__socials a,.portfolio-rail__theme){
  border-color:#718d96;
}
html[data-theme="light"] .portfolio-rail__nav a:not(.is-current){
  color:var(--muted);
}
/* On pale surfaces, keep the active project's copy on the flat raster
   plane. The previous +140px Z projection resampled small text and pulled
   its top labels over the heading; side previews retain the 3D coverflow. */
html[data-theme="light"] .orbit-card[data-position="current"]{
  transform:translate(-50%,0) scale(1);
  will-change:auto;
}
/* A high-resolution 16:9 image was intrinsically taller than its old
   288px visual button on desktop: the overflowing IMG covered the active
   project's title. Allocate its true aspect-ratio height and grow the
   scrollable Work chapter rather than crop either the artwork or copy. */
@media(min-width:761px){
 html.screen-deck.continuous-deck[data-theme="light"] #showcase .orbit-stage{
   height:clamp(530px,65dvh,610px)!important;
 }
 html.screen-deck.continuous-deck[data-theme="light"] #showcase .orbit-card[data-position="current"] .orbit-card__visual{
   height:auto!important;aspect-ratio:2720/1510;flex:0 0 auto;
 }
 html.screen-deck.continuous-deck[data-theme="light"] #showcase .orbit-card[data-position="current"] .orbit-card__info{
   margin-top:10px;
 }
}

html[data-theme="light"] .orbit-card[data-position="current"] :is(.orbit-card__title,.orbit-card__metric){
  color:var(--text);
}
html[data-theme="light"] :is(.certificate-proof__exact-link,.visitor-focus-copy a){
  color:var(--accent-strong);
}
@media(forced-colors:active){
  html[data-theme="light"] :is(.orbit-card__action,.orbit-preview-dialog__actions a,.contact-form-panel input,.contact-form-panel textarea){
    forced-color-adjust:auto;
  }
}

/* assets/portfolio-app-v2.css */
/* Portfolio app v2: Brewed Ops-inspired information architecture; original UI.
   Fixed profile rail, actionable bento links, native-scroll mobile tabs.
   Aspirva teal + Gold Ops warm gold, with NO canvas/scroll animation. */
:root {
  --app-sidebar:252px;
  --app-radius:19px;
  --app-focus:#e5bc6d;
  --app-plate:rgba(255,255,255,.045);
  --app-plate-border:rgba(229,188,109,.22);
  --app-ink:#f5f8f8;
  --app-tab-bg:rgba(11,24,33,.98);
  --app-tab-ink:#aebfc5;
  --app-tab-on:#fff;
  --app-rail-bg:#0c1720;
  --app-rail-text:#edf6f6;
  --app-soft-glow:rgba(55,179,179,.10);
  --app-avatar-border:rgba(229,188,109,.36);
}
html[data-theme="light"] {
  --app-focus:#a8732e;
  --app-plate:rgba(255,255,255,.94);
  --app-plate-border:#cadadd;
  --app-ink:#1b2c37;
  --app-tab-bg:rgba(255,255,255,.98);
  --app-tab-ink:#405965;
  --app-tab-on:#0a4e5a;
  --app-rail-bg:#f3f9f9;
  --app-rail-text:#182c36;
  --app-soft-glow:rgba(18,117,132,.075);
  --app-avatar-border:rgba(17,117,132,.26);
}
html {scroll-padding-top:91px;}
#project-gold-title,#project-aspirva-title,#project-studio-title {scroll-margin-top:105px;}
.portfolio-rail,.mobile-tabs,.desktop-topline {display:none;}
button,a,summary {touch-action:manipulation;}
a:focus-visible,button:focus-visible,summary:focus-visible {outline:3px solid var(--accent-strong);outline-offset:3px;}
/* Top chrome is always a real anchor/menu, never a decorative arrow. */
.site-header {isolation:isolate;}
.site-header > div {min-width:0;}
.nav-link {min-height:44px;display:inline-flex;align-items:center;}
.icon-button,.menu-toggle{min-width:44px;min-height:44px;display:inline-grid;place-items:center;}
.nav-contact{min-height:44px;display:inline-flex;align-items:center;gap:7px;}
/* Above the fold: do not duplicate the same three skinny mini cards. */
.hero > .mx-auto {max-width:1250px;align-items:center;}
.hero-heading {text-wrap:balance;max-width:15.5ch;}
.hero-proof {background:transparent;}
.hero-proof > div:first-child {padding-left:12px;}
.hero-visual {min-width:0;}
.portrait-card {border-radius:var(--app-radius);}
.portrait-card-footer{gap:16px;min-height:62px;}
.portrait-card-footer > div{min-width:0;}
.portrait-story-link{
  display:inline-flex;align-items:center;justify-content:center;flex:none;gap:8px;
  min-width:119px;min-height:46px;padding:10px 12px;border-radius:11px;
  border:1px solid var(--hy-gold-line);color:var(--hy-gold);background:var(--hy-gold-wash);
  text-decoration:none;font-size:.84rem;font-weight:800;white-space:nowrap;
}
.portrait-story-link:hover{background:var(--surface-elevated);border-color:var(--hy-gold);}
.portrait-story-link span{font-size:18px;line-height:1;}
/* All three bento cards are links; the card shell itself has an action. */
.home-bento {
  width:100%;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;grid-column:1/-1;
}
.bento-tile{
  position:relative;display:flex;flex-direction:column;min-width:0;min-height:192px;overflow:hidden;
  padding:19px;border:1px solid var(--border);border-radius:var(--app-radius);
  background:var(--surface);color:var(--text);text-decoration:none;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.bento-tile:hover{transform:translateY(-3px);border-color:var(--hy-gold);box-shadow:0 16px 35px var(--shadow);}
.bento-tile:focus-visible{outline:3px solid var(--accent-strong);outline-offset:3px;}
.bento-tile__tag{display:block;color:var(--hy-gold);font-size:.73rem;line-height:1.45;font-weight:850;letter-spacing:.08em;}
.bento-tile__title{display:block;max-width:23ch;margin:17px 0 8px;font-size:clamp(1.1rem,1.65vw,1.5rem);line-height:1.2;letter-spacing:-.035em;font-weight:800;}
.bento-tile__description{display:block;max-width:35ch;color:var(--body);font-size:.88rem;line-height:1.48;}
.bento-tile__go{display:inline-flex;align-items:center;gap:9px;margin-top:auto;padding-top:16px;color:var(--accent-strong);font-size:.85rem;font-weight:800;}
.bento-tile__go span{font-size:1.22rem;line-height:1;}
.bento-tile--projects{background:radial-gradient(circle at 81% 0%,var(--app-soft-glow),transparent 48%),var(--surface);border-color:var(--hy-gold-line);}
.bento-tile__media{display:flex;align-items:center;gap:12px;margin-top:16px;min-height:46px;}
.bento-tile__media img{
  width:48px;height:48px;object-fit:contain;padding:7px;border:1px solid var(--border);
  border-radius:12px;background:var(--surface-elevated);
}
.bento-tile__metric{margin-top:13px;color:var(--text);font-size:clamp(1.75rem,2.5vw,2.15rem);line-height:1.05;font-weight:850;font-variant-numeric:tabular-nums;}
.bento-tile__metric small{font-size:.85rem;color:var(--muted);font-weight:600;}
.bento-tile__avatar{display:block;align-self:flex-start;margin-top:13px;width:51px;height:51px;border-radius:17px;object-fit:cover;object-position:center;border:2px solid var(--app-avatar-border);}
/* Project cards are informative surfaces; only the inner actual links lift. */
.project-card,.challenge-card,.skill-card,.method-step {transition:border-color .18s ease;}
.project-card:hover{transform:none;box-shadow:none;border-color:var(--border-strong);}
.project-live-link {min-height:48px;min-width:164px;justify-content:space-between;align-items:center;padding:11px 14px;border-radius:10px;}
.project-live-link:hover{background:var(--surface-elevated);border-color:var(--hy-gold);}
.case-expand summary {min-height:49px;align-items:center;gap:12px;}
.case-expand summary span{display:grid;place-items:center;flex:none;width:29px;height:29px;border:1px solid var(--border);border-radius:9px;}
.case-expand[open] summary span{background:var(--accent-wash);}
.education-strip-badge{display:inline-flex;align-items:center;justify-content:center;padding:8px 11px;border:1px solid var(--hy-gold-line);border-radius:8px;font-size:.78rem;letter-spacing:.055em;}
/* Email fallback is intentionally an actual button, not a spurious outbound arrow. */
.copy-email,.copy-message{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;margin:12px 9px 0 0;padding:10px 13px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface-elevated);color:var(--text);font-size:.86rem;font-weight:750;cursor:pointer;text-decoration:none;}
.copy-email:hover,.copy-message:hover{border-color:var(--accent-strong);background:var(--accent-wash);}
.copy-email .copy-icon,.copy-message .copy-icon{font-size:1.1rem;color:var(--accent-strong);}
.contact-form-panel{box-shadow:0 12px 32px var(--shadow);border-radius:var(--app-radius);}
.form-status{min-height:34px;line-height:1.5;}
/* Small phone: app-style nav inspired by Brewed Ops, but plain HTML anchors. */
@media(max-width:760px){
  html{scroll-padding-top:90px;}
  body{padding-bottom:calc(91px + env(safe-area-inset-bottom,0px));}
  .mobile-tabs{
    position:fixed;z-index:99;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;
    min-height:65px;padding:5px 4px;border:1px solid var(--border-strong);border-radius:20px;
    background:var(--app-tab-bg);box-shadow:0 14px 42px rgba(0,0,0,.20);
  }
  .mobile-tabs a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-width:0;min-height:54px;padding:4px 2px;border-radius:13px;color:var(--app-tab-ink);
    font-size:.67rem;font-weight:750;line-height:1.15;text-align:center;text-decoration:none;
  }
  .mobile-tabs svg{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .mobile-tabs a:hover,.mobile-tabs a.is-current,.mobile-tabs a[aria-current="location"]{color:var(--app-tab-on);background:var(--accent-wash);}
  .mobile-tabs .mobile-tabs__contact{color:#17140d;background:var(--hy-gold);border-radius:14px;transform:translateY(-6px);box-shadow:0 8px 19px rgba(0,0,0,.12);}
  .mobile-tabs .mobile-tabs__contact:hover,.mobile-tabs .mobile-tabs__contact.is-current{background:var(--hy-gold);color:#17140d;}
  html[data-theme="light"] .mobile-tabs .mobile-tabs__contact{background:#bb8e4c;color:#16140e;}
  .site-footer {padding-bottom:15px;}
  .hero>.mx-auto{gap:22px;}
  .hero-visual{max-width:350px;margin-inline:auto;}
  .home-bento{
    display:flex;gap:11px;width:calc(100% + 20px);max-width:none;
    margin-right:-20px;padding:4px 20px 13px 1px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-left:1px;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;
  }
  .bento-tile{flex:0 0 min(79vw,288px);scroll-snap-align:start;min-height:213px;padding:18px;}
  .bento-tile:hover{transform:none;box-shadow:none;}
  .bento-tile:active{transform:scale(.992);border-color:var(--hy-gold);}
  .bento-tile__title{font-size:1.2rem;}
  .project-links{align-items:stretch;gap:8px;}
  .project-live-link{min-width:0;width:100%;}
  .project-link-note{display:block;width:100%;}
}
@media(min-width:761px) and (max-width:1359px){
  .home-bento{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0;}
  .hero>.mx-auto{gap:clamp(20px,3vw,44px);}
  .bento-tile{min-height:190px;}
  .bento-tile__title{font-size:clamp(1.05rem,1.7vw,1.3rem);}
}
@media(min-width:1360px){
  .portfolio-rail{
    position:fixed;inset:0 auto 0 0;z-index:80;display:flex;flex-direction:column;
    width:var(--app-sidebar);height:100dvh;overflow-y:auto;overscroll-behavior-y:contain;
    padding:28px 21px 22px;border-right:1px solid var(--border);
    background:var(--app-rail-bg);color:var(--app-rail-text);scrollbar-width:thin;
  }
  .portfolio-rail__avatar{width:76px;height:76px;object-fit:cover;object-position:center;border:2px solid var(--app-avatar-border);border-radius:23px;box-shadow:0 9px 23px var(--shadow);}
  .portfolio-rail__name{margin:17px 0 5px;font-size:1.38rem;letter-spacing:-.035em;line-height:1.16;color:var(--app-rail-text);font-weight:820;}
  .portfolio-rail__role{margin:0;color:var(--muted);font-size:.84rem;line-height:1.5;}
  .portfolio-rail__socials{display:flex;gap:9px;margin-top:22px;}
  .portfolio-rail__socials a{display:grid;place-items:center;min-width:44px;min-height:44px;padding:6px;border:1px solid var(--border-strong);border-radius:11px;color:var(--app-rail-text);text-decoration:none;font-size:.8rem;font-weight:750;}
  .portfolio-rail__socials a:hover{border-color:var(--hy-gold);color:var(--hy-gold);}
  .portfolio-rail__divider{height:1px;margin:23px 0 16px;background:var(--border);flex:none;}
  .portfolio-rail__nav{display:grid;gap:4px;}
  .portfolio-rail__nav a{
    display:flex;align-items:center;gap:13px;min-height:46px;padding:10px 13px;
    border-radius:11px;color:var(--muted);font-size:.9rem;font-weight:700;text-decoration:none;
    border:1px solid transparent;
  }
  .portfolio-rail__nav a .rail-index{color:var(--hy-gold);font-size:.73rem;font-variant-numeric:tabular-nums;}
  .portfolio-rail__nav a:hover,.portfolio-rail__nav a.is-current,.portfolio-rail__nav a[aria-current="location"]{color:var(--app-rail-text);background:var(--accent-wash);border-color:var(--border);}
  .portfolio-rail__bottom{margin-top:auto;padding-top:21px;display:grid;gap:10px;}
  .portfolio-rail__resume{display:flex;align-items:center;justify-content:space-between;gap:7px;min-height:46px;padding:12px 14px;background:var(--hy-gold);color:#1d1609;border-radius:11px;font-size:.85rem;font-weight:820;text-decoration:none;}
  .portfolio-rail__resume:hover{filter:brightness(1.08);}
  .portfolio-rail__foot{margin:0;color:var(--muted);font-size:.7rem;line-height:1.5;}
  #site-header,main,.site-footer{margin-left:var(--app-sidebar);}
  #site-header > div{max-width:none;padding-left:clamp(24px,3.4vw,50px);padding-right:clamp(24px,3.4vw,50px);}
  #site-header .brand,#site-header #primary-nav,#site-header .menu-toggle{display:none!important;}
  .desktop-topline{display:block;margin-right:auto;color:var(--muted);font-size:.74rem;font-weight:790;letter-spacing:.14em;}
  .hero>.mx-auto{
    width:100%;max-width:1550px;padding-inline:clamp(24px,3.4vw,50px);
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(22px,2.5vw,42px);min-height:min(82svh,770px);
  }
  .hero-visual{display:none!important;}
  .home-bento{grid-column:2;grid-row:1;grid-template-columns:repeat(2,minmax(0,1fr));align-self:center;}
  .bento-tile--projects{grid-column:1/-1;min-height:212px;}
  .bento-tile:not(.bento-tile--projects){min-height:178px;}
  .section-block > .mx-auto{max-width:1470px;padding-inline:clamp(24px,3.4vw,50px);}
  .section-heading{max-width:20ch;}
}
@media(min-width:1360px) and (max-height:760px){
  .portfolio-rail{padding-block:19px;}
  .portfolio-rail__avatar{width:60px;height:60px;border-radius:18px;}
  .portfolio-rail__name{margin-top:12px;}
  .portfolio-rail__divider{margin:13px 0 10px;}
  .portfolio-rail__nav a{min-height:39px;}
  .portfolio-rail__bottom{padding-top:12px;}
}
@media(prefers-reduced-motion:reduce){
  .bento-tile,.project-card,.portfolio-rail__resume,.portrait-story-link{transition:none!important;}
  .bento-tile:hover{transform:none!important;}
  html{scroll-behavior:auto!important;}
}
@media(forced-colors:active){
  .bento-tile,.portfolio-rail,.mobile-tabs,.portrait-story-link{border:1px solid CanvasText;}
}

/* assets/portfolio-motion.css */
/* Brewed Ops-inspired 3D carousel + animated surfaces; no WebGL dependency.
   All 3D motion is transform-only and pauses offscreen/background/reduced-motion. */
.orbit-showcase{position:relative;overflow:clip;background:radial-gradient(circle at 50% 12%,var(--app-soft-glow),transparent 60%),var(--surface-muted);border-block:1px solid var(--hy-gold-line);}
.orbit-showcase>.mx-auto{position:relative;z-index:1;}
.orbit-showcase__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.7fr);gap:26px;align-items:end;}
.orbit-showcase__head p{max-width:49ch;}
.orbit-showcase__hint{margin:0;color:var(--muted);font-size:.82rem;line-height:1.5;}
.orbit-showcase__inner{position:relative;margin-top:clamp(27px,4vw,43px);border:1px solid var(--border);border-radius:24px;background:radial-gradient(circle at 50% 55%,var(--app-soft-glow),transparent 56%),var(--bg);overflow:hidden;box-shadow:0 18px 54px var(--shadow);}
.orbit-showcase__inner::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.38;background-image:linear-gradient(var(--hy-ring) 1px,transparent 1px),linear-gradient(90deg,var(--hy-ring) 1px,transparent 1px);background-size:43px 43px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 20% 80%,transparent);mask-image:linear-gradient(90deg,transparent,#000 20% 80%,transparent);}
.orbit-showcase__inner::after{content:"";position:absolute;z-index:0;pointer-events:none;inset:auto 15% -61px;height:150px;background:radial-gradient(ellipse at center,var(--app-soft-glow),transparent 69%);}
.orbit-stage{position:relative;z-index:1;--orbit-depth:clamp(172px,30vw,325px);--orbit-card-width:clamp(260px,32vw,380px);height:clamp(365px,42vw,443px);perspective:1200px;perspective-origin:50% 44%;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;}
.orbit-stage.is-dragging{cursor:grabbing;}
.orbit-track{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(var(--orbit-rotation,0deg));transition:transform 790ms cubic-bezier(.2,.65,.12,1);will-change:transform;}
.orbit-stage.is-dragging .orbit-track{transition:none;}
.orbit-card{position:absolute;top:25px;left:calc(50% - var(--orbit-card-width) / 2);width:var(--orbit-card-width);min-width:0;height:clamp(290px,35vw,355px);display:flex;flex-direction:column;padding:clamp(19px,2vw,25px);border:1px solid var(--hy-gold-line);border-radius:20px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:linear-gradient(155deg,var(--surface-elevated),var(--surface) 62%);box-shadow:0 14px 42px rgba(0,0,0,.19);transform-style:preserve-3d;pointer-events:none;}
.orbit-card:nth-child(1){transform:rotateY(0deg) translateZ(var(--orbit-depth));}
.orbit-card:nth-child(2){transform:rotateY(120deg) translateZ(var(--orbit-depth));}
.orbit-card:nth-child(3){transform:rotateY(240deg) translateZ(var(--orbit-depth));}
.orbit-card.is-front{border-color:var(--hy-gold);box-shadow:0 23px 58px rgba(0,0,0,.27);pointer-events:auto;}
.orbit-card__top{display:flex;justify-content:space-between;gap:10px;align-items:center;color:var(--muted);font-size:.7rem;font-weight:820;letter-spacing:.08em;line-height:1.4;}
.orbit-card__serial{color:var(--hy-gold);}
.orbit-card__icon{display:grid;place-items:center;align-self:flex-start;width:65px;height:65px;margin:14px 0 12px;border:1px solid var(--border);border-radius:15px;background:var(--surface-muted);}
.orbit-card__icon img{width:100%;height:100%;max-width:100%;max-height:100%;padding:10px;object-fit:contain;}
.orbit-card__title{font-size:clamp(1.45rem,2.5vw,2rem);line-height:1.15;letter-spacing:-.045em;color:var(--text);font-weight:850;}
.orbit-card__description{color:var(--body);margin-top:8px;font-size:.88rem;line-height:1.52;max-width:37ch;}
.orbit-card__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid var(--border);}
.orbit-card__metric{display:flex;flex-direction:column;gap:2px;color:var(--text);font-size:1.08rem;font-weight:850;font-variant-numeric:tabular-nums;}
.orbit-card__metric small{font-size:.68rem;color:var(--muted);line-height:1.3;font-weight:650;}
.orbit-card__action{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:10px 13px;color:#17140d;background:var(--hy-gold);border-radius:10px;text-decoration:none;font-size:.81rem;font-weight:840;}
.orbit-card__action:hover{filter:brightness(1.09);}
.orbit-card:not(.is-front) a{visibility:hidden;pointer-events:none;}
.orbit-controls{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px clamp(16px,3vw,26px);border-top:1px solid var(--border);background:var(--surface);}
.orbit-controls__group{display:inline-flex;align-items:center;gap:8px;}
.orbit-controls button{display:inline-grid;place-items:center;min-width:45px;min-height:45px;padding:10px;border:1px solid var(--border-strong);border-radius:11px;background:var(--surface-elevated);color:var(--text);cursor:pointer;font-size:1.12rem;line-height:1;}
.orbit-controls button:hover{border-color:var(--hy-gold);background:var(--hy-gold-wash);}
.orbit-controls button:active{transform:scale(.96);}
.orbit-controls__state{display:grid;gap:3px;min-width:0;text-align:center;}
.orbit-controls__state strong{font-size:.9rem;line-height:1.25;color:var(--text);}
.orbit-controls__state span{color:var(--muted);font-size:.71rem;line-height:1.3;}
.orbit-controls__state output{font-size:.73rem;font-weight:800;color:var(--hy-gold);}
.orbit-controls__pause{min-width:100px!important;font-size:.81rem!important;font-weight:760;display:inline-flex!important;align-items:center;gap:9px;justify-content:center;}
.orbit-controls__pause svg{width:15px;height:15px;fill:currentColor;}
.orbit-fallback{display:none;}
/* Animated contour lines evoke the reference without a full-page shader or GPU-heavy blur. */
.hero-contour{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:.32;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 46%,#000 100%);}
.hero-contour__rings{position:absolute;inset:6% -11% 4% 45%;border:1px solid var(--hy-gold-line);border-radius:44% 56% 58% 42% / 37% 43% 57% 63%;box-shadow:0 0 0 31px var(--hy-gold-wash),0 0 0 61px var(--app-soft-glow),0 0 0 94px var(--hy-gold-wash),0 0 0 132px var(--app-soft-glow);animation:hero-contour-float 22s ease-in-out infinite alternate;}
.hero-contour__rings::before,.hero-contour__rings::after{content:"";position:absolute;inset:15% 13%;border:1px solid var(--hy-gold-line);border-radius:57% 43% 40% 60% / 58% 37% 63% 42%;}
.hero-contour__rings::after{inset:31% 28%;transform:rotate(32deg);border-color:var(--accent);}
@keyframes hero-contour-float{0%{transform:translate3d(-20px,16px,0) rotate(-8deg) scale(.97)}100%{transform:translate3d(23px,-17px,0) rotate(15deg) scale(1.05)}}
@keyframes app-rise{from{transform:translate3d(0,13px,0);opacity:.75}to{transform:translate3d(0,0,0);opacity:1}}
@media(prefers-reduced-motion:no-preference){.reveal.in-view{animation:app-rise .58s cubic-bezier(.16,1,.3,1) both;}}
@media (max-width:760px){
 .orbit-showcase__head{grid-template-columns:1fr;gap:9px;}
 .orbit-showcase__head p{margin-top:4px;}
 .orbit-showcase__inner{border-radius:16px;margin-top:24px;}
 .orbit-stage{--orbit-card-width:min(73vw,310px);--orbit-depth:clamp(158px,44vw,215px);height:372px;perspective:950px;}
 .orbit-card{top:24px;height:322px;padding:17px;border-radius:17px;}
 .orbit-card__icon{height:50px;width:50px;margin:10px 0 9px;}
 .orbit-card__title{font-size:1.53rem;}
 .orbit-card__description{font-size:.81rem;line-height:1.45;}
 .orbit-card__top{font-size:.65rem;}
 .orbit-controls{padding:12px;}
 .orbit-controls button{min-width:44px;}
 .orbit-controls__pause{min-width:77px!important;}
 .hero-contour{opacity:.15;}
}
@media(max-width:375px){
 .orbit-stage{--orbit-card-width:min(76vw,278px);--orbit-depth:156px;height:361px;}
 .orbit-card{height:315px;padding:14px;}
 .orbit-card__title{font-size:1.38rem;}
 .orbit-card__footer{gap:6px;}
 .orbit-card__action{padding:9px 10px;font-size:.72rem;gap:5px;}
 .orbit-card__metric{font-size:.93rem;}
 .orbit-card__metric small{font-size:.64rem;}
 .orbit-controls__state strong{font-size:.78rem;}
}
@media(prefers-reduced-motion:reduce){
 .hero-contour__rings{animation:none;}
 .orbit-track{transition:none;}
 .reveal.in-view{animation:none;}
 .orbit-controls button:active{transform:none;}
}
@media(forced-colors:active){.orbit-card,.orbit-showcase__inner,.orbit-controls{border:1px solid CanvasText;}.orbit-card__action{background:Highlight;color:HighlightText;}}

/* assets/app-navigation.css */
/* App navigation v1. Single-document view switching: no page reload, no scroll jumps
   between tabs. The existing sections remain semantic HTML for no-JS fallback. */
html.app-boot main{visibility:hidden}
html.app-shell{scroll-behavior:auto;scroll-padding-top:82px}
html.app-shell main{min-height:calc(100svh - 145px)}
html.app-shell main>section[data-app-view][hidden]{display:none!important}
html.app-shell main>section[data-app-view]:not([hidden]){content-visibility:visible}
html.app-shell .site-footer{margin-top:0}
html.app-shell .site-footer a{min-height:44px;display:inline-flex;align-items:center}
html.app-shell .mobile-tabs a.is-current:not(.mobile-tabs__contact),
html.app-shell .mobile-tabs a[aria-current="page"]:not(.mobile-tabs__contact){color:var(--app-tab-on);background:var(--accent-wash)}
html.app-shell .mobile-tabs .mobile-tabs__contact.is-current,
html.app-shell .mobile-tabs .mobile-tabs__contact[aria-current="page"]{background:var(--hy-gold);color:#17140d}
html.app-shell .portfolio-rail__nav a[aria-current="page"]{background:var(--accent-wash);color:var(--app-rail-text);border-color:var(--border)}
html.app-shell #primary-nav a[aria-current="page"]{color:var(--text)}
html.app-shell #primary-nav a[aria-current="page"]::after{background:var(--hy-gold)}
.app-view-announcer{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(prefers-reduced-motion:no-preference){
  html.app-shell main>section[data-app-view]:not([hidden]).app-view-enter{animation:app-view-fade .2s ease-out both}
}
@keyframes app-view-fade{from{opacity:.79}to{opacity:1}}
@media(max-width:760px){
  /* The dock IS the mobile navigation. Remove the duplicated upper chrome. */
  html.app-shell #site-header{display:none!important}
  html.app-shell{scroll-padding-top:16px}
  html.app-shell #project-gold-title,
  html.app-shell #project-aspirva-title,
  html.app-shell #project-studio-title{scroll-margin-top:22px}
  html.app-shell main{min-height:calc(100svh - 105px)}
  html.app-shell .hero>.mx-auto{padding-top:clamp(27px,7vw,43px)}
  html.app-shell main>section:not(.hero).section-block{padding-top:clamp(34px,7vw,58px)}
  html.app-shell .mobile-tabs{
    left:8px;right:8px;grid-template-columns:repeat(6,minmax(0,1fr));
    gap:1px;min-height:67px;padding:5px 3px;border-radius:19px;
  }
  html.app-shell .mobile-tabs a,
  html.app-shell .mobile-tabs .mobile-tabs__theme{
    min-width:0;min-height:51px;align-self:center;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:3px;padding:4px 1px;
    border-radius:12px;font-size:.62rem;font-weight:750;line-height:1.16;text-decoration:none;
  }
  html.app-shell .mobile-tabs .mobile-tabs__contact{transform:translateY(-4px)}
  html.app-shell .mobile-tabs .mobile-tabs__theme{
    border:0;background:transparent;color:var(--app-tab-ink);
    cursor:pointer;appearance:none;
  }
  html.app-shell .mobile-tabs .mobile-tabs__theme:hover,
  html.app-shell .mobile-tabs .mobile-tabs__theme:focus-visible{
    background:var(--accent-wash);color:var(--app-tab-on)
  }
  html.app-shell .mobile-tabs .mobile-tabs__theme svg{width:21px;height:21px}
  html.app-shell .mobile-tabs .mobile-tabs__theme .theme-sun{display:none}
  html.app-shell[data-theme="light"] .mobile-tabs .mobile-tabs__theme .theme-sun{display:block}
  html.app-shell[data-theme="light"] .mobile-tabs .mobile-tabs__theme .theme-moon{display:none}
  html.app-shell .mobile-tabs .mobile-tabs__theme .theme-moon{display:block}
  html.app-shell .mobile-tabs a:focus-visible,
  html.app-shell .mobile-tabs .mobile-tabs__theme:focus-visible{outline:2px solid var(--accent-strong);outline-offset:-2px}
  /* Prevent desktop sticky nav from claiming top padding on mobile. */
  html.app-shell main>section[data-app-view]{scroll-margin-top:18px}
}
@media(max-width:350px){
  html.app-shell .mobile-tabs{left:5px;right:5px;padding:4px 2px}
  html.app-shell .mobile-tabs a,html.app-shell .mobile-tabs .mobile-tabs__theme{font-size:.56rem;gap:2px}
  html.app-shell .mobile-tabs svg{width:19px;height:19px}
}
@media(min-width:761px){
  html.app-shell main>section[data-app-view]{scroll-margin-top:86px}
}
@media(min-width:1360px){
  html.app-shell main{min-height:100svh}
  html.app-shell{scroll-padding-top:18px}
  html.app-shell main>section[data-app-view]{scroll-margin-top:18px}
}
@media(prefers-reduced-motion:reduce){html.app-shell main>section[data-app-view].app-view-enter{animation:none}}

/* assets/nav-polish-v2.css */
/* Persistent desktop rail + five-item phone dock with a floating orbit theme control.
   Loaded last to refine the original portfolio app without rebuilding its content. */
:root{--app-sidebar:clamp(224px,19.2vw,264px)}
/* Desktop is a desktop from 1024px, not only on ultra-wide monitors. */
@media(min-width:1024px){
  html.app-shell{scroll-padding-top:18px}
  html.app-shell #site-header{display:none!important}
  .portfolio-rail{
    position:fixed!important;inset:0 auto 0 0;z-index:100;display:flex!important;
    width:var(--app-sidebar);height:100vh;height:100dvh;min-height:0;
    flex-direction:column;overflow-y:auto;overscroll-behavior-y:contain;
    padding:clamp(20px,2.1vw,30px) 18px 21px;
    background:var(--app-rail-bg);color:var(--app-rail-text);
    border-right:1px solid var(--border);scrollbar-width:thin;
    box-shadow:8px 0 32px rgba(0,0,0,.055);
  }
  .portfolio-rail__avatar{
    flex:none;display:block;width:68px;height:68px;object-fit:cover;object-position:center;
    border-radius:22px;border:2px solid var(--app-avatar-border);
    box-shadow:0 10px 24px var(--shadow)
  }
  .portfolio-rail__name{margin:16px 0 5px;font-size:1.27rem;font-weight:820;letter-spacing:-.035em;line-height:1.17;color:var(--app-rail-text)}
  .portfolio-rail__role{margin:0;color:var(--muted);font-size:.81rem;line-height:1.48}
  .portfolio-rail__socials{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:18px 0 0}
  .portfolio-rail__socials a{
    display:inline-flex;align-items:center;justify-content:center;min-width:43px;min-height:42px;
    padding:9px 10px;border:1px solid var(--border-strong);border-radius:12px;
    font-size:.77rem;font-weight:750;color:var(--app-rail-text);text-decoration:none;
    background:var(--surface);transition:border-color .2s ease,transform .2s ease
  }
  .portfolio-rail__socials a:hover{border-color:var(--hy-gold);color:var(--hy-gold);transform:translateY(-2px)}
  .portfolio-rail__theme{
    flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;min-height:46px;margin-top:14px;padding:9px 12px;
    border:1px solid var(--border);border-radius:12px;background:var(--surface);
    color:var(--app-rail-text);font-size:.86rem;font-weight:750;cursor:pointer;
    transition:background-color .18s,border-color .18s
  }
  .portfolio-rail__theme:hover{background:var(--accent-wash);border-color:var(--accent-strong)}
  .portfolio-rail__theme svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
  .portfolio-rail__theme .theme-sun,.portfolio-rail__theme .theme-moon{display:none}
  html[data-theme="dark"] .portfolio-rail__theme .theme-sun{display:block}
  html[data-theme="light"] .portfolio-rail__theme .theme-moon{display:block}
  .portfolio-rail__divider{flex:none;height:1px;margin:21px 0 13px;background:var(--border)}
  .portfolio-rail__nav{display:grid;gap:4px;width:100%;padding-bottom:8px}
  .portfolio-rail__nav a{
    position:relative;display:flex;align-items:center;gap:12px;
    min-height:44px;width:100%;padding:9px 12px;
    border:1px solid transparent;border-radius:12px;background:transparent;
    color:var(--muted);font-size:.87rem;font-weight:750;line-height:1.25;text-decoration:none;
    transition:background .18s,border-color .18s,color .18s;
  }
  .portfolio-rail__nav a .rail-index{width:22px;flex:none;color:var(--hy-gold);font-size:.69rem;letter-spacing:.02em;font-variant-numeric:tabular-nums}
  .portfolio-rail__nav a:is(:hover,:focus-visible,.is-current,[aria-current="page"]){
    border-color:var(--border);background:var(--accent-wash);color:var(--app-rail-text)
  }
  .portfolio-rail__nav a[aria-current="page"]::before{
    content:"";position:absolute;left:0;top:11px;bottom:11px;width:3px;border-radius:3px;background:var(--hy-gold)
  }
  .portfolio-rail__bottom{display:grid;gap:12px;margin-top:auto;padding-top:18px}
  .portfolio-rail__resume{
    display:flex;align-items:center;justify-content:space-between;gap:9px;
    min-height:47px;padding:12px 13px;background:var(--hy-gold);color:#201809;
    border:1px solid transparent;border-radius:12px;
    text-decoration:none;font-size:.83rem;font-weight:850
  }
  .portfolio-rail__resume:hover{filter:brightness(1.1)}
  .portfolio-rail__foot{margin:0;color:var(--muted);font-size:.68rem;line-height:1.6}
  html.app-shell main,html.app-shell .site-footer{margin-left:var(--app-sidebar)!important}
  .mobile-tabs,.mobile-theme-float{display:none!important}
  html.app-shell main>section[data-app-view]{scroll-margin-top:18px}
  html.app-shell .section-block>.mx-auto{max-width:1250px;padding-inline:clamp(20px,3vw,46px)}
}
@media(min-width:1024px) and (max-width:1359px){
  html.app-shell .hero>.mx-auto{
    width:100%;max-width:1230px;grid-template-columns:minmax(0,1fr);
    gap:27px;padding-inline:clamp(24px,4vw,46px);
  }
  html.app-shell .hero-visual{display:none!important}
  html.app-shell .home-bento{
    display:grid;grid-column:1;grid-row:auto;
    grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  }
  html.app-shell .bento-tile{min-height:187px;padding:17px}
  html.app-shell .bento-tile--projects{grid-column:auto;min-height:187px}
  html.app-shell .bento-tile__title{font-size:clamp(1.07rem,1.55vw,1.32rem)}
  html.app-shell .bento-tile__description{font-size:.83rem}
}
@media(min-width:1360px){
  html.app-shell .hero-visual{display:none!important}
  html.app-shell .home-bento{grid-column:2;grid-row:1}
}
@media(min-width:1024px) and (max-height:750px){
  .portfolio-rail{padding-top:17px;padding-bottom:16px}
  .portfolio-rail__avatar{width:58px;height:58px;border-radius:18px}
  .portfolio-rail__name{margin-top:10px}
  .portfolio-rail__socials{margin-top:10px}
  .portfolio-rail__theme{margin-top:9px;min-height:40px}
  .portfolio-rail__divider{margin:12px 0 9px}
  .portfolio-rail__nav a{min-height:39px;padding-block:7px}
  .portfolio-rail__bottom{padding-top:10px}
}
/* The phone dock is five equal destinations, with a physically separate orbit
   button floating above the central Contact action (not a sixth dock slot). */
.mobile-theme-float{display:none}
@media(max-width:760px){
  html.app-shell body{padding-bottom:calc(128px + env(safe-area-inset-bottom,0px))}
  html.app-shell .mobile-tabs{
    left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    min-height:68px;gap:3px;padding:5px 6px;border-radius:22px
  }
  html.app-shell .mobile-tabs a{
    min-width:0;min-height:54px;padding:5px 3px;border-radius:14px;
    font-size:clamp(.64rem,2.5vw,.72rem);gap:4px
  }
  html.app-shell .mobile-tabs a svg{width:21px;height:21px}
  html.app-shell .mobile-tabs .mobile-tabs__contact{
    border-radius:16px;transform:translateY(-5px);
    box-shadow:0 6px 15px rgba(0,0,0,.19)
  }
  .mobile-theme-float{
    position:fixed;z-index:106;left:50%;bottom:calc(94px + env(safe-area-inset-bottom,0px));
    width:66px;height:66px;display:grid;place-items:center;transform:translateX(-50%);
    border-radius:50%;isolation:isolate;pointer-events:none;
    filter:drop-shadow(0 8px 14px rgba(0,0,0,.18));
  }
  .mobile-theme-float::before,.mobile-theme-float::after{
    content:"";position:absolute;inset:0;border-radius:50%;
    pointer-events:none;
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
    mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
  }
  .mobile-theme-float::before{
    background:conic-gradient(from -12deg,transparent 0 11%,var(--hy-gold) 17% 39%,
    transparent 45% 57%,var(--accent-strong) 65% 82%,transparent 88% 100%);
    animation:mobile-theme-orbit 10s linear infinite;
  }
  .mobile-theme-float::after{
    inset:4px;background:conic-gradient(from 180deg,transparent 0 31%,
    var(--accent-strong) 42% 57%,transparent 65% 100%);
    opacity:.55;animation:mobile-theme-orbit-reverse 14s linear infinite;
  }
  .mobile-theme-float__button{
    pointer-events:auto;position:relative;z-index:1;display:grid;place-items:center;
    width:51px;height:51px;padding:0;
    border:1px solid var(--hy-gold-line);border-radius:50%;
    color:var(--hy-gold);background:var(--app-tab-bg);box-shadow:inset 0 0 0 1px var(--border);
    cursor:pointer;touch-action:manipulation;appearance:none;
    transition:background .22s ease,color .22s ease,transform .23s cubic-bezier(.2,1.4,.3,1);
  }
  .mobile-theme-float__button:hover,.mobile-theme-float__button:focus-visible{
    color:var(--accent-strong);background:var(--surface-elevated);transform:scale(1.07)
  }
  .mobile-theme-float__button:active{transform:scale(.94)}
  .mobile-theme-float__button svg{
    position:absolute;width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;
    transition:transform .3s ease,opacity .25s ease;
  }
  .mobile-theme-float__button .theme-sun,.mobile-theme-float__button .theme-moon{display:none}
  html[data-theme="dark"] .mobile-theme-float__button .theme-sun{display:block}
  html[data-theme="light"] .mobile-theme-float__button .theme-moon{display:block}
  .mobile-theme-float__button.theme-changed svg{animation:theme-icon-pop .4s cubic-bezier(.18,1.7,.3,1)}
  html.app-shell #site-header{display:none!important}
}
@media(max-width:349px){
  html.app-shell .mobile-tabs{left:5px;right:5px;padding-inline:3px}
  html.app-shell .mobile-tabs a{font-size:.6rem}
}
@keyframes mobile-theme-orbit{to{transform:rotate(360deg)}}
@keyframes mobile-theme-orbit-reverse{to{transform:rotate(-360deg)}}
@keyframes theme-icon-pop{0%{transform:rotate(-32deg) scale(.65)}65%{transform:rotate(12deg) scale(1.16)}100%{transform:rotate(0) scale(1)}}
@media(prefers-reduced-motion:reduce){
  .mobile-theme-float::before,.mobile-theme-float::after,.mobile-theme-float__button.theme-changed svg{animation:none!important}
  .portfolio-rail__socials a,.mobile-theme-float__button{transition:none!important}
}
/* Base theme stylesheet displays .theme-sun in light mode; these more-specific
   rules keep each standalone switch to exactly ONE action icon. */
html[data-theme="light"] .portfolio-rail__theme .theme-sun,
html[data-theme="light"] .mobile-theme-float__button .theme-sun{display:none!important}
html[data-theme="dark"] .portfolio-rail__theme .theme-moon,
html[data-theme="dark"] .mobile-theme-float__button .theme-moon{display:none!important}
@media(forced-colors:active){
  .mobile-theme-float__button,.portfolio-rail__theme{border:2px solid ButtonText}
  .mobile-theme-float::before,.mobile-theme-float::after{display:none}
}

/* assets/nav-compact-desktop-v3.css */
/* Repair: compact desktop-site viewport on phones; no duplicate top navigation.
   The rail is the only desktop navigation from 761px upward. */
#site-header{display:none!important}
html.app-shell #site-header{display:none!important}
@media(min-width:761px){
  :root{--app-sidebar:clamp(205px,24vw,252px)}
  html.app-shell{scroll-padding-top:15px}
  html.app-shell body{padding-bottom:0}
  .portfolio-rail{
    position:fixed!important;display:flex!important;
    left:0!important;top:0!important;bottom:0!important;
    z-index:400!important;isolation:isolate;
    width:var(--app-sidebar)!important;
    height:100vh!important;height:100dvh!important;
    max-height:100dvh;flex-direction:column;
    overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:17px 13px 18px!important;
    border-right:1px solid var(--border);
    background:var(--app-rail-bg);color:var(--app-rail-text);
    pointer-events:auto!important;touch-action:pan-y;
    overscroll-behavior:contain;box-shadow:6px 0 28px rgba(0,0,0,.08)
  }
  .portfolio-rail *{pointer-events:auto}
  .portfolio-rail__avatar{
    width:58px;height:58px;flex:none;
    border:2px solid var(--app-avatar-border);border-radius:19px;object-fit:cover
  }
  .portfolio-rail__name{font-size:1.13rem;line-height:1.2;margin:11px 0 4px;color:var(--app-rail-text)}
  .portfolio-rail__role{font-size:.74rem;line-height:1.42}
  .portfolio-rail__socials{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
  .portfolio-rail__socials a{
    min-height:40px;min-width:40px;padding:7px 9px;font-size:.73rem;
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--border-strong);border-radius:10px;
    background:var(--surface);color:var(--app-rail-text)
  }
  .portfolio-rail__theme{
    min-height:41px;margin-top:9px;padding:9px;
    display:flex;align-items:center;justify-content:space-between;
    border:1px solid var(--border);border-radius:11px;
    background:var(--surface);color:var(--app-rail-text);
    font-size:.79rem;cursor:pointer
  }
  .portfolio-rail__theme svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}
  .portfolio-rail__divider{flex:none;height:1px;margin:12px 0 9px;background:var(--border)}
  .portfolio-rail__nav{position:relative;z-index:401;display:grid;gap:3px;flex:none}
  .portfolio-rail__nav a{
    position:relative;z-index:402;display:flex!important;align-items:center;
    min-height:43px;width:100%;gap:10px;padding:9px 10px;
    color:var(--muted);text-decoration:none;font-size:.81rem;font-weight:750;
    border-radius:11px;border:1px solid transparent;
    cursor:pointer;pointer-events:auto!important;
    -webkit-tap-highlight-color:var(--accent-wash);touch-action:manipulation;
  }
  .portfolio-rail__nav a .rail-index{flex:none;width:18px;color:var(--hy-gold);font-size:.68rem}
  .portfolio-rail__nav a:is(:hover,:focus-visible,.is-current,[aria-current="page"]){
    color:var(--app-rail-text);background:var(--accent-wash);border-color:var(--border)
  }
  .portfolio-rail__bottom{display:grid;gap:7px;margin-top:auto;padding-top:12px}
  .portfolio-rail__resume{
    min-height:44px;display:flex;align-items:center;justify-content:space-between;
    gap:6px;padding:10px 11px;background:var(--hy-gold);
    color:#21190a;border-radius:11px;font-size:.78rem;font-weight:820;text-decoration:none
  }
  .portfolio-rail__foot{font-size:.66rem;line-height:1.4;color:var(--muted)}
  html.app-shell main,html.app-shell .site-footer{
    margin-left:var(--app-sidebar)!important;
    width:calc(100% - var(--app-sidebar))!important;
    min-width:0!important;
  }
  html.app-shell main>section[data-app-view]{scroll-margin-top:12px}
  html.app-shell .mobile-tabs,html.app-shell .mobile-theme-float{display:none!important}
  html.app-shell .section-block>.mx-auto{min-width:0;max-width:100%;padding-inline:clamp(17px,3vw,39px)}
}
@media(min-width:761px) and (max-width:1023px){
  html.app-shell .hero>.mx-auto{
    display:grid;grid-template-columns:minmax(0,1fr)!important;
    width:100%;max-width:100%;gap:22px;
    padding:clamp(28px,4vw,46px) clamp(17px,3vw,32px);
  }
  html.app-shell .hero-visual{display:none!important}
  html.app-shell .home-bento{
    grid-column:1!important;grid-row:auto!important;display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;width:100%;max-width:100%;
    min-width:0;gap:11px;padding:0;overflow:visible
  }
  html.app-shell .bento-tile{grid-column:1!important;min-height:146px!important;padding:16px}
  html.app-shell .bento-tile__title{font-size:1.14rem}
}
@media(min-width:901px) and (max-width:1023px){
  html.app-shell .home-bento{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html.app-shell .bento-tile--projects{grid-column:1/-1!important}
}
@media(min-width:1024px){
  /* Existing wide desktop design remains, with a guaranteed tap target. */
  .portfolio-rail__nav a{cursor:pointer;touch-action:manipulation;pointer-events:auto!important}
}
@media(max-width:760px){
  /* Normal mobile browsing keeps its five-button dock and separate theme orbit. */
  .portfolio-rail{display:none!important}
  html.app-shell main,html.app-shell .site-footer{margin-left:0!important;width:100%}
  html.app-shell .mobile-tabs{pointer-events:auto;z-index:405}
  html.app-shell .mobile-tabs a{pointer-events:auto;touch-action:manipulation}
  html.app-shell .mobile-theme-float{z-index:406}
}
@media(prefers-reduced-motion:reduce){.portfolio-rail__nav a{transition:none!important}}

/* assets/carousel-product-v3.css */
/* Transparent product showcase v3. The images are transparent, generated
   floating UI mockups. 3D coverflow uses transforms, not an opaque card. */
.orbit-showcase{background:transparent!important;border:0!important;overflow:clip}
.orbit-showcase__head{align-items:center}
.orbit-showcase__inner{margin-top:clamp(24px,3vw,38px);border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
.orbit-showcase__inner::before{opacity:.18!important;background-size:54px 54px!important;mask-image:radial-gradient(ellipse at center,#000 7%,transparent 74%)!important;-webkit-mask-image:radial-gradient(ellipse at center,#000 7%,transparent 74%)!important}
.orbit-showcase__inner::after{z-index:0;inset:auto 18% 110px;height:160px;opacity:.7}
.orbit-stage{--orbit-card-width:clamp(325px,56vw,670px);--side-shift:clamp(290px,37vw,495px);height:clamp(430px,49vw,575px);perspective:1400px;perspective-origin:50% 44%;touch-action:pan-y;cursor:grab;overflow:visible}
.orbit-track{inset:0!important;transform:none!important;transition:none!important;will-change:auto!important}
.orbit-card,.orbit-card:nth-child(1),.orbit-card:nth-child(2),.orbit-card:nth-child(3){
  position:absolute;left:50%;top:0;
  width:var(--orbit-card-width);height:100%;min-width:0;
  display:flex;flex-direction:column;align-items:stretch;
  padding:0;border:0!important;border-radius:0!important;overflow:visible!important;
  background:transparent!important;box-shadow:none!important;
  opacity:0;transform:translate3d(-50%,8px,-300px) scale(.7);
  transition:transform .76s cubic-bezier(.16,1,.3,1),opacity .6s ease,filter .6s ease;
  backface-visibility:visible;-webkit-backface-visibility:visible;
  pointer-events:none;will-change:transform
}
.orbit-card[data-position="current"]{
  z-index:3;opacity:1;filter:none;
  transform:translate3d(-50%,0,140px) rotateY(0) scale(1);
  pointer-events:auto;cursor:grab
}
.orbit-card[data-position="next"]{
  z-index:1;opacity:.45;filter:saturate(.72);
  transform:translate3d(calc(-50% + var(--side-shift)),16px,-180px) rotateY(-49deg) scale(.77);
  pointer-events:auto;cursor:pointer
}
.orbit-card[data-position="prev"]{
  z-index:1;opacity:.45;filter:saturate(.72);
  transform:translate3d(calc(-50% - var(--side-shift)),16px,-180px) rotateY(49deg) scale(.77);
  pointer-events:auto;cursor:pointer
}
.orbit-stage.is-dragging .orbit-card{transition:none}
.orbit-card__top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 clamp(9px,2vw,20px);color:var(--muted);font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.orbit-card__serial{color:var(--hy-gold)}
.orbit-card__visual{display:block;width:100%;height:clamp(255px,31vw,370px);margin-top:5px;padding:0;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;overflow:visible;text-decoration:none}
.orbit-card__visual img{
 display:block;width:100%;height:100%;object-fit:contain;
 background:transparent!important;box-shadow:none!important;
 filter:drop-shadow(0 24px 25px rgba(0,0,0,.22));
 -webkit-user-drag:none;user-select:none
}
.orbit-card__info{display:flex;flex-direction:column;align-items:center;gap:14px;margin:0 auto;padding:0 clamp(8px,2vw,25px);max-width:540px;text-align:center}
.orbit-card__title{font-size:clamp(1.45rem,2.3vw,1.85rem);font-weight:850;line-height:1.13;letter-spacing:-.04em;color:var(--text)}
.orbit-card__description{margin:7px auto 0;max-width:46ch;color:var(--body);font-size:.86rem;line-height:1.52}
.orbit-card__footer{display:flex;align-items:center;justify-content:center;gap:18px;margin:0;padding:0;border:0}
.orbit-card__metric{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:.98rem;font-weight:830;color:var(--text);white-space:nowrap}
.orbit-card__metric small{color:var(--muted);font-size:.67rem;line-height:1.28}
.orbit-card__action{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:45px;padding:11px 16px;background:var(--hy-gold);border-radius:12px;color:#1b150b;font-size:.81rem;font-weight:850;text-decoration:none;white-space:nowrap;box-shadow:0 7px 20px var(--shadow)}
.orbit-card:not(.is-front) a{visibility:hidden;pointer-events:none}
.orbit-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 0 7px;background:transparent!important;border:0!important}
.orbit-controls__state{display:grid;gap:2px}
.orbit-controls__state strong{font-size:.89rem}
.orbit-showcase__hint{max-width:72ch;text-align:center;margin:16px auto 0;color:var(--muted)}
@media(max-width:760px){
 .orbit-showcase__head{grid-template-columns:1fr;gap:10px}
 .orbit-stage{--orbit-card-width:min(90vw,410px);--side-shift:clamp(150px,54vw,280px);height:clamp(397px,115vw,495px);perspective:900px}
 .orbit-card[data-position="current"]{transform:translate3d(-50%,0,75px) scale(1)}
 .orbit-card[data-position="next"]{transform:translate3d(calc(-50% + var(--side-shift)),13px,-155px) rotateY(-51deg) scale(.75);opacity:.4}
 .orbit-card[data-position="prev"]{transform:translate3d(calc(-50% - var(--side-shift)),13px,-155px) rotateY(51deg) scale(.75);opacity:.4}
 .orbit-card__top{font-size:.59rem;padding-inline:15px}
 .orbit-card__visual{height:clamp(194px,60vw,268px);margin-top:8px}
 .orbit-card__visual img{filter:drop-shadow(0 12px 15px rgba(0,0,0,.19))}
 .orbit-card__info{gap:11px}
 .orbit-card__title{font-size:clamp(1.28rem,5.4vw,1.56rem)}
 .orbit-card__description{font-size:.77rem;line-height:1.43;max-width:38ch}
 .orbit-card__footer{gap:12px}
 .orbit-card__metric{font-size:.87rem}
 .orbit-card__metric small{font-size:.61rem}
 .orbit-card__action{padding:10px 13px;min-height:43px;font-size:.75rem}
 .orbit-controls{padding:12px 0 4px}
 .orbit-controls__state span{font-size:.63rem}
 .orbit-controls__pause{min-width:76px!important}
}
@media(max-width:380px){
 .orbit-stage{--orbit-card-width:min(91vw,340px);--side-shift:52vw;height:413px}
 .orbit-card__visual{height:210px}
 .orbit-card__description{font-size:.74rem}
 .orbit-card__footer{gap:9px}
 .orbit-card__metric{font-size:.81rem}
 .orbit-card__action{font-size:.71rem;padding:8px 10px}
}
@media(prefers-reduced-motion:reduce){.orbit-card{transition:none!important}.orbit-card__visual img{filter:none!important}}

/* assets/carousel-hd-v4.css */
/* HD carousel, v4: real detailed previews; no enlarged thumbnails.
   Transparency is outside the mockup, while the UI remains sharp. */
.orbit-showcase > .mx-auto{max-width:1340px}
.orbit-stage{
  --orbit-card-width:clamp(360px,70vw,825px);
  --side-shift:clamp(290px,45vw,565px);
  height:clamp(490px,52vw,620px);
  perspective:1550px
}
.orbit-card__visual{
  position:relative;display:grid;place-items:center;align-self:stretch;
  width:100%;height:clamp(290px,35vw,445px);margin:1px 0 0;
  padding:0;border:0!important;outline-offset:4px;border-radius:16px;
  background:transparent!important;box-shadow:none!important;
  cursor:zoom-in;touch-action:pan-y;appearance:none;
  overflow:visible
}
.orbit-card__visual img{
  display:block;width:100%;height:100%;object-fit:contain;
  image-rendering:auto;filter:drop-shadow(0 13px 19px rgba(0,0,0,.19))
}
.orbit-card__visual[data-fallback-active="true"] img{
  opacity:.92
}
.orbit-card__visual:focus-visible{outline:3px solid var(--hy-gold)}
.orbit-card__zoom-hint{
  position:absolute;right:9%;bottom:10%;z-index:2;
  display:flex;align-items:center;gap:7px;
  padding:9px 13px;border-radius:999px;
  border:1px solid var(--border-strong);
  color:var(--text);background:var(--surface-elevated);
  box-shadow:0 8px 25px rgba(0,0,0,.18);
  font-size:.76rem;letter-spacing:.01em;font-weight:800;
  backdrop-filter:blur(12px);
  opacity:0;transform:translateY(5px);
  transition:opacity .2s ease,transform .2s ease
}
.orbit-card.is-front .orbit-card__visual:is(:hover,:focus-visible) .orbit-card__zoom-hint,
.orbit-card.is-front .orbit-card__zoom-hint{opacity:1;transform:translateY(0)}
.orbit-card[data-position="prev"] .orbit-card__zoom-hint,
.orbit-card[data-position="next"] .orbit-card__zoom-hint{display:none}
.orbit-card__info{max-width:640px;gap:12px}
.orbit-card__title{font-size:clamp(1.4rem,2vw,1.85rem)}
.orbit-card__description{max-width:52ch}
.orbit-controls{margin-top:4px}
.orbit-preview-dialog{
  width:min(97vw,1480px);max-width:min(97vw,1480px);
  max-height:94dvh;max-height:94vh;margin:auto;
  padding:0;border:1px solid var(--border-strong);
  border-radius:18px;background:var(--surface);
  color:var(--text);box-shadow:0 25px 90px rgba(0,0,0,.45);
  overflow:hidden
}
.orbit-preview-dialog::backdrop{background:rgba(1,8,16,.83);backdrop-filter:blur(8px)}
.orbit-preview-dialog__shell{display:flex;flex-direction:column;max-height:94dvh;min-width:0}
.orbit-preview-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;border-bottom:1px solid var(--border);flex:none}
.orbit-preview-dialog__header strong{font-size:clamp(.95rem,2vw,1.16rem)}
.orbit-preview-dialog__close{min-width:45px;min-height:45px;border:1px solid var(--border);border-radius:12px;background:var(--surface-elevated);color:var(--text);font-size:1.45rem;cursor:pointer}
.orbit-preview-dialog__close:is(:hover,:focus-visible){border-color:var(--hy-gold)}
.orbit-preview-dialog__canvas{position:relative;flex:1;min-height:0;max-height:calc(94dvh - 146px);overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom;background:var(--surface-muted);text-align:center;padding:8px}
.orbit-preview-dialog__canvas img{display:block;width:100%;max-width:none;height:auto;min-height:0;margin:0 auto;object-fit:contain}
.orbit-preview-dialog__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--border);flex:none}
.orbit-preview-dialog__footer p{margin:0;font-size:.77rem;color:var(--muted)}
.orbit-preview-dialog__actions{display:flex;align-items:center;gap:8px}
.orbit-preview-dialog__actions button,.orbit-preview-dialog__actions a{min-height:41px;display:inline-flex;align-items:center;justify-content:center;padding:9px 12px;border:1px solid var(--border-strong);border-radius:11px;background:var(--surface-elevated);color:var(--text);font-size:.78rem;font-weight:800;text-decoration:none;cursor:pointer}
.orbit-preview-dialog__actions button:hover,.orbit-preview-dialog__actions a:hover{border-color:var(--hy-gold)}
.orbit-preview-dialog__actions a{color:#21170b;background:var(--hy-gold);border-color:transparent}
@media(max-width:760px){
  .orbit-stage{
    --orbit-card-width:min(93vw,420px);
    --side-shift:clamp(142px,57vw,300px);
    height:clamp(412px,111vw,480px);
    perspective:1000px
  }
  .orbit-card__visual{height:clamp(220px,60vw,265px);margin-top:4px}
  .orbit-card__zoom-hint{right:4%;bottom:11%;padding:7px 10px;font-size:.7rem}
  .orbit-card__info{gap:9px}
  .orbit-card__description{font-size:.77rem}
  .orbit-preview-dialog{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0;border:0}
  .orbit-preview-dialog__shell{height:100dvh;max-height:100dvh}
  .orbit-preview-dialog__canvas{max-height:none;flex:1;padding:4px;display:block}
  .orbit-preview-dialog__footer{padding:9px 12px calc(12px + env(safe-area-inset-bottom,0px))}
  .orbit-preview-dialog__footer p{font-size:.7rem}
  .orbit-preview-dialog__actions{gap:5px}
  .orbit-preview-dialog__actions button,.orbit-preview-dialog__actions a{min-height:41px;padding:8px 10px;font-size:.72rem}
}
@media(max-width:375px){
  .orbit-stage{--orbit-card-width:94vw;height:418px}
  .orbit-card__visual{height:213px}
  .orbit-card__zoom-hint{font-size:.64rem;right:3%}
  .orbit-card__footer{gap:8px}
}
@media(prefers-reduced-motion:reduce){.orbit-card__zoom-hint{transition:none}}

/* assets/screen-deck-v5.css */
/* Screen Deck v5 — gold-ops-inspired viewport pages.
   One visible viewport per chapter; snap the main app scroller, never the browser
   document. Dense supporting content remains accessible inside its own chapter. */
html.screen-deck,html.screen-deck body{
  width:100%;height:100%;height:100dvh;min-height:0!important;
  overflow:hidden!important;overscroll-behavior:none;
}
html.screen-deck body{padding:0!important;margin:0!important}
html.screen-deck #site-header{display:none!important}
html.screen-deck .site-footer{display:none!important}
html.screen-deck #main{
  display:block;position:relative;
  height:100vh!important;height:100dvh!important;
  min-height:0!important;max-height:100dvh!important;
  overflow-x:hidden!important;overflow-y:auto!important;
  scroll-snap-type:y mandatory;scroll-padding:0!important;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;
  contain:layout style;
}
html.screen-deck #main>section[data-app-view]:not([hidden]){
  position:relative;display:flex!important;flex-direction:column;
  justify-content:center;align-items:stretch;
  flex:0 0 auto;width:100%;min-width:0;
  height:100vh!important;height:100dvh!important;
  min-height:100dvh!important;max-height:100dvh!important;
  margin:0!important;padding:clamp(18px,3dvh,42px) 0!important;
  scroll-snap-align:start!important;scroll-snap-stop:always;
  scroll-margin:0!important;
  overflow:hidden!important;
  isolation:isolate;
}
html.screen-deck #main>section[data-app-view][hidden]{display:none!important}
html.screen-deck #main>section[data-app-view]>.mx-auto{
  position:relative;z-index:1;
  width:min(100%,1360px);max-width:1360px;
  min-width:0;min-height:0;max-height:100%;height:auto;
  margin:0 auto;padding:0 clamp(23px,3.1vw,49px)!important;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior-y:auto;scrollbar-width:thin;
  scrollbar-color:var(--border-strong) transparent;
  -webkit-overflow-scrolling:touch;
}
html.screen-deck #main>section[data-app-view]>.mx-auto:focus-visible{outline:2px solid var(--accent-strong);outline-offset:-4px}
html.screen-deck .section-block{border-top:0!important}
html.screen-deck .section-intro{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(230px,.85fr);
  align-items:end;gap:clamp(15px,2.8vw,36px)
}
html.screen-deck .section-heading{
  max-width:none!important;
  font-size:clamp(1.85rem,3.15vw,2.95rem)!important;
  line-height:1.085!important;letter-spacing:-.05em;
}
html.screen-deck .section-intro .mt-4,
html.screen-deck .section-block h2.mt-4{margin-top:7px!important}
html.screen-deck .section-kicker{font-size:.72rem}
html.screen-deck .body-copy{font-size:clamp(.85rem,1.1vw,1rem);line-height:1.48}
html.screen-deck .section-intro>p{max-width:49ch;margin:0}
html.screen-deck section :is(.mt-10,.lg\:mt-12,.mt-9){margin-top:clamp(12px,2dvh,22px)}
html.screen-deck .section-block .grid{row-gap:clamp(8px,1.6dvh,17px)}
/* Hero: gold ops-style balanced split. The second pane is the compact bento
   console; the redundant portrait stays hidden on desktop. */
@media(min-width:1024px){
  html.screen-deck #top>.mx-auto{
    display:grid!important;
    grid-template-columns:minmax(0,1.06fr) minmax(330px,.94fr)!important;
    grid-auto-flow:row;align-items:center!important;
    gap:clamp(16px,2.8vw,40px)!important;
    max-width:1400px;
    padding-block:0!important;
  }
  html.screen-deck #top .hero-visual{display:none!important}
  html.screen-deck #top .home-bento{
    display:grid!important;grid-column:2!important;grid-row:1!important;
    width:100%!important;max-width:100%!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-self:center;gap:clamp(8px,1.2vw,13px)!important;
    padding:0!important;margin:0!important;
    overflow:visible!important
  }
  html.screen-deck #top .bento-tile--projects{grid-column:1/-1!important}
  html.screen-deck #top .bento-tile{
    min-height:clamp(120px,17dvh,164px)!important;
    padding:clamp(12px,1.5vw,19px)!important;
    border-radius:15px
  }
  html.screen-deck #top .bento-tile--projects{min-height:clamp(140px,20dvh,200px)!important}
  html.screen-deck #top .bento-tile__title{font-size:clamp(.98rem,1.5vw,1.33rem)}
  html.screen-deck #top .bento-tile__tag{font-size:.66rem}
  html.screen-deck #top .bento-tile__description{font-size:.76rem}
  html.screen-deck #top .bento-tile__media{height:clamp(39px,7dvh,73px)}
  html.screen-deck #top .hero-heading{
    font-size:clamp(2.4rem,4.1vw,4.2rem)!important;
    line-height:1.04!important;max-width:14ch
  }
  html.screen-deck #top .body-lead{margin-top:clamp(12px,2dvh,21px)!important;font-size:clamp(.92rem,1.2vw,1.09rem)}
  html.screen-deck #top .hero-proof{margin-top:clamp(18px,3dvh,34px)!important;padding-top:clamp(12px,2dvh,20px)!important}
  html.screen-deck #top .button{min-height:43px}
  html.screen-deck #top .mt-9{margin-top:clamp(18px,2.7dvh,28px)!important}
}
/* All editorial pages use the same typographic rhythm as a hero screen. */
html.screen-deck #about>.mx-auto,html.screen-deck #contact>.mx-auto{
  max-width:1320px;align-items:center;gap:clamp(24px,3vw,54px)
}
html.screen-deck #about>.mx-auto{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
html.screen-deck #about .about-intro{font-size:clamp(1.2rem,2vw,1.65rem);line-height:1.45}
html.screen-deck #about .about-callout{margin-top:clamp(16px,2dvh,25px)}
html.screen-deck #about .subtle-pill{font-size:.75rem}
html.screen-deck #results .results-grid{margin-top:clamp(14px,2dvh,23px)}
html.screen-deck #results .result-tile{padding:clamp(14px,1.65vw,23px)}
html.screen-deck #results .result-tile>strong{font-size:clamp(2rem,3.2vw,2.95rem)}
html.screen-deck #results .impact-story{margin-top:clamp(13px,1.9dvh,22px);padding:clamp(16px,2.2vw,29px)}
html.screen-deck #results .recognition-line{margin-top:12px}
html.screen-deck #challenge .challenge-grid{margin-top:clamp(12px,2dvh,23px)}
html.screen-deck #challenge .challenge-card{padding:clamp(14px,1.7vw,23px)}
html.screen-deck #challenge .challenge-card h3{margin-top:clamp(9px,1dvh,15px);font-size:clamp(1rem,1.45vw,1.2rem)}
html.screen-deck #challenge .challenge-card p{font-size:.85rem;line-height:1.46}
html.screen-deck #challenge .visitor-explorer{margin-top:clamp(12px,2dvh,24px);padding:clamp(15px,1.7vw,22px)}
html.screen-deck #challenge .visitor-tabs{margin-top:clamp(10px,1.5dvh,17px)}
html.screen-deck #challenge .visitor-focus-panel{margin-top:clamp(9px,1.2dvh,15px)}
html.screen-deck #skills .skill-card{padding:clamp(12px,1.5vw,20px)}
html.screen-deck #skills .skill-card h3{font-size:clamp(.95rem,1.3vw,1.13rem);margin-top:8px}
html.screen-deck #skills .skill-card p{font-size:.8rem;line-height:1.42;margin-top:8px}
html.screen-deck #skills .skill-tags{gap:5px;margin-top:11px}
html.screen-deck #skills .skill-tags span{font-size:.66rem;padding:5px 8px}
html.screen-deck #projects .project-tools{margin-top:9px}
html.screen-deck #projects #project-cases{margin-top:10px;gap:12px}
html.screen-deck #projects .project-art{height:clamp(77px,10dvh,112px)!important}
html.screen-deck #projects .project-content{padding:clamp(11px,1.3vw,17px)!important}
html.screen-deck #projects .project-content>p{font-size:.78rem;line-height:1.45}
html.screen-deck #projects .project-content h3{font-size:1.16rem;margin-top:7px}
html.screen-deck #projects .project-metric{margin-top:10px}
html.screen-deck #projects .project-stack{gap:4px}
html.screen-deck #projects .project-links{margin-top:10px}
html.screen-deck #projects .project-live-link{min-height:42px;font-size:.77rem}
html.screen-deck #projects .case-expand{margin-top:9px}
html.screen-deck #approach .method-grid{margin-top:clamp(13px,2dvh,22px)}
html.screen-deck #approach .method-step{padding:clamp(12px,1.5vw,21px)}
html.screen-deck #approach .method-step h3{font-size:clamp(.93rem,1.28vw,1.1rem);margin-top:12px}
html.screen-deck #approach .method-step p{font-size:.81rem;line-height:1.43;margin-top:8px}
html.screen-deck #approach .first90,html.screen-deck #approach .kpi-block{margin-top:clamp(15px,2.1dvh,25px)!important}
html.screen-deck #experience .experience-timeline{margin-top:clamp(14px,2dvh,25px)}
html.screen-deck #experience .timeline-entry{padding-bottom:clamp(10px,1.5dvh,20px);gap:20px}
html.screen-deck #experience .timeline-entry+.timeline-entry{padding-top:clamp(9px,1.4dvh,18px)}
html.screen-deck #experience .timeline-copy p{font-size:.84rem;line-height:1.45}
html.screen-deck #experience .education-strip{margin-top:clamp(12px,2dvh,22px)}
html.screen-deck #contact .contact-details{margin-top:clamp(18px,2dvh,25px)}
html.screen-deck #contact .resume-panel{margin-top:clamp(15px,2dvh,24px)}
html.screen-deck #contact .contact-form-panel{padding:clamp(17px,2vw,29px)}
html.screen-deck #contact #contact-form{margin-top:clamp(12px,1.7dvh,19px)}
html.screen-deck #contact #contact-form textarea{min-height:75px;max-height:20dvh;resize:vertical}
html.screen-deck #contact .contact-form-panel .space-y-5>:not([hidden])~:not([hidden]){margin-top:clamp(10px,1.5dvh,17px)}
/* HD carousel reduced to a feature-hero silhouette; zoom stays full HD. */
html.screen-deck #showcase .orbit-showcase__head{gap:clamp(12px,2vw,24px)}
html.screen-deck #showcase .orbit-showcase__inner{margin-top:clamp(7px,1.2dvh,16px)}
html.screen-deck #showcase .orbit-stage{
  --orbit-card-width:min(68vw,690px);
  --side-shift:clamp(230px,34vw,440px);
  height:clamp(350px,53dvh,494px);
}
html.screen-deck #showcase .orbit-card__visual{height:clamp(235px,32dvh,355px)}
html.screen-deck #showcase .orbit-card__info{gap:8px}
html.screen-deck #showcase .orbit-card__title{font-size:1.45rem}
html.screen-deck #showcase .orbit-card__description{font-size:.77rem;margin-top:4px}
html.screen-deck #showcase .orbit-controls{margin-top:0;padding:8px 0 0}
html.screen-deck #showcase .orbit-showcase__hint{margin:5px auto 0;font-size:.69rem}
/* Disclose supporting dense details in place, rather than shrinking copy into
   unreadable 9px text. Summaries are the compact page and content remains present. */
html.screen-deck .screen-deck-expander{
  margin-top:13px;border:1px solid var(--border-strong);
  border-radius:12px;background:var(--surface);overflow:hidden
}
html.screen-deck .screen-deck-expander>summary{
  min-height:50px;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:11px 17px;cursor:pointer;list-style:none;
  color:var(--text);font-size:.88rem;font-weight:820
}
html.screen-deck .screen-deck-expander>summary::-webkit-details-marker{display:none}
html.screen-deck .screen-deck-expander>summary:after{content:"+";font-size:1.25rem;color:var(--hy-gold)}
html.screen-deck .screen-deck-expander[open]>summary:after{content:"−"}
html.screen-deck .screen-deck-expander>summary:focus-visible{outline:2px solid var(--accent-strong);outline-offset:-3px}
html.screen-deck .screen-deck-expander>[data-screen-detail]{padding:0 14px 15px;margin:0!important;border:0;box-shadow:none}
html.screen-deck .screen-deck-expander .mt-14{margin-top:0!important}
html.screen-deck .screen-deck-expander .first90-grid,html.screen-deck .screen-deck-expander .kpi-grid{margin-top:12px}
/* A compact floating chapter indicator, outside the scroller, aligned to the
   app shell. It never conflicts with the separate center theme orbit. */
.screen-switcher{
  position:fixed;z-index:121;right:17px;top:50%;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  transform:translateY(-50%);padding:10px 7px;
  border:1px solid var(--border-strong);border-radius:18px;
  background:var(--surface-elevated);box-shadow:0 13px 38px var(--shadow);
  backdrop-filter:blur(12px)
}
.screen-switcher[hidden]{display:none!important}
.screen-switcher button{width:38px;height:38px;min-width:38px;min-height:38px;display:grid;place-items:center;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text);cursor:pointer;font-size:1.1rem}
.screen-switcher button:is(:hover,:focus-visible){border-color:var(--hy-gold);color:var(--hy-gold)}
.screen-switcher button:disabled{opacity:.27;cursor:default}
.screen-switcher output{font-size:.7rem;color:var(--muted);font-weight:900;font-variant-numeric:tabular-nums}
.screen-switcher .screen-switcher__name{font-size:.63rem;color:var(--muted);writing-mode:vertical-rl;max-height:115px;overflow:hidden}
html.screen-deck #main>section>.mx-auto:focus{outline:none}
@media(min-width:761px) and (max-width:1150px){
 html.screen-deck #main>section[data-app-view]{padding:12px 0!important}
 html.screen-deck #main>section>.mx-auto{padding-inline:clamp(18px,2.5vw,30px)!important}
 html.screen-deck #top>.mx-auto{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
 html.screen-deck #top .hero-visual{display:none!important}
 html.screen-deck #top .home-bento{display:grid!important;grid-column:1!important;grid-row:auto!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;overflow:visible!important;width:100%!important}
 html.screen-deck #top .bento-tile{min-height:130px!important}
 html.screen-deck #top .bento-tile--projects{grid-column:1!important;min-height:130px!important}
 html.screen-deck #top .hero-heading{font-size:clamp(2.4rem,4vw,3.2rem)!important;max-width:24ch}
 html.screen-deck #top .body-lead{max-width:720px}
 html.screen-deck #top .hero-proof{max-width:720px}
 html.screen-deck #showcase .orbit-stage{--orbit-card-width:min(68vw,550px);--side-shift:270px}
}
@media(max-height:760px) and (min-width:761px){
 html.screen-deck #main>section[data-app-view]{padding:10px 0!important}
 html.screen-deck #main>section>.mx-auto{max-height:calc(100dvh - 22px)}
 html.screen-deck .section-heading{font-size:clamp(1.6rem,2.8vw,2.4rem)!important}
 html.screen-deck #showcase .orbit-stage{height:clamp(295px,48dvh,390px)}
 html.screen-deck #showcase .orbit-card__visual{height:clamp(205px,29dvh,290px)}
 html.screen-deck #showcase .orbit-card__description{display:none}
 html.screen-deck #top .bento-tile{min-height:104px!important}
 html.screen-deck #top .bento-tile--projects{min-height:127px!important}
 html.screen-deck #top .hero-heading{font-size:clamp(2.1rem,3.6vw,3.25rem)!important}
}
@media(max-width:760px){
 html.screen-deck #main{width:100%!important;margin:0!important;scrollbar-width:none}
 html.screen-deck #main::-webkit-scrollbar{display:none}
 html.screen-deck #main>section[data-app-view]:not([hidden]){
   height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;
   padding:clamp(16px,3dvh,26px) 0 calc(104px + env(safe-area-inset-bottom,0px))!important;
   justify-content:flex-start;scroll-snap-stop:always
 }
 html.screen-deck #main>section>.mx-auto{
   width:100%;max-height:100%;margin:0!important;
   padding:0 clamp(15px,4.3vw,22px)!important;
   overflow-x:hidden;overflow-y:auto
 }
 html.screen-deck .section-intro{display:grid;grid-template-columns:1fr;gap:7px;align-items:start}
 html.screen-deck .section-intro>p{font-size:.79rem;line-height:1.42;max-width:60ch}
 html.screen-deck .section-heading{font-size:clamp(1.56rem,6vw,2.06rem)!important;line-height:1.1!important}
 html.screen-deck .section-kicker{font-size:.64rem}
 html.screen-deck .body-copy{font-size:.83rem;line-height:1.45}
 html.screen-deck #top>.mx-auto{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:clamp(12px,2dvh,19px)!important;padding-top:0!important;padding-bottom:0!important}
 html.screen-deck #top .hero-heading{font-size:clamp(2.05rem,8vw,3rem)!important;line-height:1.05!important;max-width:18ch}
 html.screen-deck #top .eyebrow{font-size:.65rem;margin-bottom:clamp(10px,1.6dvh,16px)!important}
 html.screen-deck #top .body-lead{font-size:.84rem;line-height:1.45;margin-top:clamp(9px,1.5dvh,15px)!important}
 html.screen-deck #top .mt-9{margin-top:clamp(12px,2dvh,17px)!important}
 html.screen-deck #top .hero-proof{margin-top:clamp(14px,2dvh,20px)!important;padding-top:12px!important}
 html.screen-deck #top .hero-proof strong{font-size:clamp(1.42rem,5vw,1.9rem)}
 html.screen-deck #top .hero-visual{display:none!important}
 html.screen-deck #top .home-bento{
   display:flex!important;grid-column:1!important;grid-row:auto!important;
   align-self:auto;gap:10px!important;
   width:calc(100% + 19px)!important;margin-right:-19px!important;
   padding:2px 17px 8px 1px!important;
   overflow-x:auto!important;overflow-y:hidden!important;
   scrollbar-width:none;scroll-snap-type:x mandatory
 }
 html.screen-deck #top .bento-tile{flex:0 0 min(76vw,275px)!important;min-height:clamp(140px,19dvh,185px)!important;padding:14px!important}
 html.screen-deck #top .bento-tile__title{font-size:1.08rem}
 html.screen-deck #top .bento-tile__description{font-size:.72rem}
 html.screen-deck #top .bento-tile__media{height:43px}
 html.screen-deck #challenge .challenge-grid{
   display:flex!important;flex-wrap:nowrap;gap:10px!important;
   overflow-x:auto;scroll-snap-type:x mandatory;padding:3px 2px 10px;
   scrollbar-width:none
 }
 html.screen-deck #challenge .challenge-card{flex:0 0 min(78vw,290px);scroll-snap-align:start;padding:14px}
 html.screen-deck #challenge .visitor-explorer{margin-top:12px;padding:13px}
 html.screen-deck #challenge .visitor-explorer-intro h3{font-size:1.16rem}
 html.screen-deck #challenge .visitor-tabs{display:flex;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px}
 html.screen-deck #challenge .visitor-tab{flex:0 0 auto;min-height:39px;white-space:nowrap;padding:7px 11px;font-size:.72rem}
 html.screen-deck #challenge .visitor-focus-panel{margin-top:8px;gap:9px}
 html.screen-deck #results .results-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-top:13px}
 html.screen-deck #results .result-tile{padding:13px 10px}
 html.screen-deck #results .result-tile>strong{font-size:clamp(1.9rem,8vw,2.5rem)}
 html.screen-deck #results .result-tile h3{font-size:.82rem}
 html.screen-deck #results .result-tile p{font-size:.72rem;line-height:1.42}
 html.screen-deck #results .impact-story{grid-template-columns:1fr;margin-top:10px;padding:13px}
 html.screen-deck #skills .grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-top:12px}
 html.screen-deck #skills .skill-card{padding:10px;min-height:0}
 html.screen-deck #skills .skill-icon{width:27px;height:27px;border-radius:8px;font-size:.65rem}
 html.screen-deck #skills .skill-top{gap:4px}
 html.screen-deck #skills .skill-kind{font-size:.57rem}
 html.screen-deck #skills .skill-card h3{font-size:.94rem;margin-top:8px;line-height:1.2}
 html.screen-deck #skills .skill-card p{font-size:.7rem;line-height:1.37;margin-top:7px}
 html.screen-deck #skills .skill-tags{gap:4px;margin-top:8px}
 html.screen-deck #skills .skill-tags span{font-size:.57rem;padding:4px 6px}
 html.screen-deck #projects #project-cases{
   display:flex!important;flex-wrap:nowrap;gap:12px!important;
   overflow-x:auto;scroll-snap-type:x mandatory;
   scroll-padding-left:2px;padding:3px 2px 11px;margin-top:9px!important;
   scrollbar-width:thin
 }
 html.screen-deck #projects .project-card{
   flex:0 0 min(83vw,350px)!important;max-width:min(83vw,350px);
   min-height:0;max-height:100%;scroll-snap-align:start
 }
 html.screen-deck #projects .project-art{height:92px!important}
 html.screen-deck #projects .project-content{padding:12px!important}
 html.screen-deck #projects .case-expand[open]{overflow-y:auto}
 html.screen-deck #approach .method-grid{
   display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
   gap:8px!important;margin-top:13px
 }
 html.screen-deck #approach .method-step{padding:11px}
 html.screen-deck #approach .method-step h3{font-size:.93rem;margin-top:9px}
 html.screen-deck #approach .method-step p{font-size:.7rem;line-height:1.38;margin-top:6px}
 html.screen-deck #approach .screen-deck-expander{margin-top:10px}
 html.screen-deck #experience .experience-timeline{margin-top:13px}
 html.screen-deck #experience .timeline-entry{grid-template-columns:1fr;gap:5px;padding-bottom:15px}
 html.screen-deck #experience .timeline-entry+.timeline-entry{padding-top:12px}
 html.screen-deck #experience .timeline-copy h3{font-size:1rem}
 html.screen-deck #experience .timeline-copy p{font-size:.77rem}
 html.screen-deck #contact>.mx-auto{grid-template-columns:1fr!important;gap:15px!important}
 html.screen-deck #contact .contact-details{margin-top:10px}
 html.screen-deck #contact .contact-details .mt-5{margin-top:8px!important}
 html.screen-deck #contact .resume-panel{margin-top:9px;padding:12px}
 html.screen-deck #contact .contact-form-panel{padding:14px}
 html.screen-deck #contact .contact-form-panel h3{font-size:1.12rem}
 html.screen-deck #contact #contact-form{margin-top:10px}
 html.screen-deck #contact #contact-form input{min-height:43px}
 html.screen-deck #contact #contact-form textarea{min-height:70px;height:80px;max-height:19dvh}
 html.screen-deck #contact .contact-form-panel .space-y-5>:not([hidden])~:not([hidden]){margin-top:10px}
 html.screen-deck #showcase .orbit-showcase__head{grid-template-columns:1fr;gap:5px}
 html.screen-deck #showcase .orbit-showcase__head p{font-size:.78rem}
 html.screen-deck #showcase .orbit-showcase__inner{margin-top:7px!important}
 html.screen-deck #showcase .orbit-stage{
   --orbit-card-width:min(91vw,410px);
   --side-shift:clamp(140px,52vw,270px);
   height:clamp(325px,56dvh,440px)
 }
 html.screen-deck #showcase .orbit-card__visual{height:clamp(188px,34dvh,260px)}
 html.screen-deck #showcase .orbit-card__top{font-size:.57rem}
 html.screen-deck #showcase .orbit-card__title{font-size:1.3rem}
 html.screen-deck #showcase .orbit-card__description{font-size:.7rem;line-height:1.36}
 html.screen-deck #showcase .orbit-card__footer{gap:9px}
 html.screen-deck #showcase .orbit-controls{padding:8px 0 0}
 html.screen-deck #showcase .orbit-showcase__hint{font-size:.62rem;line-height:1.28;margin:7px auto 0}
 .screen-switcher{top:auto;right:12px;bottom:calc(171px + env(safe-area-inset-bottom,0px));transform:none;gap:3px;padding:5px;border-radius:13px}
 .screen-switcher button{width:33px;height:33px;min-width:33px;min-height:33px;border-radius:9px}
 .screen-switcher .screen-switcher__name{display:none}
 .screen-switcher output{font-size:.64rem}
}
@media(max-width:374px){
 html.screen-deck #skills .grid{grid-template-columns:1fr!important}
 html.screen-deck #showcase .orbit-stage{height:335px}
 html.screen-deck #showcase .orbit-card__visual{height:193px}
 .screen-switcher{right:7px}
}
@media(prefers-reduced-motion:reduce){
 html.screen-deck #main{scroll-behavior:auto!important}
 .screen-switcher button{transition:none}
}

/* assets/contact-contrast-v6.css */
/* Compact desktop rail: spell out LinkedIn without clipping the label. */
@media(min-width:761px){
 .portfolio-rail__socials{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px!important;align-items:stretch;width:100%
 }
 .portfolio-rail__socials a{
  display:flex!important;align-items:center;justify-content:center;
  min-width:0!important;width:100%;min-height:43px;
  padding:8px 5px!important;font-size:clamp(.67rem,.76vw,.77rem)!important;
  font-weight:780;line-height:1.22;white-space:nowrap;text-align:center;
  overflow:visible;border:1px solid var(--border-strong);border-radius:11px;
  color:var(--app-rail-text);background:var(--surface)
 }
 .portfolio-rail__socials a:last-child{grid-column:1/-1}
 .portfolio-rail__socials a:is(:hover,:focus-visible){
  border-color:var(--accent-strong);color:var(--accent-strong)
 }
}
/* Light mode: deep teal/white rather than low-contrast brown-on-bronze. */
html[data-theme="light"] .portfolio-rail__resume{
 background:#095963!important;color:#fff!important;border-color:#095963!important
}
html[data-theme="light"] .portfolio-rail__resume span{color:#fff!important}
html[data-theme="light"] .portfolio-rail__resume:is(:hover,:focus-visible){
 background:#07434c!important;color:#fff!important;border-color:#07434c!important;filter:none!important
}
html[data-theme="light"] .hero a.button-quiet{
 background:#fff!important;color:#1b303a!important;border-color:#7699a0!important
}
html[data-theme="light"] .hero a.button-quiet:is(:hover,:focus-visible){
 background:#e7f3f4!important;color:#11363c!important;border-color:#126f7b!important
}
html[data-theme="light"] .resume-icon-link{
 background:#095963!important;color:#fff!important
}
@media(forced-colors:active){
 .portfolio-rail__resume,.hero .button-quiet,.resume-icon-link{
  forced-color-adjust:auto;border:1px solid ButtonText!important
 }
}

/* assets/continuous-deck-v6.css */
/* Continuous portfolio v6: natural document scrolling with hero-sized sections.
   Every chapter stays in the DOM. A chapter grows beyond one viewport rather than
   clipping copy, requiring nested scroll, or shrinking text below readable sizes. */
html.screen-deck.continuous-deck{
  height:auto!important;min-height:100%!important;
  overflow-x:clip!important;overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
  scroll-snap-type:y proximity!important;
  scroll-padding-top:0!important;
}
html.screen-deck.continuous-deck body{
  height:auto!important;min-height:100dvh!important;
  overflow-x:clip!important;overflow-y:visible!important;
  overscroll-behavior:auto!important;
  padding:0!important;margin:0!important;
}
html.screen-deck.continuous-deck #main{
  position:relative!important;
  display:block!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  overflow:visible!important;overscroll-behavior:auto!important;
  scroll-snap-type:none!important;contain:none!important;
}
html.screen-deck.continuous-deck #main>section[data-app-view],
html.screen-deck.continuous-deck #main>section[data-app-view]:not([hidden]){
  display:flex!important;
  flex-direction:column;align-items:stretch;justify-content:center;
  width:100%;height:auto!important;
  min-height:100svh!important;min-height:100dvh!important;
  max-height:none!important;margin:0!important;
  padding:clamp(30px,5dvh,64px) 0!important;
  overflow:visible!important;overscroll-behavior:auto!important;
  scroll-snap-align:start!important;scroll-snap-stop:normal!important;
  scroll-margin:0!important;isolation:isolate;
}
html.screen-deck.continuous-deck #main>section[data-app-view]>.mx-auto{
  width:min(100%,1360px)!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  margin:auto!important;overflow:visible!important;
  overscroll-behavior:auto!important;
  padding:0 clamp(23px,3.1vw,49px)!important;
  zoom:1!important;
}
html.screen-deck.continuous-deck #main>section[data-app-view] .screen-deck-expander[open]{
  overflow:visible!important;
}
html.screen-deck.continuous-deck #main>section[data-app-view] .screen-deck-expander[open]>[data-screen-detail]{
  overflow:visible!important;
}
html.screen-deck.continuous-deck .site-footer{display:none!important}
html.screen-deck.continuous-deck .portfolio-rail{overscroll-behavior-y:contain}
/* The About hero now features the person's actual existing GitHub profile image. */
html.screen-deck.continuous-deck #about>.mx-auto{
  display:grid!important;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)!important;
  align-items:center!important;gap:clamp(28px,4vw,70px)!important;
}
.about-heading-panel{
  display:grid;align-content:center;justify-items:start;
  gap:clamp(19px,3dvh,30px);min-width:0
}
.about-heading-copy{min-width:0}
.about-portrait{
  position:relative;width:min(100%,clamp(220px,25vw,325px));
  margin:0;isolation:isolate;
}
.about-portrait::before{
  content:"";position:absolute;inset:9% -8% -9% 8%;z-index:-1;
  border-radius:30%;background:radial-gradient(ellipse at 40% 42%,var(--hy-gold-wash),transparent 73%);
  filter:blur(18px);
}
.about-portrait__frame{
  position:relative;display:block;width:100%;aspect-ratio:1/1;
  overflow:hidden;border-radius:clamp(18px,3vw,33px);
  background:var(--surface-elevated);
  border:1px solid var(--hy-gold-line);
  box-shadow:0 20px 55px var(--shadow);
}
.about-portrait__frame::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  pointer-events:none;
}
.about-portrait img{
  display:block;width:100%;height:100%;object-fit:cover;
  object-position:center;image-rendering:auto;
}
.about-portrait figcaption{
  display:flex;align-items:center;gap:8px;
  padding-top:10px;color:var(--muted);
  font-size:clamp(.69rem,.9vw,.81rem);font-weight:650;
  line-height:1.35;letter-spacing:.01em;
}
.about-portrait figcaption::before{
  content:"";width:18px;height:2px;flex:none;background:var(--hy-gold);
}
html.screen-deck.continuous-deck #about .about-intro{font-size:clamp(1.18rem,1.9vw,1.62rem)}
/* Exact one-screen composition where contents fit; long sections stay entirely
   accessible in the ordinary scrolling document without internal scrollbars. */
@media(min-width:1024px){
  html.screen-deck.continuous-deck #top>.mx-auto{
    width:min(100%,1400px)!important;max-width:1400px!important;
    min-height:0!important;
  }
  html.screen-deck.continuous-deck #about>.mx-auto{max-width:1250px!important}
}
@media(min-width:761px) and (max-width:1023px){
  html.screen-deck.continuous-deck #about>.mx-auto{
    grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)!important;
    gap:clamp(19px,3vw,30px)!important;
  }
  .about-portrait{width:min(100%,245px)}
}
@media(max-width:760px){
  html.screen-deck.continuous-deck{
    scroll-snap-type:y proximity!important;
    scroll-padding-top:0!important;
  }
  html.screen-deck.continuous-deck #main{
    width:100%!important;margin:0!important;
    overflow:visible!important;
  }
  html.screen-deck.continuous-deck #main>section[data-app-view],
  html.screen-deck.continuous-deck #main>section[data-app-view]:not([hidden]){
    min-height:100dvh!important;height:auto!important;max-height:none!important;
    padding:clamp(24px,4dvh,40px) 0 calc(120px + env(safe-area-inset-bottom,0px))!important;
    justify-content:center;overflow:visible!important;
  }
  html.screen-deck.continuous-deck #main>section[data-app-view]>.mx-auto{
    width:100%!important;max-height:none!important;
    padding:0 clamp(17px,4.6vw,23px)!important;
    overflow:visible!important;
  }
  html.screen-deck.continuous-deck #about>.mx-auto{
    grid-template-columns:minmax(0,1fr)!important;
    gap:clamp(17px,3dvh,25px)!important;
    align-content:center;
  }
  html.screen-deck.continuous-deck #about .about-heading-panel{
    display:grid;grid-template-columns:minmax(0,1fr) clamp(105px,30vw,142px);
    gap:12px;align-items:center;align-content:center;
  }
  .about-portrait{width:100%;margin:0}
  .about-portrait__frame{border-radius:17px}
  .about-portrait figcaption{font-size:.64rem;line-height:1.25;gap:5px;padding-top:7px}
  .about-portrait figcaption::before{width:10px}
  html.screen-deck.continuous-deck #about .section-heading{font-size:clamp(1.65rem,7vw,2.15rem)!important}
  html.screen-deck.continuous-deck #about .about-intro{font-size:clamp(1rem,4.1vw,1.25rem)!important;line-height:1.48}
  html.screen-deck.continuous-deck #about .about-callout{margin-top:15px}
  html.screen-deck.continuous-deck #about .subtle-pill{font-size:.67rem}
  html.screen-deck.continuous-deck #contact>.mx-auto{gap:clamp(15px,3dvh,27px)!important}
  html.screen-deck.continuous-deck #showcase .orbit-stage{overflow:visible!important}
  html.screen-deck.continuous-deck #projects #project-cases{
    overflow-x:auto!important;overflow-y:visible!important;
    overscroll-behavior-x:contain;scroll-snap-type:x proximity
  }
  html.screen-deck.continuous-deck .screen-switcher{
    bottom:calc(172px + env(safe-area-inset-bottom,0px));
  }
}
@media(max-height:650px) and (min-width:761px){
  html.screen-deck.continuous-deck #main>section[data-app-view]{
    padding:25px 0!important;
  }
}
@media(prefers-reduced-motion:reduce){
  html.screen-deck.continuous-deck{scroll-behavior:auto!important}
  .about-portrait{animation:none!important}
}

/* assets/work-card-fit-v7.css */
/* Work-card layout and responsive content fit v7.
 * The previous one-screen rules allowed project artwork to flex-shrink into
 * the title and imposed max-height:100% on mobile cards. Continuous reading
 * must never crop titles, logos, case studies, or disclosure content. */
html.screen-deck.continuous-deck #projects #project-cases{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(14px,1.65vw,24px)!important;
  width:100%;max-width:100%;min-width:0;
  overflow:visible!important;
  scroll-snap-type:none!important;
  align-items:stretch;
  padding:2px 2px 10px!important;
  margin-top:clamp(15px,2.2dvh,26px)!important;
}
html.screen-deck.continuous-deck #projects .project-card{
  position:relative;
  display:flex!important;flex-direction:column;
  flex:initial!important;
  min-width:0!important;width:100%!important;max-width:100%!important;
  min-height:0!important;height:auto!important;max-height:none!important;
  overflow:hidden;align-self:stretch;
}
html.screen-deck.continuous-deck #projects .project-art{
  position:relative;
  display:flex;flex:0 0 auto!important;
  flex-direction:column;align-items:center;justify-content:center;
  width:100%;min-width:0;max-width:100%;
  height:clamp(135px,13vw,183px)!important;
  min-height:135px!important;max-height:none!important;
  padding:42px 18px 17px;
  overflow:hidden;isolation:isolate;
  border-bottom:1px solid var(--border);
}
html.screen-deck.continuous-deck #projects .project-art-corner{
  position:absolute;z-index:3;
  top:13px;left:16px;right:16px;
  width:auto;max-width:calc(100% - 32px);
  line-height:1.3;font-size:clamp(.57rem,.75vw,.69rem);
  letter-spacing:.08em;
  white-space:normal;overflow-wrap:anywhere;
  pointer-events:none;
}
html.screen-deck.continuous-deck #projects .project-art img{
  display:block;position:relative;z-index:1;
  width:auto!important;height:auto!important;
  max-width:min(76%,290px)!important;
  max-height:77px!important;
  min-width:0;min-height:0;
  flex:0 1 auto;object-fit:contain;
  object-position:center;
  margin:auto!important;transform:none!important;
}
html.screen-deck.continuous-deck #projects .project-art-aspirva img{
  max-width:96px!important;max-height:79px!important;
  border-radius:15px;
}
html.screen-deck.continuous-deck #projects .project-art .studio-logo{
  width:auto!important;
  max-width:min(86%,290px)!important;
  max-height:74px!important;
}
/* Preserve theme-selected SVG: never display both variants at once. */
html.screen-deck.continuous-deck[data-theme="dark"] #projects .studio-logo--light,
html.screen-deck.continuous-deck[data-theme="light"] #projects .studio-logo--dark{display:none!important}
html.screen-deck.continuous-deck[data-theme="dark"] #projects .studio-logo--dark,
html.screen-deck.continuous-deck[data-theme="light"] #projects .studio-logo--light{display:block!important}
html.screen-deck.continuous-deck #projects .project-art-fallback{
  position:relative;z-index:1;flex:none;
  max-width:100%;font-size:clamp(2.4rem,5vw,3.5rem);
  line-height:1;overflow-wrap:anywhere;
}
html.screen-deck.continuous-deck #projects .project-content{
  position:relative;z-index:2;
  display:flex;flex:1 1 auto!important;flex-direction:column;
  min-width:0;max-width:100%;height:auto!important;
  padding:clamp(16px,1.7vw,24px)!important;
  background:var(--surface);
  overflow:visible;
}
html.screen-deck.continuous-deck #projects .project-status{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:7px;min-width:0;overflow-wrap:anywhere;
  font-size:clamp(.62rem,.71vw,.74rem);
  line-height:1.45;
}
html.screen-deck.continuous-deck #projects .project-content h3{
  display:block;position:relative;z-index:3;
  width:100%;max-width:100%;
  margin-top:12px!important;margin-bottom:0!important;
  font-size:clamp(1.13rem,1.65vw,1.55rem)!important;
  line-height:1.26!important;
  overflow-wrap:anywhere;
  white-space:normal;
  background:transparent;
}
html.screen-deck.continuous-deck #projects .project-content>p{
  margin-top:11px;font-size:clamp(.81rem,.9vw,.94rem)!important;
  line-height:1.52!important;overflow-wrap:break-word;
}
html.screen-deck.continuous-deck #projects .project-metric{
  min-width:0;margin-top:clamp(14px,2.3dvh,24px);
  padding:clamp(10px,1vw,15px);
}
html.screen-deck.continuous-deck #projects .project-metric strong{
  font-size:clamp(1.14rem,1.8vw,1.62rem);
  line-height:1.22;overflow-wrap:anywhere;
}
html.screen-deck.continuous-deck #projects .project-metric span,
html.screen-deck.continuous-deck #projects .project-content code{
  overflow-wrap:anywhere;word-break:normal;
}
html.screen-deck.continuous-deck #projects .project-stack{
  flex-wrap:wrap;gap:6px;min-width:0;
}
html.screen-deck.continuous-deck #projects .project-links{
  min-width:0;flex-wrap:wrap;gap:8px;
}
html.screen-deck.continuous-deck #projects .project-live-link{
  min-width:0;max-width:100%;white-space:normal;
  overflow-wrap:anywhere;line-height:1.3;
}
html.screen-deck.continuous-deck #projects .case-expand{
  min-width:0;margin-top:13px;
  max-height:none!important;overflow:visible!important;
}
html.screen-deck.continuous-deck #projects .case-expand[open]{
  overflow:visible!important;max-height:none!important;
}
html.screen-deck.continuous-deck #projects .case-expand summary{
  min-width:0;gap:10px;line-height:1.4;
}
html.screen-deck.continuous-deck #projects .case-steps{
  min-width:0;max-width:100%;overflow:visible!important;
}
html.screen-deck.continuous-deck #projects .case-steps p{
  overflow-wrap:break-word;line-height:1.5;
}
/* An actual 3-column card layout requires enough post-sidebar reading width.
 * The viewport width alone is misleading on "Desktop site" mobile mode. */
@media(max-width:1359px) and (min-width:1024px){
  html.screen-deck.continuous-deck #projects #project-cases{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:1023px) and (min-width:761px){
  html.screen-deck.continuous-deck #projects #project-cases{
    grid-template-columns:minmax(0,1fr)!important;
    max-width:min(100%,640px);
    margin-inline:auto;
  }
  html.screen-deck.continuous-deck #projects .project-art{
    height:clamp(140px,18dvh,175px)!important;
  }
  html.screen-deck.continuous-deck #projects .project-content{
    padding:clamp(18px,3vw,28px)!important;
  }
}
/* Phones: one entire card at a time, stacked in the natural document.
 * This replaces the old horizontal snap rail and max-height:100% clipping. */
@media(max-width:760px){
  html.screen-deck.continuous-deck #projects #project-cases{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%;max-width:min(100%,520px);
    gap:18px!important;
    overflow:visible!important;
    padding:2px 0 10px!important;
    scroll-snap-type:none!important;
    margin-inline:auto!important;
  }
  html.screen-deck.continuous-deck #projects .project-card{
    flex:initial!important;
    width:100%!important;min-width:0!important;
    max-width:100%!important;max-height:none!important;
    height:auto!important;min-height:0!important;
    scroll-snap-align:none!important;
  }
  html.screen-deck.continuous-deck #projects .project-art{
    height:clamp(148px,24dvh,184px)!important;
    min-height:148px!important;
    padding:42px 15px 17px;
  }
  html.screen-deck.continuous-deck #projects .project-art-corner{
    left:17px;right:17px;
    font-size:clamp(.62rem,2.6vw,.72rem);
  }
  html.screen-deck.continuous-deck #projects .project-art img{
    max-height:87px!important;max-width:76%!important;
  }
  html.screen-deck.continuous-deck #projects .project-art-aspirva img{
    max-height:81px!important;max-width:82px!important;
  }
  html.screen-deck.continuous-deck #projects .project-art .studio-logo{
    max-height:76px!important;max-width:86%!important;
  }
  html.screen-deck.continuous-deck #projects .project-content{
    padding:clamp(17px,4.5vw,24px)!important;
  }
  html.screen-deck.continuous-deck #projects .project-content h3{
    font-size:clamp(1.3rem,5.4vw,1.65rem)!important;
  }
  html.screen-deck.continuous-deck #projects .project-content>p{
    font-size:clamp(.83rem,3.5vw,.94rem)!important;
  }
  html.screen-deck.continuous-deck #projects .project-tools{
    display:flex;flex-wrap:wrap;align-items:center;
  }
  html.screen-deck.continuous-deck #projects .case-toggle-all{
    max-width:100%;min-height:44px;white-space:normal;
  }
}
/* Other viewport fit issues: never rely on narrow two-column 10-card grids.
 * The layout can grow taller; scrolling is the documented reading behavior. */
@media(max-width:440px){
  html.screen-deck.continuous-deck #skills .grid,
  html.screen-deck.continuous-deck #approach .method-grid,
  html.screen-deck.continuous-deck #results .results-grid{
    grid-template-columns:minmax(0,1fr)!important;
    max-width:100%!important;
  }
  html.screen-deck.continuous-deck #challenge .visitor-tabs{
    max-width:100%;overscroll-behavior-x:contain;
  }
}
/* The mobile hero tiles used to be a sideways-only list, clipping the
 * remaining content on touch-disabled phones and narrow Android browsers. */
@media(max-width:760px){
  html.screen-deck.continuous-deck #top .home-bento{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    gap:10px!important;align-items:stretch;
    width:100%!important;max-width:100%!important;
    min-width:0!important;margin:0!important;
    padding:0!important;overflow:visible!important;
    scroll-snap-type:none!important;
  }
  html.screen-deck.continuous-deck #top .bento-tile{
    flex:initial!important;
    min-width:0!important;width:100%!important;
    max-width:none!important;min-height:150px!important;
    height:auto!important;overflow:hidden!important;
    padding:14px!important;
  }
  html.screen-deck.continuous-deck #top .bento-tile--projects{
    grid-column:1/-1!important;
    min-height:172px!important;
  }
  html.screen-deck.continuous-deck #top .bento-tile__title,
  html.screen-deck.continuous-deck #top .bento-tile__description,
  html.screen-deck.continuous-deck #top .bento-tile__go{
    overflow-wrap:anywhere;white-space:normal;
  }
}
@media(max-width:365px){
  html.screen-deck.continuous-deck #top .home-bento{
    grid-template-columns:minmax(0,1fr)!important;
  }
  html.screen-deck.continuous-deck #top .bento-tile--projects{
    grid-column:1!important;
  }
}
/* Natural sections grow around large content, including open disclosures.
 * Avoid fixed-height leftovers from the old single-screen deck. */
html.screen-deck.continuous-deck #projects,
html.screen-deck.continuous-deck #skills,
html.screen-deck.continuous-deck #approach,
html.screen-deck.continuous-deck #results{
  height:auto!important;max-height:none!important;
  overflow:visible!important;
}
html.screen-deck.continuous-deck #main :is(.project-card,.skill-card,.method-step,.result-tile){
  min-width:0;
}

/* assets/presentation-fit-v8.css */
/* Presentation Fit v8 — modeled after the Gold Ops OS vertical landing
   structure: one readable chapter summary per viewport, supporting details
   intentionally accessible on demand instead of compressing the typography.
   Expanded chapters may grow taller than the viewport. Nothing gets clipped. */
html.screen-deck.continuous-deck{scroll-snap-type:y proximity!important}
html.screen-deck.continuous-deck #main>section[data-app-view]:not([hidden]){
  min-height:100dvh!important;height:auto!important;max-height:none!important;
  padding:clamp(19px,3.2dvh,38px) 0!important;
  overflow:visible!important;scroll-snap-align:start!important;
}
html.screen-deck.continuous-deck #main>section[data-app-view]>.mx-auto{
  height:auto!important;max-height:none!important;min-height:0!important;
  padding-block:0!important;overflow:visible!important;
  zoom:1!important
}
html.screen-deck.continuous-deck #main>section .section-intro{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,.72fr);
  align-items:center;gap:clamp(9px,2vw,27px);
}
html.screen-deck.continuous-deck .section-heading{
  font-size:clamp(1.65rem,2.7vw,2.72rem)!important;line-height:1.12!important
}
html.screen-deck.continuous-deck #main>section .body-copy{
  font-size:clamp(.84rem,1.02vw,.98rem);line-height:1.46
}
.fit-details{
  width:100%;min-width:0;margin-top:clamp(10px,1.6dvh,17px);
  border:1px solid var(--border-strong);border-radius:13px;
  background:var(--surface);box-shadow:0 7px 24px var(--shadow);
}
.fit-details>summary{
  display:flex;align-items:center;justify-content:space-between;
  min-height:47px;gap:10px;list-style:none;padding:10px 15px;
  cursor:pointer;font-size:clamp(.78rem,1vw,.92rem);
  font-weight:810;line-height:1.4;color:var(--text)
}
.fit-details>summary::-webkit-details-marker{display:none}
.fit-details>summary::after{content:"+";font-size:1.35rem;font-weight:500;color:var(--hy-gold);flex:none}
.fit-details[open]>summary::after{content:"−"}
.fit-details>summary:focus-visible{
  outline:2px solid var(--accent-strong);outline-offset:-3px;border-radius:12px
}
.fit-details__content{padding:2px 13px 16px;min-width:0;overflow:visible}
.fit-details__content>*{margin-top:0!important;max-width:100%}
.fit-details[open]{scroll-margin-top:14px}
.fit-detail-count{color:var(--muted);font-weight:650;font-size:.75rem;margin-left:auto}
.fit-project-tabs{
  width:100%;max-width:100%;display:flex;align-items:stretch;flex-wrap:wrap;
  gap:7px;margin-top:clamp(10px,1.6dvh,17px);
  padding:5px;border:1px solid var(--border);border-radius:13px;
  background:var(--surface-muted)
}
.fit-project-tabs button{
  flex:1 1 135px;min-width:0;min-height:43px;padding:9px 12px;
  text-align:center;cursor:pointer;border:1px solid transparent;
  border-radius:9px;color:var(--muted);background:transparent;
  font-size:clamp(.76rem,.93vw,.87rem);line-height:1.3;font-weight:790;
}
.fit-project-tabs button[aria-selected="true"]{
  background:var(--surface-elevated);border-color:var(--hy-gold);
  color:var(--text);box-shadow:0 3px 13px var(--shadow)
}
.fit-project-tabs button:is(:hover,:focus-visible){outline-offset:2px;border-color:var(--accent-strong)}
html.screen-deck.continuous-deck #projects.fit-projects-ready #project-cases{
  display:flex!important;align-items:stretch;justify-content:center;
  max-width:min(100%,920px);margin:clamp(10px,1.5dvh,17px) auto 0!important;
  gap:0!important;min-width:0;
}
html.screen-deck.continuous-deck #projects.fit-projects-ready #project-cases>.project-card{
  display:none!important;flex:1 1 100%!important;max-width:100%!important;
  width:100%!important;min-width:0!important;overflow:hidden
}
html.screen-deck.continuous-deck #projects.fit-projects-ready #project-cases>.project-card[data-fit-active="true"]{
  display:flex!important
}
html.screen-deck.continuous-deck #projects.fit-projects-ready .project-art{
  height:clamp(100px,15dvh,144px)!important;min-height:100px!important;
  padding:35px 14px 11px
}
html.screen-deck.continuous-deck #projects.fit-projects-ready .project-art img{
  max-height:clamp(54px,9dvh,80px)!important
}
html.screen-deck.continuous-deck #projects.fit-projects-ready .project-content{
  padding:clamp(12px,1.6dvh,18px) clamp(15px,2vw,24px)!important
}
html.screen-deck.continuous-deck #projects.fit-projects-ready .project-content h3{
  margin-top:5px!important;font-size:clamp(1.18rem,1.75vw,1.48rem)!important
}
html.screen-deck.continuous-deck #projects.fit-projects-ready .project-content>p{
  margin-top:6px!important;font-size:clamp(.8rem,.96vw,.92rem)!important;
  line-height:1.4!important
}
html.screen-deck.continuous-deck #projects.fit-projects-ready .project-metric,
html.screen-deck.continuous-deck #projects.fit-projects-ready .project-stack{
  margin-top:7px!important
}
html.screen-deck.continuous-deck #projects.fit-projects-ready .project-metric{
  padding:9px 13px
}
html.screen-deck.continuous-deck #projects.fit-projects-ready .project-links{
  margin-top:7px!important
}
html.screen-deck.continuous-deck #projects.fit-projects-ready .case-expand{
  margin-top:8px
}
html.screen-deck.continuous-deck #projects.fit-projects-ready .project-tools{
  margin-top:7px
}
html.screen-deck.continuous-deck #projects.fit-projects-ready .project-disclaimer{
  margin-top:9px;font-size:.69rem;line-height:1.42
}
html.screen-deck.continuous-deck #challenge .challenge-grid{
  gap:clamp(8px,1vw,14px)!important;margin-top:clamp(9px,1.3dvh,16px)!important
}
html.screen-deck.continuous-deck #challenge .challenge-card{
  padding:clamp(12px,1.4vw,19px)!important
}
html.screen-deck.continuous-deck #results .results-grid{
  margin-top:clamp(11px,1.8dvh,20px)!important
}
html.screen-deck.continuous-deck #skills .grid{
  margin-top:clamp(10px,1.65dvh,18px)!important
}
html.screen-deck.continuous-deck #approach .method-grid{
  margin-top:clamp(11px,1.7dvh,19px)!important
}
html.screen-deck.continuous-deck #experience .experience-timeline{
  margin-top:clamp(12px,1.8dvh,22px)!important
}
html.screen-deck.continuous-deck #main .fit-details .first90,
html.screen-deck.continuous-deck #main .fit-details .kpi-block,
html.screen-deck.continuous-deck #main .fit-details .impact-story,
html.screen-deck.continuous-deck #main .fit-details .visitor-explorer{
  margin:0!important;max-height:none!important;overflow:visible!important
}
html.screen-deck.continuous-deck #main .fit-details .timeline-entry{
  margin:0!important;max-height:none!important
}
html.screen-deck.continuous-deck #contact .contact-form-panel{
  max-height:none!important;overflow:visible!important
}
html.screen-deck.continuous-deck #contact .fit-details .contact-form-panel{
  background:transparent;box-shadow:none;border:0;padding:0!important
}
@media(min-width:1300px){
 html.screen-deck.continuous-deck #projects.fit-projects-ready .project-card[data-fit-active="true"]{
   display:grid!important;grid-template-columns:minmax(180px,.39fr) minmax(0,.61fr);
   align-items:stretch;
 }
 html.screen-deck.continuous-deck #projects.fit-projects-ready .project-art{
   height:100%!important;min-height:245px!important;
   border-bottom:0;border-right:1px solid var(--border);
 }
 html.screen-deck.continuous-deck #projects.fit-projects-ready .project-art img{
   max-height:95px!important;max-width:78%!important
 }
 html.screen-deck.continuous-deck #projects.fit-projects-ready .project-content{
   padding:clamp(16px,1.6vw,24px)!important
 }
}
@media(max-width:760px){
 html.screen-deck.continuous-deck #main>section[data-app-view]:not([hidden]){
   padding:clamp(12px,2.5dvh,24px) 0 calc(84px + env(safe-area-inset-bottom,0px))!important;
   justify-content:flex-start;min-height:100dvh!important
 }
 html.screen-deck.continuous-deck #main>section[data-app-view]>.mx-auto{
   margin:auto 0!important;max-width:100%!important;
   padding-inline:clamp(14px,4vw,20px)!important;
 }
 html.screen-deck.continuous-deck #main>section .section-intro{
   grid-template-columns:1fr;gap:5px
 }
 html.screen-deck.continuous-deck .section-heading{
   font-size:clamp(1.47rem,5.9vw,1.94rem)!important;
   line-height:1.12!important
 }
 html.screen-deck.continuous-deck #main>section .section-intro>p{
   font-size:clamp(.75rem,3.25vw,.84rem)!important;line-height:1.38!important
 }
 .fit-details{margin-top:9px}
 .fit-details>summary{min-height:43px;padding:8px 11px;font-size:.81rem}
 .fit-project-tabs{margin-top:8px;gap:4px;padding:4px}
 .fit-project-tabs button{min-height:40px;flex:1 1 32%;padding:8px 4px;font-size:clamp(.66rem,2.8vw,.79rem)}
 html.screen-deck.continuous-deck #projects.fit-projects-ready #project-cases{
   width:100%;max-width:100%;margin-top:8px!important;overflow:visible!important
 }
 html.screen-deck.continuous-deck #projects.fit-projects-ready .project-card{
   min-width:0!important;max-width:100%!important
 }
 html.screen-deck.continuous-deck #projects.fit-projects-ready .project-art{
   height:clamp(96px,16dvh,127px)!important;min-height:96px!important;
   padding:28px 10px 8px
 }
 html.screen-deck.continuous-deck #projects.fit-projects-ready .project-art-corner{
   top:8px;left:10px;right:10px;font-size:.59rem
 }
 html.screen-deck.continuous-deck #projects.fit-projects-ready .project-art img{
   max-height:clamp(53px,9dvh,74px)!important;
 }
 html.screen-deck.continuous-deck #projects.fit-projects-ready .project-art-aspirva img{
   max-width:clamp(50px,14vw,70px)!important
 }
 html.screen-deck.continuous-deck #projects.fit-projects-ready .project-content{
   padding:10px 13px!important
 }
 html.screen-deck.continuous-deck #projects.fit-projects-ready .project-content h3{
   font-size:clamp(1.05rem,4.5vw,1.28rem)!important
 }
 html.screen-deck.continuous-deck #projects.fit-projects-ready .project-status{
   font-size:.59rem;line-height:1.26
 }
 html.screen-deck.continuous-deck #projects.fit-projects-ready .project-content>p{
   font-size:clamp(.73rem,3.1vw,.82rem)!important;line-height:1.35!important
 }
 html.screen-deck.continuous-deck #projects.fit-projects-ready .project-metric,
 html.screen-deck.continuous-deck #projects.fit-projects-ready .project-stack{
   display:none!important
 }
 html.screen-deck.continuous-deck #projects.fit-projects-ready .project-links{
   margin-top:9px!important
 }
 html.screen-deck.continuous-deck #projects.fit-projects-ready .project-live-link{
   min-height:40px!important
 }
 html.screen-deck.continuous-deck #projects.fit-projects-ready .case-expand{margin-top:7px}
 html.screen-deck.continuous-deck #projects .project-tools{display:none!important}
 html.screen-deck.continuous-deck #projects .project-disclaimer{
   margin-top:8px!important;font-size:.64rem!important;line-height:1.3!important
 }
 html.screen-deck.continuous-deck #skills .grid{
   grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important
 }
 html.screen-deck.continuous-deck #skills .skill-card{
   padding:10px!important;min-width:0
 }
 html.screen-deck.continuous-deck #skills .skill-card h3{
   font-size:clamp(.85rem,3.4vw,1rem)!important;line-height:1.24
 }
 html.screen-deck.continuous-deck #skills .skill-card p{
   font-size:.72rem!important;line-height:1.4
 }
 html.screen-deck.continuous-deck #challenge .challenge-grid{
   display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible!important
 }
 html.screen-deck.continuous-deck #approach .method-grid{
   display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
 }
 html.screen-deck.continuous-deck #experience .experience-timeline{
   margin-top:10px!important
 }
 html.screen-deck.continuous-deck #contact>.mx-auto{
   gap:9px!important
 }
 html.screen-deck.continuous-deck #contact .resume-panel{margin-top:8px!important}
 html.screen-deck.continuous-deck #contact .contact-details{margin-top:10px!important}
 html.screen-deck.continuous-deck #top .home-bento{
   grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important
 }
 html.screen-deck.continuous-deck #top .bento-tile{
   min-height:107px!important;padding:10px!important
 }
 html.screen-deck.continuous-deck #top .bento-tile--projects{
   min-height:138px!important
 }
 html.screen-deck.continuous-deck #top .bento-tile__description{
   font-size:.68rem!important
 }
 html.screen-deck.continuous-deck #top .bento-tile__title{
   font-size:clamp(.89rem,3.6vw,1.1rem)!important
 }
 html.screen-deck.continuous-deck #top .bento-tile__media{
   height:30px!important
 }
 html.screen-deck.continuous-deck #showcase .orbit-stage{
   height:clamp(245px,45dvh,380px)!important
 }
 html.screen-deck.continuous-deck #showcase .orbit-card__visual{
   height:clamp(135px,25dvh,220px)!important
 }
 html.screen-deck.continuous-deck #showcase .orbit-card__description{
   display:none
 }
 html.screen-deck.continuous-deck #showcase .orbit-showcase__head p{
   font-size:.72rem!important
 }
 html.screen-deck.continuous-deck #showcase .orbit-showcase__hint{
   font-size:.58rem!important
 }
}
@media(max-width:430px) and (max-height:660px){
 html.screen-deck.continuous-deck #top .home-bento{display:none!important}
 html.screen-deck.continuous-deck #top .hero-heading{
   font-size:clamp(1.9rem,7.8vw,2.4rem)!important
 }
 html.screen-deck.continuous-deck #showcase .orbit-stage{
   height:clamp(226px,43dvh,288px)!important
 }
 html.screen-deck.continuous-deck #showcase .orbit-card__visual{
   height:clamp(117px,22dvh,160px)!important
 }
 html.screen-deck.continuous-deck #showcase .orbit-card__metric{display:none}
}
@media(prefers-reduced-motion:reduce){
 .fit-project-tabs button,.fit-details>summary{transition:none}
}

/* Presentation v8 finishing rules: keep one project and two skills in a
   readable overview, with remaining evidence in explicit disclosures. */
html.screen-deck.continuous-deck.presentation-fit #projects.fit-projects-ready .project-tools{display:none!important}
html.screen-deck.continuous-deck.presentation-fit #skills>.mx-auto>.grid{
 display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
 max-width:920px;margin-inline:auto;gap:clamp(9px,1.4vw,16px)!important
}
html.screen-deck.continuous-deck.presentation-fit #skills .fit-skills-more{
 max-width:920px;margin-inline:auto
}
html.screen-deck.continuous-deck.presentation-fit #experience .fit-experience-more{
 margin-top:10px
}
@media(min-width:761px){
 .fit-contact-more{display:none!important}
}
@media(max-width:760px){
 html.screen-deck.continuous-deck.presentation-fit #skills>.mx-auto>.grid{
   grid-template-columns:repeat(2,minmax(0,1fr))!important
 }
 html.screen-deck.continuous-deck.presentation-fit #contact>.mx-auto{
   display:grid!important;grid-template-columns:minmax(0,1fr)!important
 }
 html.screen-deck.continuous-deck.presentation-fit #contact .fit-contact-more{
   width:100%;min-width:0;margin-top:9px!important
 }
 html.screen-deck.continuous-deck.presentation-fit #contact .fit-contact-more .contact-form-panel{
   width:100%!important;padding:8px 0!important
 }
 html.screen-deck.continuous-deck.presentation-fit .fit-home-more .home-bento{
   display:grid!important;
   grid-template-columns:minmax(0,1fr)!important;
   width:100%!important;overflow:visible!important
 }
 html.screen-deck.continuous-deck.presentation-fit .fit-home-more .bento-tile{
   min-height:124px!important;grid-column:1!important
 }
 html.screen-deck.continuous-deck.presentation-fit #projects .fit-project-tabs{
   flex-wrap:nowrap!important
 }
}
@media(max-width:430px) and (max-height:660px){
 html.screen-deck.continuous-deck.presentation-fit #top .home-bento{
  display:grid!important
 }
}

/* Detailed project evidence remains visible whenever its disclosure opens. */
html.screen-deck.continuous-deck.presentation-fit #projects .fit-project-more{
  margin:8px 0 0;min-width:0
}
html.screen-deck.continuous-deck.presentation-fit #projects .fit-project-more[hidden],
html.screen-deck.continuous-deck.presentation-fit #top .fit-home-more[hidden]{display:none!important}
html.screen-deck.continuous-deck.presentation-fit #projects .fit-project-more .project-metric{
  display:flex!important;margin:7px 0!important;max-width:100%
}
html.screen-deck.continuous-deck.presentation-fit #projects .fit-project-more .project-stack{
  display:flex!important;margin:7px 0!important;flex-wrap:wrap
}
html.screen-deck.continuous-deck.presentation-fit #projects .fit-project-more .fit-details__content{
  padding:2px 10px 12px
}
@media(max-width:430px) and (max-height:660px){
 html.screen-deck.continuous-deck.presentation-fit #top .fit-home-more{
  grid-column:1/-1!important;grid-row:auto!important;
  max-width:100%;margin:8px 0 0!important
 }
 html.screen-deck.continuous-deck.presentation-fit #top .fit-home-more .home-bento{
  margin:0!important;padding:0!important;
  grid-column:auto!important;grid-row:auto!important
 }
}

/* Short-height phones: a central floating orb can cover the exact tap target
   of the content disclosures. Park it at the right edge above the dock only
   when the usable screen is short; normal phones retain the requested centered
   orbit above Contact. */
@media(max-width:760px) and (max-height:680px){
  html.screen-deck.continuous-deck .mobile-theme-float{
    left:auto!important;right:clamp(9px,3vw,17px)!important;
    transform:none!important;
  }
}

/* assets/resume-focus-v9.css */
/* Résumé-first portfolio v9. One visual project gallery, no duplicate
   logo cards or explanatory page copy. Keep factual summaries readable. */
html.screen-deck.continuous-deck #top .home-bento{
  align-items:stretch;min-width:0;
}
html.screen-deck.continuous-deck #top .home-bento .bento-tile{
  display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(7px,1dvh,11px);
  min-width:0;height:auto!important;max-height:none!important;
}
html.screen-deck.continuous-deck #top .bento-tile--projects{
  min-height:clamp(138px,19dvh,180px)!important
}
html.screen-deck.continuous-deck #top .bento-tile__media{display:none!important}
html.screen-deck.continuous-deck #top .bento-tile__title{
  font-size:clamp(.98rem,1.3vw,1.27rem)!important;
  line-height:1.28!important;
  overflow-wrap:normal;word-break:normal;hyphens:none;
}
html.screen-deck.continuous-deck #top .bento-tile__description{
  font-size:clamp(.74rem,.9vw,.86rem)!important;
  line-height:1.44;overflow-wrap:break-word
}
html.screen-deck.continuous-deck #top .bento-tile__go{
  margin-top:auto;line-height:1.28;overflow-wrap:anywhere;
}
html.screen-deck.continuous-deck #showcase .orbit-showcase__head{
  align-items:end;gap:clamp(12px,2vw,25px);
}
html.screen-deck.continuous-deck #showcase .orbit-showcase__head .body-copy{
  max-width:39ch;line-height:1.42;
}
html.screen-deck.continuous-deck #showcase .orbit-card__info{
  max-width:630px;padding-inline:clamp(14px,2vw,26px)
}
html.screen-deck.continuous-deck #showcase .orbit-card__description{
  line-height:1.45;max-width:52ch;
}
html.screen-deck.continuous-deck #showcase .orbit-card__metric{
  overflow-wrap:break-word;white-space:normal
}
html.screen-deck.continuous-deck #skills>.mx-auto>.grid{
  align-items:stretch;gap:clamp(10px,1.5vw,16px)!important;
}
html.screen-deck.continuous-deck #skills .skill-card{
  min-height:0;height:auto!important;max-height:none!important
}
html.screen-deck.continuous-deck #experience .timeline-entry{
  height:auto!important;max-height:none!important;
}
html.screen-deck.continuous-deck #results .impact-story{
  max-height:none!important;overflow:visible!important;
}
@media(min-width:1024px){
  html.screen-deck.continuous-deck #top .bento-tile--projects{
    min-height:clamp(145px,21dvh,190px)!important
  }
}
@media(max-width:760px){
  html.screen-deck.continuous-deck #top .home-bento{
    gap:10px!important;overflow:visible!important
  }
  html.screen-deck.continuous-deck #top .bento-tile{
    padding:clamp(13px,3.4vw,17px)!important;
    min-height:133px!important;
  }
  html.screen-deck.continuous-deck #top .bento-tile--projects{
    min-height:155px!important
  }
  html.screen-deck.continuous-deck #top .bento-tile__title{
    font-size:clamp(.95rem,3.5vw,1.15rem)!important;
    line-height:1.25!important;
  }
  html.screen-deck.continuous-deck #top .bento-tile__description{
    font-size:clamp(.73rem,2.75vw,.81rem)!important
  }
  html.screen-deck.continuous-deck #showcase .orbit-stage{
    height:clamp(390px,61dvh,480px)!important;
  }
  html.screen-deck.continuous-deck #showcase .orbit-card__visual{
    height:clamp(194px,30dvh,265px)!important;
  }
  html.screen-deck.continuous-deck #showcase .orbit-card__description{
    display:block!important;font-size:clamp(.72rem,2.9vw,.82rem)!important;
    line-height:1.42
  }
  html.screen-deck.continuous-deck #showcase .orbit-card__metric{
    display:flex!important;align-items:center;
    font-size:clamp(.77rem,2.8vw,.96rem)!important;
  }
  html.screen-deck.continuous-deck #showcase .orbit-card__metric small{
    font-size:clamp(.63rem,2.4vw,.73rem)
  }
  html.screen-deck.continuous-deck #showcase .orbit-card__info{
    gap:clamp(8px,1.6dvh,13px);padding:0 10px
  }
  html.screen-deck.continuous-deck #showcase .orbit-card__footer{
    gap:clamp(7px,2vw,14px)
  }
  html.screen-deck.continuous-deck #showcase .orbit-card__action{
    padding:9px 10px;min-height:42px;
    font-size:clamp(.71rem,2.4vw,.81rem)
  }
  html.screen-deck.continuous-deck #skills>.mx-auto>.grid{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  }
  html.screen-deck.continuous-deck #skills .skill-card{
    padding:clamp(14px,3vw,20px)!important
  }
  html.screen-deck.continuous-deck #skills .skill-card h3{
    font-size:clamp(1rem,4vw,1.23rem)!important
  }
  html.screen-deck.continuous-deck #skills .skill-card p{
    font-size:clamp(.81rem,3vw,.94rem)!important;
    line-height:1.5!important
  }
}
@media(max-width:430px) and (max-height:660px){
  html.screen-deck.continuous-deck #showcase .orbit-stage{
    height:clamp(365px,74dvh,435px)!important
  }
  html.screen-deck.continuous-deck #showcase .orbit-card__visual{
    height:clamp(165px,34dvh,213px)!important
  }
  html.screen-deck.continuous-deck #showcase .orbit-card__description,
  html.screen-deck.continuous-deck #showcase .orbit-card__metric{
    display:flex!important
  }
  html.screen-deck.continuous-deck #showcase .orbit-card__description{
    display:block!important;line-height:1.37!important
  }
}

/* Text-only supporting project evidence: no second artwork gallery. */
.resume-project-evidence{
  width:100%;max-width:1050px;margin:clamp(11px,1.9dvh,22px) auto 0;
  border:1px solid var(--border-strong);border-radius:13px;
  background:var(--surface);box-shadow:none;
}
.resume-project-evidence>summary{
  display:flex;align-items:center;justify-content:space-between;
  min-height:46px;padding:11px 16px;gap:15px;
  color:var(--text);font-size:clamp(.8rem,.95vw,.94rem);
  font-weight:800;line-height:1.35;cursor:pointer;list-style:none;
}
.resume-project-evidence>summary::-webkit-details-marker{display:none}
.resume-project-evidence>summary:after{
  content:"+";font-size:1.3rem;line-height:1;color:var(--hy-gold)
}
.resume-project-evidence[open]>summary:after{content:"−"}
.resume-project-evidence>summary:focus-visible{
  outline:2px solid var(--accent-strong);outline-offset:-3px;border-radius:12px
}
.resume-project-evidence__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-top:1px solid var(--border);
}
.resume-project-evidence__grid article{
  min-width:0;padding:clamp(14px,1.7vw,24px);
}
.resume-project-evidence__grid article+article{border-left:1px solid var(--border)}
.resume-project-evidence__grid h3{
  font-size:clamp(1rem,1.2vw,1.18rem);
  font-weight:840;color:var(--text);margin:0 0 10px;line-height:1.25
}
.resume-project-evidence__grid p{
  margin:7px 0 0;color:var(--body);font-size:.85rem;line-height:1.5;
  overflow-wrap:break-word
}
.resume-project-evidence__grid strong{color:var(--text)}
@media(max-width:840px){
  .resume-project-evidence__grid{grid-template-columns:minmax(0,1fr)}
  .resume-project-evidence__grid article+article{
    border-left:0;border-top:1px solid var(--border)
  }
}

/* Résumé reconciliation (Sep 2026): detail stays optional without removing
   Growth OS or long-form evidence from desktop and phone readers. */
.resume-project-evidence__secondary{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.65fr);
  gap:clamp(15px,2.5vw,30px);min-width:0;
  border-top:1px solid var(--border);padding:clamp(15px,2vw,26px);
}
.resume-project-evidence__secondary h3,
.resume-skills-more__grid h3{
  color:var(--text);font-size:clamp(.99rem,1.3vw,1.19rem);
  margin:8px 0;line-height:1.3;
}
.resume-project-evidence__secondary p,
.resume-skills-more__grid p{
  margin:9px 0 0;color:var(--body);font-size:clamp(.81rem,1vw,.9rem);
  line-height:1.55;overflow-wrap:break-word;
}
.resume-project-evidence__secondary strong{color:var(--text)}
.resume-skills-more{
  margin:clamp(14px,2dvh,25px) 0 0;border:1px solid var(--border-strong);
  border-radius:13px;background:var(--surface);overflow:visible;
}
.resume-skills-more>summary{
  display:flex;align-items:center;justify-content:space-between;
  min-height:47px;padding:12px 16px;cursor:pointer;
  color:var(--text);font-weight:800;font-size:clamp(.83rem,1vw,.96rem);
  list-style:none;
}
.resume-skills-more>summary::-webkit-details-marker{display:none}
.resume-skills-more>summary:after{content:"+";font-size:1.3rem;color:var(--hy-gold)}
.resume-skills-more[open]>summary:after{content:"−"}
.resume-skills-more>summary:focus-visible,
.resume-project-evidence__secondary a:focus-visible{
  outline:2px solid var(--accent-strong);outline-offset:3px;
}
.resume-skills-more__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 26px;border-top:1px solid var(--border);
  padding:clamp(14px,2vw,24px);
}
.education-cert{
  margin:clamp(10px,1.3dvh,18px) 0 0;color:var(--text);
  font-size:clamp(.8rem,1vw,.94rem);line-height:1.4;
}
.education-cert small{color:var(--muted);font-weight:500}
@media(max-width:840px){
  .resume-project-evidence__secondary{grid-template-columns:minmax(0,1fr)}
  .resume-skills-more__grid{grid-template-columns:minmax(0,1fr)}
}

/* Reserve a visual gutter for the fixed desktop chapter switcher
   while retaining the existing fixed sidebar and previous/next affordance
   at every desktop width, including desktop-site mode at 761px. */
@media(min-width:761px){
  html.screen-deck.continuous-deck:not(.mobile-app) #main{
    box-sizing:border-box;padding-right:88px!important;
  }
}

/* Keep the numbers' units visible even when inherited visibility from an
   entrance/reveal state affects nested spans on the mobile hero. Omitting
   /mo and % changes the meaning of the documented résumé metrics. */
html.screen-deck.continuous-deck #top .hero-proof .stat-suffix{
  visibility:visible!important;
  opacity:1!important;
  display:inline!important;
}

/* GoHighLevel completion: a full, uncropped certificate with one contextual
   placement per viewport. Respect the existing light/dark design tokens. */
.certificate-proof{
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(17px,2.8vw,34px);align-items:center;
  width:100%;max-width:1030px;margin:clamp(19px,3dvh,35px) auto 0;
  padding:clamp(16px,2.2vw,28px);
  border:1px solid var(--border-strong);border-radius:17px;
  background:var(--surface);box-shadow:0 11px 34px var(--shadow);
  color:var(--text);min-width:0;
}
.certificate-proof--mobile{display:none}
.certificate-proof__preview{
  display:block;width:100%;min-width:0;max-width:340px;justify-self:center;
  text-decoration:none;background:#0b2364;border-radius:10px;
  overflow:hidden;border:1px solid rgba(229,188,109,.55);
  box-shadow:0 12px 34px var(--shadow);line-height:0;
}
.certificate-proof__preview img{
  display:block!important;visibility:visible!important;opacity:1!important;
  width:100%!important;height:auto!important;aspect-ratio:340/427;
  max-width:100%;object-fit:contain!important;object-position:center;
  border-radius:0!important;transform:none!important;
}
.certificate-proof__preview:focus-visible,.certificate-proof__exact-link:focus-visible{
  outline:3px solid var(--accent-strong);outline-offset:4px;
}
.certificate-proof__image-hint{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 12px;color:#fff;line-height:1.35;
  font-size:.8rem;font-weight:750;background:#102f67;
}
.certificate-proof__content{min-width:0}
.certificate-proof h3{
  margin:11px 0 8px;font-size:clamp(1.3rem,2.1vw,1.8rem);
  font-weight:850;line-height:1.2;color:var(--text);
}
.certificate-proof h3 span{color:var(--hy-gold)}
.certificate-proof__content>p{
  color:var(--body);font-size:clamp(.83rem,1vw,.94rem);line-height:1.52;
}
.certificate-proof dl{
  display:grid;gap:8px;margin:18px 0;padding:14px 0;
  border-block:1px solid var(--border);
}
.certificate-proof dl div{display:flex;justify-content:space-between;gap:15px}
.certificate-proof dt{color:var(--muted);font-size:.82rem}
.certificate-proof dd{margin:0;color:var(--text);font-weight:750;text-align:right;font-size:.85rem}
.certificate-proof__link-label{
  display:block;margin-bottom:7px;font-weight:800;color:var(--text);font-size:.83rem;
}
.certificate-proof__exact-link{
  display:block;width:100%;min-width:0;overflow-wrap:anywhere;word-break:break-word;
  color:var(--accent-strong);text-decoration:underline;text-underline-offset:3px;
  font-size:clamp(.75rem,.85vw,.87rem);line-height:1.55;
}
.certificate-proof .certificate-proof__fallback{
  margin:10px 0 0;color:var(--muted);font-size:.75rem;line-height:1.5;
}
@media(min-width:761px) and (max-width:1180px){
  .certificate-proof--desktop{grid-template-columns:minmax(0,1fr);max-width:560px}
  .certificate-proof--desktop .certificate-proof__content{width:100%}
}
@media(max-width:760px){
  html.mobile-app #about>.mx-auto+.certificate-proof--mobile,
  .certificate-proof--mobile{
    display:grid!important;grid-template-columns:minmax(0,1fr);
    width:calc(100% - clamp(30px,8.8vw,48px));max-width:550px;
    margin:clamp(15px,2.6dvh,26px) auto 18px;
    padding:clamp(13px,3.4vw,21px);gap:18px;
  }
  .certificate-proof--desktop{display:none!important}
  .certificate-proof__preview{width:100%;max-width:340px}
  .certificate-proof h3{font-size:clamp(1.3rem,5.7vw,1.72rem)}
  .certificate-proof dl div{flex-wrap:wrap;gap:3px 12px}
  .certificate-proof dd{text-align:left}
}

/* assets/mobile-app-v10.css */
/* Mobile App v10 — phone-only navigation. Desktop's continuous document
   remains unchanged. Only one of the five tab pages is mounted visibly;
   long details scroll INSIDE that tab, never into another tab. */
@media (max-width:760px){
  html.mobile-app,
  html.screen-deck.continuous-deck.mobile-app{
    --mobile-app-dock-bottom:calc(10px + env(safe-area-inset-bottom,0px));
    --mobile-app-dock-height:68px;
    --mobile-app-page-bottom:calc(112px + env(safe-area-inset-bottom,0px));
    width:100%;height:100dvh!important;min-height:0!important;
    overflow:hidden!important;
    scroll-snap-type:none!important;
    overscroll-behavior:none!important;
    scroll-behavior:auto!important;
  }
  html.mobile-app body,
  html.screen-deck.continuous-deck.mobile-app body{
    height:100dvh!important;min-height:0!important;
    width:100%;padding:0!important;margin:0!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }
  html.mobile-app #site-header,
  html.mobile-app .site-footer,
  html.mobile-app .screen-switcher,
  html.mobile-app .portfolio-rail{
    display:none!important
  }
  html.mobile-app #main,
  html.screen-deck.continuous-deck.mobile-app #main{
    position:fixed!important;inset:0 0 var(--mobile-app-page-bottom) 0!important;
    display:block!important;
    width:100%!important;height:auto!important;
    min-height:0!important;max-height:none!important;
    margin:0!important;padding:0!important;
    overflow:hidden!important;
    contain:layout!important;
    overscroll-behavior:none!important;
    scroll-snap-type:none!important;
    isolation:isolate;
  }
  html.mobile-app #main>.mobile-app__page{
    position:absolute;inset:0;
    width:100%;height:100%;min-height:0;max-height:100%;
    padding:10px 0 14px;margin:0;
    overflow-x:hidden;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;overscroll-behavior-x:none;
    scroll-behavior:auto;
    scrollbar-width:none;
    touch-action:pan-y;
    background:transparent;
    contain:layout style;
  }
  html.mobile-app #main>.mobile-app__page::-webkit-scrollbar{display:none}
  html.mobile-app #main>.mobile-app__page[hidden]{display:none!important}
  html.mobile-app #main>.mobile-app__page:not([hidden]){
    display:block!important;
    animation:mobile-app-enter .18s ease-out both;
  }
  /* The old chapter style locked every section to a full screen. Pages now
     contain their own sections and grow naturally within ONE app view. */
  html.mobile-app #main .mobile-app__page>section[data-app-view],
  html.screen-deck.continuous-deck.mobile-app #main .mobile-app__page>section[data-app-view]{
    display:block!important;position:relative;
    min-height:0!important;height:auto!important;max-height:none!important;
    width:100%;margin:0!important;
    padding:clamp(12px,2.3dvh,22px) 0 18px!important;
    overflow:visible!important;
    scroll-snap-align:none!important;scroll-margin:0!important;
    isolation:isolate;
  }
  html.mobile-app #main .mobile-app__page>section[data-app-view][hidden],
  html.mobile-app #main .mobile-app__more section[data-app-view][hidden]{
    display:none!important;
  }
  html.mobile-app #main .mobile-app__page>section[data-app-view]>.mx-auto,
  html.screen-deck.continuous-deck.mobile-app #main .mobile-app__page>section[data-app-view]>.mx-auto,
  html.mobile-app #main .mobile-app__more section[data-app-view]>.mx-auto{
    display:block;position:relative;
    width:100%!important;max-width:100%!important;
    height:auto!important;min-height:0!important;max-height:none!important;
    margin:0!important;
    padding:0 clamp(15px,4.4vw,24px)!important;
    overflow:visible!important;
    zoom:1!important;
  }
  html.mobile-app #main .mobile-app__page>section#top>.mx-auto{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:clamp(12px,2dvh,21px)!important;
  }
  html.mobile-app #main #top .hero-visual{display:none!important}
  html.mobile-app #main .mobile-app__page .section-intro{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:start;gap:6px;
  }
  html.mobile-app #main .mobile-app__page .section-heading{
    font-size:clamp(1.58rem,6.3vw,2.1rem)!important;
    line-height:1.12!important;
  }
  html.mobile-app #main .mobile-app__page .section-intro>p{
    font-size:clamp(.77rem,3.1vw,.9rem)!important;
    line-height:1.45!important;
  }
  /* Showcase stays large, swipeable and zoomable. Very short phones scroll
     only this Work panel, keeping the bottom navigation fixed. */
  html.mobile-app #main #showcase .orbit-showcase__inner{margin-top:28px!important}
  html.mobile-app #main #showcase .orbit-stage{
    --orbit-card-width:min(90vw,405px);
    --side-shift:clamp(120px,51vw,245px);
    height:clamp(344px,51dvh,433px)!important;
    overflow:visible!important;
  }
  html.mobile-app #main #showcase .orbit-card__visual{
    height:clamp(185px,30dvh,254px)!important;
  }
  html.mobile-app #main #showcase .orbit-card__description{
    display:block!important;
    font-size:clamp(.73rem,3vw,.82rem)!important;
    line-height:1.4;
  }
  html.mobile-app #main #showcase .orbit-controls{margin-top:3px!important}
  html.mobile-app #main #showcase .orbit-showcase__hint{margin-top:7px}
  html.mobile-app #main .mobile-app__page .grid,
  html.mobile-app #main .mobile-app__page .method-grid,
  html.mobile-app #main .mobile-app__page .results-grid{
    max-width:100%;min-width:0;
  }
  html.mobile-app #main #skills .grid{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;margin-top:15px!important;
  }
  html.mobile-app #main #skills .skill-card{
    width:100%;min-width:0;min-height:0;height:auto!important;
    max-height:none!important;padding:clamp(13px,3.5vw,17px)!important;
    overflow:visible!important;
  }
  html.mobile-app #main #skills .skill-card p{
    font-size:clamp(.78rem,3vw,.92rem)!important;line-height:1.46!important
  }
  html.mobile-app #main #about>.mx-auto{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    gap:clamp(15px,2.5dvh,24px)!important;
  }
  html.mobile-app #main #about .about-heading-panel{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) clamp(99px,28vw,142px)!important;
    align-items:center;gap:11px;
  }
  html.mobile-app #main #about .about-portrait{width:100%}
  html.mobile-app #main #about .about-intro{
    font-size:clamp(1.05rem,3.9vw,1.27rem)!important;
    line-height:1.43;
  }
  html.mobile-app #main .mobile-app__more{
    display:block;width:calc(100% - clamp(30px,8.8vw,48px));
    max-width:590px;
    margin:12px auto!important;
    border:1px solid var(--border-strong);
    border-radius:14px;
    background:var(--surface);
    overflow:visible;
  }
  html.mobile-app #main .mobile-app__more>summary{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;min-height:51px;padding:13px 15px;
    cursor:pointer;list-style:none;
    color:var(--text);font-weight:800;font-size:.9rem;
    line-height:1.33;
  }
  html.mobile-app #main .mobile-app__more>summary::-webkit-details-marker{display:none}
  html.mobile-app #main .mobile-app__more>summary::after{
    content:"+";font-size:1.35rem;line-height:1;color:var(--hy-gold);
  }
  html.mobile-app #main .mobile-app__more[open]>summary::after{content:"−"}
  html.mobile-app #main .mobile-app__more>summary:focus-visible{
    outline:2px solid var(--accent-strong);outline-offset:-3px;border-radius:13px
  }
  html.mobile-app #main .mobile-app__more>section{
    height:auto!important;min-height:0!important;
    padding:5px 0 20px!important;
    margin:0!important;overflow:visible!important;
  }
  html.mobile-app #main .mobile-app__more .section-heading{
    font-size:clamp(1.38rem,5.6vw,1.85rem)!important
  }
  html.mobile-app #main .mobile-app__more .results-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  html.mobile-app #main .mobile-app__more .results-grid .result-tile{
    padding:clamp(12px,3vw,16px)!important;
    min-width:0;
  }
  html.mobile-app #main .mobile-app__more .experience-timeline,
  html.mobile-app #main .mobile-app__more .impact-story{
    max-height:none!important;overflow:visible!important;
  }
  html.mobile-app #main #contact>.mx-auto{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:16px!important;
  }
  html.mobile-app #main #contact .contact-details{margin-top:11px}
  html.mobile-app #main #contact .resume-panel{margin-top:11px}
  html.mobile-app #main #contact .fit-contact-more{margin-top:13px}
  html.mobile-app #main .fit-details[open]{
    max-height:none!important;overflow:visible!important
  }
  /* The five-action dock is the ONLY way to switch mobile pages. */
  html.mobile-app .mobile-tabs{
    position:fixed!important;
    left:10px!important;right:10px!important;
    bottom:var(--mobile-app-dock-bottom)!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:center;
    width:auto;height:var(--mobile-app-dock-height)!important;
    min-height:var(--mobile-app-dock-height)!important;
    padding:5px 6px!important;gap:3px!important;
    overflow:visible!important;
    isolation:isolate;z-index:510!important;
    border-radius:20px;
  }
  html.mobile-app .mobile-tabs>a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    align-self:center;
    height:54px!important;min-height:54px!important;
    min-width:0;max-width:100%;
    padding:5px 2px!important;margin:0;
    gap:3px;line-height:1.15;
    font-size:clamp(.6rem,2.6vw,.72rem);
    border-radius:13px;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  html.mobile-app .mobile-tabs>a svg{width:20px;height:20px}
  html.mobile-app .mobile-tabs>.mobile-tabs__contact{
    position:relative;
    transform:translateY(-5px)!important;
    background:var(--hy-gold);
    color:#20170b!important;
    z-index:1;
    border-radius:14px;
    box-shadow:0 5px 12px rgba(0,0,0,.16);
  }
  /* Attached half-circle, not a separate round floating orb. */
  html.mobile-app .mobile-tabs>.mobile-theme-float{
    position:absolute!important;
    left:50%!important;right:auto!important;
    top:-31px!important;bottom:auto!important;
    display:block!important;
    width:clamp(49px,16vw,63px)!important;
    height:32px!important;
    padding:0;margin:0;
    transform:translateX(-50%)!important;
    border-radius:999px 999px 0 0!important;
    background:var(--hy-gold)!important;
    pointer-events:auto!important;
    z-index:4!important;
    isolation:isolate;
    filter:drop-shadow(0 -3px 7px rgba(0,0,0,.10));
  }
  html.mobile-app .mobile-tabs>.mobile-theme-float::before{
    content:"";position:absolute;inset:-2px -2px 0;
    border:2px solid transparent;
    border-top-color:var(--accent-strong);
    border-left-color:var(--hy-gold-line);
    border-right-color:var(--hy-gold-line);
    border-bottom:0;
    border-radius:999px 999px 0 0;
    background:none!important;
    -webkit-mask:none!important;mask:none!important;
    animation:mobile-half-arc-glow 3.2s ease-in-out infinite!important;
    pointer-events:none;
  }
  html.mobile-app .mobile-tabs>.mobile-theme-float::after{display:none!important}
  html.mobile-app .mobile-tabs>.mobile-theme-float>.mobile-theme-float__button{
    position:absolute;inset:0;
    display:grid;place-items:center;
    width:100%!important;height:100%!important;
    min-width:0;min-height:0;
    margin:0;padding:2px 0 0;
    border:0!important;
    border-radius:999px 999px 0 0!important;
    background:var(--hy-gold)!important;
    color:#20170b!important;
    box-shadow:none!important;
    transform:none!important;
    outline-offset:3px;pointer-events:auto;
    touch-action:manipulation;
  }
  html.mobile-app .mobile-theme-float__button svg{
    position:absolute!important;
    top:6px;left:50%;transform:translateX(-50%);
    width:19px!important;height:19px!important;
    stroke:#20170b!important;stroke-width:1.9;
  }
  html.mobile-app .mobile-theme-float__button.theme-changed svg{
    animation:mobile-half-theme-pop .35s ease-out both;
  }
  html.mobile-app .mobile-theme-float__button:focus-visible{
    outline:2px solid var(--accent-strong)!important;
  }
  html.mobile-app #main .mobile-app__page [hidden]{display:none!important}
}
@media (max-width:349px){
  html.mobile-app .mobile-tabs{left:5px!important;right:5px!important;padding-inline:3px!important}
  html.mobile-app .mobile-tabs>a{font-size:.6rem;gap:2px}
  html.mobile-app .mobile-tabs>.mobile-theme-float{width:49px!important}
}
@keyframes mobile-app-enter{from{opacity:.93;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes mobile-half-arc-glow{0%,100%{opacity:.48;filter:drop-shadow(0 0 0 transparent)}50%{opacity:1;filter:drop-shadow(0 0 4px var(--accent-strong))}}
@keyframes mobile-half-theme-pop{0%{opacity:.5;scale:.74}70%{opacity:1;scale:1.13}100%{opacity:1;scale:1}}
@media (prefers-reduced-motion:reduce){
  html.mobile-app #main>.mobile-app__page:not([hidden]),
  html.mobile-app .mobile-tabs>.mobile-theme-float::before,
  html.mobile-app .mobile-theme-float__button.theme-changed svg{
    animation:none!important;
  }
}
@media (max-width:760px){
  html.mobile-app-boot #main{visibility:hidden!important}
  html.mobile-app-boot .mobile-tabs,
  html.mobile-app-boot .mobile-theme-float{visibility:hidden!important}
}

/* assets/mobile-dock-v11.css */
/* Mobile dock v11 — separate, smaller rotating blue/yellow theme orbit.
   The circle is centered over Contact but has visible air between controls.
   Dark teal/white contrast fixes light-theme Contact and Appearance labels. */
@media(max-width:760px){
  /* Reserve room so the separate orbit never covers the last line of an app page. */
  html.screen-deck.continuous-deck.mobile-app{
    --mobile-app-page-bottom:calc(156px + env(safe-area-inset-bottom,0px));
  }
  /* The entire Contact destination stays a distinct, high-contrast tap target. */
  html.mobile-app[data-theme="light"] .mobile-tabs>a.mobile-tabs__contact,
  html.mobile-app[data-theme="light"] .mobile-tabs>a.mobile-tabs__contact:is(.is-current,:hover,:focus-visible,[aria-current="page"]){
    background:#0b5260!important;
    border:1px solid #0b5260!important;
    color:#ffffff!important;
    box-shadow:0 5px 14px rgba(8,50,62,.20)!important;
  }
  html.mobile-app[data-theme="dark"] .mobile-tabs>a.mobile-tabs__contact,
  html.mobile-app[data-theme="dark"] .mobile-tabs>a.mobile-tabs__contact:is(.is-current,:hover,:focus-visible,[aria-current="page"]){
    background:#f3c86d!important;
    border:1px solid #e8b954!important;
    color:#1d1a14!important;
  }
  html.mobile-app .mobile-tabs>a.mobile-tabs__contact svg,
  html.mobile-app .mobile-tabs>a.mobile-tabs__contact span{
    color:inherit!important;
    stroke:currentColor!important;
    opacity:1!important;
  }

  /* The old half-cap is replaced by a true 50px floating orbit with a
     14–18px visual gap above the Contact tile. Remain inside the dock's
     positioning context for reliable centering on 320–760px phones. */
  html.mobile-app .mobile-tabs>.mobile-theme-float{
    position:absolute!important;
    left:50%!important;right:auto!important;
    top:-67px!important;bottom:auto!important;
    width:50px!important;height:50px!important;
    margin:0!important;padding:0!important;
    transform:translateX(-50%)!important;
    border:0!important;border-radius:50%!important;
    background:transparent!important;
    box-shadow:none!important;filter:none!important;
    display:grid!important;place-items:center;
    isolation:isolate;overflow:visible!important;
    pointer-events:none!important;z-index:8!important;
  }
  html.mobile-app .mobile-tabs>.mobile-theme-float::before,
  html.mobile-app .mobile-tabs>.mobile-theme-float::after{
    content:"";position:absolute;
    inset:0;border:0!important;border-radius:50%!important;
    pointer-events:none!important;
    display:block!important;
    opacity:1!important;
    box-shadow:none!important;
  }
  html.mobile-app .mobile-tabs>.mobile-theme-float::before{
    background:conic-gradient(
      from -20deg,
      #289eea 0deg 106deg,
      transparent 106deg 133deg,
      #f3bd45 133deg 252deg,
      transparent 252deg 278deg,
      #289eea 278deg 335deg,
      transparent 335deg 360deg
    )!important;
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px))!important;
    mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px))!important;
    animation:portfolio-blue-gold-orbit 7s linear infinite!important;
  }
  html.mobile-app .mobile-tabs>.mobile-theme-float::after{
    inset:5px!important;
    background:conic-gradient(from 38deg,transparent 0deg 110deg,
      #50bafa 110deg 157deg,transparent 157deg 267deg,
      #ffd56d 267deg 313deg,transparent 313deg 360deg)!important;
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px))!important;
    mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px))!important;
    opacity:.8!important;
    animation:portfolio-blue-gold-counterorbit 12s linear infinite!important;
  }
  html.mobile-app .mobile-tabs>.mobile-theme-float>.mobile-theme-float__button{
    position:relative!important;inset:auto!important;
    z-index:2!important;
    display:grid!important;place-items:center!important;
    width:44px!important;height:44px!important;
    min-width:44px!important;min-height:44px!important;
    margin:0!important;padding:0!important;
    border-radius:50%!important;border:1px solid #405e6b!important;
    box-shadow:0 4px 13px rgba(0,0,0,.22)!important;
    transform:none!important;
    appearance:none;background:#152632!important;color:#ffdc80!important;
    pointer-events:auto!important;touch-action:manipulation!important;
    cursor:pointer!important;
    -webkit-tap-highlight-color:transparent;
    transition:background .23s ease,color .23s ease,box-shadow .23s ease!important;
  }
  html.mobile-app[data-theme="light"] .mobile-tabs>.mobile-theme-float>.mobile-theme-float__button{
    background:#ffffff!important;
    color:#123d49!important;
    border:1px solid #6a929c!important;
    box-shadow:0 4px 14px rgba(20,77,90,.16)!important;
  }
  html.mobile-app .mobile-tabs>.mobile-theme-float>.mobile-theme-float__button:is(:hover,:focus-visible){
    outline:2px solid #289eea!important;outline-offset:4px!important;
  }
  html.mobile-app .mobile-tabs>.mobile-theme-float>.mobile-theme-float__button svg{
    display:none;
    position:absolute!important;
    top:50%!important;left:50%!important;
    width:23px!important;height:23px!important;
    transform:translate(-50%,-50%)!important;
    stroke:currentColor!important;stroke-width:1.9!important;
    fill:none!important;opacity:1!important;
  }
  /* In dark mode show a sun (switch to light); in light mode show a
     dark-teal moon (switch to dark). The global icon rules are overridden. */
  html.mobile-app[data-theme="dark"] .mobile-theme-float__button .theme-sun{
    display:block!important;
  }
  html.mobile-app[data-theme="dark"] .mobile-theme-float__button .theme-moon,
  html.mobile-app[data-theme="light"] .mobile-theme-float__button .theme-sun{
    display:none!important;
  }
  html.mobile-app[data-theme="light"] .mobile-theme-float__button .theme-moon{
    display:block!important;
  }
  html.mobile-app .mobile-theme-float__button.theme-changed svg{
    animation:portfolio-theme-pop .38s cubic-bezier(.22,1.7,.42,1) both!important;
  }
}
@keyframes portfolio-blue-gold-orbit{to{transform:rotate(360deg)}}
@keyframes portfolio-blue-gold-counterorbit{to{transform:rotate(-360deg)}}
@keyframes portfolio-theme-pop{
  0%{opacity:.65;scale:.8}66%{opacity:1;scale:1.12}100%{opacity:1;scale:1}
}
/* Keep the sidebar's appearance switch and every Contact CTA readable too. */
html[data-theme="light"] .portfolio-rail__theme{
  background:#fff!important;color:#123d49!important;
  border-color:#7d9da6!important;
}
html[data-theme="light"] .portfolio-rail__theme:is(:hover,:focus-visible){
  color:#0b5260!important;background:#e6f4f6!important;
  border-color:#247d90!important;
}
html[data-theme="light"] .portfolio-rail__theme svg{
  stroke:currentColor!important;opacity:1;
}
@media(prefers-reduced-motion:reduce){
  html.mobile-app .mobile-tabs>.mobile-theme-float::before,
  html.mobile-app .mobile-tabs>.mobile-theme-float::after,
  html.mobile-app .mobile-theme-float__button.theme-changed svg{
    animation:none!important;
  }
}
@media(forced-colors:active){
  html.mobile-app .mobile-tabs>.mobile-theme-float::before,
  html.mobile-app .mobile-tabs>.mobile-theme-float::after{display:none!important}
  html.mobile-app .mobile-tabs>.mobile-theme-float>.mobile-theme-float__button{
    border:2px solid ButtonText!important;forced-color-adjust:auto!important;
  }
  html.mobile-app .mobile-tabs>a.mobile-tabs__contact{
    border:2px solid ButtonText!important;forced-color-adjust:auto!important
  }
}

/* assets/mobile-dock-overlay-v12.css */
/* v12 / The appearance orbit crowns Contact; it does NOT reserve its own page.
   The dock and orbit are a single fixed overlay above the app content. */
@media (max-width:760px){
  html.mobile-app,
  html.screen-deck.continuous-deck.mobile-app {
    /* Just the 68px dock + its 10px viewport offset + a little clearance.
       v11 reserved 156px for the orbit, making an unwanted empty strip. */
    --mobile-app-page-bottom:calc(82px + env(safe-area-inset-bottom,0px))!important;
  }
  html.mobile-app .mobile-tabs {
    position:fixed!important;
    z-index:610!important;
    isolation:isolate;
    overflow:visible!important;
  }
  /* Absolutely positioned INSIDE the fixed dock, so it is not another
     page row, grid column, or independently positioned viewport overlay. */
  html.mobile-app .mobile-tabs>.mobile-theme-float{
    position:absolute!important;
    left:50%!important;right:auto!important;
    top:-47px!important;bottom:auto!important;
    width:50px!important;height:50px!important;
    margin:0!important;padding:0!important;
    transform:translateX(-50%)!important;
    display:grid!important;place-items:center!important;
    z-index:12!important;overflow:visible!important;
    background:transparent!important;
    pointer-events:none!important;
    filter:none!important;
  }
  html.mobile-app .mobile-tabs>.mobile-theme-float>.mobile-theme-float__button{
    position:relative!important;
    width:44px!important;height:44px!important;
    min-width:44px!important;min-height:44px!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }
  /* The bottom of the 50px orbit is 3px INSIDE the dock; its arc
     visibly touches the slightly raised Contact tile rather than hovering
     with the prior 17px disconnected gap. */
  html.mobile-app .mobile-tabs>.mobile-tabs__contact{
    position:relative;z-index:3!important;
    overflow:visible;
  }
  /* The app page continues behind the overlaid orbit. Padding here is
     INSIDE the scrollable page, so the last text can always scroll clear
     of the dock, without an additional blank strip outside the page. */
  html.mobile-app #main>.mobile-app__page,
  html.screen-deck.continuous-deck.mobile-app #main>.mobile-app__page{
    padding-bottom:65px!important;
    scroll-padding-bottom:65px;
  }
}
/* Preserve the earlier small-viewport placement fix only for desktop
   continuous scroll, not for the attached mobile app theme orbit. */
@media(max-width:760px) and (max-height:680px){
  html.screen-deck.continuous-deck.mobile-app .mobile-tabs>.mobile-theme-float{
    left:50%!important;right:auto!important;
    top:-47px!important;bottom:auto!important;
    transform:translateX(-50%)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  html.mobile-app .mobile-tabs>.mobile-theme-float::before,
  html.mobile-app .mobile-tabs>.mobile-theme-float::after{
    animation:none!important;
  }
}

/* assets/client-phase1-v13.css */
/* Client Phase 1: semantic services, stronger desktop/mobile inquiries. */
.portfolio-rail__inquiry{display:flex;align-items:center;justify-content:space-between;min-height:44px;width:100%;padding:10px 12px;border:1px solid var(--primary-bg);border-radius:11px;background:var(--primary-bg);color:var(--primary-on);font-size:.81rem;font-weight:800;text-decoration:none}
.portfolio-rail__inquiry:is(:hover,:focus-visible){background:var(--primary-hover)}
.hero-resume-link{display:inline-flex;align-items:center;min-height:44px;color:var(--accent-strong);font-weight:780;font-size:.81rem;text-decoration:underline;text-underline-offset:3px}
.client-services{background:radial-gradient(circle at 83% 12%,var(--app-soft-glow),transparent 52%),var(--bg);border-top:1px solid var(--hy-gold-line);border-bottom:1px solid var(--hy-gold-line)}
.client-services__intro{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(15px,3vw,40px);align-items:end}
.client-services__intro>.body-copy{font-size:clamp(.84rem,1vw,.95rem);line-height:1.65}
.client-services__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(11px,1.5vw,19px);margin-top:clamp(19px,3dvh,32px)}
.client-service-card{display:flex;flex-direction:column;min-width:0;gap:11px;padding:clamp(16px,2vw,23px);background:var(--surface);color:var(--text);border:1px solid var(--border-strong);border-top:3px solid var(--hy-gold);border-radius:14px;box-shadow:0 12px 28px var(--shadow)}
.client-service-card__number{color:var(--hy-gold);font-size:.72rem;letter-spacing:.075em;font-weight:800}
.client-service-card h3{font-size:clamp(1.1rem,1.48vw,1.45rem);line-height:1.2;font-weight:850}
.client-service-card p,.client-service-card ul{font-size:clamp(.79rem,.95vw,.88rem);line-height:1.53;color:var(--body)}
.client-service-card>strong{color:var(--text);font-size:.81rem;margin-top:5px}
.client-service-card ul{display:grid;gap:6px;padding:0 0 0 18px;list-style:disc}
.client-service-card ul li{list-style:disc}
.client-service-card__evidence{margin-top:auto;padding-top:12px;border-top:1px solid var(--border);font-size:.77rem!important}
.client-service-card__evidence strong{color:var(--text)}
.client-service-card__link{display:flex;align-items:center;justify-content:space-between;min-height:43px;padding:10px 12px;border:1px solid var(--border-strong);border-radius:10px;color:var(--accent-strong);background:var(--surface-elevated);font-weight:850;font-size:.8rem;text-decoration:none}
.client-service-card__link:is(:hover,:focus-visible){background:var(--accent-wash);border-color:var(--accent-strong)}
.client-services__footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:clamp(18px,3dvh,30px);padding-top:16px;border-top:1px solid var(--border)}
.client-services__footer p{color:var(--body);font-size:.85rem;line-height:1.52;max-width:54ch}
.client-services__footer p strong{color:var(--text)}
.client-services__actions{display:flex;gap:10px;flex-wrap:wrap}
.client-services__actions .button{min-height:43px;font-size:.79rem}
.client-contact-paths{display:grid;gap:12px;margin-top:20px}
.client-contact-path{padding:13px 15px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.client-contact-path strong{font-size:.9rem;color:var(--text)}
.client-contact-path p{margin:5px 0;color:var(--body);font-size:.79rem;line-height:1.5}
.client-contact-path a,.client-inquiry-fallback a{display:inline-block;min-height:30px;color:var(--accent-strong);font-weight:780;font-size:.82rem;text-decoration:underline;text-underline-offset:3px}
.client-inquiry-form :is(input,textarea,select){display:block;width:100%;max-width:100%;min-width:0;padding:11px 12px;border:1px solid var(--border-strong);border-radius:9px;background:var(--input-bg);color:var(--text);font-size:.86rem}
.client-inquiry-form select{min-height:45px;appearance:auto}
.client-inquiry-form select:invalid{color:var(--muted)}
.client-inquiry-form select option{background:var(--surface);color:var(--text)}
.client-inquiry-form :is(input,textarea,select):focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px}
.client-inquiry-form label{display:block;margin:0 0 7px;font-size:.82rem;font-weight:780;color:var(--text)}
.client-inquiry-form textarea{min-height:120px;resize:vertical}
.client-inquiry-hint,.client-optional,.client-privacy-note{color:var(--muted);font-size:.76rem;line-height:1.55}
.client-inquiry-hint{display:block;margin-top:8px}
.client-privacy-note{margin-top:9px}
.client-privacy-note a{color:var(--accent-strong);text-decoration:underline}
.client-honeypot{position:absolute!important;left:-9999px!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
.client-inquiry-submit{min-height:46px}
.client-inquiry-fallback{margin:16px 0 0;color:var(--body);font-size:.81rem}
@media(min-width:761px) and (max-width:1150px){.client-services__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.client-service-card:last-child{grid-column:1/-1}.client-services__footer{flex-direction:column;align-items:start}}
@media(max-width:760px){.client-services__intro,.client-services__grid{grid-template-columns:minmax(0,1fr)}.client-services__grid{gap:13px}.client-service-card:last-child{grid-column:auto}.client-service-card{padding:18px}.client-services__footer{flex-direction:column;align-items:stretch}.client-services__actions{flex-direction:column}.client-services__actions .button{width:100%;justify-content:center}.client-inquiry-form .grid{grid-template-columns:minmax(0,1fr)!important}}
@media(forced-colors:active){.client-service-card,.client-service-card__link,.portfolio-rail__inquiry{border:1px solid CanvasText}}

/* assets/client-phase2-v14.css */
/* Phase 2 client proof: dark/light-safe, responsive, no duplicate work gallery. */
.phase2-mobile-id{display:none}
.phase2-home-result{display:flex;align-items:center;gap:12px;max-width:580px;margin-top:16px;padding:12px 14px;border:1px solid var(--hy-gold-line);border-radius:13px;background:var(--hy-gold-wash);color:var(--text);text-decoration:none}
.phase2-home-result>span:first-child{color:var(--hy-gold);font-size:clamp(1.36rem,2.2vw,1.8rem);font-weight:850;letter-spacing:-.04em;white-space:nowrap}
.phase2-home-result>span:nth-child(2){display:grid;gap:3px;min-width:0}
.phase2-home-result strong{font-size:.81rem;color:var(--text)}
.phase2-home-result small{font-size:.72rem;line-height:1.44;color:var(--body)}
.phase2-home-result>span:last-child{margin-left:auto;font-size:1.25rem;color:var(--accent-strong)}
.phase2-home-result:is(:focus-visible,:hover){border-color:var(--hy-gold);background:var(--surface-elevated)}
.phase2-work-link{display:inline-flex;align-items:center;min-height:40px;margin-top:13px;color:var(--accent-strong);font-weight:800;font-size:.85rem;text-decoration:underline;text-underline-offset:3px}
.phase2-evidence{display:grid;gap:22px;max-width:1100px;margin:clamp(30px,5dvh,55px) auto 0;padding-top:clamp(19px,4dvh,38px);border-top:1px solid var(--border);scroll-margin-top:32px}
.phase2-evidence__head{max-width:800px}
.phase2-evidence__head h3{font-size:clamp(1.65rem,2.7vw,2.45rem);line-height:1.15;font-weight:850;letter-spacing:-.04em;margin-top:12px;color:var(--text)}
.phase2-evidence__head p{font-size:.87rem;line-height:1.62;margin-top:10px;color:var(--body)}
.phase2-evidence__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,22px)}
.phase2-case{display:flex;flex-direction:column;gap:12px;min-width:0;padding:clamp(18px,2vw,27px);border:1px solid var(--border-strong);border-top:3px solid var(--hy-gold);border-radius:16px;background:var(--surface);box-shadow:0 13px 32px var(--shadow)}
.phase2-case__top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:9px;color:var(--hy-gold);font-size:.68rem;font-weight:850;letter-spacing:.04em}
.phase2-case__top small{color:var(--body);font-size:.68rem;letter-spacing:0;border:1px solid var(--border);border-radius:999px;background:var(--surface-elevated);padding:5px 8px}
.phase2-case h4{color:var(--text);font-size:clamp(1.11rem,1.7vw,1.43rem);line-height:1.22;font-weight:850;letter-spacing:-.025em}
.phase2-case__context{color:var(--muted);font-size:.77rem;line-height:1.4}
.phase2-case__impact{display:flex;align-items:center;gap:12px;padding:12px;background:var(--hy-gold-wash);border:1px solid var(--hy-gold-line);border-radius:11px}
.phase2-case__impact strong{font-size:clamp(1.45rem,2.6vw,1.95rem);white-space:nowrap;color:var(--hy-gold);font-weight:850;letter-spacing:-.04em}
.phase2-case__impact span{font-size:.76rem;line-height:1.4;color:var(--body)}
.phase2-case dl{display:grid;gap:12px}
.phase2-case dl>div{border-bottom:1px solid var(--border);padding-bottom:10px}
.phase2-case dl>div:last-child{border:0;padding-bottom:0}
.phase2-case dt{font-size:.79rem;color:var(--text);font-weight:830;margin-bottom:4px}
.phase2-case dd{margin:0;color:var(--body);font-size:.78rem;line-height:1.58}
.phase2-case__limit{margin-top:auto;padding:11px 12px;background:var(--surface-muted);border-radius:9px;font-size:.74rem;line-height:1.55;color:var(--muted)}
.phase2-case__limit strong{color:var(--text)}
.phase2-case__cta{display:flex;align-items:center;min-height:44px;padding:11px 12px;border:1px solid var(--border-strong);border-radius:9px;background:var(--surface-elevated);color:var(--accent-strong);font-size:.8rem;font-weight:810;text-decoration:none}
.phase2-case__cta:is(:focus-visible,:hover){border-color:var(--accent-strong);background:var(--accent-wash)}
.phase2-demo{min-width:0;border:1px solid var(--border-strong);border-radius:16px;background:var(--surface);overflow:hidden;scroll-margin-top:25px}
.phase2-demo>header{padding:clamp(15px,2vw,25px);border-bottom:1px solid var(--border)}
.phase2-demo>header h4{font-size:clamp(1.25rem,2vw,1.8rem);color:var(--text);font-weight:850;margin-top:9px}
.phase2-demo>header p{color:var(--body);font-size:.8rem;line-height:1.55;margin-top:7px}
.phase2-demo__projects{display:flex;gap:8px;flex-wrap:wrap;padding:13px clamp(15px,2vw,25px);border-bottom:1px solid var(--border);background:var(--surface-muted)}
.phase2-demo__projects button,.phase2-demo__steps button{display:grid;gap:3px;min-height:44px;padding:9px 12px;border:1px solid var(--border-strong);border-radius:9px;background:var(--surface);color:var(--body);font-family:inherit;font-weight:800;font-size:.8rem;cursor:pointer}
.phase2-demo__projects small{font-size:.69rem;font-weight:600}
.phase2-demo button[aria-pressed="true"]{background:var(--accent-wash);border-color:var(--accent-strong);color:var(--accent-strong)}
.phase2-demo button:is(:focus-visible,:hover){border-color:var(--accent-strong)}
.phase2-demo__grid{display:grid;grid-template-columns:minmax(0,1.07fr) minmax(270px,.93fr)}
.phase2-demo figure{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:10px;margin:0;padding:clamp(13px,2vw,24px);background:var(--surface-muted);border-right:1px solid var(--border)}
.phase2-demo figure img{display:block;width:100%;height:auto;aspect-ratio:2720/1510;object-fit:contain;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.phase2-demo figcaption{font-size:.73rem;line-height:1.4;color:var(--body)}
.phase2-demo figure a{width:fit-content;min-height:30px;color:var(--accent-strong);text-decoration:underline;text-underline-offset:3px;font-size:.79rem;font-weight:750}
.phase2-demo__content{display:flex;flex-direction:column;gap:18px;min-width:0;padding:clamp(16px,2vw,24px)}
.phase2-demo__steps{display:flex;gap:6px;flex-wrap:wrap}
.phase2-demo__steps button{font-size:.7rem;padding:8px 10px}
.phase2-demo__copy{display:grid;align-content:start;gap:10px;min-height:160px}
#phase2-demo-status{font-size:.7rem;letter-spacing:.06em;font-weight:840;color:var(--hy-gold)}
#phase2-demo-heading{font-size:clamp(1.1rem,1.5vw,1.4rem);font-weight:850;line-height:1.3;color:var(--text)}
#phase2-demo-copy{font-size:.82rem;line-height:1.6;color:var(--body)}
.phase2-demo__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto}
#phase2-demo-next{min-height:44px;padding:10px 13px;border:1px solid var(--hy-gold);border-radius:9px;color:var(--text);background:var(--hy-gold-wash);font-weight:800;font-size:.79rem;cursor:pointer}
.phase2-demo__actions a{color:var(--accent-strong);font-size:.8rem;font-weight:800;text-decoration:underline;text-underline-offset:3px}
@media(max-width:1030px){.phase2-demo__grid{grid-template-columns:minmax(0,1fr)}.phase2-demo figure{border-right:0;border-bottom:1px solid var(--border)}}
@media(max-width:760px){
 .phase2-mobile-id{display:flex;align-items:center;gap:10px;padding:8px 10px;min-width:0;margin-bottom:11px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);text-decoration:none}
 .phase2-mobile-id img{flex:none;width:42px;height:42px;object-fit:cover;border:1px solid var(--hy-gold-line);border-radius:50%}
 .phase2-mobile-id>span:nth-child(2){display:grid;gap:3px;min-width:0}
 .phase2-mobile-id strong{font-size:.81rem;color:var(--text)}
 .phase2-mobile-id small{font-size:.69rem;line-height:1.4;color:var(--body)}
 .phase2-mobile-id>span:last-child{flex:none;margin-left:auto;color:var(--accent-strong)}
 .phase2-home-result{gap:9px;padding:10px 12px;margin-top:12px}
 .phase2-home-result>span:first-child{font-size:clamp(1.25rem,6vw,1.6rem)}
 .phase2-home-result small{font-size:.68rem}
 .phase2-evidence{padding-top:18px;margin-top:28px;gap:17px}
 .phase2-evidence__grid{grid-template-columns:minmax(0,1fr);gap:13px}
 .phase2-case{padding:17px}
 .phase2-demo__projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:11px}
 .phase2-demo__projects button{min-width:0;line-height:1.25;font-size:.7rem;padding:8px}
 .phase2-demo__projects small{font-size:.61rem}
 .phase2-demo__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 .phase2-demo__steps button{min-width:0;padding:8px 6px;font-size:.67rem}
 .phase2-demo figure,.phase2-demo__content{padding:13px}
 .phase2-demo__copy{min-height:0}
}
@media(max-width:350px){.phase2-home-result{flex-wrap:wrap}.phase2-demo__projects button{font-size:.66rem}}
@media(prefers-reduced-motion:reduce){.phase2-demo button{transition:none}}

/* assets/client-phase3-v15.css */
/* Phase 3: owner-video-ready introduction, unmuted whenever playback is allowed. */
.phase3-intro{display:grid;gap:8px;width:min(100%,450px);min-width:0;margin:0 0 clamp(12px,1.6dvh,20px);color:var(--text)}
.phase3-intro__header{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--hy-gold);font-size:.65rem;font-weight:850;letter-spacing:.07em}
.phase3-intro__header span:last-child{color:var(--muted);font-variant-numeric:tabular-nums}
.phase3-intro__stage{position:relative;isolation:isolate;display:grid;place-items:center;aspect-ratio:16/9;min-width:0;overflow:hidden;border:1px solid var(--hy-gold-line);border-radius:13px;background:#101f36;box-shadow:0 14px 34px var(--shadow)}
.phase3-intro__stage>img,.phase3-intro__stage>video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.phase3-intro__stage>video{visibility:hidden;z-index:1;object-fit:contain;background:#081322}
.phase3-intro[data-intro-state="ready"] video,.phase3-intro[data-intro-state="playing"] video,.phase3-intro[data-intro-state="blocked"] video,.phase3-intro[data-intro-state="ended"] video{visibility:visible}
.phase3-intro__overlay{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,1.4dvh,13px);width:100%;height:100%;padding:15px;text-align:center;color:#fff;background:linear-gradient(180deg,rgba(3,13,28,.08),rgba(3,13,28,.5))}
.phase3-intro[data-intro-state="playing"] .phase3-intro__overlay{display:none}
.phase3-intro__overlay>span{font-size:.59rem;font-weight:840;letter-spacing:.09em;color:#f1d9ac}
.phase3-intro__overlay h2{font-size:clamp(1.23rem,2.2vw,2rem);line-height:1.19;font-weight:850;color:#fff;text-shadow:0 2px 9px #071426}
.phase3-intro__overlay p{font-size:clamp(.72rem,.95vw,.86rem);line-height:1.48;max-width:40ch;color:#f2f6fc;text-shadow:0 1px 5px #061526}
#phase3-intro-play{min-height:46px;padding:10px 15px;border:1px solid #f1d9ac;border-radius:10px;background:#e5bc6d;color:#18140e;font-family:inherit;font-size:.83rem;font-weight:850;cursor:pointer}
#phase3-intro-play:is(:hover,:focus-visible){background:#ffe7bc}
.phase3-intro__sound{position:absolute;z-index:2;top:11px;right:11px;border:1px solid #e5bc6d;border-radius:7px;padding:6px 9px;background:rgba(4,14,29,.85);color:#f1d9ac;font-size:.65rem;font-weight:800}
.phase3-intro__footer{display:flex;justify-content:space-between;align-items:center;gap:10px}
.phase3-intro__footer p{font-size:.7rem;line-height:1.43;color:var(--body)}
.phase3-intro__footer button{min-height:37px;padding:8px 11px;white-space:nowrap;border:1px solid var(--border-strong);border-radius:9px;background:var(--surface);color:var(--accent-strong);font-weight:800;font-size:.73rem;cursor:pointer}
.phase3-intro [hidden]{display:none!important}
@media(min-width:761px){
 html.screen-deck.continuous-deck #top .phase3-intro{width:min(100%,450px)}
 html.screen-deck.continuous-deck #top .hero-heading{font-size:clamp(2rem,3.3vw,3.45rem)!important}
 html.screen-deck.continuous-deck #top .body-lead{font-size:clamp(.83rem,1.05vw,.98rem)!important}
 html.screen-deck.continuous-deck #top .hero-proof{margin-top:clamp(12px,1.6dvh,24px)!important}
}
@media(max-width:760px){
 html.mobile-app #top .phase3-intro{width:100%;max-width:460px;margin:1px 0 13px}
 .phase3-intro__overlay{padding:11px;gap:7px}
 .phase3-intro__overlay h2{font-size:clamp(1.22rem,5.2vw,1.65rem)}
 .phase3-intro__overlay p{font-size:clamp(.7rem,2.85vw,.8rem)}
}
@media(max-width:350px){.phase3-intro__overlay{gap:5px}.phase3-intro__overlay>span{font-size:.53rem}.phase3-intro__footer p{font-size:.65rem}}

/* Phase 3 visual QA: prevent wrapping on narrow 320px Android screens. */
@media(max-width:350px){.phase3-intro__header{gap:4px;font-size:.59rem;letter-spacing:.03em}.phase3-intro__header span:last-child{white-space:nowrap}.phase3-intro__overlay h2{font-size:1.19rem;line-height:1.17}.phase3-intro__overlay p{font-size:.69rem;line-height:1.38}}

/* assets/client-polish-v16.css */
/* Visual & copy polish — late CSS, no introduction video JS changes. */
.phase3-intro__overlay .phase3-intro__title{
  margin:0;color:#fff;font-size:clamp(1.23rem,2.2vw,2rem);
  line-height:1.19;font-weight:850;letter-spacing:-.022em;
  text-shadow:0 2px 9px #071426;
}
@media(max-width:760px){
  /* The ring and five existing tabs share ONE fixed dock. The page ends
     ABOVE the ring; interactive content can no longer pass behind it. */
  html.mobile-app,
  html.screen-deck.continuous-deck.mobile-app{
    --mobile-app-page-bottom:calc(122px + env(safe-area-inset-bottom,0px))!important;
  }
  html.mobile-app .mobile-tabs{
    box-sizing:border-box!important;
    height:112px!important;min-height:112px!important;max-height:112px!important;
    padding:50px 4px 5px!important;
    align-items:end!important;
    background:var(--app-tab-bg)!important;
    box-shadow:0 13px 39px rgba(0,0,0,.22)!important;
  }
  html.mobile-app .mobile-tabs>a{
    align-self:end!important;height:54px!important;min-height:54px!important;
  }
  html.mobile-app .mobile-tabs>.mobile-theme-float,
  html.screen-deck.continuous-deck.mobile-app .mobile-tabs>.mobile-theme-float{
    top:1px!important;left:50%!important;right:auto!important;
    bottom:auto!important;transform:translateX(-50%)!important;
  }
  html.mobile-app .mobile-tabs>.mobile-tabs__contact{
    transform:translateY(-5px)!important;
  }
  html.mobile-app .mobile-tabs::before{
    content:"APPEARANCE";position:absolute;top:16px;left:calc(50% - 135px);
    font-size:.62rem;font-weight:850;letter-spacing:.10em;color:var(--muted);
    pointer-events:none;
  }
  html.mobile-app .mobile-tabs::after{
    content:"";position:absolute;top:25px;left:calc(50% + 43px);
    width:76px;height:1px;background:var(--hy-gold-line);pointer-events:none;
  }
  html.mobile-app #main>.mobile-app__page{scroll-padding-bottom:70px;}
  html.mobile-app #top .phase3-intro__title{
    font-size:clamp(1.23rem,5.2vw,1.64rem);
  }
}
@media(max-width:350px) and (max-height:690px){
  /* The video remains exactly 16:9 at every size and retains sound-on
     autoplay; a narrower player makes the main headline visible sooner. */
  html.mobile-app #top .phase3-intro{
    width:min(100%,258px)!important;max-width:258px!important;
    margin:0 auto 8px!important;gap:5px!important;
  }
  html.mobile-app #top .phase3-intro__footer p{font-size:.64rem;line-height:1.33;}
  html.mobile-app #top .phase2-mobile-id{margin-bottom:7px;padding-block:6px;}
  html.mobile-app #top .hero-heading{
    font-size:clamp(1.85rem,7.4vw,2.13rem)!important;
    line-height:1.09!important;overflow-wrap:normal;
  }
  html.mobile-app #top .body-lead{font-size:.81rem!important}
  html.mobile-app .mobile-tabs::before{left:calc(50% - 116px);font-size:.56rem}
  html.mobile-app .mobile-tabs::after{width:60px}
}
@media(prefers-reduced-motion:reduce){
  html.mobile-app .mobile-tabs>.mobile-theme-float::before,
  html.mobile-app .mobile-tabs>.mobile-theme-float::after{
    animation:none!important;
  }
}

/* Small-screen first fold: eliminate the duplicate placeholder status only
   while no recording exists. Status stays in the accessibility tree and real
   ready/playing/ended video controls are unaffected. */
@media(max-width:760px){
  html.mobile-app #top .phase3-intro[data-intro-state="placeholder"] .phase3-intro__footer{
    position:absolute!important;width:1px!important;height:1px!important;
    margin:-1px!important;padding:0!important;border:0!important;
    overflow:hidden!important;clip:rect(0,0,0,0)!important;
    clip-path:inset(50%)!important;white-space:nowrap!important;
  }
  html.mobile-app #top .mt-9.flex.flex-wrap.items-center.gap-3{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:center!important;gap:8px!important;
  }
  html.mobile-app #top .mt-9.flex.flex-wrap.items-center.gap-3>a.button{
    display:inline-flex;align-items:center;justify-content:center;
    width:100%!important;min-width:0!important;min-height:44px;
    padding:10px 6px!important;font-size:clamp(.71rem,3vw,.81rem)!important;
    white-space:nowrap;text-align:center;
  }
  html.mobile-app #top .mt-9.flex.flex-wrap.items-center.gap-3>.hero-resume-link{
    grid-column:1/-1;justify-self:start;min-height:40px;
  }
}

/* assets/mobile-dock-compact-v17.css */
/* v17: compact Android-inspired five-tab nav, restoring the v12 look.
   The raised ring stays above Contact but no longer blocks page content. */
@media(max-width:760px){
 html.mobile-app,html.screen-deck.continuous-deck.mobile-app{
   --mobile-app-dock-height:72px!important;
   --mobile-app-page-bottom:calc(129px + env(safe-area-inset-bottom,0px))!important;
 }
 html.mobile-app .mobile-tabs,html.screen-deck.continuous-deck.mobile-app .mobile-tabs{
   box-sizing:border-box!important;
   height:72px!important;min-height:72px!important;max-height:72px!important;
   padding:5px 4px!important;align-items:center!important;
   border:1px solid var(--border-strong)!important;
   border-radius:20px!important;background:var(--app-tab-bg)!important;
   box-shadow:0 9px 30px rgba(0,0,0,.22)!important;
   overflow:visible!important;isolation:isolate;
 }
 html.mobile-app .mobile-tabs::before,html.mobile-app .mobile-tabs::after{
   content:none!important;display:none!important;
 }
 html.mobile-app .mobile-tabs>a[data-app-tab]{
   height:54px!important;min-height:54px!important;align-self:center!important;
   justify-content:center!important;gap:3px!important;
   border-radius:13px!important;padding:4px 2px!important;
 }
 html.mobile-app .mobile-tabs>a[data-app-tab] svg{width:21px;height:21px;flex-shrink:0}
 html.mobile-app .mobile-tabs>.mobile-tabs__contact{
   transform:translateY(-5px)!important;border-radius:14px!important;
   box-shadow:0 6px 15px rgba(0,0,0,.15)!important;
 }
 html.mobile-app .mobile-tabs>.mobile-theme-float,
 html.screen-deck.continuous-deck.mobile-app .mobile-tabs>.mobile-theme-float{
   position:absolute!important;top:-42px!important;bottom:auto!important;
   left:50%!important;right:auto!important;
   width:50px!important;height:50px!important;
   transform:translateX(-50%)!important;margin:0!important;padding:0!important;
   display:grid!important;place-items:center!important;z-index:12!important;
   background:transparent!important;pointer-events:none!important;
 }
 html.mobile-app .mobile-tabs>.mobile-theme-float>.mobile-theme-float__button{
   width:44px!important;height:44px!important;
   min-width:44px!important;min-height:44px!important;pointer-events:auto!important;
 }
 html.mobile-app #main>.mobile-app__page{
   padding-bottom:65px!important;scroll-padding-bottom:65px!important;
 }
}
@media(max-width:760px) and (max-height:680px){
 html.mobile-app .mobile-tabs>.mobile-theme-float,
 html.screen-deck.continuous-deck.mobile-app .mobile-tabs>.mobile-theme-float{top:-42px!important}
}
@media(prefers-reduced-motion:reduce){
 html.mobile-app .mobile-tabs>.mobile-theme-float::before,
 html.mobile-app .mobile-tabs>.mobile-theme-float::after{animation:none!important}
}

/* assets/action-buttons-v18.css */
/* v18 — consistent action buttons + real social icon controls. */
.ui-action{--ui-action-bg:var(--surface);--ui-action-border:var(--border-strong);--ui-action-fg:var(--text);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;max-width:100%;padding:10px 14px;border:1px solid var(--ui-action-border);border-radius:10px;background:var(--ui-action-bg);color:var(--ui-action-fg)!important;font:inherit;font-size:.8rem;font-weight:800;line-height:1.2;text-decoration:none!important;box-shadow:none;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}
.ui-action .ui-icon,.ui-social-button .ui-icon{width:18px;height:18px;flex:none}.ui-action .ui-icon--arrow{width:17px;height:17px}
.ui-action--primary{--ui-action-bg:var(--primary-bg);--ui-action-border:var(--primary-bg);--ui-action-fg:var(--primary-on);box-shadow:0 8px 22px var(--hy-gold-wash)}
.ui-action--secondary{--ui-action-bg:var(--surface-elevated);--ui-action-border:var(--border-strong);--ui-action-fg:var(--accent-strong)}
.ui-action--ghost{--ui-action-bg:transparent;--ui-action-border:var(--border-strong);--ui-action-fg:var(--accent-strong)}
.ui-action--compact{min-height:40px;padding:8px 11px;font-size:.76rem}.ui-action--micro{min-height:34px;padding:6px 9px;border-radius:8px;font-size:.7rem;vertical-align:middle}
.ui-action--rail{width:100%;justify-content:space-between}.ui-action--url{justify-content:space-between;width:100%;overflow:hidden;text-align:left}.ui-action__url{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.ui-action:is(:hover,:focus-visible){border-color:var(--accent-strong);transform:translateY(-1px);box-shadow:0 8px 20px var(--shadow)}.ui-action--primary:is(:hover,:focus-visible){background:var(--primary-hover);border-color:var(--primary-hover)}
.ui-action:focus-visible,.ui-social-button:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px}
.ui-social-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ui-social-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:9px;border:1px solid var(--border-strong);border-radius:12px;background:var(--surface-elevated);color:var(--text)!important;text-decoration:none!important;box-shadow:none;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}
.ui-social-button--icon{width:44px;height:44px;padding:0;border-radius:50%}.ui-social-button--icon .ui-icon{width:20px;height:20px}.ui-social-button--labeled{padding:9px 12px;font-size:.79rem;font-weight:800}
.ui-social-button:is(:hover,:focus-visible){transform:translateY(-1px);border-color:var(--accent-strong);background:var(--accent-wash);box-shadow:0 8px 20px var(--shadow)}
.ui-contact-socials{display:flex;flex-wrap:wrap;gap:9px}.ui-contact-email{margin-top:10px;color:var(--muted);font-size:.76rem;overflow-wrap:anywhere}
.portfolio-rail__socials.ui-social-row{justify-content:center;margin-inline:auto}.portfolio-rail__socials.ui-social-row a{width:38px;height:38px;min-width:38px;min-height:38px;padding:0!important}.portfolio-rail__bottom .ui-action{font-size:.74rem}
.hero-resume-link.ui-action{padding:10px 13px;border-bottom:1px solid var(--border-strong)!important}.portrait-story-link.ui-action{margin-left:auto}.client-service-card__link.ui-action{margin-top:auto;width:100%;justify-content:space-between}
.phase2-work-link.ui-action{margin-top:13px;text-decoration:none}.orbit-card__action.ui-action{white-space:nowrap}.phase2-case__cta.ui-action{justify-content:space-between}.phase2-demo figure a.ui-action{width:max-content;max-width:100%;text-decoration:none}.phase2-demo__actions a.ui-action{min-height:40px;text-decoration:none}
.certificate-proof__exact-link.ui-action{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.68rem}.resume-panel .resume-icon-link.ui-action{width:auto;height:auto;border-radius:10px;padding:9px 12px}.client-privacy-note .ui-action,.client-inquiry-fallback .ui-action{margin-inline:4px}.site-footer .ui-action{flex:none}
@media(max-width:760px){.ui-action{min-height:44px}.ui-action--micro{min-height:38px}.ui-contact-socials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.ui-social-button--labeled{min-width:0;width:100%;padding-inline:7px;font-size:.72rem}.ui-social-button--labeled .ui-icon{width:17px;height:17px}.phase2-work-link.ui-action,.phase2-case__cta.ui-action,.phase2-demo__actions .ui-action,.client-contact-path .ui-action{width:100%}.resume-panel .resume-icon-link.ui-action{width:100%;margin-top:10px}.client-inquiry-fallback .ui-action{margin-top:8px;margin-inline:0}.client-privacy-note .ui-action{margin-top:7px;margin-inline:0}.certificate-proof__exact-link.ui-action{font-size:.63rem}}
@media(max-width:350px){.ui-social-button--labeled{font-size:0;gap:0}.ui-social-button--labeled .ui-icon{width:19px;height:19px}.ui-social-button--labeled{min-height:44px}}
@media(prefers-reduced-motion:reduce){.ui-action,.ui-social-button{transition:none}.ui-action:is(:hover,:focus-visible),.ui-social-button:is(:hover,:focus-visible){transform:none}}

/* Resolve legacy gold project-CTA background against the new secondary
   button foreground in the light palette. Use a single high-contrast teal
   treatment for project-site and HD-image actions. */
html[data-theme="light"] .orbit-card__action.ui-action,
html[data-theme="light"] .orbit-preview-dialog__actions a.ui-action{
  --ui-action-bg:#0b5260;--ui-action-border:#0b5260;--ui-action-fg:#ffffff;
  background:#0b5260!important;border-color:#0b5260!important;color:#ffffff!important;
}
html[data-theme="light"] .orbit-card__action.ui-action span,
html[data-theme="light"] .orbit-preview-dialog__actions a.ui-action span{
  color:inherit!important;
}
html[data-theme="light"] .orbit-card__action.ui-action:is(:hover,:focus-visible),
html[data-theme="light"] .orbit-preview-dialog__actions a.ui-action:is(:hover,:focus-visible){
  background:#083f4a!important;border-color:#083f4a!important;color:#ffffff!important;
}

/* assets/contact-polish-v19.css */
/* v19 — screenshot-driven cleanup of the lower mobile contact form. */
#contact-form>.client-inquiry-submit{margin-bottom:0!important}
#contact-form>.form-status{min-height:0!important;margin:8px 0 0!important}
#contact-form>.form-status:empty{display:none!important}
.client-privacy-block{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;
  margin:14px 0 0!important;padding:13px 0 0;border-top:1px solid var(--border);
}
.client-privacy-block .client-privacy-note{margin:0!important;max-width:62ch}
.client-privacy-block .ui-action{margin:0!important;white-space:nowrap}
.contact-utility-panel{
  display:grid;gap:12px;margin-top:14px;padding:14px;
  border:1px solid var(--border);border-radius:14px;
  background:var(--surface-muted);
}
.contact-utility-panel__top{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.contact-utility-panel__top>div{display:grid;gap:3px;min-width:0}
.contact-utility-panel__top strong{color:var(--text);font-size:.83rem}
.contact-utility-panel__top span{color:var(--body);font-size:.73rem;line-height:1.4}
.contact-utility-panel__top>a{flex:none}
.contact-copy-actions{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  padding-top:12px;border-top:1px solid var(--border);
}
.contact-copy-button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:43px;padding:9px 11px;
  border:1px solid var(--border-strong);border-radius:10px;
  background:var(--surface);color:var(--text);
  font:inherit;font-size:.76rem;font-weight:800;cursor:pointer;
}
.contact-copy-button:hover,.contact-copy-button:focus-visible{
  border-color:var(--accent-strong);background:var(--accent-wash);
}
.contact-copy-button:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px}
@media(max-width:760px){
  #contact .contact-form-panel{padding-bottom:16px!important}
  .client-privacy-block{grid-template-columns:minmax(0,1fr);gap:9px}
  .client-privacy-block .ui-action{width:max-content;max-width:100%}
  .contact-utility-panel{margin-top:12px;padding:12px}
  .contact-utility-panel__top{align-items:flex-start}
  .contact-utility-panel__top>div{padding-top:2px}
  .contact-utility-panel__top>a{min-height:42px}
  .contact-copy-actions{gap:7px}
}
@media(max-width:390px){
  .contact-utility-panel__top{display:grid;grid-template-columns:minmax(0,1fr)}
  .contact-utility-panel__top>a{width:100%}
  .contact-copy-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:340px){
  .contact-copy-actions{grid-template-columns:minmax(0,1fr)}
}

/* assets/readability-v20.css */
/* Readability and project clarity, 2026-09-30. Keep sections at natural height. */
html {scroll-behavior:auto!important}
.screen-switcher{display:none!important}
#top>.mx-auto{align-items:center!important;gap:clamp(24px,3vw,50px)!important}
#top .hero-heading{font-size:clamp(2.4rem,4vw,4.2rem)!important;line-height:1.08!important;max-width:14ch!important}
#top .body-lead{font-size:clamp(1rem,1.25vw,1.18rem)!important;line-height:1.58!important;max-width:53ch}
.hero-proofline{margin-top:24px;padding-top:17px;border-top:1px solid var(--border);font-size:1rem;line-height:1.5;color:var(--body);max-width:52ch}
.hero-feature{display:block;grid-column:2;grid-row:1;align-self:center;overflow:hidden;border:1px solid var(--border-strong);border-radius:22px;background:var(--surface);text-decoration:none;box-shadow:0 20px 56px var(--shadow);transition:transform .2s ease,border-color .2s ease}
.hero-feature:hover,.hero-feature:focus-visible{transform:translateY(-4px);border-color:var(--accent-strong)}
.hero-feature img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.hero-feature__caption{display:grid;gap:7px;padding:22px 25px;color:var(--text)}
.hero-feature__caption small{color:var(--accent-strong);font-size:.78rem;font-weight:800;letter-spacing:.09em}
.hero-feature__caption strong{font-size:1.55rem;line-height:1.2}
.hero-feature__caption>span{color:var(--body);font-size:1rem}
html.screen-deck.continuous-deck #top .hero-feature{display:block!important}
html.screen-deck.continuous-deck #main>section .body-copy{font-size:1rem!important;line-height:1.58!important}
html.screen-deck.continuous-deck #main>section{height:auto!important;max-height:none!important}
.client-service-card{gap:12px}
.client-service-card p,.client-service-card ul,.client-service-card__evidence{font-size:.98rem!important;line-height:1.55!important}
.client-service-card>strong,.client-service-card__link,.client-services__footer p{font-size:.95rem!important}
.client-service-card h3{font-size:1.34rem!important}
.skill-card p,.timeline-copy>p,.result-tile p{font-size:.98rem!important;line-height:1.55!important;min-height:0}
.skill-tags span,.timeline-highlights span{font-size:.81rem!important}
.phase2-evidence__head p,.phase2-case dd,.phase2-case__limit,.phase2-demo>header p,#phase2-demo-copy{font-size:.95rem!important;line-height:1.55!important}
.phase2-case__context,.phase2-case__impact span,.phase2-demo figcaption{font-size:.88rem!important}
.client-contact-path p,.client-inquiry-hint,.client-privacy-note{font-size:.9rem!important;line-height:1.5!important}
.client-inquiry-form label,.client-inquiry-form :is(input,textarea,select){font-size:.98rem!important}
.project-list{display:grid;gap:24px;margin:25px 0 55px}
.project-feature{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,1fr);overflow:hidden;border:1px solid var(--border-strong);border-radius:20px;background:var(--surface);box-shadow:0 14px 36px var(--shadow)}
.project-feature__image{position:relative;display:block;min-height:330px;overflow:hidden;background:var(--surface-elevated)}
.project-feature__image img{display:block;width:100%;height:100%;min-height:330px;object-fit:cover;object-position:top left;transition:transform .35s ease}
.project-feature__image:hover img{transform:scale(1.035)}
.project-feature__image>span{position:absolute;bottom:16px;left:16px;padding:9px 12px;border-radius:9px;background:var(--surface);color:var(--accent-strong);font-size:.88rem;font-weight:800;box-shadow:0 6px 18px var(--shadow)}
.project-feature__body{display:flex;flex-direction:column;justify-content:center;gap:11px;padding:clamp(24px,3vw,36px)}
.project-feature__eyebrow{font-size:.76rem;letter-spacing:.08em;color:var(--hy-gold);font-weight:820}
.project-feature h3{font-size:clamp(1.7rem,2.5vw,2.4rem);line-height:1.12;color:var(--text);font-weight:850;letter-spacing:-.045em}
.project-feature__lead{color:var(--body);font-size:1.05rem;line-height:1.48}
.project-feature dl{display:grid;gap:10px;margin:7px 0 0}
.project-feature dl>div{display:grid;grid-template-columns:75px 1fr;gap:11px}
.project-feature dt{color:var(--text);font-weight:850;font-size:.91rem}
.project-feature dd{margin:0;color:var(--body);font-size:.94rem;line-height:1.5}
.project-feature__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:7px}
.project-feature__actions a{color:var(--accent-strong);font-size:.94rem;font-weight:800;text-underline-offset:4px}
#showcase .phase2-work-link{margin-top:9px}
@media(max-width:900px){.project-feature{grid-template-columns:1fr}.project-feature__image,.project-feature__image img{min-height:0;height:auto;aspect-ratio:16/9}.project-feature__body{padding:23px}}
@media(max-width:760px){
 html.mobile-app #top .hero-feature{display:block!important;grid-column:auto;grid-row:auto;max-width:100%}
 html.mobile-app #top .hero-heading{font-size:clamp(2rem,7.5vw,2.7rem)!important;line-height:1.11!important}
 html.mobile-app #top .body-lead{font-size:1rem!important;line-height:1.55!important}
 html.mobile-app #top .hero-proofline{font-size:.94rem!important;margin-top:16px}
 html.mobile-app #top .hero-feature img{aspect-ratio:16/9}
 html.mobile-app #top .hero-feature__caption{padding:14px 17px}
 html.mobile-app #top .hero-feature__caption strong{font-size:1.25rem}
 html.mobile-app #top .hero-feature__caption>span{font-size:.92rem}
 html.mobile-app #main .mobile-app__page .section-intro>p{font-size:1rem!important;line-height:1.5!important}
 html.mobile-app #main #skills .skill-card p{font-size:.98rem!important;line-height:1.5!important}
 .project-list{gap:16px;margin:18px 0 40px}
 .project-feature__image>span{font-size:.8rem}
 .project-feature dl>div{grid-template-columns:1fr;gap:2px}
 .project-feature dd{font-size:.94rem}
 .client-service-card p,.client-service-card ul{font-size:.96rem!important}
}
@media(prefers-reduced-motion:reduce){.hero-feature,.project-feature__image img{transition:none}}

html.screen-deck.continuous-deck #top .body-lead{font-size:clamp(1rem,1.25vw,1.18rem)!important;line-height:1.58!important}
.project-feature dd,.project-feature__actions a{font-size:1rem}
.client-service-card p,.client-service-card ul,.client-service-card__evidence{font-size:1rem!important}

/* Keep the original interactive carousel as the primary work experience. */
.project-summary-disclosure{margin:26px 0 45px;border:1px solid var(--border-strong);border-radius:16px;background:var(--surface);overflow:hidden}
.project-summary-disclosure>summary{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:17px 22px;cursor:pointer;color:var(--text);font-size:1rem;font-weight:820;list-style:none}
.project-summary-disclosure>summary::-webkit-details-marker{display:none}
.project-summary-disclosure>summary::after{content:"+";color:var(--hy-gold);font-size:1.35rem}
.project-summary-disclosure[open]>summary::after{content:"−"}
.project-summary-disclosure>summary span{margin-left:auto;color:var(--body);font-size:.9rem;font-weight:550}
.project-summary-disclosure .project-list{margin:0;padding:18px}
@media(max-width:760px){.project-summary-disclosure>summary{align-items:flex-start;flex-direction:column;padding:15px}.project-summary-disclosure>summary span{margin:0}.project-summary-disclosure>summary::after{position:absolute;right:18px}.project-summary-disclosure .project-list{padding:12px}}
@media(max-width:760px){
  html.mobile-app #main #showcase .orbit-showcase__inner{overflow-x:clip!important;overflow-y:visible!important}
}

/* assets/ar-positioning-v21.css */
/* Content-led AR identity; retain the existing responsive shell and carousel. */
.hero-feature--ar .hero-feature__ar-visual{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  min-height:305px;padding:28px;overflow:hidden;
  background:radial-gradient(circle at 88% 10%,rgba(99,226,205,.24),transparent 46%),
    linear-gradient(145deg,#0c2430,#123b45 63%,#071923);
  color:#f6fcfb;
}
.hero-feature--ar .hero-feature__ar-visual::after{
  content:"";position:absolute;right:-60px;bottom:-90px;width:270px;height:270px;
  border:1px solid rgba(126,247,221,.25);border-radius:50%;box-shadow:0 0 0 36px rgba(126,247,221,.035),0 0 0 75px rgba(126,247,221,.025);
}
.ar-visual__label,.ar-visual__foot{font-size:.75rem;font-weight:800;letter-spacing:.12em;color:#a8e6dd;z-index:1}
.ar-visual__flow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;z-index:1}
.ar-visual__flow b{padding:10px 12px;border:1px solid rgba(155,231,220,.26);border-radius:9px;background:rgba(255,255,255,.055);font-size:.83rem;white-space:nowrap}
.ar-visual__flow i{font-size:1.2rem;font-style:normal;color:#b8eddf}
.ar-visual__metric{display:grid;gap:0;z-index:1}
.ar-visual__metric strong{font-size:clamp(4rem,7vw,6.5rem);line-height:.95;letter-spacing:-.065em;color:#f3c77c}
.ar-visual__metric strong span{font-size:.27em;letter-spacing:0;margin-left:3px;color:#d9e9e5}
.ar-visual__metric small{font-size:1rem;color:#d4e5e2;margin-top:9px}
#top .hero-feature--ar{max-width:600px}
html[data-theme="light"] .hero-feature--ar .hero-feature__ar-visual{background:radial-gradient(circle at 88% 10%,rgba(28,154,139,.25),transparent 46%),linear-gradient(145deg,#163744,#0c4149 63%,#0b2831)}
@media(max-width:760px){
  .hero-feature--ar .hero-feature__ar-visual{min-height:225px;padding:18px}
  .ar-visual__flow{gap:5px}
  .ar-visual__flow b{padding:6px 8px;font-size:.68rem}
  .ar-visual__flow i{font-size:.9rem}
  .ar-visual__metric strong{font-size:3.5rem}
  .ar-visual__metric small{font-size:.88rem}
  .ar-visual__label,.ar-visual__foot{font-size:.62rem}
}

/* assets/education-proof-v22.css */
.education-proof{border:1px solid rgba(129,219,211,.17);border-radius:22px;padding:clamp(18px,2.5vw,30px);background:linear-gradient(145deg,rgba(24,62,73,.42),rgba(13,38,49,.2))}
.education-proof__intro{display:flex;justify-content:space-between;gap:25px;align-items:end;margin-bottom:20px}
.education-proof__intro h3{font-size:clamp(1.3rem,2.3vw,1.8rem);font-weight:800;letter-spacing:-.035em;margin-top:7px}
.education-proof__intro p{max-width:410px;line-height:1.55;font-size:.9rem;opacity:.82}
.education-proof__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.education-proof__card{display:grid;grid-template-columns:145px minmax(0,1fr) 18px;align-items:center;gap:15px;min-width:0;min-height:130px;padding:11px;border:1px solid rgba(136,207,198,.2);border-radius:16px;background:rgba(20,60,71,.43);color:inherit;text-decoration:none;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.education-proof__card:hover,.education-proof__card:focus-visible{transform:translateY(-3px);border-color:rgba(100,235,218,.65);background:rgba(28,87,94,.55)}
.education-proof__card img{width:145px;height:105px;object-fit:contain;border-radius:9px;background:#e6e6df}
.education-proof__card--tor img{object-fit:cover;object-position:top center}
.education-proof__card span{display:grid;gap:5px;min-width:0}
.education-proof__card strong{font-size:.95rem;line-height:1.25}
.education-proof__card small{font-size:.78rem;line-height:1.4;opacity:.77}
.education-proof__card b{font-size:1.15rem;color:#7cddd4}
html[data-theme="light"] .education-proof{background:#f5faf8;border-color:#cbdeda}
html[data-theme="light"] .education-proof__card{background:#fff;border-color:#d7e5e2}
html[data-theme="light"] .education-proof__card:hover,html[data-theme="light"] .education-proof__card:focus-visible{background:#ebf7f3;border-color:#489e98}
html[data-theme="light"] .education-proof__card b{color:#0e666b}
@media(max-width:1050px){.education-proof__card{grid-template-columns:100px minmax(0,1fr) 15px;gap:10px}.education-proof__card img{width:100px;height:93px}}
@media(max-width:760px){.education-proof__intro{display:block}.education-proof__intro p{margin-top:10px}.education-proof__grid{grid-template-columns:1fr}.education-proof__card{grid-template-columns:95px minmax(0,1fr) 15px;min-height:100px}.education-proof__card img{width:95px;height:80px}}
@media(prefers-reduced-motion:reduce){.education-proof__card{transition:none}}

/* assets/portfolio-refinement-v23.css */
/* Final portfolio refinements. Keep all three carousel cards and their controls. */
.mobile-resume-link{display:none}
html.screen-deck.continuous-deck #showcase .orbit-showcase__inner{margin-top:28px!important}
#showcase .orbit-card[data-position="next"],
#showcase .orbit-card[data-position="prev"]{opacity:.22}
@media(max-width:760px){
  .mobile-resume-link{display:inline-flex;margin-top:12px;min-height:44px}
  #showcase .orbit-card[data-position="next"],
  #showcase .orbit-card[data-position="prev"]{opacity:.13}
  #showcase .orbit-card:not([data-position="current"]) .orbit-card__top,
  #showcase .orbit-card:not([data-position="current"]) .orbit-card__info{display:none}
  #showcase .orbit-card[data-position="current"] .orbit-card__info{position:relative;z-index:4}
  #showcase .orbit-card[data-position="current"] .orbit-card__description{font-size:.84rem;line-height:1.48}
  #showcase .orbit-card[data-position="current"] .orbit-card__metric small{font-size:.68rem}
  #about .about-portrait__frame img{object-fit:cover}
}
@media(max-width:380px){
  #showcase .orbit-card[data-position="next"],
  #showcase .orbit-card[data-position="prev"]{opacity:.10}
}

/* assets/mobile-organization-v24.css */
/* Keep the phone app's sections in distinct, readable cards. */
@media (max-width:760px){
  html.mobile-app #main .mobile-app__page>section[data-app-view]{padding-bottom:23px!important}
  html.mobile-app #top>.mx-auto{gap:14px!important}
  html.mobile-app #top>.mx-auto>.relative.z-10,
  html.mobile-app #showcase .orbit-showcase__head,
  html.mobile-app #skills .section-intro,
  html.mobile-app #about .about-heading-panel,
  html.mobile-app #contact>.mx-auto>.reveal:first-child{
    min-width:0;
    padding:clamp(16px,4.5vw,22px)!important;
    border:1px solid var(--border-strong);
    border-radius:19px;
    background:var(--surface);
    box-shadow:0 12px 28px rgba(0,0,0,.12);
  }
  html.mobile-app #top .eyebrow{margin:18px 0 10px!important;line-height:1.45}
  html.mobile-app #top .hero-heading{
    font-size:clamp(1.88rem,7.3vw,2.65rem)!important;
    hyphens:none!important;word-break:normal!important;overflow-wrap:normal!important;
  }
  html.mobile-app #top .body-lead{margin-top:15px!important}
  html.mobile-app #top .mt-9.flex{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px!important;margin-top:18px!important;
  }
  html.mobile-app #top .mt-9.flex>.button{
    display:flex;justify-content:center;align-items:center;
    min-width:0;width:100%;min-height:48px;
    padding:10px 8px!important;text-align:center;line-height:1.25;
    white-space:normal;
  }
  /* The introduction is immediately above this card on the Home tab. */
  html.mobile-app #top .mt-9.flex>a[href="#introduction"]{display:none!important}
  html.mobile-app #top .mobile-resume-link{width:100%;justify-content:center;margin-top:10px}
  html.mobile-app #top .hero-proofline{
    margin-top:16px!important;padding:14px!important;
    border:1px solid var(--border);border-radius:12px;
    background:var(--surface-raised,var(--surface));
    overflow-wrap:anywhere;
  }
  html.mobile-app #showcase .orbit-showcase__head{margin-bottom:14px}
  html.mobile-app #showcase .orbit-card:not([data-position="current"]){opacity:0!important;pointer-events:none!important}
  html.mobile-app #main .mobile-app__page .skill-card,
  html.mobile-app #main .mobile-app__page .project-feature,
  html.mobile-app #main .mobile-app__page .client-service-card{
    min-width:0;overflow-wrap:anywhere;
  }
  html.mobile-app #about .about-heading-panel{margin-bottom:12px}
  html.mobile-app #contact>.mx-auto>.reveal:first-child{margin-bottom:14px}
  html.mobile-app #contact .contact-details,
  html.mobile-app #contact .resume-panel{min-width:0;overflow-wrap:anywhere}
}
@media (max-width:360px){
  html.mobile-app #top .mt-9.flex{grid-template-columns:minmax(0,1fr)!important}
}

/* assets/mobile-dock-contained-v25.css */
/* Keep the original floating appearance orbit, while letting page content
   use the space beneath it. A little scroll padding lets the last item move
   fully above the orbit when visitors reach the end of a phone page. */
@media(max-width:760px){
  html.mobile-app,
  html.screen-deck.continuous-deck.mobile-app{
    --mobile-app-page-bottom:calc(82px + env(safe-area-inset-bottom,0px))!important;
  }
  html.mobile-app #main>.mobile-app__page,
  html.screen-deck.continuous-deck.mobile-app #main>.mobile-app__page{
    padding-bottom:70px!important;
    scroll-padding-bottom:70px!important;
  }
}

/* Keep desktop carousel cards inside the content column beside the fixed rail. */
@media(min-width:761px) and (max-width:1100px){html.screen-deck.continuous-deck #showcase .orbit-stage{--orbit-card-width:min(100%,calc(100vw - 300px),680px)!important;--side-shift:clamp(235px,34vw,400px)}}