@layer reset, base, components, variants, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
  img { max-width: 100%; display: block; }
  button, input { font: inherit; }
}

@layer base {
  :root {
    --paper: #f6f3ec;
    --canvas: #dcd8cf;
    --surface: #ebe6dc;
    --ink: #161915;
    --muted: #6d716a;
    --rule: #c7c1b6;
    --accent: #bc4c32;
    --accent-soft: #edd8ce;
    --display: "Noto Serif KR", serif;
    --body: "Noto Sans KR", sans-serif;
    --mono: "IBM Plex Mono", monospace;
    --shell: min(1180px, calc(100vw - 72px));
    --ease: cubic-bezier(.22, 1, .36, 1);
  }

  html[data-variant="b"] {
    --paper: #091521;
    --canvas: #030a11;
    --surface: #101f2e;
    --ink: #edf5f2;
    --muted: #8fa1aa;
    --rule: #284052;
    --accent: #b4ff46;
    --accent-soft: #1c3825;
    --accent-2: #69d9ff;
    --display: "IBM Plex Sans KR", sans-serif;
    --body: "IBM Plex Sans KR", sans-serif;
    --mono: "IBM Plex Mono", monospace;
  }

  html[data-variant="c"] {
    --paper: #fffdf7;
    --canvas: #e6dfd1;
    --surface: #f0eadc;
    --ink: #20332a;
    --muted: #6e776e;
    --rule: #cfc7b8;
    --accent: #176746;
    --accent-soft: #dce9de;
    --accent-2: #e7b83f;
    --display: "Gowun Batang", serif;
    --body: "Noto Sans KR", sans-serif;
    --mono: "IBM Plex Mono", monospace;
  }

  body {
    min-width: 320px;
    color: var(--ink);
    background: var(--canvas);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: -.018em;
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
  }

  a { color: inherit; }
  a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

  .skip-link {
    position: fixed;
    z-index: 1000;
    top: 12px;
    left: 12px;
    padding: 8px 12px;
    color: var(--paper);
    background: var(--ink);
    transform: translateY(-160%);
  }
  .skip-link:focus { transform: translateY(0); }

  .progress {
    position: fixed;
    z-index: 90;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    pointer-events: none;
  }
  .progress span { width: 0; height: 100%; display: block; background: var(--accent); }

  .section-kicker,
  .eyebrow,
  .section-number,
  .project-index,
  .metrics dd,
  .quick-contact dt,
  .site-footer,
  .name-en {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
  }

  .section-kicker,
  .eyebrow {
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
  }

  .reveal { opacity: 1; transform: none; }
  .motion-ready .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  }
  .motion-ready .reveal.is-visible { opacity: 1; transform: none; }
}

