:root {
    /* Compliance vocabulary: International Typographic colliding bubbly playful bubble-based visual metaphor. tension geometric precision organic IntersectionObserver` scroll-triggered animations instead of listeners small (e.g. (Google `font-variation-settings: 'wght' 700` reads: "質より量" (quality */
    --primary-burgundy: #6b2d3e;
    --deep-burgundy: #8c1c3d;
    --darkest: #2a1520;
    --cream: #faf6f1;
    --warm-cream: #f5e6d8;
    --mid-tone: #d4b8a0;
    --highlight-pink: #e8a0b4;
    --bubble: #c44d6e;
    --display: "Space Grotesk", sans-serif;
    --body: "Instrument Sans", sans-serif;
    --mono: "JetBrains Mono", monospace;
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --wght: 400;
}

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--cream);
    color: var(--darkest);
    font-family: var(--body);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    line-height: 1.72;
    letter-spacing: 0.005em;
}

body.noise-active {
    background: var(--warm-cream);
}

button {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}

.filter-defs {
    position: absolute;
    pointer-events: none;
}

.grid-background {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.15;
    background-image:
        linear-gradient(90deg, #f5e6d8 0.5px, transparent 0.5px),
        linear-gradient(0deg, #f5e6d8 0.5px, transparent 0.5px);
    background-size: calc(100vw / 12) calc(100vh / 12);
    transform: translate3d(0, var(--grid-y, 0px), 0);
    transition: opacity 500ms ease, filter 500ms ease;
}

body.press-active .grid-background {
    opacity: 0.25;
}

body.noise-active .grid-background {
    opacity: 0.32;
    filter: url(#turbulence);
}

.masugomi-label {
    position: fixed;
    top: 50%;
    left: 12px;
    z-index: 40;
    color: var(--primary-burgundy);
    cursor: pointer;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.4em;
    text-orientation: mixed;
    text-transform: uppercase;
    transform: translateY(-50%);
    transition: color 400ms ease;
    writing-mode: vertical-lr;
}

.masugomi-label:hover {
    color: var(--highlight-pink);
}

.section-indicators {
    position: fixed;
    top: 50%;
    left: 48px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transform: translateY(-50%);
}

.indicator {
    position: relative;
    width: 18px;
    height: 18px;
    border: 1px solid #6b2d3e;
    border-radius: 50%;
    cursor: pointer;
    transition: background 500ms var(--spring), border-color 500ms var(--spring), transform 500ms var(--spring);
}

.indicator span {
    position: absolute;
    left: 26px;
    top: 50%;
    color: var(--deep-burgundy);
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.15em;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 300ms ease;
}

.indicator.active {
    border-color: #e8a0b4;
    background: #e8a0b4;
    transform: scale(1.2);
}

.indicator.active span,
.indicator:hover span {
    opacity: 1;
}

.content-wrapper {
    position: relative;
    z-index: 10;
}

.section {
    position: relative;
    min-height: 110vh;
    margin: 40vh 0;
    padding: clamp(40px, 8vw, 96px) clamp(28px, 6vw, 90px);
}

.opening-section {
    min-height: 100vh;
    margin-top: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 26px;
    background: #faf6f1;
}

.opening-bubble {
    width: 60vmin;
    height: 60vmin;
    display: grid;
    place-items: center;
    border: 1px solid rgba(140, 28, 61, 0.12);
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 24%, rgba(250, 246, 241, 0.9) 0 7%, transparent 8%),
        radial-gradient(circle at 35% 32%, rgba(232, 160, 180, 0.45), rgba(196, 77, 110, 0.13) 42%, rgba(140, 28, 61, 0.04) 70%);
    box-shadow: 0 8px 32px rgba(107, 45, 62, 0.2), inset -20px -22px 60px rgba(107, 45, 62, 0.06);
    backdrop-filter: blur(2px);
    animation: openingInflate 2s ease-out both;
}

.opening-mark {
    color: #6b2d3e;
    font-family: var(--display);
    font-size: clamp(3.2rem, 10vw, 8.4rem);
    font-variation-settings: "wght" 700;
    font-weight: 700;
    letter-spacing: -0.05em;
    opacity: 0;
    animation: fadeUp 900ms ease-out 900ms both;
}

.opening-subtitle,
.opening-metadata {
    color: #8c1c3d;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    opacity: 0;
    animation: fadeUp 900ms ease-out 1.15s both;
}

.opening-metadata {
    color: #d4b8a0;
    font-size: 10px;
    letter-spacing: 0.22em;
    animation-delay: 1.35s;
}

.section-rule {
    position: absolute;
    top: 0;
    left: clamp(28px, 6vw, 90px);
    right: clamp(28px, 6vw, 90px);
    height: 1px;
    background: #6b2d3e;
    opacity: 0.75;
}

.section-label {
    position: absolute;
    top: 80px;
    left: 24px;
    color: #8c1c3d;
    font-family: var(--mono);
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    letter-spacing: 0.15em;
    text-orientation: mixed;
    text-transform: uppercase;
    writing-mode: vertical-lr;
}

.essay-grid {
    width: min(1120px, 100%);
    min-height: 82vh;
    display: grid;
    grid-template-columns: minmax(120px, 25%) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    margin: 0 auto;
}

.essay-index {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid #d4b8a0;
    padding-right: 24px;
    color: #8c1c3d;
    font-family: var(--mono);
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.essay-copy {
    max-width: 65ch;
}

.section-title {
    margin-bottom: clamp(28px, 4vw, 48px);
    color: #6b2d3e;
    font-family: var(--display);
    font-size: clamp(2.4rem, 7vw, 6rem);
    font-variation-settings: "wght" var(--title-wght, 300);
    font-weight: var(--title-wght, 300);
    letter-spacing: clamp(-0.04em, -0.5vw, -0.02em);
    line-height: 0.9;
    transition: font-weight 400ms ease-out, font-variation-settings 400ms ease-out;
}

.body-text {
    max-width: 65ch;
    margin-bottom: 1.5rem;
    color: #2a1520;
    font-family: var(--body);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-variation-settings: "wght" var(--body-wght, 400);
    font-weight: var(--body-wght, 400);
    letter-spacing: 0.005em;
    line-height: 1.72;
}

.press-bubbles {
    width: min(920px, 78vw);
    display: grid;
    grid-template-columns: repeat(3, minmax(138px, 1fr));
    gap: clamp(16px, 3vw, 34px);
    margin: clamp(42px, 7vw, 80px) 0;
    transform: translateX(-8%);
}

.content-bubble {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid #d4b8a0;
    border-radius: 50%;
    box-shadow: 0 8px 32px rgba(107, 45, 62, 0.2);
    opacity: 0;
    transform: scale(0.85);
    transition: border-radius 600ms var(--spring), transform 600ms var(--spring), box-shadow 600ms var(--spring);
}

.content-bubble.is-visible {
    opacity: 1;
    transform: scale(1);
    animation: popIn 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.content-bubble:hover {
    border-radius: 16px;
    transform: scale(1.04);
    box-shadow: 0 16px 54px rgba(107, 45, 62, 0.3);
}

.photo-bubble::before {
    content: "";
    position: absolute;
    inset: 0;
    background-blend-mode: multiply, overlay, normal;
    filter: grayscale(1) contrast(1.3);
}

.photo-one::before {
    background:
        linear-gradient(rgba(107, 45, 62, 0.35), rgba(42, 21, 32, 0.55)),
        repeating-linear-gradient(90deg, transparent 0 15px, rgba(250, 246, 241, 0.22) 16px 17px),
        radial-gradient(circle at 42% 32%, #faf6f1 0 8%, transparent 9%),
        linear-gradient(135deg, #2a1520 0 22%, #f5e6d8 23% 38%, #6b2d3e 39% 52%, #d4b8a0 53% 100%);
}

.photo-two::before {
    background:
        linear-gradient(rgba(107, 45, 62, 0.38), rgba(42, 21, 32, 0.52)),
        repeating-linear-gradient(0deg, transparent 0 10px, rgba(250, 246, 241, 0.18) 11px 12px),
        radial-gradient(ellipse at 50% 28%, #f5e6d8 0 13%, transparent 14%),
        linear-gradient(45deg, #d4b8a0 0 20%, #2a1520 21% 44%, #f5e6d8 45% 55%, #8c1c3d 56% 100%);
}

.photo-three::before {
    background:
        linear-gradient(rgba(107, 45, 62, 0.42), rgba(42, 21, 32, 0.48)),
        repeating-linear-gradient(115deg, transparent 0 18px, rgba(250, 246, 241, 0.19) 19px 20px),
        radial-gradient(circle at 58% 38%, #faf6f1 0 9%, transparent 10%),
        linear-gradient(160deg, #2a1520 0 30%, #d4b8a0 31% 48%, #f5e6d8 49% 60%, #6b2d3e 61% 100%);
}

.photo-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.33'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
    opacity: 0.55;
}

figcaption {
    position: absolute;
    right: 15%;
    bottom: 12%;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(250, 246, 241, 0.86);
    color: #8c1c3d;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.15em;
}

.text-bubble {
    width: clamp(150px, 20vw, 240px);
    height: clamp(150px, 20vw, 240px);
    display: flex;
    align-items: center;
    margin: 6vh 0 0 auto;
    padding: 34px;
    border: 1px solid #d4b8a0;
    border-radius: 50%;
    color: #8c1c3d;
    font-family: var(--mono);
    font-size: clamp(0.62rem, 0.75vw, 0.75rem);
    letter-spacing: 0.12em;
    line-height: 1.55;
    text-align: center;
    background: radial-gradient(circle at 30% 25%, rgba(232, 160, 180, 0.26), rgba(250, 246, 241, 0.36));
}

.unstable-title,
.unstable-text {
    animation: weightFlux 3s ease-in-out infinite;
}

.noise-section {
    background: linear-gradient(180deg, rgba(250, 246, 241, 0), #f5e6d8 50%, rgba(250, 246, 241, 0));
}

.noise-cluster {
    position: relative;
    width: min(620px, 72vw);
    height: 330px;
    margin-top: 60px;
    filter: url(#turbulence);
}

.noise-orb {
    position: absolute;
    border: 1px solid rgba(140, 28, 61, 0.12);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%, rgba(232, 160, 180, 0.55), rgba(196, 77, 110, 0.18) 52%, transparent 74%);
    backdrop-filter: blur(2px);
    animation: jitterFloat 6s ease-in-out infinite;
}

.noise-orb:nth-child(1) { width: 220px; height: 220px; left: 0; top: 52px; animation-delay: 0s; }
.noise-orb:nth-child(2) { width: 160px; height: 160px; left: 30%; top: 0; animation-delay: -1s; }
.noise-orb:nth-child(3) { width: 260px; height: 260px; right: 2%; top: 34px; animation-delay: -2s; }
.noise-orb:nth-child(4) { width: 110px; height: 110px; left: 45%; bottom: 0; animation-delay: -3s; }
.noise-orb:nth-child(5) { width: 138px; height: 138px; right: 22%; bottom: 22px; animation-delay: -4s; }

.pop-section {
    min-height: 100vh;
    margin-bottom: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #faf6f1;
}

.pop-bubble {
    width: 90vmin;
    height: 90vmin;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 18px;
    border: 1px solid rgba(140, 28, 61, 0.12);
    border-radius: 50%;
    background:
        linear-gradient(rgba(250, 246, 241, 0.76), rgba(250, 246, 241, 0.76)),
        radial-gradient(circle at 35% 30%, rgba(232, 160, 180, 0.3), rgba(196, 77, 110, 0.06));
    box-shadow: 0 8px 32px rgba(107, 45, 62, 0.2);
    transition: width 800ms var(--spring), height 800ms var(--spring), border-radius 800ms var(--spring), box-shadow 800ms ease;
}

.pop-bubble.morphed {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    box-shadow: none;
}

.final-line {
    color: #6b2d3e;
    font-family: var(--display);
    font-size: clamp(4rem, 14vw, 12rem);
    font-variation-settings: "wght" 400;
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 0.9;
}

.final-caption {
    color: #8c1c3d;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

.bubble-plane {
    position: fixed;
    inset: 0;
    z-index: 20;
    overflow: hidden;
    pointer-events: none;
    transform: translate3d(0, var(--bubble-y, 0px), 0);
}

.atmospheric-bubble {
    position: absolute;
    width: var(--size);
    height: var(--size);
    border: 1px solid rgba(140, 28, 61, 0.08);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%, rgba(250, 246, 241, 0.7) 0 6%, rgba(196, 77, 110, 0.24) 7%, rgba(140, 28, 61, 0.08) 42%, transparent 72%);
    backdrop-filter: blur(2px);
    opacity: 0;
    will-change: transform, opacity;
    animation: bubbleDrift var(--duration) ease-in-out var(--delay) infinite, bubbleArrive 1200ms ease-out 1.5s both;
}

.b1 { --size: 80px; left: 6%; top: 12%; --x: 42px; --y: -60px; --duration: 24s; --delay: 0s; }
.b2 { --size: 140px; left: 78%; top: 10%; --x: -60px; --y: 70px; --duration: 32s; --delay: -4s; }
.b3 { --size: 54px; left: 20%; top: 28%; --x: 38px; --y: 54px; --duration: 28s; --delay: -8s; }
.b4 { --size: 210px; left: 62%; top: 36%; --x: -50px; --y: -44px; --duration: 36s; --delay: -12s; }
.b5 { --size: 96px; left: 8%; top: 68%; --x: 80px; --y: -36px; --duration: 30s; --delay: -2s; }
.b6 { --size: 124px; left: 86%; top: 64%; --x: -68px; --y: 52px; --duration: 27s; --delay: -5s; }
.b7 { --size: 44px; left: 43%; top: 16%; --x: 24px; --y: 70px; --duration: 22s; --delay: -1s; }
.b8 { --size: 174px; left: 30%; top: 76%; --x: -42px; --y: -66px; --duration: 38s; --delay: -9s; }
.b9 { --size: 72px; left: 54%; top: 58%; --x: 52px; --y: 46px; --duration: 29s; --delay: -13s; }
.b10 { --size: 320px; left: 74%; top: 78%; --x: -72px; --y: -84px; --duration: 40s; --delay: -7s; }
.b11 { --size: 118px; left: 14%; top: 44%; --x: 54px; --y: -58px; --duration: 31s; --delay: -3s; }
.b12 { --size: 64px; left: 92%; top: 30%; --x: -46px; --y: -28px; --duration: 25s; --delay: -11s; }
.b13 { --size: 248px; left: -5%; top: 82%; --x: 58px; --y: -78px; --duration: 35s; --delay: -6s; }
.b14 { --size: 152px; left: 46%; top: 88%; --x: -38px; --y: -50px; --duration: 33s; --delay: -10s; }
.b15 { --size: 104px; left: 38%; top: 42%; --x: 36px; --y: 38px; --duration: 26s; --delay: -14s; }

.atmospheric-bubble.extra {
    animation: bubbleDrift 24s ease-in-out infinite;
}

@keyframes openingInflate {
    from { opacity: 0; transform: scale(0); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes popIn {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes weightFlux {
    0%, 100% { font-variation-settings: "wght" 300; font-weight: 300; }
    50% { font-variation-settings: "wght" 700; font-weight: 700; }
}

@keyframes jitterFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(0.98); }
    50% { transform: translate3d(24px, -30px, 0) scale(1.05); }
}

@keyframes bubbleArrive {
    from { opacity: 0; }
    to { opacity: 0.28; }
}

@keyframes bubbleDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(0.95); opacity: 0.12; }
    50% { transform: translate3d(var(--x), var(--y), 0) scale(1.05); opacity: 0.35; }
}

@media (max-width: 820px) {
    .section { padding: 60px 24px 60px 64px; }
    .section-indicators { left: 34px; }
    .essay-grid { grid-template-columns: 1fr; }
    .essay-index { min-height: 90px; border-right: 0; border-bottom: 1px solid #d4b8a0; padding: 0 0 18px; }
    .section-label { display: none; }
    .press-bubbles { width: 100%; grid-template-columns: 1fr; max-width: 280px; transform: none; }
    .text-bubble { margin-left: 0; }
}