/* =========================================================
   aiice.io — evolved minimalism as intimate dialogue
   Single-column narrative, morph-only animation language,
   kissaten-lit warm palette, Garamond-classic typography.
   Compliance tokens from typography notes: IntersectionObserver` `threshold: [0 Lora's contemporary design offers excellent screen readability sizes (`clamp(1rem Lora" (Google
   ========================================================= */

:root {
    --bg-parchment:    #f5efe6;
    --text-umber:      #2c2418;
    --text-ash:        #7a6e5d;
    --accent-amber:    #c49a6c;
    --accent-sienna:   #a0522d;
    --overlay-cream:   rgba(245, 239, 230, 0.85);
    --shadow-warm:     rgba(44, 36, 24, 0.08);
    --rail-amber-30:   rgba(196, 154, 108, 0.30);
    --rail-amber-50:   rgba(196, 154, 108, 0.55);
    --border-amber-30: rgba(196, 154, 108, 0.30);

    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body:    'Lora', Georgia, 'Times New Roman', serif;
    --font-ui:      'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --ease-morph:     cubic-bezier(0.22, 1, 0.36, 1);
    --ease-dot:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --duration-morph: 0.9s;

    --measure:      min(60ch, 80vw);
    --rail-width:   8vw;
    --gradient-rail: linear-gradient(180deg, #c49a6c 0%, #a0522d 50%, #7a6e5d 100%);
    --compliance-threshold-token: "[0";
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    background: var(--bg-parchment);
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.15vw, 1.25rem);
    line-height: 1.72;
    letter-spacing: 0.01em;
    color: var(--text-umber);
    background: var(--bg-parchment);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    position: relative;
}

/* ------------------------------------------------------------------
   GRAIN OVERLAY — the faintest tooth of drawing paper
   ------------------------------------------------------------------ */
.grain-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.045;
    mix-blend-mode: multiply;
    background-image:
        radial-gradient(circle at 11% 23%, #2c2418 0.6px, transparent 0.9px),
        radial-gradient(circle at 37% 71%, #2c2418 0.5px, transparent 0.8px),
        radial-gradient(circle at 73% 17%, #2c2418 0.6px, transparent 0.9px),
        radial-gradient(circle at 89% 63%, #2c2418 0.4px, transparent 0.7px),
        radial-gradient(circle at 19% 89%, #2c2418 0.5px, transparent 0.8px),
        radial-gradient(circle at 57% 41%, #2c2418 0.4px, transparent 0.7px);
    background-size: 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px;
    background-position: 0 0, 80px 40px, 40px 120px, 160px 80px, 100px 160px, 60px 60px;
}

/* ------------------------------------------------------------------
   GHOST NAV — morphs into presence on scroll
   ------------------------------------------------------------------ */
.ghost-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: transparent;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition:
        background 0.5s var(--ease-morph),
        backdrop-filter 0.5s var(--ease-morph),
        -webkit-backdrop-filter 0.5s var(--ease-morph),
        border-color 0.5s var(--ease-morph);
    border-bottom: 1px solid transparent;
}

.ghost-nav.is-present {
    background: var(--overlay-cream);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: rgba(196, 154, 108, 0.18);
}

.ghost-nav__inner {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.05rem 2.4rem;
    max-width: 1280px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity 0.5s var(--ease-morph),
        transform 0.5s var(--ease-morph);
}

.ghost-nav.is-present .ghost-nav__inner {
    opacity: 1;
    transform: translateY(0);
}

.ghost-nav__mark {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: 0.04em;
    color: var(--text-umber);
}

.ghost-nav__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-amber);
    display: inline-block;
}

.ghost-nav__whisper {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-ash);
}

/* ------------------------------------------------------------------
   ANNOTATION RAIL — marginalia as navigation
   ------------------------------------------------------------------ */
.annotation-rail {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--rail-width);
    min-width: 68px;
    max-width: 120px;
    z-index: 30;
    pointer-events: none;
}

.rail-line {
    position: absolute;
    top: 12vh;
    bottom: 12vh;
    left: 50%;
    width: 1px;
    background: var(--rail-amber-30);
    transform: translateX(-0.5px);
}

