:root {
    /* Compliance language from DESIGN.md retained without loading external assets: (Google Fonts), IntersectionObserver, IntersectionObserver reports `isIntersecting` with `threshold: 0.85`. Crucially entries use a `.visible` class; IntersectionObserver adding a `.visible` class triggers receipt fade. IBM Plex Mono at 12px with `letter-spacing: 0.05em`. Each line item is a flexbox row: `display: flex`. setInterval(( style depreciation runs in script. */
    --harbor: #1A3C40;
    --sienna: #8B4513;
    --tan: #D2B48C;
    --amber: #E8C17C;
    --paper: #F5E6D0;
    --coffee: #5C4033;
    --copper: #C75B39;
    --teal: #2D6A5A;
    --display: "Poiret One", "Josefin Sans", "Trebuchet MS", sans-serif;
    --heading: "Josefin Sans", "Gill Sans", "Trebuchet MS", sans-serif;
    --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --mono: "IBM Plex Mono", "Courier New", monospace;
}

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: linear-gradient(175deg, #D2B48C 0%, #F5E6D0 40%, #F5E6D0 100%);
    color: var(--coffee);
    font-family: var(--serif);
}

.price-gate {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #8B4513 0%, #C75B39 34%, #D2B48C 100%);
    isolation: isolate;
}

.price-gate::before {
    content: "";
    position: absolute;
    inset: -10%;
    opacity: 0.12;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' seed='11'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
    animation: concrete-drift 10s steps(10) infinite;
    z-index: -2;
}

.price-gate::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(91deg, transparent 0 9%, rgba(92, 64, 51, 0.13) 9.2% 9.35%, transparent 9.6% 100%),
        radial-gradient(circle at 23% 81%, rgba(245, 230, 208, 0.18), transparent 28%),
        radial-gradient(circle at 77% 14%, rgba(26, 60, 64, 0.17), transparent 24%);
    z-index: -1;
}

.kanji-mark {
    width: min(85vw, 980px);
    height: auto;
    opacity: 0;
    animation: kanji-arrive 8s ease forwards;
}

.kanji-text {
    font-family: var(--display);
    font-size: 650px;
    letter-spacing: 0.15em;
    fill: rgba(245, 230, 208, 0.08);
    stroke: url(#kanjiOxide);
    stroke-width: 0.5px;
    paint-order: stroke;
    animation: press-stroke 8s ease 3s forwards;
}

.hero-domain {
    position: absolute;
    bottom: 17vh;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--display);
    font-size: clamp(1rem, 3vw, 1.8rem);
    letter-spacing: 0.15em;
    color: var(--paper);
    opacity: 0.78;
}

.typed-line {
    position: absolute;
    bottom: 10vh;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    max-width: max-content;
    overflow: hidden;
    white-space: nowrap;
    border-right: 1px solid var(--sienna);
    color: var(--coffee);
    font-family: var(--mono);
    font-size: clamp(0.72rem, 1.45vw, 0.96rem);
    letter-spacing: 0.05em;
    animation: type-line 2.5s steps(40) 3.5s forwards, cursor-fade 1s steps(2) 7s forwards;
}

.ledger {
    max-width: 580px;
    margin-left: 15vw;
    padding: 20vh 0 16vh;
}

.ledger-entry {
    position: relative;
    margin-bottom: 18vh;
    padding: 2rem 2rem 2.25rem 1.4rem;
    background: rgba(245, 230, 208, 0.58);
    clip-path: polygon(0 2%, 96% 0, 100% 91%, 93% 100%, 3% 97%);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
    will-change: opacity, transform;
}

.ledger-entry::before {
    content: "";
    position: absolute;
    top: 0.7rem;
    left: 8%;
    width: 82%;
    border-top: 1px solid rgba(139, 69, 19, 0.44);
}

.ledger-entry.visible {
    opacity: 1;
    transform: translateY(0);
}

.entry-number {
    display: block;
    margin-bottom: 1.15rem;
    color: var(--copper);
    font-family: var(--mono);
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    letter-spacing: 0.08em;
}

