:root {
      --ink: #111114;
      --paper: #f6f4f0;
      --cyan: #54d6d9;
      --pink: #f331a5;
      --lilac: #d7c9ff;
      --line: rgba(17,17,20,.18);
      --mono: "DM Mono", "Courier New", monospace;
      --sans: "Space Grotesk", "Arial", sans-serif;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
    a { color: inherit; }
    .shell { width: min(1240px, calc(100% - 56px)); margin-inline: auto; }
    .topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
    .brand { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; font-size: 16px; font-weight: 700; letter-spacing: -.055em; }
    .brand-mark { width: 16px; height: 16px; border-radius: 50%; background: var(--pink); box-shadow: 5px 4px 0 var(--cyan); transform: rotate(-13deg); }
    .nav { display: flex; gap: 30px; align-items: center; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
    .nav a { text-decoration: none; }
    .nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
    .hero { min-height: 660px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 48px; padding: 74px 0 88px; }
    .eyebrow, .section-label { font: 11px var(--mono); text-transform: uppercase; letter-spacing: .11em; }
    .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; }
    .eyebrow::before { content: ""; width: 29px; height: 2px; background: var(--pink); }
    h1 { max-width: 600px; margin: 0; font-size: clamp(58px, 7.3vw, 105px); line-height: .88; letter-spacing: -.095em; font-weight: 700; }
    h1 span { display: block; }
    h1 .accent { color: var(--pink); }
    .hero-copy { max-width: 445px; margin: 28px 0 31px; font-size: 18px; line-height: 1.55; color: #49474d; }
    .button { display: inline-flex; align-items: center; gap: 22px; min-height: 52px; padding: 0 19px; background: var(--ink); color: white; text-decoration: none; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; transition: transform .2s, background .2s; }
    .button:hover { background: #34313a; transform: translateY(-3px); }
    .button b { font-size: 18px; font-weight: 400; }
    .hero-art { position: relative; padding: 23px; background: white; transform: rotate(1.5deg); box-shadow: 14px 17px 0 var(--cyan); }
    .hero-art img { display: block; width: 100%; height: auto; }
    .ticker { overflow: hidden; border-block: 1px solid var(--line); background: #ebe8e2; }
    .ticker-line { display: flex; align-items: center; justify-content: space-around; gap: 30px; min-width: max-content; padding: 18px 0; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
    .ticker-line span:nth-child(even) { color: #ec168b; font-size: 20px; }
    .studio { padding: 125px 0 128px; display: grid; grid-template-columns: .72fr 1.28fr; gap: 11%; align-items: start; }
    .section-label { margin: 9px 0 0; display: flex; gap: 10px; align-items: center; }
    .section-label::before { content: ""; width: 9px; height: 9px; background: var(--pink); border-radius: 50%; }
    h2 { margin: 0; font-size: clamp(40px, 5.1vw, 68px); line-height: .98; letter-spacing: -.075em; }
    .studio-copy { max-width: 690px; }
    .studio-copy p { font-size: 20px; line-height: 1.55; color: #4e4a51; margin: 25px 0 0; }
    .project { background: var(--ink); color: white; padding: 104px 0 112px; position: relative; overflow: hidden; }
    .project::after { content: "W"; position: absolute; right: -42px; bottom: -205px; color: rgba(84,214,217,.11); font-size: min(62vw, 770px); line-height: .8; font-weight: 700; letter-spacing: -.13em; pointer-events: none; }
    .project-inner { position: relative; z-index: 1; display: grid; grid-template-columns: .86fr 1.14fr; gap: 11%; align-items: start; }
    .project .section-label { color: var(--cyan); margin-bottom: 22px; }
    .project h2 { font-size: clamp(58px, 8.2vw, 112px); }
    .project h2 em { color: var(--pink); font-style: normal; }
    .status { display: inline-block; margin-top: 24px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.42); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
    .project-description { max-width: 530px; padding-top: 9px; }
    .project-description p { margin: 0 0 24px; color: #d4d0d8; font-size: 19px; line-height: 1.65; }
    .project-art { margin: 36px 10px 10px 0; padding: 9px; background: #fff; transform: rotate(.7deg); box-shadow: 10px 10px 0 var(--pink); }
    .project-art img { display: block; width: 100%; height: auto; }
    .project-art figcaption { margin: 12px 3px 2px; color: #4b4651; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
    .characters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
    .characters span { padding: 8px 11px; border: 1px solid rgba(255,255,255,.28); border-radius: 99px; font: 10px var(--mono); letter-spacing: .06em; }
    .characters span:nth-child(1) { color: var(--cyan); }
    .characters span:nth-child(2) { color: #ff789d; }
    .characters span:nth-child(3) { color: #9bdc71; }
    .characters span:nth-child(4) { color: #ff8a68; }
    .characters span:nth-child(5) { color: #ffe162; }
    .outro { padding: 110px 0 105px; display: flex; align-items: end; justify-content: space-between; gap: 40px; }
    .outro h2 { max-width: 740px; }
    .outro h2 span { color: var(--pink); }
    .outro .button { flex-shrink: 0; }
    .closing-image { width: 100%; overflow: hidden; background: transparent; }
    .closing-image img { display: block; width: min(1260px, 100%); height: auto; margin: 0 auto; }
    footer { border-top: 1px solid var(--line); padding: 23px 0 28px; display: flex; justify-content: space-between; gap: 25px; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .07em; color: #65616b; }
    footer p { margin: 0; }
    .dipship { background: #e5eceb; color: var(--ink); padding: 86px 0 92px; }
    .dipship-inner { display: grid; grid-template-columns: .86fr 1.14fr; gap: 11%; align-items: start; }
    .dipship h2 { font-size: clamp(58px, 8.2vw, 112px); }
    .dipship .status { border-color: rgba(17,17,20,.55); }
    .dipship-copy { max-width: 530px; padding-top: 9px; }
    .dipship-copy p { margin: 0 0 24px; color: #25262a; font-size: 19px; line-height: 1.65; }
    .dipship-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
    .dipship-tags span { padding: 8px 11px; border: 1px solid rgba(17,17,20,.45); border-radius: 99px; font: 10px var(--mono); letter-spacing: .06em; }
    .outro-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
    .share-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 68px; padding: 0 24px; border: 2px solid var(--ink); background: var(--cyan); color: var(--ink); font: 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; transition: transform .2s, background .2s; }
    .share-button:hover { background: #42bfca; transform: translateY(-3px); }
    .share-button b { font-size: 22px; font-weight: 400; }
    .share-status { min-height: 1.3em; margin: 0; color: #55515a; font: 11px var(--mono); }
    .page-main { min-height: 64vh; }
    .page-intro { padding: 88px 0 62px; }
    .page-intro h1 { max-width: 850px; font-size: clamp(52px, 8vw, 96px); line-height: .95; }
    .page-intro p:not(.eyebrow) { max-width: 700px; color: #49474d; font-size: 19px; line-height: 1.6; }
    .content-panel { max-width: 780px; margin: 0 auto 110px; padding: clamp(24px, 5vw, 48px); background: #fff; border: 1px solid var(--line); }
    .content-panel h2 { margin: 0 0 16px; font-size: clamp(28px, 4vw, 42px); }
    .content-panel h3 { margin: 34px 0 8px; font-size: 21px; letter-spacing: -.04em; }
    .content-panel p, .content-panel li { color: #4e4a51; font-size: 16px; line-height: 1.7; }
    .content-panel p { margin: 0 0 17px; }
    .content-panel ul { padding-left: 20px; }
    .contact-note { margin-top: 28px; padding: 19px 20px; border-left: 3px solid var(--pink); background: #f6f4f0; }
    .contact-note p:last-child { margin-bottom: 0; }
    .contact-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
    .site-footer nav { display: flex; gap: 18px; }
    .site-footer a { text-decoration: none; }
    .site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
    .site-footer .social-note { color: #65616b; }
    .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    @media (max-width: 780px) {
      .shell { width: min(100% - 36px, 580px); }
      .topbar { height: 67px; }
      .nav { gap: 15px; font-size: 9px; }
      .nav a:first-child { display: none; }
      .hero { min-height: auto; grid-template-columns: 1fr; gap: 46px; padding: 76px 0 79px; }
      h1 { font-size: clamp(64px, 17vw, 100px); }
      .hero-copy { font-size: 16px; }
      .hero-art { margin: 0 8px 10px; padding: 13px; box-shadow: 9px 11px 0 var(--cyan); }
      .ticker-line { justify-content: flex-start; gap: 23px; padding: 15px 0; }
      .studio { grid-template-columns: 1fr; gap: 24px; padding: 81px 0 86px; }
      .studio-copy p { font-size: 17px; }
      .project { padding: 79px 0 85px; }
      .project-inner { grid-template-columns: 1fr; gap: 40px; }
      .project-description p { font-size: 17px; }
      .dipship { padding: 78px 0 85px; }
      .dipship-inner { grid-template-columns: 1fr; gap: 38px; }
      .dipship-copy p { font-size: 17px; }
      .page-intro { padding: 66px 0 45px; }
      .page-intro p:not(.eyebrow) { font-size: 17px; }
      .content-panel { margin-bottom: 76px; }
      .project::after { font-size: 100vw; right: -90px; bottom: -60px; }
      .outro { padding: 82px 0 75px; align-items: flex-start; flex-direction: column; gap: 30px; }
      .outro-actions { width: 100%; }
      .share-button { width: 100%; }
      footer { flex-direction: column; gap: 10px; }
      .site-footer nav { gap: 15px; }
    }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }