* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root,
    [data-theme="dark"] {
      color-scheme: dark;
      --lacquer-deep: oklch(6% .004 95);
      --lacquer: #181716;
      --lacquer-raised: oklch(13.5% .006 95);
      --graphite: oklch(17.5% .008 95);
      --graphite-2: oklch(21.5% .008 95);
      --champagne: oklch(91% 0 0);
      --text: oklch(88% 0 0);
      --text-muted: oklch(72% 0 0);
      --text-faint: oklch(62% 0 0);
      --text-mute-deep: oklch(52% 0 0);
      --rule: oklch(78% 0 0 / .16);
      --kinpaku: #ff7a1a;
      --kinpaku-pale: #ffa05a;
      --kinpaku-rich: #ee6c10;
      --kinpaku-deep: #c65d18;
      --linkedin: #70b5f9;
      --linkedin-ink: #0a2a4a;
      --patina: oklch(70% .12 188);
      --patina-pale: oklch(82% .07 188);
      --patina-deep: oklch(49% .08 188);
      --vermilion: oklch(58% .15 35);
      --shadow: oklch(0% 0 0 / .4);
      --header-bg: color-mix(in srgb, var(--lacquer) 92%, transparent);
      --menu-bg: color-mix(in srgb, var(--lacquer) 96%, transparent);
      --overlay-fade: oklch(6% .004 95 / .9);
      --surface-glass: oklch(6% .004 95 / .72);
      --surface-glass-strong: oklch(6% .004 95 / .82);
      --pill-border: oklch(91% 0 0 / .26);
      --pill-text: oklch(91% 0 0);
      --modal-backdrop: oklch(5% .004 95 / .82);
      --elevation-soft: oklch(0% 0 0 / .22);
      --elevation-deep: oklch(0% 0 0 / .55);
      --media-filter: saturate(.9) contrast(1.04) brightness(.9);
      --ink-on-kinpaku: oklch(4% .004 95);
      --font-display: "Alumni Sans Pinstripe", "Albert Sans", Arial, sans-serif;
      --font-wordmark: "Alumni Sans", "Alumni Sans Pinstripe", "Albert Sans", Arial, sans-serif;
      --font: "Albert Sans", "Avenir Next", "Helvetica Neue", Arial, system-ui, sans-serif;
      --font-mono: "SFMono-Regular", "Roboto Mono", "JetBrains Mono", Consolas, monospace;
      --type-display-size: clamp(3.4rem, 6.5vw, 5.6rem);
      --type-display-weight: 300;
      --type-display-line: 1.02;
      --type-display-track: -.01em;
      --type-headline-size: clamp(2.6rem, 4vw, 3.4rem);
      --type-headline-weight: 600;
      --type-headline-line: 1.04;
      --type-headline-track: -.005em;
      --header-height: 4.875rem;
      --scroll-offset: calc(var(--header-height) + 1.25rem);
    }

    [data-theme="light"] {
      color-scheme: light;
      --lacquer-deep: oklch(94% .014 95);
      --lacquer: oklch(97% .012 95);
      --lacquer-raised: oklch(99% .008 95);
      --graphite: oklch(91% .012 95);
      --graphite-2: oklch(88% .014 95);
      --champagne: oklch(18% .02 95);
      --text: oklch(25% .018 95);
      --text-muted: oklch(45% .015 95);
      --text-faint: oklch(55% .012 95);
      --text-mute-deep: oklch(65% .01 95);
      --rule: oklch(25% .02 95 / .12);
      --kinpaku: #ff7a1a;
      --kinpaku-pale: #ffa05a;
      --kinpaku-rich: #ee6c10;
      --kinpaku-deep: #c65d18;
      --linkedin: #0a66c2;
      --linkedin-ink: #ffffff;
      --kinpaku-ink: var(--patina);
      --patina: oklch(70% .12 188);
      --patina-pale: oklch(82% .07 188);
      --patina-deep: oklch(49% .08 188);
      --vermilion: oklch(52% .16 35);
      --link-on-paper: var(--patina-deep);
      --link-on-paper-hover: var(--patina);
      --nav-active: var(--patina-deep);
      --shadow: oklch(25% .02 95 / .08);
      --header-bg: linear-gradient(oklch(99% .008 95 / .96), oklch(97% .012 95 / .88));
      --menu-bg: oklch(99% .008 95 / .96);
      --overlay-fade: oklch(97% .012 95 / .92);
      --surface-glass: oklch(99% .008 95 / .92);
      --surface-glass-strong: oklch(99% .008 95 / .94);
      --pill-border: oklch(25% .02 95 / .16);
      --pill-text: oklch(18% .02 95);
      --modal-backdrop: oklch(25% .018 95 / .38);
      --elevation-soft: oklch(25% .02 95 / .08);
      --elevation-deep: oklch(25% .02 95 / .16);
      --media-filter: saturate(1.12) contrast(1.04) brightness(1);
      --ink-on-kinpaku: oklch(14% .018 95);
    }

    [data-theme="dark"] {
      --kinpaku-ink: var(--kinpaku);
      --link-on-paper: var(--kinpaku);
      --link-on-paper-hover: var(--kinpaku-pale);
      --nav-active: var(--kinpaku);
    }

    [data-theme="dark"] .tag,
    [data-theme="dark"] .industry {
      color: var(--text);
    }

    [data-theme="light"] .eyebrow {
      color: var(--kinpaku-ink);
    }

    [data-theme="light"] .nav-links a:hover,
    [data-theme="light"] .nav-links a:focus-visible,
    [data-theme="light"] .nav-links a.is-active {
      color: var(--nav-active);
    }

    [data-theme="light"] .tag:hover,
    [data-theme="light"] .tag:focus-visible,
    [data-theme="light"] .industry:hover,
    [data-theme="light"] .industry:focus-visible {
      border-color: var(--kinpaku);
      color: var(--kinpaku);
    }

    [data-theme="light"] .hero-role {
      color: var(--kinpaku);
    }

    [data-theme="light"] .hero .eyebrow {
      color: var(--kinpaku);
    }

    [data-theme="light"] .testimonial-avatar {
      border: 1px solid oklch(49% .08 188 / .18);
      background: oklch(82% .07 188 / .32);
      color: var(--patina-deep);
    }

    [data-theme="light"] .hero-status::before {
      background: var(--patina);
      box-shadow: 0 0 0 3px oklch(82% .07 188 / .28);
    }

    .project-ribbon[data-accent="stono"] {
      color: #CDDC39;
      border-color: #CDDC39;
    }

    .card-tag[data-accent="stono"] {
      color: #CDDC39;
      border-color: #CDDC39;
    }

    .project-ribbon[data-accent="wip"] {
      color: var(--patina);
      border-color: var(--patina);
    }

    .card-tag[data-accent="wip"] {
      color: var(--patina);
      border-color: var(--patina);
    }

    [data-theme="light"] .project-ribbon[data-accent="stono"],
    [data-theme="light"] .card-tag[data-accent="stono"] {
      color: var(--kinpaku-ink);
      border-color: var(--kinpaku-ink);
    }

    [data-theme="light"] .project-ribbon[data-accent="wip"],
    [data-theme="light"] .card-tag[data-accent="wip"] {
      color: var(--kinpaku-ink);
      border-color: var(--kinpaku-ink);
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      min-height: 100vh;
      background: var(--lacquer);
      color: var(--text);
      font-family: var(--font);
      font-weight: 300;
      transition: background-color .25s ease, color .25s ease;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .page-shell {
      max-width: 1320px;
      margin: 0 auto;
      counter-reset: section-head;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 10;
      border-bottom: 1px solid var(--rule);
      background: var(--header-bg);
      backdrop-filter: blur(18px);
    }

    .nav {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      max-width: 1100px;
      margin: 0 auto;
      padding: 22px 48px;
    }

    .nav-logo {
      color: var(--champagne);
      font-family: var(--font-wordmark);
      font-size: 1.86rem;
      letter-spacing: .08em;
      white-space: nowrap;
    }

    .nav-logo-number {
      color: var(--kinpaku);
    }

    .mark-tld {
      font-size: .6em;
      letter-spacing: .04em;
    }

    .nav-toolbar {
      display: flex;
      align-items: center;
      gap: 22px;
    }

    .theme-toggle {
      display: grid;
      flex: 0 0 auto;
      place-items: center;
      width: 38px;
      height: 34px;
      border: 1px solid var(--rule);
      background: transparent;
      color: var(--champagne);
      cursor: pointer;
      transition: border-color .2s ease, color .2s ease;
    }

    .theme-toggle:hover,
    .theme-toggle:focus-visible {
      border-color: var(--kinpaku);
      color: var(--kinpaku);
    }

    .theme-toggle-icon {
      display: none;
      font-size: .95rem;
      line-height: 1;
    }

    [data-theme="dark"] .theme-toggle-icon--sun {
      display: block;
    }

    [data-theme="light"] .theme-toggle-icon--moon {
      display: block;
    }

    .nav-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 22px;
    }

    .nav-links a {
      color: var(--text-faint);
      font-family: var(--font-mono);
      font-size: .82rem;
      letter-spacing: .04em;
      transition: color .2s ease;
    }

    .nav-links a:hover,
    .nav-links a:focus-visible,
    .nav-links a.is-active {
      color: var(--kinpaku);
    }

    .nav-toggle {
      display: none;
      width: 38px;
      height: 34px;
      border: 1px solid var(--rule);
      background: transparent;
      color: var(--champagne);
      cursor: pointer;
      place-items: center;
    }

    .nav-toggle-lines {
      position: relative;
      display: block;
      width: 16px;
      height: 10px;
    }

    .nav-toggle-lines::before,
    .nav-toggle-lines::after {
      content: "";
      position: absolute;
      left: 0;
      width: 16px;
      height: 1px;
      background: currentColor;
      transition: transform .2s ease, top .2s ease;
    }

    .nav-toggle-lines::before {
      top: 0;
    }

    .nav-toggle-lines::after {
      top: 9px;
    }

    .nav.is-open .nav-toggle-lines::before {
      top: 5px;
      transform: rotate(45deg);
    }

    .nav.is-open .nav-toggle-lines::after {
      top: 5px;
      transform: rotate(-45deg);
    }

    .hero {
      max-width: 1100px;
      margin: 0 auto;
      padding: 88px 48px 72px;
      border-bottom: 1px solid var(--rule);
    }

    .eyebrow {
      color: var(--kinpaku);
      font-family: var(--font-mono);
      font-size: .82rem;
      font-weight: 500;
      letter-spacing: .22em;
      text-transform: uppercase;
    }

    h2.section-eyebrow,
    .cta-box h2,
    .case-title {
      color: var(--champagne);
      font-family: var(--font-display);
      font-size: var(--type-headline-size);
      font-weight: var(--type-headline-weight);
      letter-spacing: var(--type-headline-track);
      line-height: var(--type-headline-line);
      text-wrap: balance;
    }

    h2.section-eyebrow,
    .cta-box h2 {
      counter-increment: section-head;
    }

    h2.section-eyebrow::before,
    .cta-box h2::before {
      content: counter(section-head, decimal-leading-zero) ".";
      display: inline;
      margin-right: clamp(7px, 1vw, 11px);
      color: var(--kinpaku);
      font-family: inherit;
      font-size: 1em;
      font-weight: inherit;
      letter-spacing: inherit;
      line-height: inherit;
    }

    h2.section-eyebrow {
      margin: 0 0 28px;
    }

    #expertise,
    #industries-title,
    #portfolio,
    #testimonials,
    #contact,
    #how-i-work,
    #faq {
      scroll-margin-top: var(--scroll-offset);
    }

    #contact {
      border-bottom: none;
    }

    .hero .eyebrow {
      font-size: 1rem;
      text-transform: none;
    }

    .hero h1 {
      max-width: 780px;
      margin-top: 0;
      color: var(--champagne);
      font-family: var(--font-display);
      font-size: var(--type-display-size);
      font-weight: var(--type-display-weight);
      letter-spacing: var(--type-display-track);
      line-height: var(--type-display-line);
      text-wrap: balance;
    }

    .hero h1 em {
      color: var(--kinpaku);
      font-style: normal;
    }

    .hero-role {
      margin-top: 16px;
      color: var(--kinpaku);
      font-family: var(--font-mono);
      font-size: .82rem;
      letter-spacing: .08em;
    }

    .hero-meta {
      margin-top: 20px;
    }

    .hero-meta-line {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0;
      color: var(--text-faint);
      font-family: var(--font-mono);
      font-size: .78rem;
      letter-spacing: .04em;
      line-height: 1.6;
    }

    .hero-meta-sep {
      flex: 0 0 auto;
      padding-inline: .45em;
      color: var(--text-faint);
      letter-spacing: 0;
    }

    .hero-meta-part {
      color: var(--text-faint);
    }

    .hero-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--patina);
    }

    .hero-status::before {
      content: "";
      flex: 0 0 auto;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--patina);
      box-shadow: 0 0 0 3px oklch(70% .12 188 / .22);
    }

    .hero-about {
      max-width: 620px;
      margin-top: 32px;
      color: var(--text);
      font-size: .98rem;
      line-height: 1.8;
      text-wrap: pretty;
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 32px;
    }

    .tag,
    .card-tag,
    .industry {
      border: 1px solid var(--rule);
      color: var(--text-faint);
      font-family: var(--font-mono);
    }

    .tag,
    .industry {
      border-radius: 3px;
      font-size: .8rem;
      letter-spacing: .04em;
      padding: 8px 16px;
      transition: border-color .2s ease, color .2s ease;
    }

    .card-tag {
      border-radius: 3px;
      font-size: .72rem;
      letter-spacing: .06em;
      padding: 5px 12px;
    }

    .tag:hover,
    .industry:hover {
      border-color: var(--patina-pale);
      color: var(--patina-pale);
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      max-width: 1100px;
      margin: 0 auto;
      border-bottom: 1px solid var(--rule);
    }

    .stat {
      padding: 48px 32px;
      border-right: 1px solid var(--rule);
    }

    .stat:first-child {
      padding-left: 48px;
    }

    .stat:last-child {
      border-right: 0;
    }

    .stat-num {
      color: var(--kinpaku);
      font-family: var(--font-display);
      font-size: var(--type-headline-size);
      font-weight: var(--type-headline-weight);
      letter-spacing: var(--type-headline-track);
      line-height: var(--type-headline-line);
    }

    .stat-label {
      margin-top: 6px;
      color: var(--text-faint);
      font-family: var(--font-mono);
      font-size: .78rem;
      letter-spacing: .04em;
    }

    .section {
      max-width: 1100px;
      margin: 0 auto;
      padding: 56px 48px;
      border-bottom: 1px solid var(--rule);
    }

    .section-eyebrow {
      margin-bottom: 28px;
    }

    .skills {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
      gap: 1px;
      border: 1px solid var(--rule);
      background: var(--rule);
    }

    .skill {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 58px;
      padding: 16px 18px;
      background: var(--lacquer);
      color: var(--text-muted);
      font-size: .82rem;
      transition: background .15s ease, color .15s ease;
    }

    .skill:hover {
      background: var(--lacquer-raised);
      color: var(--champagne);
    }

    .skill-dot {
      flex: 0 0 auto;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--kinpaku);
    }

    .industries {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .process-list {
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .process-step {
      display: grid;
      grid-template-columns: 20px 1fr;
      gap: 0 20px;
    }

    .process-marker {
      position: relative;
      display: flex;
      justify-content: center;
    }

    .process-marker::after {
      content: "";
      position: absolute;
      top: 14px;
      bottom: -28px;
      width: 1px;
      background: var(--rule);
    }

    .process-step:last-child .process-marker::after {
      display: none;
    }

    .process-dot {
      position: relative;
      z-index: 1;
      width: 8px;
      height: 8px;
      margin-top: 5px;
      border-radius: 50%;
      background: var(--kinpaku);
      box-shadow: 0 0 0 4px var(--lacquer);
    }

    .process-title {
      margin-bottom: 8px;
      color: var(--champagne);
      font-size: .92rem;
      font-weight: 500;
    }

    .process-desc {
      color: var(--text-muted);
      font-size: .82rem;
      line-height: 1.65;
      text-wrap: pretty;
    }

    .faq-list {
      border: 1px solid var(--rule);
    }

    .faq-item {
      border-bottom: 1px solid var(--rule);
    }

    .faq-item:last-child {
      border-bottom: 0;
    }

    .faq-item summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 22px;
      color: var(--champagne);
      font-size: .9rem;
      font-weight: 500;
      line-height: 1.45;
      list-style: none;
      cursor: pointer;
      transition: color .2s ease;
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-item summary::after {
      flex: 0 0 auto;
      color: var(--kinpaku);
      font-family: var(--font-mono);
      font-size: 1rem;
      line-height: 1;
      content: "+";
    }

    .faq-item[open] summary::after {
      content: "\2212";
    }

    .faq-item summary:hover,
    .faq-item[open] summary {
      color: var(--kinpaku);
    }

    .faq-answer {
      padding: 0 22px 20px;
      color: var(--text-muted);
      font-size: .88rem;
      line-height: 1.7;
      text-wrap: pretty;
    }

    .ticker-section {
      position: relative;
      width: 100vw;
      max-width: none;
      margin-inline: calc(50% - 50vw);
      overflow: hidden;
    }

    .ticker-outer {
      overflow: hidden;
      padding: 8px 0;
    }

    .ticker-track {
      display: flex;
      width: max-content;
      gap: 16px;
      animation: ticker 40s linear infinite;
    }

    .ticker-outer:hover .ticker-track {
      animation-play-state: paused;
    }

    @keyframes ticker {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    .testimonial-card,
    .project-card {
      border: 1px solid var(--rule);
      border-radius: 4px;
      background: var(--lacquer-raised);
    }

    .testimonial-card {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      width: 280px;
      padding: 20px 22px;
      transition: border-color .2s ease;
    }

    .testimonial-card:hover {
      border-color: var(--kinpaku);
    }

    .testimonial-text {
      flex: 1;
      margin-bottom: 16px;
      color: var(--text-muted);
      font-size: .85rem;
      line-height: 1.6;
    }

    .testimonial-author {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: auto;
    }

    .testimonial-avatar {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--graphite-2);
      color: var(--kinpaku);
      font-family: var(--font-display);
      font-size: 1rem;
    }

    .testimonial-name {
      color: var(--champagne);
      font-size: .82rem;
      font-weight: 500;
    }

    .testimonial-handle {
      margin-top: 2px;
      color: var(--text-faint);
      font-size: .72rem;
    }

    .project-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
    }

    .project-card {
      overflow: hidden;
      cursor: pointer;
      transition: border-color .2s ease, box-shadow .2s ease;
    }

    .project-card:not(.project-card--placeholder):hover,
    .project-card:not(.project-card--placeholder):focus-visible {
      outline: 0;
      border-color: var(--kinpaku);
      box-shadow: 0 8px 28px var(--shadow);
    }

    .project-card--placeholder {
      cursor: default;
    }

    .project-thumb-placeholder {
      display: block;
      width: 100%;
      height: 180px;
      position: relative;
      background: var(--lacquer-raised);
    }

    .project-thumb-placeholder::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(var(--rule) 1px, transparent 1px),
        linear-gradient(90deg, var(--rule) 1px, transparent 1px);
      background-size: 24px 24px;
      opacity: .35;
      mask-image: linear-gradient(to bottom, black 20%, transparent 95%);
    }

    .project-title--muted {
      color: var(--text-muted);
    }

    .project-desc--muted {
      color: var(--text-faint);
      font-style: italic;
    }

    .project-media {
      position: relative;
      overflow: hidden;
    }

    .project-thumb {
      display: block;
      width: 100%;
      height: 180px;
      object-fit: cover;
      object-position: center;
      filter: var(--media-filter);
    }

    .project-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
      padding: 14px;
      background: linear-gradient(to top, var(--overlay-fade), transparent);
      opacity: 0;
      transition: opacity .2s ease;
    }

    .project-card:hover .project-overlay,
    .project-card:focus-visible .project-overlay {
      opacity: 1;
    }

    .project-ribbon {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 24px;
      padding: 2px 9px;
      border: 1px solid var(--rule);
      border-radius: 3px;
      background: var(--surface-glass);
      color: var(--kinpaku-rich);
      font-family: var(--font-mono);
      font-size: .68rem;
      font-weight: 500;
      letter-spacing: .05em;
      line-height: 1;
      text-transform: uppercase;
      backdrop-filter: blur(10px);
      box-shadow: 0 8px 18px var(--elevation-soft);
      white-space: nowrap;
    }

    .project-action {
      border: 1px solid var(--kinpaku);
      background: var(--kinpaku);
      color: var(--ink-on-kinpaku);
      font-family: var(--font-mono);
      font-size: .68rem;
      font-weight: 500;
      letter-spacing: .08em;
      padding: 7px 10px;
      text-transform: uppercase;
    }

    .project-platforms {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: flex-end;
    }

    .platform-pill {
      border: 1px solid var(--pill-border);
      background: var(--surface-glass);
      color: var(--pill-text);
      font-family: var(--font-mono);
      font-size: .62rem;
      letter-spacing: .07em;
      padding: 6px 8px;
      text-transform: uppercase;
    }

    .project-body {
      padding: 18px 20px 20px;
      border-top: 1px solid var(--rule);
    }

    .project-body h3 {
      margin-bottom: 6px;
      color: var(--champagne);
      font-size: .92rem;
      font-weight: 500;
    }

    .project-body p {
      color: var(--text-faint);
      font-size: .78rem;
      line-height: 1.6;
    }

    .card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
    }

    .card-tag {
      border-radius: 3px;
      color: var(--kinpaku-rich);
      font-family: var(--font-mono);
      font-size: .68rem;
      letter-spacing: .05em;
      padding: 2px 8px;
    }

    .case-modal {
      position: fixed;
      inset: 0;
      z-index: 40;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: var(--modal-backdrop);
      backdrop-filter: blur(18px);
    }

    .case-modal.is-open {
      display: flex;
    }

    .case-panel {
      position: relative;
      width: min(920px, 100%);
      max-height: min(760px, calc(100vh - 48px));
      overflow: auto;
      border: 1px solid var(--rule);
      border-radius: 4px;
      background: var(--lacquer);
      box-shadow: 0 24px 80px var(--elevation-deep);
    }

    .case-close {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 1;
      width: 36px;
      height: 36px;
      border: 1px solid var(--rule);
      background: var(--surface-glass-strong);
      color: var(--champagne);
      cursor: pointer;
      font-family: var(--font-mono);
      font-size: 1rem;
      transition: border-color .2s ease, color .2s ease;
    }

    .case-close:hover,
    .case-close:focus-visible {
      border-color: var(--kinpaku);
      color: var(--kinpaku);
    }

    .case-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
      gap: 0;
      border-bottom: 1px solid var(--rule);
    }

    .case-image {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 320px;
      object-fit: cover;
      filter: var(--media-filter);
    }

    .case-summary {
      padding: 42px 40px;
    }

    .case-kicker {
      color: var(--patina);
      font-family: var(--font-mono);
      font-size: .66rem;
      font-weight: 500;
      letter-spacing: .22em;
      text-transform: uppercase;
    }

    .case-title {
      margin-top: 14px;
    }

    .case-desc {
      margin-top: 18px;
      color: var(--text-muted);
      font-size: .92rem;
      line-height: 1.7;
    }

    .case-links {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 26px;
    }

    .store-link {
      border: 1px solid var(--rule);
      color: var(--champagne);
      font-family: var(--font-mono);
      font-size: .72rem;
      letter-spacing: .06em;
      padding: 10px 12px;
      text-transform: uppercase;
      transition: border-color .2s ease, color .2s ease;
    }

    .store-link:hover,
    .store-link:focus-visible {
      border-color: var(--kinpaku);
      color: var(--kinpaku);
    }

    .store-link.is-disabled {
      color: var(--text-mute-deep);
      cursor: not-allowed;
      pointer-events: none;
    }

    .case-details {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--rule);
    }

    .case-detail {
      min-height: 132px;
      padding: 22px;
      background: var(--lacquer);
    }

    .case-detail-label {
      color: var(--kinpaku-deep);
      font-family: var(--font-mono);
      font-size: .84rem;
      font-weight: 500;
      letter-spacing: .2em;
      text-transform: uppercase;
    }

    .case-detail-value {
      margin-top: 12px;
      color: var(--text-muted);
      font-size: .85rem;
      line-height: 1.65;
    }

    .cta-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
    }

    .cta-box h2 em {
      color: var(--kinpaku);
      font-style: normal;
    }

    .cta-box p {
      max-width: 440px;
      margin-top: 10px;
      color: var(--text-faint);
      font-size: .88rem;
      line-height: 1.7;
    }

    .cta-email {
      margin-top: 18px;
      color: var(--text-muted);
      font-size: .88rem;
      line-height: 1.7;
    }

    .cta-email-address {
      color: #ff7a1a;
      font-family: var(--font-mono);
      font-size: .82rem;
      letter-spacing: .02em;
      user-select: all;
    }

    .cta-aside {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .btn {
      display: inline-block;
      border: 1px solid transparent;
      padding: 10px 22px;
      font-family: var(--font-mono);
      font-size: .82rem;
      letter-spacing: .04em;
      transition: background .2s ease, color .2s ease, border-color .2s ease;
    }

    .btn-email {
      border-color: var(--kinpaku);
      background: transparent;
      color: var(--kinpaku);
      font-weight: 500;
    }

    .btn-email:hover,
    .btn-email:focus-visible {
      border-color: var(--kinpaku);
      background: var(--kinpaku);
      color: var(--ink-on-kinpaku);
    }

    .btn-linkedin {
      border-color: var(--linkedin);
      background: transparent;
      color: var(--linkedin);
      font-weight: 500;
    }

    .btn-linkedin:hover,
    .btn-linkedin:focus-visible {
      border-color: var(--linkedin);
      background: var(--linkedin);
      color: var(--linkedin-ink);
    }

    .site-footer {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 28px;
      padding: 36px 48px 40px;
      color: var(--text-mute-deep);
      font-family: var(--font-mono);
      font-size: .75rem;
    }

    .site-footer::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: 100vw;
      border-top: 1px solid var(--rule);
      transform: translateX(-50%);
      pointer-events: none;
    }

    .footer-brand {
      display: flex;
      align-items: baseline;
      gap: 14px;
      flex-wrap: wrap;
    }

    .footer-mark {
      color: var(--champagne);
      font-family: var(--font-wordmark);
      font-size: 1.7rem;
      letter-spacing: .08em;
      line-height: 1;
      text-decoration: none;
      white-space: nowrap;
    }

    .footer-mark-num {
      color: var(--kinpaku);
    }

    .footer-decode {
      display: flex;
      align-items: baseline;
      gap: 10px;
      flex-wrap: wrap;
      margin: 0;
    }

    .footer-name {
      color: var(--text);
      letter-spacing: .03em;
    }

    .footer-pron {
      color: var(--text-faint);
      font-size: .68rem;
      letter-spacing: .02em;
    }

    .footer-meta {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      text-align: right;
    }

    .footer-tagline {
      margin: 0;
      color: var(--text-faint);
      letter-spacing: .01em;
      line-height: 1.5;
    }

    .footer-line {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0;
    }

    .footer-line a {
      color: var(--kinpaku);
      text-decoration: none;
    }

    .footer-line a:hover {
      color: var(--kinpaku-pale);
    }

    @media (max-width: 760px) {
      .nav,
      .hero,
      .section,
      .site-footer {
        padding-right: 24px;
        padding-left: 24px;
      }

      .nav {
        align-items: center;
        gap: 16px;
      }

      .nav-links {
        position: fixed;
        inset: 0;
        z-index: -1;
        display: none;
        align-items: center;
        flex-direction: column;
        gap: 22px;
        justify-content: center;
        min-height: 100vh;
        background: var(--menu-bg);
        backdrop-filter: blur(36px);
      }

      .nav.is-open .nav-links {
        display: flex;
      }

      .nav-links a {
        color: var(--champagne);
        font-size: clamp(.9rem, 4.5vw, 1.5rem);
        letter-spacing: .08em;
        padding: 4px 0;
      }

      .nav-toggle {
        position: relative;
        z-index: 12;
        display: grid;
      }

      .theme-toggle {
        position: relative;
        z-index: 12;
      }

      .nav-toolbar {
        gap: 12px;
      }

      .hero {
        padding-top: 64px;
      }

      .stats {
        grid-template-columns: repeat(2, 1fr);
      }

      .stat,
      .stat:first-child {
        padding: 28px 24px;
      }

      .stat:nth-child(2) {
        border-right: 0;
      }

      .stat:nth-child(-n + 2) {
        border-bottom: 1px solid var(--rule);
      }

      .project-grid {
        grid-template-columns: 1fr;
      }

      .case-hero,
      .case-details {
        grid-template-columns: 1fr;
      }

      .case-summary {
        padding: 34px 24px;
      }

      .case-image {
        min-height: 220px;
      }

      .cta-box,
      .site-footer {
        align-items: flex-start;
        flex-direction: column;
      }

      .footer-meta {
        align-items: flex-start;
        text-align: left;
      }
    }

    @media (max-width: 460px) {
      .stats {
        grid-template-columns: 1fr;
      }

      .stat {
        border-right: 0;
        border-bottom: 1px solid var(--rule);
      }

      .stat:last-child {
        border-bottom: 0;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      .ticker-track {
        animation: none;
      }

      .project-card,
      .skill,
      .industry,
      .btn,
      .nav-links a {
        transition: none;
      }
    }