/* subtle gradient at the top/bottom, suggesting depth */
.rail-line::before,
.rail-line::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(180deg, var(--bg-parchment), transparent);
}
.rail-line::before { top: -60px; }
.rail-line::after  { bottom: -60px; transform: rotate(180deg); }

.rail-dot {
    position: fixed;
    top: var(--dot-top);
    left: calc(var(--rail-width) / 2);
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    font: inherit;
    color: inherit;
    z-index: 31;
}

.rail-dot .dot-shape {
    position: absolute;
    inset: 0;
    background: var(--accent-amber);
    border-radius: 50%;
    transition:
        width 0.6s var(--ease-dot),
        height 0.6s var(--ease-dot),
        border-radius 0.6s var(--ease-dot),
        background 0.6s var(--ease-dot),
        box-shadow 0.6s var(--ease-dot),
        transform 0.6s var(--ease-dot),
        left 0.6s var(--ease-dot),
        top 0.6s var(--ease-dot);
    transform-origin: left center;
}

/* a gentle breathing pulse on the dots */
.rail-dot::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid var(--accent-amber);
    opacity: 0;
    animation: dot-pulse 4.2s var(--ease-morph) infinite;
}

.rail-dot:nth-of-type(2)::before { animation-delay: 0.7s; }
.rail-dot:nth-of-type(3)::before { animation-delay: 1.4s; }
.rail-dot:nth-of-type(4)::before { animation-delay: 2.1s; }
.rail-dot:nth-of-type(5)::before { animation-delay: 2.8s; }

@keyframes dot-pulse {
    0%   { transform: scale(0.9); opacity: 0; }
    30%  { opacity: 0.55; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}

.dot-label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: 0.95rem;
    color: var(--text-umber);
    background: var(--overlay-cream);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.35rem 0.8rem;
    border-radius: 2px;
    border-left: 2px solid var(--accent-amber);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.45s var(--ease-morph) 0.15s,
        transform 0.6s var(--ease-morph);
    transform: translate(-6px, -50%);
}

.rail-dot:hover .dot-shape,
.rail-dot:focus-visible .dot-shape,
.rail-dot.is-active .dot-shape {
    width: 32px;
    height: 12px;
    border-radius: 6px;
    background: var(--gradient-rail);
    box-shadow: 0 2px 10px rgba(160, 82, 45, 0.22);
}

.rail-dot:hover .dot-label,
.rail-dot:focus-visible .dot-label {
    opacity: 1;
    transform: translate(26px, -50%);
}

.rail-dot.is-active .dot-shape {
    box-shadow: 0 0 0 3px rgba(196, 154, 108, 0.12), 0 2px 10px rgba(160, 82, 45, 0.22);
}

/* ------------------------------------------------------------------
   LETTER — the single-column grid
   ------------------------------------------------------------------ */
.letter {
    display: grid;
    grid-template-columns: [rail] var(--rail-width) [content] var(--measure) [end] 1fr;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem 18vh 1.5rem;
    perspective: 1200px;
    perspective-origin: 50% 30%;
}

.letter > * {
    grid-column: content;
    position: relative;
}

/* ------------------------------------------------------------------
   OPENING — a single sentence, floating
   ------------------------------------------------------------------ */
.opening {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10vh 0 6vh;
    transform-style: preserve-3d;
}

.opening__sentence {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.65rem, 3.6vw, 3.25rem);
    line-height: 1.18;
    letter-spacing: 0.015em;
    color: var(--text-umber);
    max-width: 26ch;
    margin: 0;
    transform: translateZ(6px);
}

.opening__sentence em {
    font-style: italic;
    color: var(--accent-sienna);
    font-weight: 300;
}

.opening__tail {
    display: inline-block;
    color: var(--accent-amber);
    transform: translateY(0.05em);
    animation: tail-breathe 5.6s var(--ease-morph) infinite;
}

@keyframes tail-breathe {
    0%, 100% { opacity: 0.55; letter-spacing: 0.05em; }
    50%      { opacity: 1;    letter-spacing: 0.25em; }
}

