/*
   Design notes (from DESIGN.md):
   Hover Interactions:** Interactive elements respond with a gentle
   "breathing" effect — on hover, scale to 1.02 and box-shadow grows.
   Reveal driven by IntersectionObserver in script.js.
   See also: Hover Interactions:** in DESIGN.md.
*/

/* ============================================================
   rinji.org — wabi-sabi imperfect ceramic
   Palette:
     #f7f3ec  Washi Cream    — primary background
     #3d3229  Bark Brown     — primary text
     #8b6f47  Clay Ochre     — secondary text, headings, interactive
     #c9a849  Kintsugi Gold  — accent lines, repair motifs
     #e8ded0  Ash Linen      — card surfaces
     #6b8e5a  Moss Green     — nature accents
     #a39283  Stone Gray     — borders, dividers
     #d4c4a8  Dried Grass    — tertiary backgrounds
   ============================================================ */

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

html {
    scroll-behavior: smooth;
    background: #f7f3ec;
}

body {
    font-family: "Crimson Pro", Georgia, serif;
    font-size: 17px;
    line-height: 1.85;
    color: #3d3229;
    background: #f7f3ec;
    overflow-x: hidden;
    min-height: 100vh;

    /* Seasonal scroll progression — modulated via JS by setting CSS vars */
    --season-tint-r: 247;
    --season-tint-g: 243;
    --season-tint-b: 236;
    background-color: rgb(var(--season-tint-r), var(--season-tint-g), var(--season-tint-b));
    transition: background-color 1200ms ease;
}

/* ----- Grain overlay (paper-grain texture) ----- */
.grain-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9000;
    opacity: 0.025;
    background-image:
        repeating-conic-gradient(
            from 0deg at 30% 20%,
            #3d3229 0deg 0.6deg,
            transparent 0.6deg 4deg
        ),
        repeating-conic-gradient(
            from 0deg at 70% 80%,
            #8b6f47 0deg 0.4deg,
            transparent 0.4deg 3deg
        );
    mix-blend-mode: multiply;
}

/* ============================================================
   Intro — Ensō opening sequence
   ============================================================ */
.intro {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f3ec;
    overflow: hidden;
}

.intro::before {
    /* Weathering gradient vignette */
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(247, 243, 236, 0) 0%,
        rgba(163, 146, 131, 0.08) 80%,
        rgba(61, 50, 41, 0.12) 100%
    );
    pointer-events: none;
}

.enso {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(72vmin, 600px);
    height: min(72vmin, 600px);
    opacity: 0.95;
}

.enso #enso-path {
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    animation: enso-draw 3s cubic-bezier(0.55, 0.05, 0.35, 0.95) 0.35s forwards;
}

@keyframes enso-draw {
    0%   { stroke-dashoffset: 2400; stroke-width: 22; }
    65%  { stroke-width: 14; }
    92%  { stroke-dashoffset: 90; stroke-width: 4; }
    100% { stroke-dashoffset: 60; stroke-width: 3; }
}

.intro-text {
    position: relative;
    z-index: 2;
    text-align: center;
    opacity: 0;
    animation: intro-text-in 1.2s ease-out 3.4s forwards;
}

.intro-kanji {
    font-family: "Cormorant Garamond", "Noto Serif JP", serif;
    font-weight: 300;
    font-size: 12vw;
    letter-spacing: 0.03em;
    color: #3d3229;
    line-height: 1;
}

.intro-roman {
    font-family: "DM Mono", monospace;
    font-size: 14px;
    letter-spacing: 0.18em;
    color: #8b6f47;
    margin-top: 1.4rem;
    text-transform: lowercase;
}

