/* ==================================================
       RESET
    ================================================== */

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

    :root {
      --bg: #11110f;
      --panel: #171713;
      --panel-light: #1d1d18;

      --text: #f3f0e8;
      --sub: #9c9a90;

      --line: #2d2d27;

      --accent: #d8ff3e;
      --accent-soft: rgba(216, 255, 62, 0.12);

      --header-height: 82px;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 110px;
    }

    html,
    body {
      width: 100%;
      min-height: 100%;
    }

    body {
      font-family:
        Pretendard,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Noto Sans KR",
        sans-serif;

      color: var(--text);
      background: var(--bg);

      -webkit-font-smoothing: antialiased;

      word-break: keep-all;
    }

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

    button {
      font: inherit;
    }

    ::selection {
      color: #111;
      background: var(--accent);
    }

    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 4px;
    }

    img {
      max-width: 100%;
    }

    @media (hover: none) {
      a, button {
        -webkit-tap-highlight-color: rgba(216, 255, 62, 0.18);
      }
    }


    /* ==================================================
       ACCESSIBILITY
    ================================================== */

    .skip-link {
      position: fixed;

      left: 20px;
      top: -100px;

      z-index: 9999;

      padding: 12px 16px;

      color: #111;
      background: var(--accent);

      font-size: 13px;
      font-weight: 800;

      transition: top 0.2s ease;
    }

    .skip-link:focus {
      top: 20px;
    }


    /* ==================================================
       PAGE
    ================================================== */

    .page {
      position: relative;
      width: 100%;
      min-height: 100vh;
      overflow-x: hidden;
      overflow-y: visible;
    }

    @supports (overflow: clip) {
      .page {
        overflow-x: clip;
      }
    }


    /* ==================================================
       BACKGROUND
    ================================================== */

    .noise {
      position: fixed;
      inset: 0;

      z-index: 0;

      pointer-events: none;

      opacity: 0.025;

      background-image:
        radial-gradient(
          circle at 20% 20%,
          #fff 0 1px,
          transparent 1px
        ),
        radial-gradient(
          circle at 80% 50%,
          #fff 0 1px,
          transparent 1px
        );

      background-size:
        26px 26px,
        31px 31px;
    }

    .crosshair {
      position: absolute;

      right: -100px;
      top: 90px;

      width: 440px;
      height: 440px;

      border:
        1px solid
        rgba(216, 255, 62, 0.08);

      border-radius: 50%;

      pointer-events: none;
    }

    .crosshair::before,
    .crosshair::after {
      content: "";

      position: absolute;

      background:
        rgba(216, 255, 62, 0.08);
    }

    .crosshair::before {
      width: 1px;
      height: 100%;

      left: 50%;
      top: 0;
    }

    .crosshair::after {
      width: 100%;
      height: 1px;

      left: 0;
      top: 50%;
    }


    /* ==================================================
       HEADER
    ================================================== */

    .site-header {
      position: sticky;
      top: 0;
      left: 0;

      z-index: 1000;

      width: 100%;

      border-bottom:
        1px solid
        rgba(45, 45, 39, 0.9);

      background:
        rgba(17, 17, 15, 0.92);

      backdrop-filter:
        blur(18px);

      -webkit-backdrop-filter:
        blur(18px);

      isolation: isolate;
    }

    .header-inner {
      width: 100%;
      max-width: 1440px;

      min-height: var(--header-height);

      margin: 0 auto;

      padding: 0 34px;

      display: grid;

      grid-template-columns:
        minmax(180px, 1fr)
        auto
        minmax(180px, 1fr);

      align-items: center;

      gap: 30px;
    }


    /* BRAND */

    .brand {
      display: flex;
      flex-direction: column;

      gap: 3px;

      width: fit-content;
    }

    .brand-main {
      font-size: 25px;
      font-weight: 900;

      letter-spacing: -0.06em;

      line-height: 1;
    }

    .brand-sub {
      font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

      font-size: 9px;

      color: var(--accent);

      letter-spacing: 0.09em;
    }


    /* NAVIGATION */

    .main-nav {
      display: flex;
      align-items: center;

      gap: 8px;
    }

    .nav-link {
      position: relative;

      padding: 10px 13px;

      font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

      font-size: 10px;
      font-weight: 600;

      letter-spacing: 0.06em;

      color: #86867d;

      transition:
        color 0.2s ease;
    }

    .nav-link::after {
      content: "";

      position: absolute;

      left: 13px;
      right: 13px;
      bottom: 4px;

      height: 1px;

      background: var(--accent);

      transform:
        scaleX(0);

      transform-origin:
        left center;

      transition:
        transform 0.2s ease;
    }

    .nav-link:hover,
    .nav-link:focus-visible {
      color: var(--text);

      outline: none;
    }

    .nav-link:hover::after,
    .nav-link:focus-visible::after {
      transform:
        scaleX(1);
    }

    .nav-link.is-active {
      color: var(--text);
    }

    .nav-link.is-active::after {
      transform: scaleX(1);
    }


    /* HEADER CONTACT */

    .header-actions {
      display: flex;
      justify-content: flex-end;

      align-items: center;

      gap: 10px;
    }

    .header-domain {
      font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

      font-size: 9px;

      color: #64645c;
    }

    .header-contact {
      min-height: 42px;

      padding: 0 15px;

      display: inline-flex;
      align-items: center;

      gap: 9px;

      color: #111;
      background: var(--accent);

      border:
        1px solid
        var(--accent);

      font-size: 10px;
      font-weight: 800;

      letter-spacing: 0.04em;

      transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
    }

    .header-contact:hover,
    .header-contact:focus-visible {
      color: var(--accent);
      background: transparent;

      transform:
        translateY(-2px);

      outline: none;
    }

    .header-contact svg {
      width: 17px;
      height: 17px;

      flex-shrink: 0;
    }


    /* ==================================================
       MAIN
    ================================================== */

    main {
      position: relative;
      z-index: 1;

      width: 100%;
      max-width: 1440px;

      margin: 0 auto;

      padding:
        70px
        34px
        90px;
    }


    /* ==================================================
       HERO
    ================================================== */

    .hero-label,
    .section-label {
      display: flex;
      align-items: center;

      gap: 10px;

      font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

      font-size: 11px;

      color: var(--accent);

      letter-spacing: 0.08em;

      text-transform: uppercase;
    }

    .hero-label {
      margin-bottom: 26px;
    }

    .hero-label::before,
    .section-label::before {
      content: "";

      width: 32px;
      height: 2px;

      background: var(--accent);
    }

    h1 {
      max-width: 1200px;

      font-size:
        clamp(
          66px,
          11vw,
          160px
        );

      font-weight: 900;

      line-height: 0.82;

      letter-spacing: -0.075em;

      text-transform: uppercase;
    }

    h1 .ghost {
      color: transparent;

      -webkit-text-stroke:
        1.3px
        #6d6d62;
    }

    .hero-grid {
      display: grid;

      grid-template-columns:
        1.3fr
        1fr;

      gap: 70px;

      margin-top: 60px;
    }

    .intro {
      max-width: 720px;

      font-size:
        clamp(
          20px,
          2.3vw,
          32px
        );

      font-weight: 650;

      line-height: 1.38;

      letter-spacing: -0.035em;
    }

    .intro span {
      color: var(--accent);
    }

    .description {
      max-width: 520px;

      color: var(--sub);

      font-size: 14px;

      line-height: 1.9;
    }


    /* ==================================================
       SKILLS
    ================================================== */

    .skills {
      display: grid;

      grid-template-columns:
        repeat(3, 1fr);

      margin-top: 70px;

      border-top:
        1px solid var(--line);

      border-left:
        1px solid var(--line);
    }

    .skill {
      min-height: 150px;

      padding: 24px;

      border-right:
        1px solid var(--line);

      border-bottom:
        1px solid var(--line);

      transition:
        background 0.2s ease,
        transform 0.2s ease;
    }

    .skill:hover {
      background:
        var(--panel-light);

      transform:
        translateY(-2px);
    }

    .skill-no {
      margin-bottom: 30px;

      font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

      font-size: 10px;

      color: #65655c;
    }

    .skill-title {
      font-size: 20px;
      font-weight: 800;

      letter-spacing: -0.035em;
    }

    .skill-desc {
      margin-top: 8px;

      font-size: 12px;

      color: var(--sub);

      line-height: 1.6;
    }


    /* ==================================================
       PORTFOLIO
    ================================================== */

    .portfolio-section {
      margin-top: 120px;
    }

    .portfolio-head {
      display: flex;

      justify-content:
        space-between;

      align-items: flex-end;

      margin-bottom: 30px;
    }

    .portfolio-title {
      margin-top: 17px;

      font-size:
        clamp(
          40px,
          6vw,
          76px
        );

      font-weight: 900;

      letter-spacing: -0.06em;

      line-height: 0.95;
    }

    .portfolio-count {
      font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

      font-size: 11px;

      color: #6f6f66;
    }

    .project {
      position: relative;

      display: grid;

      grid-template-columns:
        0.9fr
        1.1fr;

      border:
        1px solid
        var(--line);

      overflow: hidden;

      background: #141411;
    }

    .project + .project {
      margin-top: 18px;
    }


    /* PROJECT VISUAL */

    .project-visual {
      position: relative;

      min-height: 580px;

      padding: 36px;

      display: flex;

      flex-direction: column;

      justify-content:
        space-between;

      overflow: hidden;

      background: #0d0e0b;
    }

    .project-number {
      position: relative;

      z-index: 5;

      font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

      font-size: 11px;

      color: var(--accent);
    }

    .project-visual-title {
      position: relative;
      z-index: 5;
    }

    .project-symbol {
      font-size:
        clamp(
          100px,
          13vw,
          200px
        );

      font-weight: 900;

      line-height: 0.72;

      letter-spacing: -0.09em;

      color: var(--accent);
    }

    .project-symbol-small {
      font-size:
        clamp(
          72px,
          9vw,
          128px
        );

      line-height: 0.78;
    }

    .project-symbol-sub {
      margin-top: 22px;

      font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

      font-size: 11px;

      color: #7f8176;
    }


    /* PROJECT CONTENT */

    .project-content {
      padding: 48px;

      display: flex;

      flex-direction: column;
    }

    .project-category {
      font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

      font-size: 10px;

      color: var(--accent);

      letter-spacing: 0.08em;
    }

    .project-name {
      margin-top: 22px;

      font-size:
        clamp(
          38px,
          5vw,
          68px
        );

      font-weight: 900;

      line-height: 0.95;

      letter-spacing: -0.055em;
    }

    .project-name span {
      display: block;

      margin-top: 10px;

      font-size: 17px;

      font-weight: 600;

      color: #77786e;

      letter-spacing: -0.02em;
    }

    .project-description {
      max-width: 590px;

      margin-top: 30px;

      color: var(--sub);

      font-size: 14px;

      line-height: 1.85;
    }

    .project-description strong {
      color: #e6e6dd;
    }

    .project-features {
      display: grid;

      grid-template-columns:
        1fr 1fr;

      margin-top: 35px;

      border-top:
        1px solid var(--line);

      border-left:
        1px solid var(--line);
    }

    .feature {
      padding:
        15px 16px;

      border-right:
        1px solid var(--line);

      border-bottom:
        1px solid var(--line);
    }

    .feature-label {
      font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

      font-size: 9px;

      color: #62645c;
    }

    .feature-value {
      margin-top: 6px;

      font-size: 12px;

      font-weight: 650;
    }

    .stack {
      margin-top: 32px;
    }

    .stack-label {
      margin-bottom: 12px;

      font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

      font-size: 9px;

      color: #606159;

      letter-spacing: 0.08em;
    }

    .stack-list {
      display: flex;
      flex-wrap: wrap;

      gap: 7px;
    }

    .stack-item {
      padding:
        7px 9px;

      border:
        1px solid
        var(--line);

      border-radius: 3px;

      font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

      font-size: 9px;

      color: #a7a79e;
    }


    /* ==================================================
       DON'T FORGET
    ================================================== */

    .visual-dontforget {
      background:
        radial-gradient(
          circle at 70% 20%,
          rgba(216,255,62,0.14),
          transparent 42%
        ),
        #0d0e0b;
    }

    .reminder-ui {
      position: absolute;

      top: 70px;
      right: -60px;

      width: 290px;

      padding: 18px;

      border:
        1px solid
        rgba(255,255,255,0.12);

      border-radius: 24px;

      background:
        rgba(25,27,20,0.92);

      transform:
        rotate(6deg);

      box-shadow:
        0 30px 60px
        rgba(0,0,0,0.35);
    }

    .reminder-map {
      position: relative;

      height: 180px;

      overflow: hidden;

      border-radius: 16px;

      background:
        linear-gradient(
          45deg,
          transparent 48%,
          rgba(255,255,255,0.035) 49%,
          rgba(255,255,255,0.035) 51%,
          transparent 52%
        ),
        linear-gradient(
          -45deg,
          transparent 48%,
          rgba(255,255,255,0.035) 49%,
          rgba(255,255,255,0.035) 51%,
          transparent 52%
        ),
        #20221c;

      background-size:
        26px 26px;
    }

    .map-circle {
      position: absolute;

      width: 110px;
      height: 110px;

      left: 50%;
      top: 50%;

      transform:
        translate(-50%, -50%);

      border:
        1px solid
        rgba(216,255,62,0.45);

      border-radius: 50%;

      background:
        rgba(216,255,62,0.04);
    }

    .map-point {
      position: absolute;

      width: 14px;
      height: 14px;

      left: 50%;
      top: 50%;

      transform:
        translate(-50%, -50%);

      border-radius: 50%;

      background: var(--accent);

      box-shadow:
        0 0 0 6px
        rgba(216,255,62,0.12);
    }

    .reminder-card {
      margin-top: 12px;

      padding: 14px;

      border-radius: 13px;

      background: #27291f;
    }

    .reminder-card-label {
      font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

      font-size: 9px;

      color: var(--accent);
    }

    .reminder-card-title {
      margin-top: 7px;

      font-size: 14px;

      font-weight: 800;
    }

    .reminder-card-desc {
      margin-top: 5px;

      color: #888b80;

      font-size: 10px;
    }


    /* ==================================================
       LAZY RABBIT
    ================================================== */

    .visual-rabbit {
      background:
        radial-gradient(
          circle at 68% 24%,
          rgba(255,210,225,0.22),
          transparent 45%
        ),
        #181412;
    }

    .rabbit-scene {
      position: absolute;

      width: 230px;
      height: 240px;

      right: -15px;
      top: 70px;
    }

    .rabbit-face {
      position: absolute;

      width: 170px;
      height: 150px;

      left: 25px;
      bottom: 15px;

      border-radius: 48%;

      background: #f5e8df;

      transform:
        rotate(4deg);
    }

    .rabbit-ear {
      position: absolute;

      width: 54px;
      height: 145px;

      top: 0;

      border-radius:
        50%
        50%
        20px
        20px;

      background: #f5e8df;
    }

    .rabbit-ear-left {
      left: 48px;

      transform:
        rotate(-8deg);
    }

    .rabbit-ear-right {
      right: 47px;

      transform:
        rotate(12deg);
    }

    .rabbit-eye {
      position: absolute;

      top: 58px;

      width: 9px;
      height: 9px;

      border-radius: 50%;

      background: #26211e;
    }

    .rabbit-eye.left {
      left: 47px;
    }

    .rabbit-eye.right {
      right: 47px;
    }

    .rabbit-mouth {
      position: absolute;

      width: 21px;
      height: 11px;

      left: 50%;
      top: 88px;

      transform:
        translateX(-50%);

      border-bottom:
        2px solid #6d5b53;

      border-radius: 50%;
    }


    /* ==================================================
       STICKER WORK
    ================================================== */

    .visual-sticker {
      background:
        radial-gradient(
          circle at 72% 20%,
          rgba(255, 196, 138, 0.16),
          transparent 44%
        ),
        #15120f;
    }

    .sticker-gallery {
      position: absolute;
      top: 64px;
      right: -26px;

      width: 76%;
      height: 330px;

      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      grid-template-rows: repeat(3, 1fr);
      gap: 10px;

      transform: rotate(2deg);
    }

    .sticker-shot {
      position: relative;
      overflow: hidden;

      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 7px;
      background: #201b17;

      box-shadow: 0 18px 42px rgba(0,0,0,0.34);
    }

    .sticker-shot:first-child {
      grid-row: 1 / 4;
      transform: rotate(-2deg);
    }

    .sticker-shot:nth-child(2) {
      transform: rotate(2deg);
    }

    .sticker-shot:nth-child(3) {
      transform: rotate(-1.5deg);
    }

    .sticker-shot:nth-child(4) {
      display: block;
    }

    .sticker-shot img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;

      filter:
        saturate(0.86)
        contrast(1.02)
        brightness(0.88);

      transition:
        transform 0.5s ease,
        filter 0.35s ease;
    }

    .sticker-shot:hover img {
      transform: scale(1.035);

      filter:
        saturate(1)
        contrast(1.02)
        brightness(0.96);
    }

    .sticker-gallery::after {
      content: "CUSTOM STICKER / DESIGN + PRINT + CUT";

      position: absolute;
      right: 8px;
      bottom: -28px;

      font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

      font-size: 8px;
      letter-spacing: 0.08em;
      color: #77736d;
    }


    /* ==================================================
       LAZY SCOPE
    ================================================== */

    .visual-scope {
      background:
        radial-gradient(
          circle at 78% 24%,
          rgba(90,140,255,0.15),
          transparent 40%
        ),
        #0e1116;
    }

    .scope-window {
      position: absolute;

      width: 290px;

      right: -25px;
      top: 70px;

      padding: 18px;

      border:
        1px solid
        rgba(255,255,255,0.10);

      border-radius: 14px;

      background:
        rgba(20,24,31,0.94);

      transform:
        rotate(4deg);

      box-shadow:
        0 25px 60px
        rgba(0,0,0,0.35);
    }

    .scope-window-bar {
      display: flex;

      gap: 5px;
    }

    .scope-window-bar span {
      width: 6px;
      height: 6px;

      border-radius: 50%;

      background: #4c535e;
    }

    .scope-score {
      margin-top: 32px;

      font-size: 82px;

      font-weight: 900;

      line-height: 0.9;

      letter-spacing: -0.08em;

      color: var(--accent);
    }

    .scope-caption {
      margin-top: 7px;

      font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

      font-size: 9px;

      color: #737c87;
    }

    .scope-lines {
      margin-top: 25px;

      display: flex;
      flex-direction: column;

      gap: 8px;
    }

    .scope-lines span {
      display: block;

      height: 5px;

      border-radius: 2px;

      background: #313740;
    }

    .scope-lines span:nth-child(1) { width: 87%; }
    .scope-lines span:nth-child(2) { width: 64%; }
    .scope-lines span:nth-child(3) { width: 78%; }
    .scope-lines span:nth-child(4) { width: 52%; }


    /* ==================================================
       REAL PROJECT PHOTOS
    ================================================== */

    .visual-leather {
      background:
        radial-gradient(
          circle at 72% 20%,
          rgba(177,110,60,0.15),
          transparent 42%
        ),
        #17100c;
    }

    .visual-sewing {
      background:
        radial-gradient(
          circle at 72% 20%,
          rgba(100,150,210,0.15),
          transparent 43%
        ),
        #101317;
    }

    .project-photo {
      position: absolute;

      width: 62%;
      height: 58%;

      top: 68px;
      right: -4%;

      overflow: hidden;

      border:
        1px solid
        rgba(255,255,255,0.12);

      border-radius: 6px;

      background: #111;

      transform:
        rotate(4deg);

      box-shadow:
        0 28px 60px
        rgba(0,0,0,0.45);
    }

    .project-photo img {
      display: block;

      width: 100%;
      height: 100%;

      object-fit: cover;

      filter:
        saturate(0.72)
        contrast(1.08)
        brightness(0.78);

      transition:
        transform 0.6s ease,
        filter 0.4s ease;
    }

    .project-photo::after {
      content: "";

      position: absolute;

      inset: 0;

      background:
        linear-gradient(
          to bottom,
          transparent 40%,
          rgba(0,0,0,0.78)
          100%
        );

      pointer-events: none;
    }

    .project-photo:hover img {
      transform:
        scale(1.04);

      filter:
        saturate(0.9)
        contrast(1.05)
        brightness(0.88);
    }

    .project-photo-overlay {
      position: absolute;

      left: 18px;
      right: 18px;
      bottom: 17px;

      z-index: 2;

      display: flex;

      flex-direction: column;

      gap: 4px;
    }

    .project-photo-overlay span {
      font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

      font-size: 9px;

      color: var(--accent);

      letter-spacing: 0.1em;
    }

    .project-photo-overlay strong {
      color: #fff;

      font-size: 13px;
    }


    /* ==================================================
       CONTACT JUMP
    ================================================== */

    .contact-jump-wrap {
      margin-top: 110px;
    }

    .contact-jump {
      min-height: 210px;

      padding:
        32px
        36px;

      display: grid;

      grid-template-columns:
        auto
        1fr
        auto;

      align-items: center;

      gap: 30px;

      border-top:
        1px solid var(--line);

      border-bottom:
        1px solid var(--line);

      transition:
        background 0.25s ease,
        color 0.25s ease;
    }

    .contact-jump:hover,
    .contact-jump:focus-visible {
      color: #111;

      background:
        var(--accent);

      outline: none;
    }

    .contact-jump-icon {
      width: 74px;
      height: 74px;

      display: flex;

      align-items: center;
      justify-content: center;

      border:
        1px solid #34352f;

      border-radius: 50%;
    }

    .contact-jump-icon svg {
      width: 28px;
      height: 28px;
    }

    .contact-jump-label {
      margin-bottom: 10px;

      font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

      font-size: 10px;

      color: var(--accent);

      letter-spacing: 0.1em;
    }

    .contact-jump:hover
    .contact-jump-label {
      color: #111;
    }

    .contact-jump-title {
      font-size:
        clamp(
          34px,
          5vw,
          70px
        );

      font-weight: 900;

      line-height: 0.95;

      letter-spacing: -0.055em;
    }

    .contact-jump-arrow {
      font-size: 44px;

      font-weight: 300;
    }


    /* ==================================================
       SOCIAL
    ================================================== */

    .social-section {
      margin-top: 100px;

      display: grid;

      grid-template-columns:
        1fr
        1.5fr;

      gap: 60px;

      align-items: end;
    }

    .social-copy {
      font-size:
        clamp(
          30px,
          4vw,
          54px
        );

      font-weight: 850;

      line-height: 1.05;

      letter-spacing: -0.055em;
    }

    .social-copy span {
      color: #77766c;
    }

    .social-links {
      display: grid;

      grid-template-columns:
        repeat(4, 1fr);

      gap: 8px;
    }

    .social-link {
      min-height: 94px;

      padding: 16px;

      display: flex;

      flex-direction: column;

      justify-content:
        space-between;

      border:
        1px solid var(--line);

      background:
        var(--panel);

      transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
    }

    .social-link:hover,
    .social-link:focus-visible {
      border-color:
        var(--accent);

      background: #1a1b14;

      transform:
        translateY(-3px);

      outline: none;
    }

    .social-icon {
      width: 26px;
      height: 26px;

      display: flex;

      align-items: center;
      justify-content: center;

      border-radius: 4px;

      background:
        var(--accent-soft);

      color:
        var(--accent);

      font-size: 13px;

      font-weight: 900;
    }

    .social-name {
      font-size: 11px;

      font-weight: 700;
    }


    /* ==================================================
       CONTACT
    ================================================== */

    .contact-section {
      margin-top: 120px;

      padding-top: 80px;

      border-top:
        1px solid var(--line);
    }

    .contact-grid {
      display: grid;

      grid-template-columns:
        0.9fr
        1.1fr;

      gap: 90px;
    }

    .contact-eyebrow {
      margin-bottom: 22px;

      font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

      font-size: 11px;

      color:
        var(--accent);

      letter-spacing:
        0.1em;
    }

    .contact-title {
      font-size:
        clamp(
          55px,
          9vw,
          125px
        );

      font-weight: 900;

      line-height: 0.82;

      letter-spacing: -0.075em;

      text-transform:
        uppercase;
    }

    .contact-title span {
      color: transparent;

      -webkit-text-stroke:
        1px
        #68685f;
    }

    .contact-copy {
      display: flex;

      flex-direction: column;

      justify-content:
        flex-end;
    }

    .contact-description {
      max-width: 520px;

      color: var(--sub);

      font-size: 16px;

      line-height: 1.8;
    }

    .contact-description strong {
      color: var(--text);
    }

    .contact-mail {
      margin-top: 38px;

      display: flex;

      flex-direction: column;

      gap: 10px;
    }

    .contact-mail-label {
      font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

      font-size: 9px;

      color: #62645c;

      letter-spacing: 0.1em;
    }

    .contact-email {
      width: fit-content;

      font-size:
        clamp(
          23px,
          3vw,
          40px
        );

      font-weight: 750;

      letter-spacing: -0.035em;

      border-bottom:
        1px solid
        #515149;

      transition:
        color 0.2s ease,
        border-color 0.2s ease;
    }

    .contact-email:hover,
    .contact-email:focus-visible {
      color: var(--accent);

      border-color:
        var(--accent);

      outline: none;
    }

    .contact-actions {
      display: flex;

      flex-wrap: wrap;

      gap: 8px;

      margin-top: 30px;
    }

    .contact-button {
      min-height: 48px;

      padding:
        0 17px;

      display:
        inline-flex;

      align-items: center;

      gap: 10px;

      border:
        1px solid
        var(--line);

      color: var(--text);

      background:
        transparent;

      cursor: pointer;

      font-size: 11px;

      font-weight: 700;

      transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
    }

    .contact-button.primary {
      color: #111;

      background:
        var(--accent);

      border-color:
        var(--accent);
    }

    .contact-button:hover,
    .contact-button:focus-visible {
      color: #111;

      background:
        var(--accent);

      border-color:
        var(--accent);

      outline: none;
    }

    .contact-button svg {
      width: 17px;
      height: 17px;
    }

    .copy-result {
      min-height: 18px;

      margin-top: 10px;

      font-size: 11px;

      color: var(--accent);
    }


    /* ==================================================
       STATUS
    ================================================== */

    .status-bar {
      margin-top: 80px;

      padding:
        16px 0;

      display: flex;

      align-items: center;

      justify-content:
        space-between;

      border-top:
        1px solid
        var(--line);

      border-bottom:
        1px solid
        var(--line);

      font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

      font-size: 10px;

      color: #74746b;
    }

    .status-live {
      display: flex;

      align-items: center;

      gap: 8px;

      color: #aaa99e;
    }

    .status-dot {
      width: 6px;
      height: 6px;

      border-radius: 50%;

      background:
        var(--accent);

      box-shadow:
        0 0 0 5px
        var(--accent-soft);
    }


    /* ==================================================
       FOOTER
    ================================================== */

    footer {
      position: relative;
      z-index: 1;

      width: 100%;
      max-width: 1440px;

      margin: 0 auto;

      padding:
        24px
        34px
        30px;

      display: flex;

      align-items: center;

      justify-content:
        space-between;

      color: #66665e;

      font-size: 10px;
    }

    footer strong {
      color: #b3b2a7;
    }


    /* ==================================================
       TABLET
    ================================================== */

    @media (max-width: 1000px) {

      .header-inner {
        grid-template-columns:
          auto
          1fr
          auto;

        gap: 14px;
      }

      .main-nav {
        justify-content:
          center;
      }

      .nav-link {
        padding:
          10px 8px;
      }

      .header-domain {
        display: none;
      }

    }


    @media (max-width: 800px) {

      :root {
        --header-height: 70px;
      }

      .header-inner {
        padding:
          0 20px;

        grid-template-columns:
          1fr
          auto
          auto;
      }

      .brand-main {
        font-size: 21px;
      }

      .brand-sub {
        display: none;
      }

      .main-nav {
        gap: 2px;
      }

      .nav-link {
        display: none;
      }

      .nav-link.work-link {
        display:
          inline-flex;
      }

      .header-contact {
        width: 42px;

        height: 42px;

        padding: 0;

        justify-content:
          center;
      }

      .header-contact-text {
        position: absolute;

        width: 1px;
        height: 1px;

        padding: 0;

        margin: -1px;

        overflow: hidden;

        clip:
          rect(0, 0, 0, 0);

        white-space:
          nowrap;

        border: 0;
      }

      main {
        padding:
          55px
          20px
          65px;
      }

      h1 {
        font-size:
          clamp(
            58px,
            18vw,
            105px
          );

        line-height: 0.86;
      }

      .hero-grid {
        grid-template-columns:
          1fr;

        gap: 28px;

        margin-top: 45px;
      }

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

      .portfolio-section {
        margin-top: 90px;
      }

      .portfolio-head {
        flex-direction:
          column;

        align-items:
          flex-start;

        gap: 15px;
      }

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

      .project-visual {
        min-height: 460px;
      }

      .project-content {
        padding:
          35px
          28px;
      }

      .reminder-ui {
        width: 230px;

        right: -35px;
      }

      .scope-window {
        transform:
          scale(0.85)
          rotate(4deg);

        transform-origin:
          top right;
      }

      .rabbit-scene {
        transform:
          scale(0.85);

        transform-origin:
          top right;
      }

      .sticker-gallery {
        width: 70%;
        height: 300px;
        right: -24px;
        transform: rotate(2deg) scale(0.94);
        transform-origin: top right;
      }

      .project-photo {
        width: 58%;
        height: 55%;

        right: -5%;

        transform:
          rotate(3deg);
      }

      .contact-jump {
        grid-template-columns:
          auto 1fr;
      }

      .contact-jump-arrow {
        display: none;
      }

      .social-section {
        grid-template-columns:
          1fr;

        gap: 30px;
      }

      .social-links {
        grid-template-columns:
          1fr 1fr;
      }

      .contact-grid {
        grid-template-columns:
          1fr;

        gap: 50px;
      }

      .status-bar {
        flex-direction:
          column;

        align-items:
          flex-start;

        gap: 10px;
      }

      footer {
        padding:
          20px;

        flex-direction:
          column;

        align-items:
          flex-start;

        gap: 5px;
      }

    }


    /* ==================================================
       MOBILE
    ================================================== */

    @media (max-width: 560px) {

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

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

      .project-visual {
        min-height: 390px;

        padding: 25px;
      }

      .reminder-ui {
        width: 205px;

        top: 55px;

        right: -45px;
      }

      .rabbit-scene {
        right: -55px;
      }

      .scope-window {
        right: -75px;
      }

      .sticker-gallery {
        width: 82%;
        height: 250px;
        top: 58px;
        right: -42px;
        gap: 7px;
      }

      .sticker-gallery::after {
        display: none;
      }

      .project-photo {
        width: 68%;
        height: 52%;

        right: -16%;
        top: 58px;
      }

      .contact-jump {
        min-height: 180px;

        padding:
          25px
          20px;

        grid-template-columns:
          1fr;
      }

      .contact-jump-icon {
        width: 54px;
        height: 54px;
      }

      .social-links {
        grid-template-columns:
          1fr;
      }

      .contact-section {
        margin-top: 90px;

        padding-top: 60px;
      }

      .contact-actions {
        flex-direction:
          column;
      }

      .contact-button {
        width: 100%;

        justify-content:
          center;
      }

    }


    /* ==================================================
       REDUCED MOTION
    ================================================== */

    @media (
      prefers-reduced-motion:
      reduce
    ) {

      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation-duration:
          0.01ms !important;

        transition-duration:
          0.01ms !important;
      }

    }