/* Additive polish over the original GitHub design (b7dbae8).
   The original layout, typography, sections, and Mac-style console remain. */
:root {
  color-scheme: light;
  --nav-surface: rgba(255, 255, 255, .88);
  --console-surface: #0b0e14;
  --console-bar: #171c25;
  --console-text: #e6edf3;
  --console-muted: #9ca8b8;
  --console-line: #2a3340;
  --console-green: #79d9a3;
  --card-surface: #ffffff;
  --card-hover: #fbfcfa;
}
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0c1015;
  --color-bg-alt: #121820;
  --color-text: #e8edf3;
  --color-text-muted: #a2adbb;
  --color-border: #293240;
  --color-accent: #6ed49a;
  --color-accent-soft: #14291f;
  --color-accent-text: #82dfa9;
  --color-dark: #10151d;
  --nav-surface: rgba(12, 16, 21, .9);
  --console-surface: #10151d;
  --console-bar: #1a222e;
  --console-line: #303d4d;
  --card-surface: #11171f;
  --card-hover: #151e27;
  --grid-line: rgba(194, 214, 236, .035);
  --shadow-md: 0 16px 44px rgba(0, 0, 0, .22), 0 2px 5px rgba(0, 0, 0, .14);
}
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--nav-h) + 24px); scrollbar-gutter: stable; }
body { isolation: isolate; transition: color .2s, background-color .2s; }
::selection { background: var(--color-accent-soft); color: var(--color-accent-text); }
.nav { background: var(--nav-surface); border-bottom-color: transparent; transition: background .2s, border-color .2s, box-shadow .2s; }
.nav.is-scrolled { border-bottom-color: var(--color-border); box-shadow: 0 6px 30px rgba(15, 28, 25, .035); }
.nav__inner { gap: 20px; }
.nav__logo { font-family: var(--font-handwriting); font-weight: 700; font-size: 27px; letter-spacing: -.02em; }
.nav__link { font-size: 13px; }
.nav__right { gap: 14px; }
.theme-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--color-border); border-radius: 50%; transition: background .2s, transform .2s; }
.theme-toggle:hover { background: var(--color-bg-alt); transform: rotate(8deg); }
[data-theme="light"] .theme-toggle__sun, [data-theme="dark"] .theme-toggle__moon { display: none; }
.nav__mobile { inset: var(--nav-h) 0 auto 0; max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; padding-block: 26px; box-shadow: 0 20px 35px rgba(0, 0, 0, .07); visibility: hidden; }
.nav__mobile.is-open { visibility: visible; }
.nav__mobile .nav__link { font-size: 19px; }
.nav__mobile .lang-toggle { align-self: flex-start; }
.hero__kicker { font-size: 12px; letter-spacing: .015em; }
.hero__title { font-family: var(--font-handwriting); font-weight: 600; letter-spacing: -.01em; line-height: 1.05; font-size: clamp(3.2rem, 8vw + 1rem, 7.5rem); }
.hero__role { color: var(--color-text); font-size: 21px; }
.hero__statement { font-size: 17px; line-height: 1.85; max-width: 42ch; }
.hero__actions { gap: 24px; align-items: center; }
.button { min-height: 46px; font-size: 13px; box-shadow: 0 2px 4px rgba(15, 28, 25, .04); }
.button--primary:hover { color: #ffffff; }
[data-theme="dark"] .button--primary:hover { color: #0c1015; }
.link-arrow { padding-block: 8px 5px; }
/* Same signature console, refined macOS chrome. */
.status-card { background: var(--console-surface); color: var(--console-text); border: 1px solid var(--console-line); border-radius: 13px; box-shadow: 0 23px 55px -28px rgba(5, 12, 22, .46), 0 5px 14px rgba(5, 12, 22, .09); }
.status-card__bar { background: var(--console-bar); padding: 15px 17px; gap: 7px; border-color: var(--console-line); }
.status-card__dot { width: 9px; height: 9px; flex-shrink: 0; }
.status-card__dot:nth-child(1) { background: #ff6058; }
.status-card__dot:nth-child(2) { background: #febc2e; }
.status-card__dot:nth-child(3) { background: #28c840; }
.status-card__title { margin-left: 7px; color: #b2bdca; font-size: 10px; }
.status-card__available { font-size: 10px; color: var(--console-green); gap: 6px; }
.status-card__available::before { width: 5px; height: 5px; background: var(--console-green); }
.status-card__body { padding: 23px; gap: 19px; font-size: 12px; }
.status-card__command { font-size: 11px; color: var(--console-text); border-bottom: 1px solid var(--console-line); padding-bottom: 16px; }
.status-card__command > span:first-child { color: #a7b6d1; }
.status-card__prompt { color: var(--console-green); margin-inline: 3px; }
.status-card__row { gap: 16px; }
.status-card__label { color: var(--console-muted); }
.status-card__label::before { content: ""; }
.status-card__value { color: var(--console-text); overflow-wrap: anywhere; }
.status-card__footer { color: var(--console-muted); font-size: 10px; padding: 14px 23px; border-color: var(--console-line); gap: 10px; }
.status-card__cursor { background: var(--console-green); width: 5px; }
/* Existing section hierarchy, with more consistent reading rhythm. */
.section-lede { font-size: 17px; line-height: 1.8; }
.about-copy__lead { font-size: 21px; line-height: 1.55; }
.about-copy { font-size: 16px; line-height: 1.85; }
.about-fact dt { font-size: 10px; }
.about-fact dd { font-size: 14px; }
.section-index { opacity: 1; color: var(--color-text-muted); }
.section-kicker--stacked .section-index { color: var(--color-text-muted); font-size: 16px; }
.responsibility-row__index { opacity: 1; }
.transition-statement { padding-block: 30px; }
.transition-statement p { max-width: 52ch; font-size: 18px; line-height: 1.7; }
/* Populate the original project grid with restrained, text-first cards. */
.project-grid { gap: 24px; align-items: start; }
.project-card { height: auto; background: var(--card-surface); border-radius: 12px; }
.project-card:hover { background: var(--card-hover); border-color: var(--color-accent); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.project-card__body { padding: 28px; gap: 0; }
.project-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 27px; }
.project-card__symbol { display: grid; place-items: center; width: 38px; height: 38px; color: var(--color-accent-text); background: var(--color-accent-soft); border-radius: 9px; }
.project-card__symbol svg { width: 20px; height: 20px; }
.project-card__number { color: var(--color-text-muted); font-size: 11px; }
.project-card__type { color: var(--color-text-muted); font: 10px/1.7 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.project-card__title { font-size: 26px; letter-spacing: -.035em; margin-bottom: 12px; overflow-wrap: anywhere; }
.project-card__desc { font-size: 14px; line-height: 1.85; min-height: 78px; margin-bottom: 19px; }
.project-card .tag-list { gap: 6px; }
.project-card .badge { font-size: 10px; padding: 4px 8px; background: transparent; border-radius: 5px; }
.project-card__status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font: 10px/1.8 var(--font-mono); color: var(--color-text-muted); margin-top: 25px; }
.project-state { display: inline-flex; align-items: center; gap: 6px; }
.project-state::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.project-state--active { color: var(--color-accent-text); }
.project-story { margin-top: 17px; padding-top: 2px; border-top: 1px solid var(--color-border); }
.project-story summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-block: 13px 5px; font-size: 12px; font-weight: 500; }
.project-story summary::-webkit-details-marker { display: none; }
.project-story summary > span { font-size: 19px; font-weight: 400; color: var(--color-text-muted); transition: transform .2s; }
.project-story[open] summary > span { transform: rotate(45deg); }
.project-story p { margin-top: 12px; font-size: 13px; color: var(--color-text-muted); line-height: 1.85; }
.stack-group__index { opacity: 1; }
.stack-group__list { font-size: 15px; line-height: 1.9; }
.contact-method { padding-block: 28px; }
.contact-method:hover .contact-method__label { color: var(--color-accent-text); }
.contact-method__label { letter-spacing: -.035em; transition: color .2s; }
.contact-method__value { font-size: 11px; }
.footer__brand { letter-spacing: -.04em; }
.footer__meta { font-size: 13px; }
.empty-state__meta { opacity: 1; }
@media (min-width: 768px) {
  .hero__grid { gap: 48px; }
  .hero { padding-block: 96px 105px; }
  .section { padding-block: 90px; }
  .section--tight { padding-block: 66px; }
  .about-grid { gap: 56px; }
  .responsibility-row__label { font-size: 16px; }
}
@media (min-width: 768px) and (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .hero__title { font-size: clamp(62px, 8.7vw, 88px); }
  .hero__role { font-size: 18px; }
  .hero__statement { font-size: 15px; }
  .hero__actions { gap: 12px 18px; }
  .status-card__body { padding: 18px; font-size: 11px; }
  .status-card__bar { padding-inline: 12px; gap: 5px; }
  .status-card__title { margin-left: 3px; font-size: 9px; }
  .status-card__available { font-size: 9px; }
}
@media (max-width: 767px) {
  .hero { padding-top: 50px; padding-bottom: 59px; }
  .hero__grid { gap: 38px; }
  .hero__title { font-size: clamp(55px, 14vw, 92px); }
  .hero__statement { font-size: 16px; }
  .hero__role { font-size: 20px; }
  .hero__actions { gap: 20px; }
  .nav__right { gap: 11px; }
  .section { padding-block: 58px; }
  .section--tight { padding-block: 48px; }
  .about-grid { gap: 18px; }
  .project-card__body { padding: 24px; }
  .project-card__desc { min-height: 0; }
  .about-copy__lead { font-size: 19px; }
  .about-copy { font-size: 15px; }
  .transition-statement p { font-size: 16px; }
  html:not(.js) .nav { height: auto; }
  html:not(.js) .nav__inner { padding-block: 18px; flex-wrap: wrap; }
  html:not(.js) .nav__links { display: flex; order: 3; width: 100%; justify-content: space-between; gap: 10px; }
  html:not(.js) .nav__menu-btn { display: none; }
}
html:not(.js) .lang-toggle { display: none; }
@media (prefers-reduced-motion: reduce) { body, .project-card, .theme-toggle { transition: none; } }

/* Workspace details: stronger composition on the existing foundation. */
.hero { padding-top: 36px; padding-bottom: 34px; }
.hero__meta { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 18px; font: 10px/1.6 var(--font-mono); letter-spacing: .04em; color: var(--color-text-muted); }
.hero__path { display: inline-flex; align-items: center; gap: 9px; }
.hero__path-icon { color: var(--color-accent-text); font-size: 18px; }
.hero__meta > span:last-child { font-size: 9px; letter-spacing: .1em; }
.hero__grid { position: relative; padding-top: 47px; padding-bottom: 58px; border-block: 1px solid var(--color-border); }
.hero__grid::before, .hero__grid::after { content: ""; position: absolute; width: 9px; height: 9px; border: 1px solid var(--color-border); background: var(--color-bg); z-index: 2; }
.hero__grid::before { top: -5px; left: 20px; }
.hero__grid::after { right: 20px; bottom: -5px; }
.hero__artifact { position: relative; margin-top: 34px; }
.hero__artifact::before { content: ""; position: absolute; inset: 12px -10px -12px 12px; border: 1px solid var(--color-border); border-radius: 13px; transform: rotate(2deg); background: linear-gradient(135deg, var(--color-bg-alt), transparent); z-index: 0; }
.hero__artifact .status-card { position: relative; z-index: 1; }
.hero__role { display: inline-block; padding-left: 12px; border-left: 2px solid var(--color-accent); }
.status-card__body { padding: 0; gap: 0; }
.status-card__tabs { display: flex; align-items: center; gap: 20px; padding: 0 22px; background: var(--console-surface); border-bottom: 1px solid var(--console-line); }
.status-card__tabs button { display: flex; align-items: center; gap: 7px; color: var(--console-muted); min-height: 42px; font-size: 10px; padding: 9px 0; border-bottom: 1px solid transparent; margin-bottom: -1px; }
.status-card__tabs button[aria-selected="true"] { color: var(--console-text); border-bottom-color: var(--console-green); }
.console-tab-icon { font-size: 14px; color: var(--console-muted); }
.status-card__panel { display: grid; gap: 18px; padding: 22px; min-height: 219px; }
.status-card__panel .status-card__command { margin-bottom: 0; }
.console-projects { display: grid; gap: 3px; }
.console-projects a { display: flex; align-items: center; gap: 9px; padding-block: 4px; font-size: 11px; color: var(--console-text); }
.console-projects a:hover { color: var(--console-green); }
.console-file-dot { width: 4px; height: 4px; background: var(--console-muted); border-radius: 1px; }
.console-file-state { margin-left: auto; font-size: 9px; color: var(--console-green); }
.status-card :focus-visible { outline-color: var(--console-green); }
.hero-summary { display: grid; grid-template-columns: 1fr 1fr 1.4fr auto; align-items: center; gap: 30px; padding-block: 24px 10px; }
.hero-summary__item { display: flex; align-items: center; gap: 14px; }
.hero-summary__value { font-family: var(--font-display); font-size: 30px; line-height: 1; letter-spacing: -.06em; font-weight: 500; }
.hero-summary__item > span:last-child { max-width: 14ch; font-size: 10px; line-height: 1.6; color: var(--color-text-muted); }
.hero-summary__server { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: -.025em; }
.summary-status, .toolbar-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; background: var(--color-accent); flex-shrink: 0; }
.hero-summary__item:hover .hero-summary__value, .hero-summary__item:hover .hero-summary__server { color: var(--color-accent-text); }
.hero-summary__scroll { display: flex; gap: 15px; align-items: center; font: 9px/1.7 var(--font-mono); color: var(--color-text-muted); }
.hero-summary__scroll > span:last-child { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-border); display: grid; place-items: center; font-size: 17px; transition: transform .2s; }
.hero-summary__scroll:hover > span:last-child { transform: translateY(3px); color: var(--color-accent-text); }
/* About's existing left column now explains the internal ecosystem. */
.about-workspace { max-width: 290px; margin-top: 40px; padding: 22px 0; border-block: 1px solid var(--color-border); }
.about-workspace__label { font: 9px/1.6 var(--font-mono); letter-spacing: .12em; color: var(--color-text-muted); margin-bottom: 21px; }
.about-workspace__root { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 13px; }
.about-workspace__root svg { color: var(--color-accent-text); }
.about-workspace__count { margin-left: auto; color: var(--color-text-muted); font-size: 10px; border: 1px solid var(--color-border); border-radius: 4px; padding: 1px 5px; }
.about-workspace ul { margin: 17px 0 18px 8px; padding-left: 22px; border-left: 1px solid var(--color-border); }
.about-workspace li { position: relative; }
.about-workspace li::before { content: ""; position: absolute; width: 13px; left: -22px; top: 50%; border-top: 1px solid var(--color-border); }
.about-workspace li a { display: flex; gap: 9px; align-items: center; padding-block: 9px; font: 11px/1.6 var(--font-mono); }
.workspace-file { color: var(--color-accent-text); background: var(--color-accent-soft); font-size: 8px; padding: 1px 4px; border-radius: 3px; }
.about-workspace li a > span:last-child { margin-left: auto; color: var(--color-text-muted); font-size: 13px; }
.about-workspace li a:hover { color: var(--color-accent-text); }
.about-workspace__note { display: flex; align-items: center; gap: 7px; font-size: 10px; color: var(--color-text-muted); }
.workspace-lock { font-size: 14px; }
/* Distinct project compositions rather than four identical surfaces. */
.work-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 23px; border-bottom: 1px solid var(--color-border); margin-bottom: 25px; }
.work-filters { display: flex; align-items: center; gap: 5px; }
.work-filters button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; min-height: 38px; font-size: 11px; color: var(--color-text-muted); border: 1px solid transparent; border-radius: 6px; }
.work-filters button[aria-pressed="true"] { background: var(--color-bg-alt); border-color: var(--color-border); color: var(--color-text); }
.work-filters button > span:last-child { font: 9px/1.6 var(--font-mono); padding: 0 4px; color: var(--color-text-muted); }
.work-filters button:hover { color: var(--color-accent-text); }
.work-toolbar__note { display: flex; align-items: center; gap: 7px; color: var(--color-text-muted); font-size: 10px; }
.project-card { position: relative; scroll-margin-top: calc(var(--nav-h) + 25px); }
.project-card:target { border-color: var(--color-accent); }
.project-card[data-layout="wide"] { grid-column: 1 / -1; display: grid; grid-template-columns: 1.05fr .95fr; }
.project-card[data-layout="wide"] .project-card__title { font-size: 32px; }
.project-card[data-layout="wide"] .project-card__desc { min-height: 0; max-width: 45ch; }
.project-card[data-layout="wide"] .project-card__body { padding: 31px; }
.project-card__body { min-width: 0; }
.project-card__top { margin-bottom: 23px; }
.project-preview { display: flex; flex-direction: column; justify-content: space-between; padding: 31px; min-width: 0; background: var(--color-bg-alt); border-left: 1px solid var(--color-border); }
.preview-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--color-text-muted); font: 9px/1.7 var(--font-mono); letter-spacing: .08em; }
.preview-heading > span:last-child { font-size: 22px; }
.project-preview--flow { background: linear-gradient(135deg, var(--color-accent-soft), var(--color-bg-alt)); }
.cooking-flow { display: grid; gap: 11px; margin-block: 21px; }
.cooking-flow li { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--color-border); border-radius: 5px; background: var(--card-surface); font-size: 11px; }
.cooking-flow__step { width: 23px; color: var(--color-accent-text); font: 10px/1.7 var(--font-mono); }
.flow-step-mark { margin-left: auto; color: var(--color-text-muted); font-size: 12px; }
.cooking-flow li:last-child .flow-step-mark { color: var(--color-accent-text); }
.preview-caption { font: 9px/1.7 var(--font-mono); color: var(--color-text-muted); }
.project-preview--wordmark { position: relative; isolation: isolate; overflow: hidden; background: var(--console-surface); color: var(--console-text); }
.project-preview--wordmark::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#ffffff07 1px, transparent 1px), linear-gradient(90deg, #ffffff07 1px, transparent 1px); background-size: 28px 28px; z-index: -1; }
.project-preview--wordmark::after { content: ""; position: absolute; width: 190px; height: 190px; border: 1px solid var(--console-line); border-radius: 50%; top: 50%; right: -75px; transform: translateY(-50%); box-shadow: 0 0 0 40px #ffffff03, 0 0 0 80px #ffffff02; z-index: -1; }
.project-preview--wordmark .preview-heading { color: var(--console-muted); }
.project-preview--wordmark .preview-heading > span:last-child { color: var(--console-green); }
.gogo-wordmark { font-family: var(--font-display); font-size: 54px; line-height: 1.07; font-weight: 500; letter-spacing: -.055em; margin-block: 33px; }
.gogo-wordmark > span { display: block; font-size: 42px; }
.gogo-wordmark__dot { color: var(--console-green); }
.gogo-status { display: flex; align-items: center; gap: 8px; font: 10px/1.7 var(--font-mono); color: var(--console-green); }
.gogo-status .summary-status { background: var(--console-green); }
/* Technical details carry through experience, learning, and contact. */
.experience-item { padding: 28px 0 28px 24px; border-left: 1px solid var(--color-border); position: relative; }
.experience-item::before { content: ""; position: absolute; width: 7px; height: 7px; border: 1px solid var(--color-accent); background: var(--color-bg); top: 36px; left: -4px; border-radius: 50%; }
.experience-item__period { font-size: 12px; }
.experience-item__org { font-size: 27px; letter-spacing: -.035em; }
.stack-groups { gap: 0; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; }
.stack-groups > div { padding: 25px; }
.stack-groups > div + div { border-top: 1px solid var(--color-border); }
.stack-group__title { margin-bottom: 19px; }
.stack-group__list { display: flex; flex-wrap: wrap; gap: 8px; }
.stack-group__list > span { display: inline-block; border: 1px solid var(--color-border); background: var(--color-bg-alt); padding: 6px 9px; font: 10px/1.6 var(--font-mono); border-radius: 4px; }
.contact-methods { border-bottom: 1px solid var(--color-border); }
.contact-method { position: relative; padding-inline: 20px; }
.contact-method:last-child { border-bottom: 0; }
.contact-method::before { content: ""; position: absolute; left: 0; top: 50%; height: 6px; width: 6px; border: 1px solid var(--color-border); transform: translateY(-50%); transition: background .2s, border-color .2s; }
.contact-method:hover { padding-left: 26px; }
.contact-method:hover::before { background: var(--color-accent); border-color: var(--color-accent); }
.contact-method__arrow { width: 32px; height: 32px; padding: 7px; border: 1px solid var(--color-border); border-radius: 50%; }
.reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 9999; pointer-events: none; }
.reading-progress > span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--color-accent); }
.section-rail { display: none; }
@media (min-width: 768px) {
  .stack-groups > div + div { border-top: 0; border-left: 1px solid var(--color-border); }
}
@media (min-width: 960px) {
  .responsibility-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }
  .responsibility-row { min-height: 70px; }
  .responsibility-row__label { font-size: 14px; }
}
@media (min-width: 1420px) {
  .section-rail { display: flex; flex-direction: column; gap: 7px; position: fixed; top: 50%; right: max(18px, calc((100vw - 1360px) / 2)); transform: translateY(-50%); z-index: 20; }
  .section-rail__link { display: flex; gap: 9px; align-items: center; min-height: 27px; padding: 3px; color: var(--color-text-muted); }
  .section-rail__number { font: 8px/1.5 var(--font-mono); }
  .section-rail__line { width: 11px; height: 1px; background: var(--color-border); transition: width .2s, background .2s; }
  .section-rail__link[aria-current] { color: var(--color-accent-text); }
  .section-rail__link[aria-current] .section-rail__line { width: 22px; background: var(--color-accent); }
}
@media (max-width: 1000px) {
  .hero-summary { grid-template-columns: 1fr 1fr 1.4fr; gap: 20px; }
  .hero-summary__scroll { display: none; }
  .hero-summary__item--server { display: grid; gap: 5px; }
  .hero-summary__item--server > span:last-child { max-width: none; }
  .project-card[data-layout="wide"] .project-card__body, .project-preview { padding: 25px; }
  .gogo-wordmark { font-size: 47px; }
  .gogo-wordmark > span { font-size: 35px; }
  .work-toolbar__note { font-size: 9px; }
}
@media (max-width: 767px) {
  .hero { padding-top: 23px; padding-bottom: 16px; }
  .hero__meta { font-size: 8px; padding-bottom: 15px; }
  .hero__meta > span:last-child { font-size: 7px; letter-spacing: .04em; }
  .hero__grid { padding-top: 32px; padding-bottom: 38px; }
  .hero__artifact { margin-top: 0; margin-right: 8px; }
  .hero-summary { grid-template-columns: 1fr 1fr; gap: 24px 20px; padding-block: 24px; }
  .hero-summary__item--server { grid-column: 1/-1; display: flex; gap: 15px; padding-top: 17px; border-top: 1px solid var(--color-border); }
  .hero-summary__value { font-size: 27px; }
  .hero-summary__item > span:last-child { font-size: 9px; max-width: none; }
  .hero-summary__server { font-size: 16px; }
  .about-workspace { margin-top: 28px; max-width: none; margin-bottom: 12px; }
  .about-workspace ul { display: flex; flex-wrap: wrap; gap: 7px 20px; border-left: 0; padding-left: 0; margin-left: 0; }
  .about-workspace li::before { display: none; }
  .about-workspace li a { font-size: 10px; }
  .about-workspace li a > span:last-child { display: none; }
  .work-toolbar { flex-wrap: wrap; gap: 14px; }
  .work-toolbar__note { display: none; }
  .work-filters { gap: 2px; width: 100%; }
  .work-filters button { padding-inline: 10px; font-size: 10px; }
  .project-card[data-layout="wide"] { grid-column: auto; display: flex; }
  .project-card[data-layout="wide"] .project-card__title { font-size: 27px; }
  .project-card[data-layout="wide"] .project-card__body { padding: 24px; }
  .project-preview { border-left: 0; border-top: 1px solid var(--color-border); padding: 23px 24px; }
  .cooking-flow { grid-template-columns: 1fr 1fr; gap: 9px; margin-block: 17px; }
  .cooking-flow li { padding: 9px; font-size: 9px; gap: 6px; }
  .cooking-flow__step { width: 16px; font-size: 9px; }
  .flow-step-mark { display: none; }
  .project-preview--wordmark { min-height: 240px; }
  .gogo-wordmark { font-size: 45px; margin-block: 23px; }
  .gogo-wordmark > span { font-size: 34px; }
  .contact-method { padding-inline: 17px; }
}