@keyframes intro-text-in {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Intro fade-out helper (added after 5s) */
.intro.intro-done {
    opacity: 1;
    transition: opacity 1.4s ease, transform 1.4s ease;
}

.intro.intro-faded {
    opacity: 0;
    transform: translateY(-2vh);
    pointer-events: none;
}

/* ============================================================
   Main — content begins after intro
   ============================================================ */
.main {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: 4rem 6vw 8rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.6s ease, transform 1.6s ease;
}

.main.main-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   Sections — Japanese garden flow, asymmetric grid
   ============================================================ */
.section {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(40px, auto);
    gap: 2.4rem 2rem;
    padding: 7rem 0 6rem;
    isolation: isolate;
}

.section::before {
    /* Weathering vignette per section */
    content: "";
    position: absolute;
    inset: 1rem;
    background: radial-gradient(
        ellipse at center,
        rgba(247, 243, 236, 0) 0%,
        rgba(163, 146, 131, 0.025) 70%,
        rgba(139, 111, 71, 0.04) 100%
    );
    pointer-events: none;
    z-index: -1;
}

.section::after {
    /* Subtle crack texture */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0.18;
    background:
        linear-gradient(102deg, transparent 0%, transparent 28%, rgba(163, 146, 131, 0.5) 28.1%, rgba(163, 146, 131, 0.5) 28.25%, transparent 28.35%, transparent 60%),
        linear-gradient(74deg, transparent 0%, transparent 52%, rgba(163, 146, 131, 0.4) 52.1%, rgba(163, 146, 131, 0.4) 52.22%, transparent 52.32%, transparent 100%),
        radial-gradient(circle at 18% 70%, rgba(163, 146, 131, 0.18) 0%, rgba(163, 146, 131, 0) 35%),
        radial-gradient(circle at 82% 22%, rgba(163, 146, 131, 0.14) 0%, rgba(163, 146, 131, 0) 30%);
}

/* Decorative section ensō (background motif) */
.section-enso {
    position: absolute;
    width: 360px;
    height: 360px;
    opacity: 0.12;
    z-index: -1;
    pointer-events: none;
    top: 4rem;
    right: -3rem;
}

.section-enso-large {
    width: 520px;
    height: 520px;
    top: 2rem;
    left: -6rem;
    right: auto;
    opacity: 0.10;
}

/* ----- Block placement (asymmetric, stones in a garden) ----- */
.block {
    position: relative;
    transition: opacity 1.2s ease, transform 1.2s ease;
    opacity: 0;
    transform: translateY(28px);
}

.block.in-view {
    opacity: 1;
    transform: translateY(0);
}

.block.scrolled-past {
    opacity: 0.85;
}

/* Provisional */
.section-provisional .block-a { grid-column: 1 / span 3; grid-row: 1; }
.section-provisional .block-b { grid-column: 4 / span 3; grid-row: 2; padding-top: 3rem; }

/* Cracks */
.section-cracks .block-c { grid-column: 2 / span 4; grid-row: 1; }
.section-cracks .block-d { grid-column: 1 / span 3; grid-row: 2; margin-top: 2rem; }
.section-cracks .block-e { grid-column: 5 / span 2; grid-row: 2; padding-top: 2rem; }

/* Ma */
.section-ma .block-f { grid-column: 1 / span 3; grid-row: 1; }
.section-ma .block-g { grid-column: 3 / span 4; grid-row: 2; }
.section-ma .block-h { grid-column: 2 / span 3; grid-row: 3; padding-top: 2rem; }

/* Essay */
.section-essay .block-i { grid-column: 1 / span 4; grid-row: 1; }
.section-essay .block-j { grid-column: 4 / span 3; grid-row: 2; margin-top: 1rem; }

/* Quiet */
.section-quiet .block-k { grid-column: 1 / span 3; grid-row: 1; }
.section-quiet .block-l { grid-column: 4 / span 3; grid-row: 1; padding-top: 4rem; }
.section-quiet .block-m { grid-column: 2 / span 3; grid-row: 2; padding-top: 1rem; }
.section-quiet .block-n { grid-column: 5 / span 2; grid-row: 2; padding-top: 4rem; }

/* Colophon */
.section-colophon .block-o { grid-column: 1 / span 4; grid-row: 1; }
.section-colophon .block-p { grid-column: 4 / span 3; grid-row: 2; margin-top: 1rem; }
.section-colophon .block-q { grid-column: 1 / span 6; grid-row: 3; padding-top: 4rem; text-align: center; }

/* ============================================================
   Typography elements
   ============================================================ */
.title {
    font-family: "Cormorant Garamond", serif;
    font-weight: 300;
    font-size: clamp(40px, 5.6vw, 72px);
    line-height: 1.05;
    letter-spacing: 0.03em;
    color: #3d3229;
    margin-bottom: 1.6rem;
}

.title-jp {
    display: block;
    font-family: "Noto Serif JP", serif;
    font-weight: 300;
    font-size: 0.55em;
    color: #8b6f47;
    letter-spacing: 0.05em;
    margin-top: 0.4rem;
}

.meta {
    font-family: "DM Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: #a39283;
    text-transform: lowercase;
    margin-bottom: 1.2rem;
}

.lede {
    font-family: "Cormorant Garamond", serif;
    font-weight: 300;
    font-style: italic;
    font-size: 22px;
    line-height: 1.55;
    color: #3d3229;
    max-width: 36ch;
}

.body {
    font-family: "Crimson Pro", Georgia, serif;
    font-size: 17px;
    line-height: 1.85;
    color: #3d3229;
    max-width: 52ch;
    margin-bottom: 1.4rem;
}

.body-small {
    font-family: "Crimson Pro", Georgia, serif;
    font-size: 15px;
    line-height: 1.8;
    color: #8b6f47;
    max-width: 48ch;
    font-style: italic;
}

.quote {
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.7;
    letter-spacing: 0.05em;
    color: #3d3229;
    padding: 2rem 2.4rem;
    background: #e8ded0;
    border-left: 1px solid #c9a849;
    position: relative;
}

.quote::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(126deg, transparent 0%, transparent 35%, rgba(163, 146, 131, 0.4) 35.05%, rgba(163, 146, 131, 0.4) 35.18%, transparent 35.28%, transparent 100%),
        linear-gradient(72deg, transparent 0%, transparent 62%, rgba(163, 146, 131, 0.3) 62.05%, rgba(163, 146, 131, 0.3) 62.18%, transparent 62.28%, transparent 100%);
    opacity: 0.5;
    pointer-events: none;
}

