@font-face {
            font-family: "Caveat Local";
            src: url("vendor/caveat.ttf") format("truetype");
            font-display: swap;
            size-adjust: 92%;
            ascent-override: 88%;
            descent-override: 24%;
        }

        :root {
            --bg: #0d4f4f;
            --bg-deep: #083737;
            --paper: #efe3cf;
            --paper-soft: rgba(239, 227, 207, 0.78);
            --ink: #f7efdf;
            --gold: #d6ae56;
            --rule: rgba(239, 227, 207, 0.14);
            --shell: min(1240px, calc(100vw - 48px));
            --portrait-size: clamp(220px, 21vw, 300px);
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            min-height: 100vh;
            background:
                radial-gradient(circle at 12% 18%, rgba(214, 174, 86, 0.14), transparent 24%),
                radial-gradient(circle at 82% 14%, rgba(214, 174, 86, 0.12), transparent 18%),
                linear-gradient(180deg, rgba(0, 0, 0, 0.06), transparent 24%),
                var(--bg);
            color: var(--ink);
            font-family: Georgia, "Times New Roman", serif;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
            overflow-x: hidden;
        }

        body.js [data-reveal] {
            opacity: 0;
        }

        body.js.intro-ready [data-reveal] {
            opacity: 1;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            background:
                linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.015), transparent),
                repeating-linear-gradient(
                    0deg,
                    rgba(255, 255, 255, 0.02) 0,
                    rgba(255, 255, 255, 0.02) 1px,
                    transparent 1px,
                    transparent 4px
                );
            pointer-events: none;
            mix-blend-mode: soft-light;
            opacity: 0.55;
        }

        a {
            color: inherit;
        }

        img {
            display: block;
            max-width: 100%;
        }

        .page-width {
            width: var(--shell);
            margin: 0 auto;
        }

        .masthead {
            padding: 28px 0 30px;
            border-bottom: 1px solid var(--rule);
        }

        main {
            padding-top: 18px;
        }

        .section-rail {
            position: sticky;
            top: 10px;
            z-index: 28;
            display: flex;
            gap: 0;
            align-items: center;
            margin-top: 8px;
            padding: 8px 0 11px;
            border-top: 1px solid rgba(239, 227, 207, 0.08);
            border-bottom: 1px solid rgba(239, 227, 207, 0.12);
            background: linear-gradient(180deg, rgba(13, 79, 79, 0), rgba(13, 79, 79, 0.78) 38%, rgba(13, 79, 79, 0.86));
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            overflow-x: auto;
            scrollbar-width: none;
        }

        .section-rail::-webkit-scrollbar {
            display: none;
        }

        .section-rail a {
            flex: 0 0 auto;
            padding: 5px 0 7px;
            border: none;
            color: rgba(239, 227, 207, 0.58);
            text-decoration: none;
            font-family: "Playfair Display", Georgia, serif;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            font-size: 0.64rem;
            transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
            opacity: 0.82;
        }

        .section-rail a:hover,
        .section-rail a:focus-visible {
            color: var(--gold);
            opacity: 1;
            transform: translate3d(0, -4px, 0);
            text-shadow:
                0 0 20px rgba(214, 174, 86, 0.3),
                0 0 40px rgba(214, 174, 86, 0.1);
            outline: none;
        }

        .section-rail a[data-scroll-offset] {
            transform: translate3d(0, calc(var(--scroll-shift, 0) * 1px), 0);
        }

        .section-rail a[data-scroll-offset]:hover {
            transform: translate3d(0, -4px, 0);
        }

        .section-rail a + a {
            margin-left: 14px;
            padding-left: 14px;
            border-left: 1px solid rgba(239, 227, 207, 0.16);
        }

        .section-rail a[aria-current="location"] {
            color: var(--gold);
            opacity: 1;
            transform: translate3d(0, -1.5px, 0);
            text-shadow:
                0 0 18px rgba(214, 174, 86, 0.18),
                0 0 36px rgba(214, 174, 86, 0.08);
        }

        .section-rail a[aria-current="location"]:hover {
            transform: translate3d(0, -4px, 0);
        }

        #portrait,
        #projects,
        #contacts,
        .case-preview {
            scroll-margin-top: 108px;
        }

        .masthead-top,
        .section-head,
        .footer-line {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            align-items: center;
        }

        .masthead-meta,
        .section-label,
        .footer-meta {
            font-family: "Playfair Display", Georgia, serif;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            font-size: 0.72rem;
            color: var(--paper-soft);
        }

        .lang-switcher {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .lang-switcher button,
        .control-button {
            border: 1px solid rgba(214, 174, 86, 0.34);
            background: rgba(6, 33, 33, 0.72);
            color: var(--paper);
            font-family: "Playfair Display", Georgia, serif;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            font-size: 0.7rem;
            padding: 9px 12px;
            cursor: pointer;
            transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        }

        .lang-switcher button:hover,
        .lang-switcher button:focus-visible,
        .control-button:hover,
        .control-button:focus-visible {
            background: rgba(214, 174, 86, 0.14);
            border-color: rgba(214, 174, 86, 0.6);
            color: var(--ink);
            outline: none;
        }

        .lang-switcher button[aria-pressed="true"] {
            background: rgba(214, 174, 86, 0.16);
            border-color: rgba(214, 174, 86, 0.66);
            color: var(--ink);
        }

        .masthead-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
            gap: 24px;
            align-items: end;
            margin-top: 18px;
        }

        .masthead-overline {
            margin: 0 0 12px;
            font-family: "Playfair Display", Georgia, serif;
            text-transform: uppercase;
            letter-spacing: 0.22em;
            font-size: 0.75rem;
            color: rgba(214, 174, 86, 0.86);
        }

        .wordmark {
            margin: 0;
            position: relative;
            display: inline-block;
            font-family: "Playfair Display", Georgia, serif;
            font-size: clamp(4.5rem, 13vw, 10.4rem);
            line-height: 0.88;
            letter-spacing: 0.12em;
            color: var(--ink);
            text-transform: uppercase;
            text-wrap: balance;
        }

        .wordmark-base,
        .wordmark-glitch {
            display: block;
            white-space: pre;
        }

        .wordmark-glitch {
            position: absolute;
            inset: 0;
            color: rgba(214, 174, 86, 0.9);
            opacity: 0;
            pointer-events: none;
            text-shadow:
                -0.03em 0 0 rgba(239, 227, 207, 0.26),
                0.03em 0 0 rgba(214, 174, 86, 0.38),
                0 0 0.18em rgba(214, 174, 86, 0.28);
            transform: translate3d(0, 0, 0);
        }

        .wordmark.is-glitching .wordmark-glitch {
            opacity: 1;
        }

        .masthead-signature {
            margin: 0;
            padding-bottom: 12px;
            justify-self: end;
            max-width: 280px;
            font-family: "Caveat Local", "Segoe Print", cursive;
            font-size: clamp(1.45rem, 2vw, 2rem);
            line-height: 1.12;
            color: var(--gold);
            text-align: right;
            transform: rotate(-2.5deg);
            position: relative;
            min-height: 1.12em;
        }

        .masthead-signature.is-blinking {
            animation: deckBlink 0.42s ease-in-out 2;
        }

        .masthead-signature.is-falling .sig-char {
            display: inline-block;
            position: absolute;
            left: 0;
            top: 0;
            will-change: transform, opacity;
        }

        .portrait-section,
        .projects,
        .contacts {
            padding: 40px 0 30px;
            border-bottom: 1px solid var(--rule);
            position: relative;
            transform: translateZ(0);
        }

        .hero {
            padding: 18px 0 22px;
            border-bottom: 1px solid var(--rule);
        }

        .hero-copy {
            max-width: 1120px;
        }

        .tegaki-lockup {
            margin: 0 0 8px;
            max-width: min(1080px, 100%);
            position: relative;
            cursor: pointer;
        }

        .tegaki-renderer {
            position: relative;
            display: block;
            width: 100%;
            min-height: 0;
            font-family: "Caveat Local", "Segoe Print", cursive;
            font-size: clamp(2.5rem, 4.55vw, 4.55rem);
            font-weight: 700;
            line-height: 1.02;
            color: var(--ink);
        }

        .tegaki-renderer > span {
            display: block;
            width: 100%;
        }

        .tegaki-renderer [data-tegaki="root"] {
            display: block !important;
            width: 100%;
        }

        .tegaki-renderer canvas {
            width: 100% !important;
            height: auto !important;
        }

        .tegaki-fallback {
            display: block;
            color: var(--ink);
            transition: opacity 0.24s ease;
        }

        .tegaki-renderer.is-live .tegaki-fallback {
            opacity: 0;
            visibility: hidden;
            position: absolute;
            inset: 0;
            filter: blur(0.8px);
        }

        .tegaki-lockup.is-dissipating .tegaki-renderer {
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .tegaki-lockup.is-dissipating .tegaki-fallback {
            opacity: 1;
            visibility: visible;
            position: relative;
            inset: auto;
            filter: none;
        }

        .hero-dissipation-char {
            display: inline-block;
            will-change: transform, opacity;
            transition: none;
        }

        .hero-dissipation-char.is-settled {
            transform: translate3d(0, 0, 0) rotate(0deg);
            opacity: 1;
        }

        .hero-deck {
            margin: 10px 0 0;
            max-width: 62ch;
            font-size: clamp(1.05rem, 1.2vw, 1.26rem);
            line-height: 1.72;
            color: var(--paper);
            position: relative;
            min-height: 1.72em;
            contain: layout;
        }

        .hero-deck.is-blinking {
            animation: deckBlink 0.42s ease-in-out 2;
        }

        @keyframes deckBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.12; }
        }

        .hero-deck.is-falling .deck-char {
            display: inline-block;
            position: absolute;
            left: 0;
            top: 0;
            will-change: transform, opacity;
        }

        .hero-summary {
            margin: 18px 0 40px;
            max-width: 70ch;
            min-height: 6em;
            max-height: 6em;
            overflow: hidden;
            font-size: 0.96rem;
            line-height: 1.72;
            color: var(--paper-soft);
            contain: layout;
        }

        .section-head {
            margin-bottom: 18px;
        }

        .portrait-stage {
            position: relative;
            contain: layout style;
            padding: 22px 24px 24px;
            border: 1px solid var(--rule);
            overflow: hidden;
            border-radius: 10px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 40%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
        }

        .desktop-flow {
            position: relative;
            contain: layout style;
            height: 760px;
            overflow: hidden;
        }

        .flow-notes {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 24px;
            margin: 0 0 18px;
        }

        .flow-note {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .flow-note:last-child {
            text-align: right;
            align-items: flex-end;
        }

        .flow-note-kicker {
            font-family: "Playfair Display", Georgia, serif;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            font-size: 0.58rem;
            color: rgba(214, 174, 86, 0.64);
        }

        .flow-note-title {
            margin: 0;
            font-family: "Playfair Display", Georgia, serif;
            font-size: 0.98rem;
            line-height: 1.2;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: rgba(239, 227, 207, 0.9);
        }

        .flow-column {
            position: absolute;
            top: 0;
            height: 100%;
            width: 50%;
            z-index: 5;
        }

        .flow-column-left {
            left: 0;
            padding-right: clamp(22px, 3vw, 40px);
        }

        .flow-column-right {
            right: 0;
            padding-left: clamp(22px, 3vw, 40px);
        }

        .dropcap {
            position: absolute;
            top: 4px;
            left: 0;
            font-family: "Playfair Display", Georgia, serif;
            font-size: clamp(5.2rem, 8vw, 7.1rem);
            line-height: 0.88;
            color: var(--gold);
            pointer-events: none;
            user-select: none;
            text-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
            z-index: 6;
        }

        .flow-text {
            position: relative;
            width: 100%;
            height: 100%;
            font-size: clamp(0.96rem, 1.08vw, 1.16rem);
            line-height: 1.78;
            letter-spacing: 0.01em;
            color: var(--paper);
            pointer-events: none;
            user-select: none;
        }

        .glyph {
            position: absolute;
            left: 0;
            top: 0;
            display: inline-block;
            opacity: 0;
            will-change: transform;
            transform: translate3d(0, 0, 0);
            pointer-events: none;
            text-shadow: 0 0 18px rgba(4, 15, 15, 0.22);
            z-index: 1;
        }

        .portrait-orbit {
            position: absolute;
            width: var(--portrait-size);
            height: var(--portrait-size);
            aspect-ratio: 1;
            border-radius: 50%;
            cursor: grab;
            touch-action: none;
            user-select: none;
            box-shadow:
                0 28px 50px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(214, 174, 86, 0.18);
            z-index: 1;
            perspective: 800px;
        }

        .portrait-orbit.is-dragging {
            cursor: grabbing;
        }

        .portrait-shell {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            overflow: hidden;
            border: 1.8px solid rgba(214, 174, 86, 0.42);
            background:
                radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.22), transparent 28%),
                rgba(6, 33, 33, 0.72);
            transform-style: preserve-3d;
            will-change: transform;
        }

        .portrait-glow {
            position: absolute;
            inset: -18%;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(214, 174, 86, 0.2), transparent 58%);
            animation: glowPulse 3.4s ease-in-out infinite;
            pointer-events: none;
        }

        .portrait-ring {
            position: absolute;
            inset: 9px;
            border-radius: 50%;
            border: 1px solid rgba(239, 227, 207, 0.2);
            pointer-events: none;
        }

        .portrait-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: saturate(0.9) contrast(1.05);
            pointer-events: none;
        }

        .portrait-particles {
            position: absolute;
            inset: -58px;
            width: calc(100% + 116px);
            height: calc(100% + 116px);
            pointer-events: none;
            mix-blend-mode: screen;
            filter: saturate(1.08);
        }

        .mobile-copy {
            display: none;
        }

        .mobile-portrait {
            position: relative;
            width: min(260px, 70vw);
            margin: 0 auto 24px;
        }

        .mobile-portrait .portrait-shell {
            position: relative;
            inset: auto;
            aspect-ratio: 1;
        }

        .mobile-portrait .portrait-glow {
            inset: -18%;
        }

        .mobile-story-grid {
            display: grid;
            gap: 14px;
        }

        .mobile-tegaki-shell,
        .mobile-story-card {
            padding: 16px 16px 18px;
            border: 1px solid rgba(214, 174, 86, 0.18);
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 44%),
                rgba(5, 27, 27, 0.52);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
            opacity: 1;
            transform: none;
            border-color: rgba(214, 174, 86, 0.18);
        }

        .mobile-tegaki-shell {
            overflow: hidden;
        }

        .mobile-tegaki-renderer {
            position: relative;
            min-height: 4.9rem;
            font-family: "Caveat Local", "Segoe Print", cursive;
            font-size: clamp(1.95rem, 7.8vw, 2.72rem);
            line-height: 1.04;
            color: var(--ink);
            transform: rotate(-1.6deg);
        }

        .mobile-tegaki-renderer > span {
            display: block;
            width: 100%;
        }

        .mobile-tegaki-renderer [data-tegaki="root"] {
            display: block !important;
            width: 100%;
        }

        .mobile-tegaki-renderer canvas {
            width: 100% !important;
            height: auto !important;
        }

        .mobile-tegaki-fallback {
            display: block;
            color: var(--ink);
            text-wrap: balance;
        }

        .mobile-tegaki-renderer.is-live .mobile-tegaki-fallback {
            opacity: 0;
            visibility: hidden;
            position: absolute;
            inset: 0;
            filter: blur(0.8px);
        }

        body.js .mobile-tegaki-shell,
        body.js .mobile-story-card {
            opacity: 0;
            transform: translate3d(0, 18px, 0);
            transition:
                opacity 0.72s ease,
                transform 0.72s cubic-bezier(0.18, 0.92, 0.24, 1),
                border-color 0.28s ease;
            transition-delay: calc(var(--mobile-delay, 0) * 90ms);
        }

        body.js .mobile-tegaki-shell.is-visible,
        body.js .mobile-story-card.is-visible {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }

        .mobile-story-kicker {
            margin: 0 0 8px;
            font-family: "Playfair Display", Georgia, serif;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            font-size: 0.64rem;
            color: rgba(214, 174, 86, 0.76);
        }

        .mobile-story-title {
            margin: 0 0 10px;
            font-family: "Playfair Display", Georgia, serif;
            font-size: 1.18rem;
            line-height: 1.14;
            color: var(--ink);
            text-wrap: balance;
        }

        .mobile-story-body {
            margin: 0;
            font-size: 0.98rem;
            line-height: 1.68;
            color: var(--paper);
            text-shadow: 0 0 1px rgba(0, 0, 0, 0.12);
        }

        .mobile-story-card:first-of-type .mobile-story-body::first-letter {
            float: left;
            margin: 8px 10px 0 0;
            font-family: "Playfair Display", Georgia, serif;
            font-size: 3.8rem;
            line-height: 0.82;
            color: var(--gold);
        }

        @media (prefers-reduced-motion: reduce) {
            .mobile-tegaki-shell,
            .mobile-story-card {
                opacity: 1;
                transform: none;
                transition: none;
            }
        }

        body.js.intro-ready [data-reveal="overline"] {
            opacity: 1;
            transform: translate3d(0, 0, 0);
            letter-spacing: 0.22em;
            animation: revealOverline 0.7s cubic-bezier(0.17, 0.84, 0.44, 1) 0.04s both;
        }

        body.js.intro-ready [data-reveal="wordmark"] {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1);
            filter: blur(0);
            animation: revealWordmark 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0.1s both;
        }

        body.js.intro-ready [data-reveal="signature"] {
            opacity: 1;
            transform: translate3d(0, 0, 0) rotate(-2.5deg);
            filter: blur(0);
            animation: revealSignature 0.88s cubic-bezier(0.2, 0.88, 0.2, 1) 0.18s both;
        }

        body.js.intro-ready [data-reveal="deck"] {
            opacity: 1;
            transform: translate3d(0, 0, 0);
            animation: revealDeck 0.74s ease 0.28s both;
        }

        body.js.intro-ready [data-reveal="section"] {
            opacity: 1;
            transform: translate3d(0, 0, 0);
            letter-spacing: 0.18em;
            animation: revealSection 0.62s ease 0.2s both;
        }

        body.js.intro-ready [data-reveal="section-heading"] {
            opacity: 1;
            transform: translate3d(0, 0, 0);
            filter: blur(0);
            animation: revealHeading 0.78s cubic-bezier(0.19, 1, 0.22, 1) 0.26s both;
        }

        .projects-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 14px;
        }

        .projects-intro {
            margin: 0 0 28px;
            max-width: 60ch;
            font-family: "Playfair Display", Georgia, serif;
            font-size: 1.08rem;
            line-height: 1.66;
            color: var(--paper-soft);
        }

        .project-card {
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 280px;
            padding: 24px 22px 20px;
            border: 1px solid rgba(239, 227, 207, 0.1);
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 28%),
                rgba(4, 26, 26, 0.34);
            text-decoration: none;
            transition: transform 0.24s ease, border-color 0.24s ease, background 0.24s ease;
            overflow: hidden;
        }

        .project-card::before {
            content: "";
            position: absolute;
            inset: 0 auto auto 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, var(--gold), transparent);
            transform: scaleX(0.24);
            transform-origin: left;
            transition: transform 0.24s ease;
        }

        .project-card:hover,
        .project-card:focus-visible {
            transform: translateY(-4px);
            border-color: rgba(214, 174, 86, 0.34);
            background:
                linear-gradient(180deg, rgba(214, 174, 86, 0.06), transparent 28%),
                rgba(7, 31, 31, 0.5);
            outline: none;
        }

        .project-card:hover::before,
        .project-card:focus-visible::before {
            transform: scaleX(1);
        }

        .project-kicker {
            margin: 0 0 18px;
            font-family: "Playfair Display", Georgia, serif;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            font-size: 0.7rem;
            color: rgba(214, 174, 86, 0.84);
        }

        .project-card h3 {
            margin: 0 0 12px;
            font-family: "Playfair Display", Georgia, serif;
            font-size: 1.55rem;
            line-height: 1.06;
            color: var(--ink);
        }

        .project-card p {
            margin: 0;
            font-size: 0.98rem;
            line-height: 1.7;
            color: var(--paper-soft);
        }

        .project-flow-char {
            display: inline-block;
            will-change: transform, opacity;
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
            filter: none;
        }

        .project-tail {
            margin-top: auto;
            padding-top: 18px;
            font-family: "Playfair Display", Georgia, serif;
            text-transform: uppercase;
            letter-spacing: 0.16em;
            font-size: 0.7rem;
            color: rgba(239, 227, 207, 0.58);
        }

        .project-card-inline .project-tail::before {
            content: "↓ ";
        }

        .project-card-external .project-tail::before {
            content: "↗ ";
        }

        .case-preview-stack {
            display: grid;
            gap: 34px;
            margin-top: 34px;
        }

        .case-preview {
            display: grid;
            grid-template-columns: minmax(0, 1.16fr) minmax(240px, 0.84fr);
            gap: 26px;
            padding: 22px 0 0;
            border-top: 1px solid rgba(239, 227, 207, 0.14);
            background: transparent;
            box-shadow: none;
        }

        .case-preview-copy,
        .case-preview-aside {
            min-width: 0;
        }

        .case-preview-aside {
            display: grid;
            align-content: start;
            gap: 18px;
            padding-left: 24px;
            border-left: 1px solid rgba(214, 174, 86, 0.14);
        }

        .case-preview-kicker {
            margin: 0 0 12px;
            font-family: "Playfair Display", Georgia, serif;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            font-size: 0.68rem;
            color: rgba(214, 174, 86, 0.82);
        }

        .case-preview h3 {
            margin: 0 0 12px;
            font-family: "Playfair Display", Georgia, serif;
            font-size: clamp(1.55rem, 2.4vw, 2.1rem);
            line-height: 1.02;
            color: var(--ink);
        }

        .case-preview-summary {
            margin: 0;
            max-width: 33ch;
            font-size: 1.14rem;
            line-height: 1.62;
            color: var(--paper);
        }

        .case-preview-points {
            display: grid;
            gap: 10px;
            margin: 0 0 18px;
            padding: 0;
            list-style: none;
        }

        .case-preview-points li {
            position: relative;
            padding-left: 18px;
            font-size: 0.94rem;
            line-height: 1.62;
            color: var(--paper-soft);
        }

        .case-preview-points li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.72em;
            width: 7px;
            height: 1px;
            background: rgba(214, 174, 86, 0.76);
        }

        .case-preview-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 0 0 4px;
            border: none;
            border-bottom: 1px solid rgba(214, 174, 86, 0.36);
            color: var(--ink);
            text-decoration: none;
            font-family: "Playfair Display", Georgia, serif;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            font-size: 0.68rem;
            background: transparent;
            transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
        }

        .case-preview-link:hover,
        .case-preview-link:focus-visible {
            border-color: rgba(214, 174, 86, 0.66);
            transform: translate3d(0, -1px, 0);
            outline: none;
        }

        /* ── Smoke Reader: Letter Fog ── */
        .case-preview,
        .project-card {
            opacity: 0.62;
            filter: none;
            transition: opacity 0.45s ease;
            user-select: none;
            cursor: pointer;
            position: relative;
        }

        .case-preview:not(.smoke-revealed) h3,
        .case-preview:not(.smoke-revealed) .case-preview-summary,
        .case-preview:not(.smoke-revealed) .case-preview-points,
        .project-card:not(.smoke-revealed) h3,
        .project-card:not(.smoke-revealed) p {
            text-shadow:
                0 0 3px rgba(239, 227, 207, 0.40),
                0 0 10px rgba(239, 227, 207, 0.25),
                0 0 22px rgba(239, 227, 207, 0.15),
                0 0 40px rgba(239, 227, 207, 0.08);
            transition: text-shadow 0.5s ease, opacity 0.4s ease;
            opacity: 0.55;
        }

        .case-preview:hover:not(.smoke-revealed) h3,
        .case-preview:hover:not(.smoke-revealed) .case-preview-summary,
        .case-preview:hover:not(.smoke-revealed) .case-preview-points,
        .project-card:hover:not(.smoke-revealed) h3,
        .project-card:hover:not(.smoke-revealed) p {
            opacity: 0.85;
            text-shadow:
                0 0 2px rgba(239, 227, 207, 0.20),
                0 0 6px rgba(239, 227, 207, 0.12);
        }

        .case-preview.smoke-active:not(.smoke-revealed) h3,
        .case-preview.smoke-active:not(.smoke-revealed) .case-preview-summary,
        .case-preview.smoke-active:not(.smoke-revealed) .case-preview-points,
        .project-card.smoke-active:not(.smoke-revealed) h3,
        .project-card.smoke-active:not(.smoke-revealed) p {
            opacity: 1;
            text-shadow: none;
        }

        .case-preview.smoke-revealed h3,
        .case-preview.smoke-revealed .case-preview-summary,
        .case-preview.smoke-revealed .case-preview-points,
        .project-card.smoke-revealed h3,
        .project-card.smoke-revealed p {
            text-shadow: none;
            opacity: 1;
        }

        /* Scattered Meaning — слова разбросаны */
        .scatter-word {
            display: inline-block;
            will-change: transform, opacity;
        }

        .case-preview:hover .scatter-word,
        .project-card:hover .scatter-word,
        .case-preview.smoke-active .scatter-word,
        .project-card.smoke-active .scatter-word,
        .case-preview.smoke-revealed .scatter-word,
        .project-card.smoke-revealed .scatter-word {
            transform: translateY(0) rotate(0deg) !important;
            opacity: 1 !important;
        }

        /* Живой туман — text-shadow пульсирует */
        @keyframes smokeDrift {
            0%   { text-shadow: 0 0 2px rgba(239,227,207,0.30), 0 0 8px rgba(239,227,207,0.18), 0 0 18px rgba(239,227,207,0.10); }
            50%  { text-shadow: 0 0 4px rgba(239,227,207,0.45), 0 0 12px rgba(239,227,207,0.28), 0 0 26px rgba(239,227,207,0.15); }
            100% { text-shadow: 0 0 2px rgba(239,227,207,0.30), 0 0 8px rgba(239,227,207,0.18), 0 0 18px rgba(239,227,207,0.10); }
        }

        .case-preview:not(.smoke-revealed) h3,
        .case-preview:not(.smoke-revealed) .case-preview-summary,
        .case-preview:not(.smoke-revealed) .case-preview-points,
        .project-card:not(.smoke-revealed) h3,
        .project-card:not(.smoke-revealed) p {
            animation: smokeDrift 4.2s ease-in-out infinite;
        }

        /* Mobile / touch: no fog — text must be readable immediately */
        @media (pointer: coarse), (max-width: 768px) {
            .case-preview,
            .project-card {
                filter: none;
                opacity: 1;
                -webkit-mask-image: none;
                mask-image: none;
                user-select: auto;
                cursor: auto;
                touch-action: auto;
            }

            .case-preview h3,
            .case-preview .case-preview-summary,
            .case-preview .case-preview-points,
            .project-card h3,
            .project-card p {
                text-shadow: none !important;
                opacity: 1 !important;
            }

            .case-preview.smoke-active,
            .project-card.smoke-active {
                filter: none;
                opacity: 1;
                -webkit-mask-image: none;
                mask-image: none;
            }

            .smoke-overlay,
            .smoke-label {
                display: none !important;
            }
        }

        /* ── Write vs Call ── */
        .write-vs-call-container {
            display: inline;
        }

        .write-vs-call-word {
            display: inline-block;
            opacity: 0;
            transform: translateY(10px) rotate(-1.5deg);
            transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .write-vs-call-word.write-vs-call-visible {
            opacity: 1;
            transform: translateY(0) rotate(0deg);
        }

        .ringing-word {
            position: relative;
            color: var(--accent);
        }

        .ringing-word.write-vs-call-visible {
            animation: phoneRing 0.18s ease-in-out 4;
            animation-delay: 0.55s;
        }

        @keyframes phoneRing {
            0%, 100% { transform: translateX(0) rotate(0deg); }
            20% { transform: translateX(-2.5px) rotate(-2.5deg); }
            40% { transform: translateX(2.5px) rotate(2.5deg); }
            60% { transform: translateX(-1.5px) rotate(-1.5deg); }
            80% { transform: translateX(1.5px) rotate(1.5deg); }
        }

        .ring-wave {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 140%;
            height: 140%;
            border-radius: 50%;
            border: 1.5px solid var(--accent);
            transform: translate(-50%, -50%) scale(0.6);
            opacity: 0;
            pointer-events: none;
        }

        .ringing-word.write-vs-call-visible .ring-wave-1 {
            animation: ringWave 1.1s ease-out 2;
            animation-delay: 0.7s;
        }

        .ringing-word.write-vs-call-visible .ring-wave-2 {
            animation: ringWave 1.1s ease-out 2;
            animation-delay: 1.2s;
        }

        @keyframes ringWave {
            0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.5; }
            100% { transform: translate(-50%, -50%) scale(2.0); opacity: 0; }
        }

        /* ── Chaos Trap ── */
        body.chaos-active {
            animation: chaosFilter 0.12s steps(1) infinite !important;
        }

        @keyframes chaosFilter {
            0%   { filter: hue-rotate(0deg)   saturate(1.0) contrast(1.0); }
            15%  { filter: hue-rotate(90deg)  saturate(2.5) contrast(1.4) invert(0.15); }
            30%  { filter: hue-rotate(180deg) saturate(0.4) contrast(1.8) invert(0.35); }
            45%  { filter: hue-rotate(270deg) saturate(3.0) contrast(0.8) sepia(0.5); }
            60%  { filter: hue-rotate(45deg)  saturate(1.2) contrast(2.2) invert(0.5); }
            75%  { filter: hue-rotate(135deg) saturate(0.6) contrast(1.1); }
            90%  { filter: hue-rotate(220deg) saturate(2.0) contrast(1.6); }
            100% { filter: hue-rotate(0deg)   saturate(1.0) contrast(1.0); }
        }

        body.chaos-active * {
            transition-duration: 0.05s !important;
        }

        body.chaos-frozen *,
        body.chaos-frozen {
            animation-play-state: paused !important;
            transition: none !important;
        }

        body.chaos-frozen .case-preview,
        body.chaos-frozen .project-card {
            opacity: 1 !important;
            filter: none !important;
            text-shadow: none !important;
        }

        body.chaos-frozen .portrait-orbit {
            transform: none !important;
        }

        /* ── Typewriter Quote ── */

        @keyframes cursorBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        .contacts-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
            gap: 24px;
            align-items: start;
        }

        .contacts-copy h2 {
            margin: 0 0 12px;
            font-family: "Playfair Display", Georgia, serif;
            font-size: clamp(2rem, 4vw, 3.2rem);
            line-height: 0.98;
        }

        .contacts-copy p {
            margin: 0;
            max-width: 48ch;
            font-size: 1.03rem;
            line-height: 1.78;
            color: var(--paper-soft);
        }

        .contact-list {
            display: grid;
            gap: 12px;
        }

        .contact-item {
            display: flex;
            justify-content: space-between;
            gap: 18px;
            padding: 14px 0;
            border-bottom: 1px solid rgba(239, 227, 207, 0.1);
            text-decoration: none;
        }

        .contact-item span:first-child {
            font-family: "Playfair Display", Georgia, serif;
            text-transform: uppercase;
            letter-spacing: 0.16em;
            font-size: 0.72rem;
            color: rgba(214, 174, 86, 0.84);
        }

        .contact-item span:last-child {
            font-size: 0.96rem;
            color: var(--paper);
            text-align: right;
        }

        .footer {
            padding: 20px 0 46px;
        }

        .footer-line {
            color: rgba(239, 227, 207, 0.54);
            font-size: 0.82rem;
            border-top: 1px solid var(--rule);
            padding-top: 20px;
        }

        @keyframes glowPulse {
            0%,
            100% {
                opacity: 0.62;
                transform: scale(0.96);
            }
            50% {
                opacity: 0.98;
                transform: scale(1.08);
            }
        }

        @keyframes revealOverline {
            from {
                opacity: 0;
                transform: translate3d(-18px, 0, 0);
                letter-spacing: 0.28em;
            }
            to {
                opacity: 1;
                transform: translate3d(0, 0, 0);
                letter-spacing: 0.22em;
            }
        }

        @keyframes revealWordmark {
            from {
                opacity: 0;
                transform: translate3d(0, 28px, 0) scale(0.985);
                filter: blur(12px);
            }
            to {
                opacity: 1;
                transform: translate3d(0, 0, 0) scale(1);
                filter: blur(0);
            }
        }

        @keyframes revealSignature {
            from {
                opacity: 0;
                transform: translate3d(22px, 18px, 0) rotate(2deg);
                filter: blur(8px);
            }
            to {
                opacity: 1;
                transform: translate3d(0, 0, 0) rotate(-2.5deg);
                filter: blur(0);
            }
        }

        @keyframes revealDeck {
            from {
                opacity: 0;
                transform: translate3d(0, 16px, 0);
            }
            to {
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }

        @keyframes revealSection {
            from {
                opacity: 0;
                transform: translate3d(0, 12px, 0);
                letter-spacing: 0.24em;
            }
            to {
                opacity: 1;
                transform: translate3d(0, 0, 0);
                letter-spacing: 0.18em;
            }
        }

        @keyframes revealHeading {
            from {
                opacity: 0;
                transform: translate3d(0, 20px, 0);
                filter: blur(10px);
            }
            to {
                opacity: 1;
                transform: translate3d(0, 0, 0);
                filter: blur(0);
            }
        }

        @media (max-width: 1100px) {
            .masthead-grid,
            .contacts-grid {
                grid-template-columns: 1fr;
            }

            .masthead-signature {
                justify-self: start;
                text-align: left;
                padding-bottom: 0;
            }

            .case-preview {
                grid-template-columns: 1fr;
            }

            .case-preview-aside {
                padding-left: 0;
                border-left: none;
            }

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

        @media (max-width: 900px) {
            :root {
                --shell: min(1240px, calc(100vw - 28px));
            }

            .page-width {
                width: auto;
                margin-inline: 14px;
            }

            .control-button {
                display: none;
            }

            .lang-switcher {
                flex-wrap: wrap;
            }

            .section-rail {
                top: 4px;
                padding: 6px 0 8px;
            }

            .tegaki-renderer {
                min-height: auto;
                font-size: clamp(2.15rem, 10vw, 3.9rem);
            }

            .hero-deck,
            .hero-summary {
                max-width: 100%;
            }

            .hero-copy {
                display: grid;
                gap: 12px;
            }

            .hero-deck,
            .hero-summary {
                margin-top: 0;
            }

            .tegaki-lockup,
            .hero-copy,
            .mobile-story-grid,
            .mobile-story-card,
            .mobile-tegaki-shell,
            .contacts-copy,
            .contact-list {
                min-width: 0;
            }

            .tegaki-fallback,
            .hero-deck,
            .hero-summary,
            .mobile-story-title,
            .mobile-story-body,
            .project-card h3,
            .project-card p,
            .contacts-copy p,
            .contact-item span:last-child {
                max-width: 100%;
                overflow-wrap: anywhere;
            }

            .desktop-flow {
                display: none;
            }

            .flow-notes {
                display: none;
            }

            .mobile-copy {
                display: block;
            }

            .portrait-stage {
                padding: 20px 18px 24px;
            }

            .project-card {
                min-height: auto;
            }
        }

        @media (max-width: 720px) {
            .masthead-top,
            .section-head,
            .footer-line,
            .contact-item {
                flex-direction: column;
                align-items: flex-start;
            }

            .masthead {
                padding-top: 24px;
            }

            .wordmark {
                letter-spacing: 0.08em;
                font-size: clamp(3.2rem, 15vw, 5.4rem);
            }

            .tegaki-renderer {
                font-size: clamp(2rem, 12vw, 3.1rem);
            }

            .hero-deck {
                font-size: 0.98rem;
                line-height: 1.66;
            }

            .hero-summary {
                font-size: 0.92rem;
                line-height: 1.64;
                min-height: 4.8em;
                max-height: 4.8em;
                overflow: hidden;
                contain: layout;
            }

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

            .case-preview {
                padding: 18px 0 0;
            }

            .case-preview-aside {
                padding-left: 0;
                border-left: none;
            }

            .case-preview h3 {
                font-size: 1.44rem;
            }

            .case-preview-summary {
                max-width: none;
                font-size: 1.04rem;
            }

            .contact-item span:last-child {
                text-align: left;
            }
        }

        .dunes-section {
            position: relative;
            width: 100%;
            height: clamp(480px, 65vw, 820px);
            overflow: hidden;
            border-top: 1px solid var(--rule);
            border-bottom: 1px solid var(--rule);
            background: var(--bg-deep);
        }

        .dunes-frame {
            position: absolute;
            inset: -8%;
            will-change: transform;
            transform: translate3d(0, 0, 0);
        }

        .dunes-video {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            transform: translate3d(-50%, -50%, 0);
            object-fit: cover;
            opacity: 1;
            filter: sepia(0.55) hue-rotate(155deg) saturate(0.45) contrast(1.12) brightness(0.78);
            will-change: transform;
        }

        .dunes-tint {
            position: absolute;
            inset: 0;
            background: linear-gradient(
                180deg,
                rgba(13, 79, 79, 0.35) 0%,
                rgba(8, 55, 55, 0.55) 50%,
                rgba(6, 33, 33, 0.65) 100%
            );
            mix-blend-mode: multiply;
            pointer-events: none;
            z-index: 4;
        }

        .dunes-vignette {
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 50% 50%, transparent 40%, rgba(8, 55, 55, 0.55) 100%),
                linear-gradient(180deg, rgba(8, 55, 55, 0.35) 0%, transparent 30%, transparent 70%, rgba(8, 55, 55, 0.45) 100%);
            pointer-events: none;
            mix-blend-mode: multiply;
        }

        .dunes-quote {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            padding: 24px;
        }

        .dunes-quote blockquote {
            margin: 0;
            max-width: 52ch;
            text-align: center;
            background: rgba(6, 33, 33, 0.62);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            padding: clamp(28px, 4vw, 52px) clamp(24px, 5vw, 56px);
            border-radius: 4px;
            border: 1px solid rgba(239, 227, 207, 0.12);
        }

        .dunes-quote p {
            margin: 0 0 14px;
            font-family: "Playfair Display", Georgia, serif;
            font-style: italic;
            font-size: clamp(1.18rem, 2.1vw, 1.82rem);
            line-height: 1.58;
            letter-spacing: 0.02em;
            color: var(--ink);
            text-wrap: balance;
        }

        .dunes-quote cite {
            display: block;
            font-family: "Caveat Local", "Segoe Print", cursive;
            font-style: normal;
            font-size: clamp(1.05rem, 1.6vw, 1.38rem);
            color: var(--gold);
            letter-spacing: 0.04em;
        }

        @media (prefers-reduced-motion: reduce) {
            .dunes-frame {
                transform: none !important;
            }
        }

        .portrait-section,
        .projects,
        .contacts {
            content-visibility: auto;
            contain-intrinsic-size: auto 600px;
        }