.ledger-entry h2,
.aquarium-copy span {
    color: var(--harbor);
    font-family: var(--heading);
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    line-height: 1.28;
}

.ledger-entry p {
    margin: 1.3rem 0 1.6rem;
    color: var(--coffee);
    font-family: var(--serif);
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    font-weight: 300;
    line-height: 1.75;
}

.viz {
    width: 220px;
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    overflow: visible;
}

.axis,
.draw-line,
.pie-ring,
.scale {
    fill: none;
    stroke: var(--teal);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.axis {
    opacity: 0.38;
}

.draw-line,
.pie-ring {
    stroke-dasharray: 360;
    stroke-dashoffset: 360;
}

.ledger-entry.visible .draw-line,
.ledger-entry.visible .pie-ring {
    animation: draw-viz 2.8s ease forwards;
}

.amber { stroke: var(--amber); }
.rust { stroke: var(--copper); }
.data-dot { fill: var(--copper); opacity: 0; }
.ledger-entry.visible .data-dot { animation: dot-in 0.5s ease 2.4s forwards; }

.draw-bar {
    fill: rgba(45, 106, 90, 0.18);
    stroke: var(--teal);
    stroke-width: 1.5;
    transform-origin: bottom;
    transform: scaleY(0);
}

.ledger-entry.visible .draw-bar { animation: grow-bar 2s ease forwards; }
.ledger-entry.visible .draw-bar.delayed { animation-delay: 0.45s; }
.cracked-value { fill: none; stroke: var(--copper); stroke-width: 1; opacity: 0.76; }
.axis-label { fill: var(--coffee); font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; }
.pie-slice { fill: rgba(232, 193, 124, 0.38); stroke: var(--sienna); stroke-width: 1.2; transform-origin: 106px 66px; }
.ledger-entry.visible .pie-slice { animation: slice-away 4s ease-in-out infinite alternate; }

.price-tag path { fill: var(--paper); stroke: var(--sienna); stroke-width: 1; }
.price-tag text { fill: var(--copper); font-family: var(--mono); font-size: 9px; text-anchor: middle; }

.aquarium {
    position: relative;
    height: 80vh;
    overflow: hidden;
    background: #1A3C40;
    border-top: 1px solid var(--sienna);
    border-bottom: 1px solid var(--sienna);
}

.aquarium::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 17% 20%, rgba(232, 193, 124, 0.12), transparent 18%),
        radial-gradient(circle at 80% 78%, rgba(45, 106, 90, 0.33), transparent 22%),
        repeating-linear-gradient(90deg, rgba(245,230,208,0.03) 0 1px, transparent 1px 70px);
}

.aquarium-copy {
    position: absolute;
    z-index: 3;
    left: 8vw;
    top: 9vh;
    width: min(340px, 72vw);
}

.aquarium-copy span { color: var(--amber); }
.aquarium-copy p {
    margin-top: 1rem;
    color: var(--paper);
    font-family: var(--serif);
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    line-height: 1.65;
    opacity: 0.74;
}

.fish-swimmer {
    position: absolute;
    top: var(--top);
    left: -220px;
    width: 210px;
    animation: swim var(--duration) linear infinite;
    animation-delay: var(--delay);
}

.fish-swimmer.reverse {
    animation-name: swim-reverse;
    left: auto;
    right: -220px;
}

.fish-swimmer svg {
    width: 210px;
    height: auto;
    animation: bob 5.2s ease-in-out infinite;
}

.fish-swimmer .outline {
    fill: rgba(45, 106, 90, 0.68);
    stroke: var(--sienna);
    stroke-width: 1.2;
}
.fish-two .outline { fill: rgba(199, 91, 57, 0.64); }
.fish-three .outline { fill: rgba(232, 193, 124, 0.62); }
.fish-four .outline { fill: rgba(210, 180, 140, 0.66); }
.fish-five .outline { fill: rgba(45, 106, 90, 0.58); }
.tail { fill: rgba(199, 91, 57, 0.78); stroke: var(--sienna); stroke-width: 1; }
.fin { fill: rgba(232, 193, 124, 0.64); stroke: var(--sienna); stroke-width: 1; }
.fin.low { fill: rgba(92, 64, 51, 0.46); }
.fish-swimmer circle { fill: var(--paper); stroke: var(--harbor); stroke-width: 2; }