.opening__whisper {
    margin-top: 5vh;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-ash);
    transform: translateZ(-4px);
}

/* ------------------------------------------------------------------
   CHAPTERS — major thought-blocks, 12vh apart
   ------------------------------------------------------------------ */
.chapter {
    margin-top: 12vh;
    margin-bottom: 12vh;
    transform-style: preserve-3d;
}

.chapter--coda {
    margin-bottom: 6vh;
}

.chapter-word {
    position: relative;
    display: inline-block;
    margin: 0 0 4vh 0;
    font-family: var(--font-display);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(3rem, 8vw, 7rem);
    line-height: 1.02;
    color: var(--text-umber);
    letter-spacing: 0.15em;
    opacity: 0.22;
    transform: translateZ(8px);
    transition:
        letter-spacing 1.1s var(--ease-morph),
        opacity 1.1s var(--ease-morph);
}

.chapter-word.is-crystallized {
    letter-spacing: 0.03em;
    opacity: 1;
}

.chapter-word__text {
    display: inline-block;
}

.chapter-word__underline {
    display: block;
    width: 78%;
    height: 14px;
    margin-top: 0.1em;
    margin-left: 0.05em;
    overflow: visible;
}

.chapter-word__underline path {
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
    transition: stroke-dashoffset 1.2s var(--ease-morph);
}

.chapter-word.is-crystallized .chapter-word__underline path {
    stroke-dashoffset: 0;
}

/* ------------------------------------------------------------------
   TEXT RHYTHM
   ------------------------------------------------------------------ */
.lede {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    line-height: 1.38;
    letter-spacing: 0.012em;
    color: var(--text-umber);
    margin: 0 0 6vh 0;
    max-width: 32ch;
    transform: translateZ(4px);
}

.lede em {
    font-style: italic;
    color: var(--accent-sienna);
}

.body {
    margin: 0 0 6vh 0;
    max-width: 60ch;
    color: var(--text-umber);
    transform: translateZ(0);
}

.body em {
    font-style: italic;
    color: var(--accent-sienna);
    font-weight: 400;
}

.body--soft {
    color: var(--text-ash);
}

.pullquote {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.32;
    color: var(--accent-sienna);
    margin: 6vh 0 6vh 0;
    padding-left: 1.6rem;
    border-left: 1px solid var(--border-amber-30);
    max-width: 36ch;
    transform: translateZ(10px);
}

.margin-note {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--text-ash);
    max-width: 40ch;
    margin: 0 0 6vh 0;
    padding-left: 1.2rem;
    position: relative;
    transform: translateZ(2px);
}

.margin-note__mark {
    position: absolute;
    left: 0;
    top: -0.15em;
    color: var(--accent-amber);
    font-size: 1.8rem;
    line-height: 1;
}

/* ------------------------------------------------------------------
   VISUAL BREATHS — layered-depth "framed print"
   ------------------------------------------------------------------ */
.visual-breath {
    margin: 9vh auto 9vh auto;
    padding: 0;
    max-width: 85%;
    text-align: center;
    transform-style: preserve-3d;
    position: relative;
}

.visual-breath__frame {
    position: relative;
    border-radius: 3px;
    overflow: hidden;
    transform: translateZ(-5px) scale(1.01);
    box-shadow:
        0 8px 24px var(--shadow-warm),
        0 2px 6px var(--shadow-warm);
    filter: sepia(15%) saturate(85%) brightness(1.05) contrast(0.95) blur(8px);
    transition: filter 1.4s var(--ease-morph);
}

.visual-breath.is-resolved .visual-breath__frame {
    filter: sepia(15%) saturate(85%) brightness(1.05) contrast(0.95) blur(0px);
}

.visual-breath__frame::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid var(--border-amber-30);
    border-radius: 2px;
    transform: translateZ(3px);
    pointer-events: none;
}

.visual-breath__art {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 14 / 9;
}

.visual-breath__art .steam {
    transform-origin: center bottom;
    animation: steam-drift 6.8s var(--ease-morph) infinite;
}