.quote-en {
    display: block;
    font-family: "Crimson Pro", Georgia, serif;
    font-style: italic;
    font-size: 14px;
    color: #8b6f47;
    margin-top: 1rem;
    letter-spacing: 0;
}

.quote-side {
    font-family: "Noto Serif JP", serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 2.1;
    letter-spacing: 0.12em;
    color: #8b6f47;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    height: 240px;
    margin-left: auto;
    border-left: 1px solid rgba(201, 168, 73, 0.4);
    padding-left: 1rem;
}

/* Cards */
.card {
    background: #e8ded0;
    padding: 2.2rem 2rem;
    position: relative;
    transition: transform 500ms ease-out, box-shadow 500ms ease-out;
}

.card-soft {
    background: #d4c4a8;
}

.card:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(139, 111, 71, 0.08);
}

.card-label {
    font-family: "Noto Serif JP", serif;
    font-size: 13px;
    color: #8b6f47;
    letter-spacing: 0.08em;
    margin-bottom: 0.8rem;
    text-transform: lowercase;
}

.card-text {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 400;
    font-size: 19px;
    line-height: 1.55;
    color: #3d3229;
}

.crack-svg {
    display: block;
    width: 100%;
    height: 60px;
    margin-top: 1.4rem;
    opacity: 0.7;
}

/* List */
.list {
    list-style: none;
}

.list li {
    display: flex;
    align-items: baseline;
    gap: 1.6rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(163, 146, 131, 0.35);
    transition: transform 500ms ease-out;
}