/* Contour field: static atmosphere with the portfolio's existing green accent. */
:root { --ambient-green: rgba(48, 139, 85, .09); --ambient-cool: rgba(114, 141, 166, .07); --contour-ink: rgba(42, 105, 70, .16); }
[data-theme="dark"] { --ambient-green: rgba(62, 135, 100, .11); --ambient-cool: rgba(85, 111, 153, .1); --contour-ink: rgba(138, 196, 162, .13); }
.bg-ambient { opacity: 1; mask-image: none; -webkit-mask-image: none; background: radial-gradient(ellipse 80% 65% at 100% 0%, var(--ambient-green), transparent 72%), radial-gradient(ellipse 60% 65% at 0% 75%, var(--ambient-cool), transparent 75%); }
.bg-ambient::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--grid-line) 1px, transparent 1px); background-size: 20px 20px; mask-image: linear-gradient(black, transparent 90%); -webkit-mask-image: linear-gradient(black, transparent 90%); }
.hero { position: relative; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: var(--contour-ink); mask: url("../assets/contours.svg") right top / auto 100% no-repeat; -webkit-mask: url("../assets/contours.svg") right top / auto 100% no-repeat; }
.hero__artifact::before { background: linear-gradient(135deg, var(--color-accent-soft), transparent 70%); }
.status-card { box-shadow: 0 27px 65px -30px rgba(5, 12, 22, .5), 0 5px 14px rgba(5, 12, 22, .09); }
.console-projects { max-height: 180px; overflow-y: auto; }
.console-projects a { min-height: 31px; }
.project-doc-link { display: flex; align-items: center; gap: 9px; min-height: 44px; padding-top: 12px; margin-top: 14px; border-top: 1px solid var(--color-border); font-size: 11px; color: var(--color-accent-text); }
.project-doc-link > span:last-child { margin-left: auto; transition: transform .2s; }
.project-doc-link:hover > span:last-child { transform: translate(2px,-2px); }
.work-archive { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; margin-top: 29px; padding-top: 22px; border-top: 1px solid var(--color-border); }
.work-archive > p { font-size: 11px; color: var(--color-text-muted); }
.work-archive .link-arrow { display: flex; gap: 20px; font-size: 12px; }
.work-filters { flex-wrap: wrap; }
/* AlamNusa role card: identity at left, day-to-day work at right. */
.experience-card { display: grid; grid-template-columns: .85fr 1.45fr; border: 1px solid var(--color-border); border-radius: 13px; background: var(--card-surface); overflow: hidden; box-shadow: var(--shadow-sm); }
.experience-card__identity { display: flex; flex-direction: column; position: relative; isolation: isolate; padding: 30px; background: linear-gradient(145deg,var(--color-accent-soft),var(--color-bg-alt) 85%); border-right: 1px solid var(--color-border); }
.experience-card__identity::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--contour-ink); mask: url("../assets/contours.svg") center / auto 115% no-repeat; -webkit-mask: url("../assets/contours.svg") center / auto 115% no-repeat; }
.experience-card__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.experience-card__eyebrow { font: 8px/1.7 var(--font-mono); letter-spacing: .1em; color: var(--color-text-muted); }
.experience-card__active { display: flex; align-items: center; gap: 6px; font: 8px/1.7 var(--font-mono); color: var(--color-accent-text); }
.experience-card__brand { margin-top: 38px; }
.experience-card__logo { width: 62px; height: 62px; object-fit: contain; border-radius: 12px; margin-bottom: 8px; }
.experience-card__monogram { display: inline-flex; align-items: baseline; font: 500 70px/1 var(--font-display); letter-spacing: -.09em; }
.experience-card__monogram > span { color: var(--color-accent); }
.experience-card__brand h3 { font-size: 30px; letter-spacing: -.055em; margin-top: 13px; }
.experience-card__role { font-size: 12px; color: var(--color-accent-text); margin-top: 9px; }
.experience-card__period { display: flex; align-items: center; gap: 8px; margin-top: 28px; font: 10px/1.8 var(--font-mono); color: var(--color-text-muted); }
.experience-card__period-icon { color: var(--color-accent-text); font-size: 16px; }
.experience-card__focus { font-size: 9px; color: var(--color-text-muted); margin-top: auto; padding-top: 28px; }
.experience-card__body { min-width: 0; padding: 32px; }
.experience-card__label { font: 9px/1.6 var(--font-mono); letter-spacing: .1em; color: var(--color-text-muted); margin-bottom: 16px; }
.experience-card__desc { font-size: 15px; line-height: 1.85; margin-bottom: 26px; max-width: 55ch; }
.experience-card .responsibility-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 20px; }
.experience-card .responsibility-row { align-items: center; padding-block: 17px; gap: 9px; }
.experience-card .responsibility-row__index { font-size: 9px; color: var(--color-accent-text); width: 18px; }
.experience-card .responsibility-row__label { font-size: 11px; line-height: 1.7; }
.experience-card__footer { grid-column: 1/-1; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; padding: 18px 30px; border-top: 1px solid var(--color-border); background: var(--color-bg-alt); font-size: 10px; color: var(--color-text-muted); }
.experience-card__footer strong { font: 500 14px/1 var(--font-mono); color: var(--color-text); margin-right: 6px; }
.experience-card__footer > a { display: flex; gap: 15px; align-items: center; color: var(--color-accent-text); min-height: 30px; }
@media (max-width: 999px) {
  .experience-card { grid-template-columns: .8fr 1.2fr; }
  .experience-card__identity, .experience-card__body { padding: 25px; }
  .experience-card .responsibility-list { grid-template-columns: minmax(0,1fr); }
  .experience-card .responsibility-row { padding-block: 10px; }
}
@media (max-width: 767px) {
  .hero::before { opacity: .65; mask-size: auto 75%; -webkit-mask-size: auto 75%; mask-position: 80% top; -webkit-mask-position: 80% top; }
  .experience-card { grid-template-columns: minmax(0,1fr); }
  .experience-card__identity { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .experience-card__brand { display: flex; align-items: center; gap: 18px; margin-top: 24px; }
  .experience-card__logo { width: 44px; height: 44px; margin-bottom: 0; }
  .experience-card__monogram { font-size: 49px; }
  .experience-card__brand h3 { margin-top: 0; font-size: 29px; }
  .experience-card__role { margin-top: 15px; }
  .experience-card__period { margin-top: 15px; }
  .experience-card__focus { padding-top: 18px; }
  .experience-card__body { padding: 25px; }
  .experience-card__desc { font-size: 14px; }
  .experience-card .responsibility-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 15px; }
  .experience-card .responsibility-row__label { font-size: 10px; }
  .experience-card__footer { padding: 18px 25px; gap: 8px; }
  .experience-card__footer > a { min-height: 44px; }
  .work-filters button { min-height: 44px; }
  .theme-toggle, .nav__menu-btn { min-width: 40px; min-height: 40px; }
  .console-projects a, .about-workspace li a { min-height: 40px; }
  .nav__mobile .nav__link { min-height: 44px; }
  html:not(.js) .nav__links { flex-wrap: wrap; }
}
@media (max-width: 359px) {
  .experience-card .responsibility-list { grid-template-columns: minmax(0,1fr); }
  .hero__meta { flex-wrap: wrap; gap: 6px; }
  .cooking-flow { grid-template-columns: minmax(0,1fr); }
}