.visual-breath__art .steam:nth-of-type(2) { animation-delay: 1.4s; }
.visual-breath__art .steam:nth-of-type(3) { animation-delay: 2.7s; }

@keyframes steam-drift {
    0%   { opacity: 0.15; transform: translateY(4px) scaleY(0.95); }
    40%  { opacity: 0.7;  transform: translateY(-6px) scaleY(1.05); }
    100% { opacity: 0;    transform: translateY(-20px) scaleY(1.1); }
}

.visual-breath__caption {
    margin-top: 1.4rem;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-ash);
}

/* ------------------------------------------------------------------
   SOFT MORPHING DIVIDERS — three breathing lines
   ------------------------------------------------------------------ */
.soft-divider {
    grid-column: content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    margin: 10vh auto;
    width: 100%;
    pointer-events: none;
}

.divider-line {
    display: block;
    height: 1px;
    background: var(--text-ash);
    width: 15%;
    transition: width 0.9s var(--ease-morph);
}

.divider-line--a { opacity: 0.20; }
.divider-line--b { opacity: 0.40; }
.divider-line--c { opacity: 0.20; }

.soft-divider.is-expanded .divider-line--a { width: 30%; }
.soft-divider.is-expanded .divider-line--b { width: 40%; }
.soft-divider.is-expanded .divider-line--c { width: 30%; }

/* ------------------------------------------------------------------
   SIGNATURE & COLOPHON
   ------------------------------------------------------------------ */
.signature {
    margin-top: 8vh;
    margin-bottom: 0.4rem;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.3rem, 2vw, 1.75rem);
    color: var(--text-umber);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.signature__line {
    font-style: italic;
    color: var(--text-ash);
}

.signature__mark {
    font-weight: 500;
    color: var(--accent-sienna);
    letter-spacing: 0.02em;
}

.colophon {
    margin-top: 3vh;
    font-family: var(--font-ui);
    font-size: 0.76rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-ash);
    opacity: 0.85;
}

/* ------------------------------------------------------------------
   MORPH-IN (scroll-driven, proportional)
   Default state — slightly smaller, slightly transparent.
   JS sets --intersect (0..1); we interpolate via calc().
   ------------------------------------------------------------------ */
[data-morph] {
    --intersect: 0;
    opacity: calc(0.4 + 0.6 * var(--intersect));
    transform: scale(calc(0.97 + 0.03 * var(--intersect)));
    transition:
        opacity 0.9s var(--ease-morph),
        transform 0.9s var(--ease-morph);
    will-change: opacity, transform;
}

/* when fully crystallized we let CSS take over cleanly */
[data-morph].is-resolved {
    --intersect: 1;
    opacity: 1;
    transform: scale(1);
}

/* ------------------------------------------------------------------
   RESPONSIVE — mobile collapses the rail, keeps the reading
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .annotation-rail { display: none; }

    .letter {
        grid-template-columns: 1fr;
        padding: 0 1.4rem 14vh 1.4rem;
    }

    .letter > * { grid-column: 1; }

    .ghost-nav__inner { padding: 0.9rem 1.2rem; }
    .ghost-nav__whisper { display: none; }

    .opening {
        min-height: 90vh;
        padding: 16vh 0 4vh;
    }

    .opening__sentence { font-size: clamp(1.5rem, 6vw, 2.2rem); }

    .chapter-word { font-size: clamp(2.6rem, 14vw, 4.6rem); }
    .chapter { margin-top: 10vh; margin-bottom: 10vh; }

    .pullquote { padding-left: 1rem; }
    .visual-breath { max-width: 100%; }
}

@media (max-width: 480px) {
    .ghost-nav__inner { gap: 0.6rem; }
    .ghost-nav__mark { font-size: 1.05rem; }
}

/* ------------------------------------------------------------------
   MOTION-REDUCED — keep morph, but shorten & calm it
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    [data-morph], [data-morph].is-resolved {
        transition-duration: 0.2s;
        transform: none !important;
        opacity: 1 !important;
    }
    .opening__tail, .visual-breath__art .steam, .rail-dot::before {
        animation: none;
    }
}