.list li:hover {
    transform: scale(1.02);
}

.list li:last-child {
    border-bottom: none;
}

.list-jp {
    font-family: "Noto Serif JP", serif;
    font-size: 22px;
    color: #8b6f47;
    letter-spacing: 0.05em;
    min-width: 4.5em;
}

.list-en {
    font-family: "Crimson Pro", Georgia, serif;
    font-style: italic;
    font-size: 16px;
    color: #3d3229;
}

/* Vignette figure */
.vignette {
    background: #e8ded0;
    padding: 1.8rem 1.6rem 1.4rem;
    transition: transform 500ms ease-out, box-shadow 500ms ease-out;
}

.vignette:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(139, 111, 71, 0.08);
}

.vignette-art {
    display: block;
    width: 100%;
    height: auto;
}

.vignette-cap {
    font-family: "DM Mono", monospace;
    font-size: 11px;
    color: #a39283;
    letter-spacing: 0.12em;
    margin-top: 1rem;
    text-align: center;
}

/* Meta list */
.meta-list {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: #3d3229;
    letter-spacing: 0.05em;
    line-height: 2;
    border-top: 1px solid rgba(163, 146, 131, 0.4);
    border-bottom: 1px solid rgba(163, 146, 131, 0.4);
    padding: 1.2rem 0;
}

.meta-list dt {
    display: inline-block;
    width: 8em;
    color: #a39283;
    text-transform: lowercase;
}

.meta-list dd {
    display: inline-block;
    color: #3d3229;
}

.meta-list dt::after {
    content: "";
    display: block;
    height: 0;
}

.meta-list dd {
    margin-bottom: 0.2rem;
}

.meta-list dt + dd {
    margin-bottom: 0.4rem;
}

/* Footer line */
.footer-line {
    font-family: "Noto Serif JP", serif;
    font-size: 14px;
    color: #a39283;
    letter-spacing: 0.18em;
    text-align: center;
}

/* Botanical illustrations */
.botanical {
    position: absolute;
    width: 44px;
    height: 44px;
    opacity: 0.5;
    z-index: -1;
}

.section-provisional .leaf { bottom: 2rem; left: 14%; transform: rotate(18deg); }
.section-cracks .branch    { top: 4rem; right: 8%; }
.section-ma .droplet       { bottom: 1.6rem; right: 18%; }
.section-essay .seedpod    { bottom: 2rem; left: 10%; transform: rotate(-12deg); }

/* ============================================================
   Kintsugi connectors — golden lines between sections
   ============================================================ */
.kintsugi {
    display: block;
    width: 100%;
    height: 110px;
    overflow: visible;
    margin: -2rem 0;
}

.kintsugi-path {
    opacity: 0.3;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 1.4s ease-out;
}

.kintsugi.kintsugi-revealed .kintsugi-path {
    stroke-dashoffset: 0;
}

/* ============================================================
   Single-element navigation
   ============================================================ */
.nav-dot {
    position: fixed;
    bottom: 2.4rem;
    right: 2.4rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #8b6f47;
    border: none;
    cursor: pointer;
    z-index: 10000;
    padding: 0;
    transition: transform 500ms ease-out, box-shadow 500ms ease-out, background 400ms ease;
}

.nav-dot::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px solid rgba(139, 111, 71, 0);
    transition: border-color 500ms ease, transform 500ms ease;
}

.nav-dot:hover {
    transform: scale(1.4);
    background: #c9a849;
    box-shadow: 0 4px 20px rgba(139, 111, 71, 0.18);
}

.nav-dot:hover::after {
    border-color: rgba(201, 168, 73, 0.4);
    transform: scale(1.6);
}

.nav-dot.is-open {
    background: #c9a849;
    transform: scale(1.4);
}

/* Overlay panel */
.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(247, 243, 236, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms ease;
}