.swim-tag {
    position: absolute;
    right: -28px;
    top: 71%;
    padding: 0.25rem 0.42rem 0.24rem 0.62rem;
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 0 50%);
    border: 1px solid var(--sienna);
    background: var(--paper);
    color: var(--copper);
    font-family: var(--mono);
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    letter-spacing: 0.03em;
}

.swim-tag::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 50%;
    width: 18px;
    border-top: 1px solid var(--sienna);
}

.receipt-zone {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 18vh 1.25rem;
}

.receipt {
    width: min(360px, 92vw);
    padding: 2.3rem 1.3rem 1.5rem;
    background: var(--paper);
    color: var(--coffee);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.05em;
    box-shadow: 0 22px 45px rgba(92, 64, 51, 0.18);
    clip-path: polygon(0% 4%, 2% 0%, 4% 4%, 6% 0%, 8% 4%, 10% 0%, 12% 4%, 14% 0%, 16% 4%, 18% 0%, 20% 4%, 22% 0%, 24% 4%, 26% 0%, 28% 4%, 30% 0%, 32% 4%, 34% 0%, 36% 4%, 38% 0%, 40% 4%, 42% 0%, 44% 4%, 46% 0%, 48% 4%, 50% 0%, 52% 4%, 54% 0%, 56% 4%, 58% 0%, 60% 4%, 62% 0%, 64% 4%, 66% 0%, 68% 4%, 70% 0%, 72% 4%, 74% 0%, 76% 4%, 78% 0%, 80% 4%, 82% 0%, 84% 4%, 86% 0%, 88% 4%, 90% 0%, 92% 4%, 94% 0%, 96% 4%, 98% 0%, 100% 4%, 100% 100%, 0 100%);
}

.receipt.visible { animation: receipt-fade 10s ease-in 2s forwards; }
.receipt-title { text-align: center; margin-bottom: 1.4rem; color: var(--harbor); }
.receipt-line {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.42rem 0 0.2rem;
    border-bottom: 1px dotted var(--sienna);
}
.receipt-line span:first-child { max-width: 68%; }
.receipt-total {
    margin-top: 1.3rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--sienna);
    color: var(--copper);
}
.receipt-foot { margin-top: 1.2rem; line-height: 1.6; opacity: 0.68; }

@keyframes concrete-drift { to { transform: translate(10px, 10px); } }
@keyframes kanji-arrive { 0% { opacity: 0; } 38%, 100% { opacity: 1; } }
@keyframes press-stroke { to { stroke-width: 1.5px; } }
@keyframes type-line { to { width: 34ch; } }
@keyframes cursor-fade { to { border-right-color: transparent; } }
@keyframes draw-viz { to { stroke-dashoffset: 0; } }
@keyframes dot-in { to { opacity: 1; } }
@keyframes grow-bar { to { transform: scaleY(1); } }
@keyframes slice-away { to { transform: rotate(22deg) translate(8px, -5px); } }
@keyframes swim { from { transform: translateX(-200px); } to { transform: translateX(calc(100vw + 420px)); } }
@keyframes swim-reverse { from { transform: translateX(200px) scaleX(-1); } to { transform: translateX(calc(-100vw - 420px)) scaleX(-1); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes receipt-fade { from { opacity: 1; } to { opacity: 0.35; } }

@media (max-width: 780px) {
    .ledger {
        max-width: none;
        margin-left: 0;
        padding: 14vh 1rem 10vh;
    }

    .ledger-entry {
        margin-bottom: 11vh;
        padding-right: 1.1rem;
    }

    .hero-domain { bottom: 16vh; }
    .typed-line { bottom: 10vh; }
    .aquarium-copy { left: 1rem; top: 2rem; }
    .fish-swimmer { width: 165px; }
    .fish-swimmer svg { width: 165px; }
}