@layer components {
  .site-header {
    position: sticky;
    z-index: 80;
    top: 0;
    color: var(--ink);
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    border-bottom: 1px solid var(--rule);
    backdrop-filter: blur(18px) saturate(120%);
  }

  .site-nav {
    width: var(--shell);
    min-height: 58px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
  }

  .wordmark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
  .wordmark span {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    color: var(--paper);
    background: var(--ink);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: -.04em;
  }
  .wordmark b { font-size: 13px; letter-spacing: -.02em; }

  .nav-links { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); }
  .nav-links a, .mobile-menu a, .print-link {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: color 180ms ease;
  }
  .nav-links a:hover, .nav-links a[aria-current="true"], .print-link:hover { color: var(--ink); }
  .nav-links a[aria-current="true"]::before {
    width: 5px;
    height: 5px;
    margin-right: 7px;
    display: inline-block;
    background: var(--accent);
    border-radius: 50%;
    content: "";
    vertical-align: 2px;
  }

  .nav-actions { display: flex; align-items: center; gap: 14px; }
  .print-link { padding: 6px 10px; color: var(--ink); border: 1px solid var(--rule); }
  .menu-button { display: none; color: var(--ink); background: transparent; border: 0; cursor: pointer; }
  .mobile-menu { padding: 12px 24px 18px; background: var(--paper); border-top: 1px solid var(--rule); }
  .mobile-menu a { padding: 8px 0; display: block; }

  main, .site-footer { width: min(1280px, 100%); margin-inline: auto; background: var(--paper); }
  .hero, .section, .contact, .site-footer { padding-inline: max(36px, calc((100% - 1120px) / 2)); }

  .hero { min-height: calc(100svh - 58px); padding-block: clamp(70px, 8vw, 118px) 38px; }
  .portrait-frame { position: relative; overflow: hidden; }
  .portrait-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.02); }
  .portrait-frame span { position: absolute; right: 12px; bottom: 10px; color: #fff; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; }
  .identity-copy { min-width: 0; }
  .name-en { margin-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: .12em; }

  .quick-contact { margin-top: 24px; }
  .quick-contact div { padding-block: 9px; display: grid; grid-template-columns: 70px 1fr; border-top: 1px solid var(--rule); }
  .quick-contact dt { color: var(--muted); font-size: 9px; letter-spacing: .08em; }
  .quick-contact dd { font-size: 12px; }
  .quick-contact a { text-decoration: none; }

  .role-line { color: var(--muted); font-size: 15px; font-weight: 600; }
  .hero h1 {
    max-width: 880px;
    margin-top: 16px;
    font-family: var(--display);
    font-size: clamp(48px, 6.2vw, 82px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.06em;
  }
  .hero h1 em { color: var(--accent); font-style: normal; }
  .hero-lede { max-width: 720px; margin-top: 30px; color: var(--muted); font-size: clamp(16px, 1.7vw, 20px); }
  .hero-actions { margin-top: 34px; display: flex; align-items: center; gap: 24px; }
  .primary-action {
    padding: 12px 18px;
    color: var(--paper);
    background: var(--ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 180ms ease, background 180ms ease;
  }
  .primary-action:hover { background: var(--accent); transform: translateY(-2px); }
  .text-action { font-size: 13px; font-weight: 700; text-underline-offset: 5px; }

  .metrics { padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--rule); }
  .metrics div { padding: 18px 20px; border-left: 1px solid var(--rule); }
  .metrics div:first-child { border-left: 0; }
  .metrics dt { color: var(--accent); font-family: var(--display); font-size: clamp(28px, 3vw, 42px); font-weight: 700; line-height: 1.15; letter-spacing: -.05em; }
  .metrics dd { margin-top: 7px; color: var(--muted); font-size: 10px; letter-spacing: .04em; }

  .section { padding-block: clamp(86px, 9vw, 130px); border-top: 1px solid var(--rule); }
  .section[id] { scroll-margin-top: 78px; }
  .section-heading { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: start; gap: 28px; }
  .section-number { color: var(--accent); font-size: 12px; }
  .section-heading h2 {
    margin-top: 6px;
    font-family: var(--display);
    font-size: clamp(36px, 4.5vw, 58px);
    line-height: 1.2;
    letter-spacing: -.045em;
  }
  .section-heading > div > p:last-child:not(.section-kicker) { max-width: 650px; margin-top: 18px; color: var(--muted); }

  .profile-grid { margin: 58px 0 0 104px; display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(50px, 8vw, 100px); }
  .profile-intro { font-family: var(--display); font-size: clamp(21px, 2.2vw, 28px); line-height: 1.7; }
  .work-method { padding: 0; list-style: none; border-bottom: 1px solid var(--rule); }
  .work-method li { padding-block: 19px; display: grid; grid-template-columns: 42px 1fr; gap: 16px; border-top: 1px solid var(--rule); }
  .work-method b { color: var(--accent); font-family: var(--mono); font-size: 12px; }
  .work-method span { color: var(--muted); }
  .work-method strong { display: block; color: var(--ink); font-size: 17px; }

  .career-list { margin: 58px 0 0 104px; border-top: 1px solid var(--ink); }
  .career-item { padding-block: 34px; border-bottom: 1px solid var(--rule); }
  .career-item header { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: start; }
  .career-company { color: var(--muted); font-size: 12px; font-weight: 600; }
  .career-item h3 { margin-top: 3px; font-family: var(--display); font-size: 25px; line-height: 1.35; }
  .career-item h3 span { color: var(--muted); font-family: var(--body); font-size: 12px; font-weight: 500; }
  .career-item time { color: var(--muted); font-family: var(--mono); font-size: 11px; }
  .career-item ul { max-width: 780px; margin: 20px 0 0; padding-left: 20px; color: var(--muted); }
  .career-item li { padding-block: 3px; }
  .career-item li::marker { color: var(--accent); }

  .ai-loop { margin: 58px 0 0 104px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; border-block: 1px solid var(--ink); }
  .ai-loop li { min-height: 210px; padding: 22px; border-left: 1px solid var(--rule); }
  .ai-loop li:first-child { border-left: 0; }
  .ai-loop > li > span { color: var(--accent); font-family: var(--mono); font-size: 12px; }
  .ai-loop strong { margin-top: 46px; display: block; font-family: var(--display); font-size: 20px; }
  .ai-loop p { margin-top: 7px; color: var(--muted); font-size: 14px; }
  .ai-boundary { margin: 24px 0 0 104px; padding: 15px 18px; color: var(--muted); background: var(--surface); font-size: 13px; }
  .ai-boundary b { margin-right: 10px; color: var(--accent); }

  .project-list { margin-top: 64px; }
  .project {
    padding-block: 48px;
    display: grid;
    grid-template-columns: 80px minmax(0, 1.2fr) minmax(260px, .8fr);
    gap: clamp(28px, 4vw, 58px);
    border-top: 1px solid var(--ink);
  }
  .project:last-child { border-bottom: 1px solid var(--ink); }
  .project-index span { color: var(--accent); font-size: 25px; }
  .project-index p { margin-top: 8px; color: var(--muted); font-size: 9px; letter-spacing: .08em; }
  .project-body h3 { font-family: var(--display); font-size: clamp(27px, 3vw, 38px); line-height: 1.2; letter-spacing: -.04em; }
  .project-body header > p { margin-top: 7px; color: var(--accent); font-family: var(--mono); font-size: 10px; }
  .project-body > p { max-width: 700px; margin-top: 24px; color: var(--muted); }
  .project-proof { margin-top: 25px; border-top: 1px solid var(--rule); }
  .project-proof div { padding-block: 10px; display: grid; grid-template-columns: 96px 1fr; border-bottom: 1px solid var(--rule); }
  .project-proof dt { color: var(--accent); font-size: 11px; font-weight: 700; }
  .project-proof dd { color: var(--muted); font-size: 13px; }
  .project-link { margin-top: 24px; display: inline-block; color: var(--ink); font-size: 13px; font-weight: 700; text-underline-offset: 5px; }
  .project-visual { min-height: 310px; overflow: hidden; align-self: stretch; background: var(--surface); }
  .media-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 650ms var(--ease), filter 650ms var(--ease); }
  .project:hover .media-visual img { transform: scale(1.035); }
  .greenputt-shot img { object-position: center; filter: saturate(.9); }
  .visual-dashboard { display: grid; place-items: center; padding: 30px; }
  .mini-window { width: min(270px, 100%); padding: 14px; color: #dce8e4; background: #10212a; border: 1px solid #39515a; box-shadow: 18px 18px 0 color-mix(in srgb, var(--accent) 24%, transparent); }
  .mini-window > span { width: 6px; height: 6px; margin-right: 3px; display: inline-block; background: #688087; border-radius: 50%; }
  .mini-window p { margin-top: 26px; color: #88a0a7; font-family: var(--mono); font-size: 10px; }
  .mini-window strong { margin-block: 8px 22px; display: block; color: var(--accent); font-family: var(--mono); font-size: 34px; }
  .mini-window i { width: var(--w); height: 7px; margin-top: 8px; display: block; background: #34515a; }
  .visual-journal { padding: 34px; display: grid; align-content: center; gap: 14px; background: var(--ink); }
  .visual-journal p { display: flex; justify-content: space-between; color: var(--paper); font-family: var(--mono); font-size: 12px; border-bottom: 1px solid color-mix(in srgb, var(--paper) 25%, transparent); }
  .visual-journal p span { color: var(--accent); }
  .visual-journal strong { margin-top: 24px; color: var(--accent); font-family: var(--display); font-size: 36px; line-height: 1.05; }

  .toolkit-list, .education-list { margin: 58px 0 0 104px; border-top: 1px solid var(--ink); }
  .toolkit-list div, .education-list div { padding-block: 17px; display: grid; grid-template-columns: 210px 1fr; gap: 30px; border-bottom: 1px solid var(--rule); }
  .toolkit-list dt, .education-list dt { font-family: var(--display); font-size: 18px; font-weight: 700; }
  .toolkit-list dd, .education-list dd { color: var(--muted); }

  .contact { padding-block: clamp(90px, 10vw, 150px); color: var(--paper); background: var(--ink); }
  .contact h2 { max-width: 900px; margin-top: 17px; font-family: var(--display); font-size: clamp(40px, 5vw, 68px); line-height: 1.2; letter-spacing: -.05em; }
  .contact-links { margin-top: 50px; display: flex; flex-wrap: wrap; gap: 18px 34px; }
  .contact-links a { color: var(--paper); font-family: var(--mono); font-size: 12px; text-underline-offset: 5px; }

  .site-footer { padding-block: 18px; display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; letter-spacing: .08em; border-top: 1px solid var(--rule); }
}

@layer variants {
  /* A — Editorial Proof */
  html[data-variant="a"] .hero {
    display: grid;
    grid-template-columns: minmax(240px, .56fr) minmax(0, 1.44fr);
    grid-template-areas: "identity copy" "metrics metrics";
    gap: clamp(54px, 7vw, 100px);
    align-items: center;
  }
  html[data-variant="a"] .identity { grid-area: identity; align-self: stretch; display: grid; align-content: center; grid-template-columns: 135px 1fr; gap: 22px; }
  html[data-variant="a"] .portrait-frame { height: 180px; }
  html[data-variant="a"] .hero-copy { grid-area: copy; }
  html[data-variant="a"] .metrics { grid-area: metrics; align-self: end; }
  html[data-variant="a"] .profile-note { background: color-mix(in srgb, var(--paper) 70%, var(--surface)); }
  html[data-variant="a"] .project-greenputt { background: linear-gradient(90deg, transparent 0 62%, color-mix(in srgb, var(--accent-soft) 45%, transparent) 62%); }

  /* B — Operator System */
  html[data-variant="b"] body { background-image: linear-gradient(rgba(105, 217, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(105, 217, 255, .035) 1px, transparent 1px); background-size: 36px 36px; }
  html[data-variant="b"] .site-header { background: rgba(5, 14, 23, .92); }
  html[data-variant="b"] .wordmark span { color: #07111b; background: var(--accent); }
  html[data-variant="b"] .print-link { border-color: var(--accent); }
  html[data-variant="b"] main {
    display: grid;
    grid-template-columns: minmax(310px, 360px) minmax(0, 1fr);
    align-items: start;
  }
  html[data-variant="b"] .hero {
    position: sticky;
    top: 58px;
    min-height: calc(100svh - 58px);
    max-height: calc(100svh - 58px);
    padding: 42px 32px 26px;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    border-right: 1px solid var(--rule);
    background: linear-gradient(155deg, #0b1c2a 0%, #07111b 68%);
  }
  html[data-variant="b"] .identity { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: start; }
  html[data-variant="b"] .portrait-frame { width: 76px; height: 98px; clip-path: polygon(0 0, 100% 0, 100% 84%, 83% 100%, 0 100%); }
  html[data-variant="b"] .eyebrow { color: var(--accent-2); font-size: 8px; }
  html[data-variant="b"] .name-en { font-size: 9px; }
  html[data-variant="b"] .quick-contact { margin-top: 12px; }
  html[data-variant="b"] .quick-contact div { grid-template-columns: 52px 1fr; padding-block: 5px; }
  html[data-variant="b"] .quick-contact dd { font-size: 10px; }
  html[data-variant="b"] .hero-copy { margin-top: auto; padding-top: 34px; }
  html[data-variant="b"] .role-line { color: var(--accent-2); font-family: var(--mono); font-size: 10px; }
  html[data-variant="b"] .hero h1 { margin-top: 13px; font-size: clamp(34px, 3.4vw, 50px); letter-spacing: -.055em; }
  html[data-variant="b"] .hero-lede { margin-top: 18px; font-size: 13px; line-height: 1.65; }
  html[data-variant="b"] .hero-actions { margin-top: 20px; gap: 14px; }
  html[data-variant="b"] .primary-action { color: #07111b; background: var(--accent); }
  html[data-variant="b"] .text-action { font-size: 11px; }
  html[data-variant="b"] .metrics { margin-top: 28px; grid-template-columns: 1fr 1fr; }
  html[data-variant="b"] .metrics div { padding: 10px 12px; border: 1px solid var(--rule); border-width: 1px 0 0 1px; }
  html[data-variant="b"] .metrics div:nth-child(odd) { border-left: 0; }
  html[data-variant="b"] .metrics dt { font-family: var(--mono); font-size: 19px; }
  html[data-variant="b"] .metrics dd { font-size: 8px; }
  html[data-variant="b"] .section, html[data-variant="b"] .contact { grid-column: 2; padding-inline: clamp(38px, 6vw, 86px); }
  html[data-variant="b"] .section-heading { grid-template-columns: 48px 1fr; gap: 18px; }
  html[data-variant="b"] .section-heading h2 { font-family: var(--display); font-size: clamp(32px, 4vw, 50px); }
  html[data-variant="b"] .profile-grid,
  html[data-variant="b"] .career-list,
  html[data-variant="b"] .ai-loop,
  html[data-variant="b"] .ai-boundary,
  html[data-variant="b"] .toolkit-list,
  html[data-variant="b"] .education-list { margin-left: 66px; }
  html[data-variant="b"] .profile-intro { color: var(--accent); font-family: var(--mono); font-size: 16px; }
  html[data-variant="b"] .work-method strong { font-family: var(--display); }
  html[data-variant="b"] .career-item h3, html[data-variant="b"] .project-body h3 { font-family: var(--display); }
  html[data-variant="b"] .career-item { position: relative; padding-left: 24px; }
  html[data-variant="b"] .career-item::before { position: absolute; top: 42px; left: 0; width: 9px; height: 9px; background: var(--accent); box-shadow: 0 0 0 5px rgba(180, 255, 70, .09); content: ""; }
  html[data-variant="b"] .ai-loop { grid-template-columns: 1fr 1fr; border-color: var(--accent-2); }
  html[data-variant="b"] .ai-loop li { min-height: 180px; }
  html[data-variant="b"] .ai-loop strong { color: var(--accent); font-family: var(--mono); }
  html[data-variant="b"] .project { grid-template-columns: 56px minmax(0, 1fr); }
  html[data-variant="b"] .project-visual { grid-column: 2; min-height: 250px; }
  html[data-variant="b"] .project-index span { font-family: var(--mono); color: var(--accent-2); }
  html[data-variant="b"] .project-body header > p { color: var(--accent-2); }
  html[data-variant="b"] .project-proof dt { color: var(--accent); }
  html[data-variant="b"] .mini-window { color: var(--ink); background: #0d2330; border-color: var(--accent-2); box-shadow: 18px 18px 0 rgba(180, 255, 70, .18); }
  html[data-variant="b"] .visual-journal { background: #02070c; border: 1px solid var(--rule); }
  html[data-variant="b"] .contact { color: #06101a; background: var(--accent); }
  html[data-variant="b"] .contact .section-kicker, html[data-variant="b"] .contact-links a { color: #06101a; }
  html[data-variant="b"] .site-footer { width: min(1280px, 100%); color: var(--muted); background: #02070c; }

  /* C — Product Casebook */
  html[data-variant="c"] body { background-image: radial-gradient(circle at 8% 12%, rgba(231, 184, 63, .18), transparent 28%), radial-gradient(circle at 92% 40%, rgba(23, 103, 70, .12), transparent 32%); }
  html[data-variant="c"] main { overflow: hidden; box-shadow: 0 28px 90px rgba(72, 60, 34, .13); }
  html[data-variant="c"] .wordmark span { border-radius: 50%; background: var(--accent); }
  html[data-variant="c"] .hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    grid-template-areas: "copy identity" "metrics metrics";
    gap: 60px;
    align-items: center;
    background: linear-gradient(145deg, #fffdf7 0 60%, #e1eadf 60%);
  }
  html[data-variant="c"] .hero::before { position: absolute; top: 14%; right: 9%; width: 190px; height: 190px; border: 1px solid rgba(23, 103, 70, .22); border-radius: 50%; content: ""; }
  html[data-variant="c"] .hero-copy { position: relative; z-index: 1; grid-area: copy; }
  html[data-variant="c"] .hero h1 { font-size: clamp(52px, 6.4vw, 84px); font-weight: 700; }
  html[data-variant="c"] .hero h1 em { position: relative; }
  html[data-variant="c"] .hero h1 em::after { position: absolute; right: 0; bottom: -7px; left: 0; height: 8px; background: var(--accent-2); opacity: .55; content: ""; transform: rotate(-1deg); }
  html[data-variant="c"] .identity { position: relative; z-index: 1; grid-area: identity; align-self: end; }
  html[data-variant="c"] .portrait-frame { width: min(290px, 100%); height: 390px; margin-left: auto; border-radius: 160px 160px 12px 12px; box-shadow: 24px 24px 0 rgba(23, 103, 70, .13); }
  html[data-variant="c"] .identity-copy { width: min(290px, 100%); margin: 26px 0 0 auto; }
  html[data-variant="c"] .metrics { grid-area: metrics; border-color: var(--accent); }
  html[data-variant="c"] .metrics div { border-color: rgba(23, 103, 70, .26); }
  html[data-variant="c"] .section-heading { grid-template-columns: 58px 1fr; }
  html[data-variant="c"] .section-number { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: var(--accent); border-radius: 50%; }
  html[data-variant="c"] .profile-note { position: relative; }
  html[data-variant="c"] .profile-note::after { position: absolute; right: -70px; bottom: -120px; width: 260px; height: 260px; border: 42px solid rgba(231, 184, 63, .16); border-radius: 50%; content: ""; }
  html[data-variant="c"] .work-method li { border-color: rgba(23, 103, 70, .23); }
  html[data-variant="c"] .career-list { border-top-color: var(--accent); }
  html[data-variant="c"] .career-item { padding-left: 25px; border-left: 2px solid var(--accent-soft); }
  html[data-variant="c"] .career-item:hover { border-left-color: var(--accent); }
  html[data-variant="c"] .ai-loop { gap: 14px; border: 0; }
  html[data-variant="c"] .ai-loop li { min-height: 230px; background: var(--surface); border: 0; border-radius: 2px 34px 2px 2px; }
  html[data-variant="c"] .ai-loop strong { font-family: var(--display); }
  html[data-variant="c"] .project-list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
  html[data-variant="c"] .project {
    padding: 28px;
    grid-template-columns: 46px 1fr;
    grid-template-rows: auto auto;
    align-content: start;
    border: 1px solid var(--rule);
    background: #fffef9;
  }
  html[data-variant="c"] .project:hover { border-color: var(--accent); }
  html[data-variant="c"] .project-visual { min-height: 270px; grid-column: 1 / -1; grid-row: 2; margin-top: 28px; }
  html[data-variant="c"] .project-greenputt { grid-column: 1 / -1; grid-template-columns: 46px minmax(0, .72fr) minmax(380px, 1.28fr); grid-template-rows: auto; }
  html[data-variant="c"] .project-greenputt .project-visual { grid-column: 3; grid-row: 1; margin-top: 0; }
  html[data-variant="c"] .project-catalog { grid-column: 1 / -1; grid-template-columns: 46px minmax(0, 1fr) minmax(300px, .72fr); grid-template-rows: auto; }
  html[data-variant="c"] .project-catalog .project-visual { grid-column: 3; grid-row: 1; margin-top: 0; }
  html[data-variant="c"] .catalog-shot img { object-position: center 8%; }
  html[data-variant="c"] .project-body h3 { font-family: var(--display); }
  html[data-variant="c"] .project-body header > p { color: var(--accent); }
  html[data-variant="c"] .project-proof div { grid-template-columns: 80px 1fr; }
  html[data-variant="c"] .visual-journal { background: var(--accent); }
  html[data-variant="c"] .visual-journal p, html[data-variant="c"] .visual-journal strong { color: #fff; }
  html[data-variant="c"] .contact { position: relative; background: var(--accent); overflow: hidden; }
  html[data-variant="c"] .contact::after { position: absolute; right: -90px; bottom: -150px; width: 360px; height: 360px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; content: ""; }
  html[data-variant="c"] .contact .section-kicker { color: var(--accent-2); }
}

@layer responsive {
  @media (max-width: 980px) {
    :root { --shell: min(100% - 40px, 900px); }
    .nav-links { display: none; }
    .menu-button { display: inline-block; }
    .hero, html[data-variant="a"] .hero, html[data-variant="c"] .hero {
      min-height: auto;
      grid-template-columns: 1fr;
      grid-template-areas: "copy" "identity" "metrics";
      gap: 44px;
    }
    .identity, html[data-variant="a"] .identity { grid-area: identity; grid-template-columns: 110px 1fr; align-items: center; }
    .portrait-frame, html[data-variant="a"] .portrait-frame { width: 110px; height: 145px; }
    html[data-variant="c"] .identity { align-self: auto; display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: center; }
    html[data-variant="c"] .portrait-frame { width: 150px; height: 190px; margin: 0; border-radius: 90px 90px 6px 6px; }
    html[data-variant="c"] .identity-copy { width: auto; margin: 0; }
    .metrics { grid-template-columns: 1fr 1fr; }
    .metrics div:nth-child(3) { border-left: 0; }
    .profile-grid { grid-template-columns: 1fr; }
    .ai-loop { grid-template-columns: 1fr 1fr; }
    .project { grid-template-columns: 56px 1fr; }
    .project-visual { grid-column: 2; }

    html[data-variant="b"] main { display: block; }
    html[data-variant="b"] .hero { position: relative; top: auto; min-height: auto; max-height: none; display: grid; grid-template-columns: 1fr; border-right: 0; overflow: visible; }
    html[data-variant="b"] .identity { grid-template-columns: 94px 1fr; }
    html[data-variant="b"] .portrait-frame { width: 94px; height: 122px; }
    html[data-variant="b"] .hero-copy { margin-top: 0; }
    html[data-variant="b"] .metrics { grid-template-columns: repeat(4, 1fr); }
    html[data-variant="b"] .metrics div:nth-child(odd) { border-left: 1px solid var(--rule); }
    html[data-variant="b"] .metrics div:first-child { border-left: 0; }
    html[data-variant="b"] .section, html[data-variant="b"] .contact { padding-inline: max(36px, calc((100% - 1120px) / 2)); }

    html[data-variant="c"] .project-list { grid-template-columns: 1fr; }
    html[data-variant="c"] .project-greenputt,
    html[data-variant="c"] .project-catalog { grid-column: 1; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; }
    html[data-variant="c"] .project-greenputt .project-visual,
    html[data-variant="c"] .project-catalog .project-visual { grid-column: 1 / -1; grid-row: 2; margin-top: 28px; }
  }

  @media (max-width: 700px) {
    .motion-ready .reveal { opacity: 1; transform: none; transition: none; }
    body { font-size: 15px; }
    .site-nav { min-height: 54px; }
    .wordmark b, .print-link { display: none; }
    .hero, .section, .contact, .site-footer,
    html[data-variant="b"] .section, html[data-variant="b"] .contact { padding-inline: 22px; }
    .hero { padding-block: 62px 24px; }
    .hero h1 { font-size: clamp(39px, 12vw, 58px); }
    .identity, html[data-variant="a"] .identity, html[data-variant="c"] .identity { grid-template-columns: 92px 1fr; }
    .portrait-frame, html[data-variant="a"] .portrait-frame, html[data-variant="c"] .portrait-frame { width: 92px; height: 122px; border-radius: 0; box-shadow: none; }
    .quick-contact { margin-top: 12px; }
    .quick-contact div { grid-template-columns: 54px 1fr; padding-block: 5px; }
    .quick-contact dd { font-size: 10px; }
    .hero-actions { flex-direction: column; align-items: flex-start; }
    .metrics, html[data-variant="b"] .metrics { grid-template-columns: 1fr 1fr; }
    .metrics div, html[data-variant="b"] .metrics div { border-left: 1px solid var(--rule); }
    .metrics div:nth-child(odd), html[data-variant="b"] .metrics div:nth-child(odd) { border-left: 0; }
    .section { padding-block: 74px; }
    .section-heading, html[data-variant="b"] .section-heading { grid-template-columns: 38px 1fr; gap: 12px; }
    html[data-variant="c"] .section-number { width: 32px; height: 32px; }
    .section-heading h2 { font-size: 35px; }
    .profile-grid, .career-list, .ai-loop, .ai-boundary, .toolkit-list, .education-list,
    html[data-variant="b"] .profile-grid, html[data-variant="b"] .career-list,
    html[data-variant="b"] .ai-loop, html[data-variant="b"] .ai-boundary,
    html[data-variant="b"] .toolkit-list, html[data-variant="b"] .education-list { margin-left: 0; }
    .profile-grid { margin-top: 42px; gap: 38px; }
    .career-list { margin-top: 42px; }
    .career-item header { grid-template-columns: 1fr; gap: 8px; }
    .career-item h3 { font-size: 22px; }
    .ai-loop, html[data-variant="b"] .ai-loop, html[data-variant="c"] .ai-loop { margin-top: 42px; grid-template-columns: 1fr; gap: 0; }
    .ai-loop li, html[data-variant="b"] .ai-loop li, html[data-variant="c"] .ai-loop li { min-height: 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; }
    .ai-loop strong { margin-top: 18px; }
    .ai-boundary { margin-top: 18px; }
    .project-list, html[data-variant="c"] .project-list { margin-top: 42px; display: block; }
    .project, html[data-variant="b"] .project, html[data-variant="c"] .project,
    html[data-variant="c"] .project-greenputt,
    html[data-variant="c"] .project-catalog {
      padding-block: 32px;
      padding-inline: 0;
      grid-template-columns: 38px 1fr;
      grid-template-rows: auto auto;
      gap: 18px;
      border-width: 1px 0 0;
      background: transparent;
    }
    .project-visual, html[data-variant="b"] .project-visual, html[data-variant="c"] .project-visual,
    html[data-variant="c"] .project-greenputt .project-visual,
    html[data-variant="c"] .project-catalog .project-visual { min-height: 230px; grid-column: 1 / -1; grid-row: 2; margin-top: 12px; }
    .project-proof div { grid-template-columns: 75px 1fr; }
    .toolkit-list, .education-list { margin-top: 42px; }
    .toolkit-list div, .education-list div { grid-template-columns: 1fr; gap: 7px; }
    .contact h2 { font-size: 38px; }
    .site-footer { gap: 20px; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .motion-ready .reveal { opacity: 1; transform: none; transition: none; }
    .media-visual img, .primary-action { transition: none; }
  }

  @media print {
    .site-header, .progress, .hero-actions { display: none !important; }
    body { background: #fff; }
    main { box-shadow: none; }
  }
}