.nav-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.nav-panel {
    position: absolute;
    bottom: 5rem;
    right: 4rem;
    background: rgba(247, 243, 236, 0.92);
    border: 1px solid rgba(163, 146, 131, 0.4);
    padding: 2.4rem 3rem;
    min-width: 320px;
    box-shadow: 0 20px 60px rgba(61, 50, 41, 0.12);
    transform: translateY(20px);
    opacity: 0;
    transition: transform 500ms cubic-bezier(0.2, 0.8, 0.3, 1) 80ms,
                opacity 500ms ease 80ms;
}

.nav-overlay.is-visible .nav-panel {
    transform: translateY(0);
    opacity: 1;
}

.nav-list {
    list-style: none;
    display: flex;
    flex-direction: row;
    gap: 1.6rem;
    align-items: flex-start;
}

.nav-list li {
    flex: 0 0 auto;
}

.nav-list a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform 400ms ease;
}

.nav-list a:hover {
    transform: translateY(-3px) scale(1.04);
}

.nav-jp {
    font-family: "Noto Serif JP", serif;
    font-weight: 300;
    font-size: 22px;
    color: #3d3229;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.18em;
    height: 6em;
    border-right: 1px solid rgba(201, 168, 73, 0.4);
    padding-right: 0.4rem;
    margin-right: 0.4rem;
    transition: color 400ms ease, border-color 400ms ease;
}

.nav-list a:hover .nav-jp {
    color: #c9a849;
    border-color: #c9a849;
}

.nav-en {
    font-family: "DM Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.15em;
    color: #a39283;
    text-transform: lowercase;
    margin-top: 0.6rem;
}

.nav-list a:visited .nav-en {
    color: #6b8e5a;
}

.nav-foot {
    margin-top: 2rem;
    font-family: "DM Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: #a39283;
    text-align: right;
}

/* Background blur class while overlay open */
body.nav-open .main,
body.nav-open .intro,
body.nav-open .kintsugi {
    filter: blur(2px);
    transition: filter 400ms ease;
}

/* ============================================================
   Responsive — preserve organic flow on small screens
   ============================================================ */
@media (max-width: 900px) {
    .main { padding: 3rem 5vw 6rem; }

    .section {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem 1.4rem;
        padding: 5rem 0 4rem;
    }

    .section-provisional .block-a,
    .section-provisional .block-b,
    .section-cracks .block-c,
    .section-cracks .block-d,
    .section-cracks .block-e,
    .section-ma .block-f,
    .section-ma .block-g,
    .section-ma .block-h,
    .section-essay .block-i,
    .section-essay .block-j,
    .section-quiet .block-k,
    .section-quiet .block-l,
    .section-quiet .block-m,
    .section-quiet .block-n,
    .section-colophon .block-o,
    .section-colophon .block-p,
    .section-colophon .block-q {
        grid-column: 1 / -1;
        grid-row: auto;
        padding-top: 0;
        margin-top: 0;
    }

    .title { font-size: clamp(36px, 9vw, 56px); }
    .lede  { font-size: 19px; }
    .body  { font-size: 16px; line-height: 1.75; }

    .quote-side {
        writing-mode: horizontal-tb;
        height: auto;
        border-left: none;
        border-top: 1px solid rgba(201, 168, 73, 0.4);
        padding-left: 0;
        padding-top: 1rem;
    }

    .section-enso, .section-enso-large {
        width: 240px;
        height: 240px;
        opacity: 0.08;
    }

    .nav-panel {
        right: 1.4rem;
        bottom: 4rem;
        min-width: 0;
        padding: 1.8rem 2rem;
    }

    .nav-list { gap: 1rem; }
    .nav-jp { font-size: 18px; height: 5em; }
}

@media (max-width: 520px) {
    .intro-kanji { font-size: 22vw; }
    .nav-list { flex-wrap: wrap; max-width: 70vw; }
    .nav-jp { height: 4em; font-size: 16px; }
}