/* kaguya.date — a vertical lunar almanac shaped like Shigaraki ceramic */

:root {
    --moon-silk: #f4ead5;
    --terracotta: #a8542a;
    --bronze: #7a5a2a;
    --bamboo-pith: #7a8456;
    --persimmon: #c87c4a;
    --inkstone: #2a241a;
    --lantern: rgba(244, 180, 92, 0.32);
    --grid-line: rgba(122, 90, 42, 0.18);
    --hair-edge: rgba(42, 36, 26, 0.4);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--moon-silk);
    color: var(--inkstone);
    font-family: "Spectral", serif;
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.78;
    max-width: 100vw;
    overflow-x: hidden;
    position: relative;
}

/* The Lunar Meridian — single hairline dead-center */
body::before {
    content: "";
    position: fixed;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--bronze);
    z-index: 0;
    pointer-events: none;
}

/* Calendar grid-lines — horizontal dashed rule lines every 96px */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 95px,
        var(--grid-line) 95px,
        var(--grid-line) 96px
    );
    background-size: 8px 96px;
    pointer-events: none;
    z-index: 0;
}

/* dashed effect via second layer */
body {
    background-image:
        repeating-linear-gradient(to right, transparent 0, transparent 4px, var(--moon-silk) 4px, var(--moon-silk) 12px);
    background-attachment: fixed;
}

/* The Ripple Pool — static concentric rings centered on the Moonbowl */
.ripple-pool {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--moon-silk);
    background-image:
        radial-gradient(circle at 50% 50%,
            transparent 0,
            transparent 60px, rgba(168,84,42,0.07) 60px, rgba(168,84,42,0.07) 61px, transparent 61px,
            transparent 138px, rgba(122,132,86,0.07) 138px, rgba(122,132,86,0.07) 139px, transparent 139px,
            transparent 222px, rgba(200,124,74,0.07) 222px, rgba(200,124,74,0.07) 223px, transparent 223px,
            transparent 314px, rgba(122,90,42,0.06) 314px, rgba(122,90,42,0.06) 315px, transparent 315px,
            transparent 414px, rgba(168,84,42,0.06) 414px, rgba(168,84,42,0.06) 415px, transparent 415px,
            transparent 522px, rgba(122,132,86,0.06) 522px, rgba(122,132,86,0.06) 523px, transparent 523px,
            transparent 638px, rgba(200,124,74,0.05) 638px, rgba(200,124,74,0.05) 639px, transparent 639px,
            transparent 762px, rgba(122,90,42,0.05) 762px, rgba(122,90,42,0.05) 763px, transparent 763px,
            transparent 894px, rgba(168,84,42,0.04) 894px, rgba(168,84,42,0.04) 895px, transparent 895px,
            transparent 1034px, rgba(122,132,86,0.04) 1034px, rgba(122,132,86,0.04) 1035px, transparent 1035px,
            transparent 1182px, rgba(200,124,74,0.03) 1182px, rgba(200,124,74,0.03) 1183px, transparent 1183px,
            transparent 1338px, rgba(122,90,42,0.03) 1338px, rgba(122,90,42,0.03) 1339px, transparent 1339px,
            transparent 3000px);
}

/* Centered meridian column */
.meridian-column {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
    padding: 140px 24px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Generic blob — content wrapper, individually shaped */
.blob {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 192px;
}

.blob .blob-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* hand-traced inner hairline edge */
.blob .blob-inner::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 0.5px solid var(--hair-edge);
    border-radius: inherit;
    pointer-events: none;
}

/* ---- 1. The Bamboo Stalk Hero ---- */
.blob--bamboo {
    margin-top: 24px;
}
.blob--bamboo .blob-inner {
    width: clamp(220px, 34vw, 320px);
    min-height: clamp(420px, 62vh, 600px);
    padding: 56px 32px 64px;
    justify-content: flex-end;
    border-radius: 47% 53% 44% 56% / 64% 61% 39% 36%;
    background: radial-gradient(ellipse at 50% 62%, var(--lantern) 0%, rgba(244,180,92,0.10) 30%, var(--terracotta) 72%, #8e451f 100%);
    overflow: hidden;
}
.lantern-glow {
    position: absolute;
    left: 50%;
    top: 62%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 30%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(244,180,92,0.55) 0%, rgba(244,180,92,0) 70%);
    animation: breathe 8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    pointer-events: none;
}
.sumi--princess {
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: auto;
}
.hero-wordmark {
    font-family: "Cormorant Garamond", serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.6rem, 4.4vw, 2.4rem);
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--moon-silk);
    position: relative;
    z-index: 2;
}
.hero-caption {
    margin-top: 14px;
    font-family: "Cormorant Upright", serif;
    font-style: italic;
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(244, 234, 213, 0.82);
    max-width: 200px;
    position: relative;
    z-index: 2;
}

/* ---- 2. The Moonbowl ---- */
.blob--moonbowl .blob-inner {
    width: clamp(360px, 70vw, 720px);
    height: clamp(360px, 70vw, 720px);
    padding: clamp(40px, 7vw, 80px);
    justify-content: center;
    border-radius: 52% 48% 49% 51% / 51% 50% 50% 49%;
    background: radial-gradient(circle at 48% 44%, rgba(244,234,213,0.9) 0%, rgba(244,234,213,0.4) 40%, rgba(244,180,92,0.18) 62%, transparent 78%);
    border: 1.5px solid var(--terracotta);
}
.moon-disc {
    width: clamp(160px, 30vw, 300px);
    height: clamp(160px, 30vw, 300px);
}
.craquelure {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.moonbowl-label {
    margin-top: 22px;
    font-family: "Spectral", serif;
    font-weight: 500;
    font-variant: small-caps;
    letter-spacing: 0.14em;
    font-size: 0.95rem;
    color: var(--bronze);
}
.moonbowl-stamp {
    margin-top: 4px;
    font-family: "Spectral", serif;
    font-weight: 500;
    font-variant: small-caps;
    letter-spacing: 0.14em;
    font-size: 1.05rem;
    color: var(--terracotta);
}
.moonbowl-note {
    margin-top: 16px;
    font-family: "Cormorant Upright", serif;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--inkstone);
    max-width: 340px;
}

/* ---- 3. The Almanac Strip — kidney/persimmon blob ---- */
.blob--almanac .blob-inner {
    width: min(100%, 720px);
    padding: 64px clamp(36px, 7vw, 88px) 72px;
    border-radius: 38% 62% 63% 37% / 58% 42% 58% 42%;
    background: radial-gradient(ellipse at 50% 50%, rgba(122,132,86,0.32) 0%, rgba(122,132,86,0.55) 45%, var(--bamboo-pith) 100%);
}
.almanac-title {
    font-family: "Cormorant Garamond", serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    letter-spacing: 0.04em;
    color: var(--moon-silk);
    margin-bottom: 36px;
}
.almanac-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}
.date-blob {
    display: flex;
    align-items: center;
    gap: 18px;
    text-align: left;
    padding: 16px 24px;
    border-radius: 46% 54% 58% 42% / 64% 56% 44% 36%;
    background: radial-gradient(ellipse at 30% 40%, rgba(244,234,213,0.28) 0%, rgba(200,124,74,0.45) 50%, var(--persimmon) 100%);
    position: relative;
}
.date-blob::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 0.5px solid var(--hair-edge);
    border-radius: inherit;
    pointer-events: none;
}
.sumi--icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    stroke: var(--inkstone);
    fill: none;
}
.date-body {
    display: flex;
    flex-direction: column;
}
.date-stamp {
    font-family: "Spectral", serif;
    font-weight: 500;
    font-variant: small-caps;
    letter-spacing: 0.14em;
    font-size: 1.02rem;
    color: var(--inkstone);
}
.date-marginalia {
    font-family: "Cormorant Upright", serif;
    font-style: italic;
    font-size: 0.88rem;
    line-height: 1.4;
    color: rgba(42, 36, 26, 0.75);
}

/* ---- 4. The Ascension Plinth — inverted daruma, narrow bottom wide top ---- */
.blob--plinth .blob-inner {
    width: min(100%, 640px);
    padding: 84px clamp(40px, 8vw, 96px) 56px;
    border-radius: 14% 86% 18% 82% / 8% 8% 92% 92%;
    background: radial-gradient(ellipse at 50% 18%, rgba(200,124,74,0.40) 0%, rgba(122,90,42,0.30) 45%, rgba(122,90,42,0.55) 100%);
    overflow: hidden;
}
.blob--plinth {
    overflow: visible;
}
.feather-robe {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, 640px);
    height: 80px;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}
.feather-robe svg {
    width: 100%;
    height: 100%;
}
.plinth-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 40%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(200,124,74,0.5) 0%, rgba(200,124,74,0) 72%);
    pointer-events: none;
}
.plinth-eyebrow {
    position: relative;
    z-index: 2;
    font-family: "Spectral", serif;
    font-weight: 500;
    font-variant: small-caps;
    letter-spacing: 0.16em;
    font-size: 0.9rem;
    color: var(--moon-silk);
    margin-bottom: 24px;
}
.folktale-excerpt {
    position: relative;
    z-index: 2;
    font-family: "EB Garamond", serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1.15rem;
    line-height: 2.0;
    text-align: justify;
    hyphens: auto;
    color: var(--moon-silk);
    max-width: 460px;
}

/* ---- 5. The Tea-Cup Footnote — small low shallow blob ---- */
.blob--teacup {
    margin-bottom: 120px;
}
.blob--teacup .blob-inner {
    width: min(100%, 560px);
    padding: 48px clamp(32px, 6vw, 64px) 56px;
    border-radius: 44% 56% 46% 54% / 78% 80% 20% 22%;
    background: radial-gradient(ellipse at 50% 30%, rgba(244,234,213,0.5) 0%, rgba(122,90,42,0.10) 45%, rgba(122,90,42,0.20) 100%);
}
.sumi--basket {
    width: 64px;
    height: 64px;
    stroke: var(--bronze);
    fill: none;
    margin-bottom: 18px;
}
.teacup-line {
    font-family: "Cormorant Garamond", serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    letter-spacing: 0.04em;
    color: var(--inkstone);
    max-width: 380px;
}
.teacup-colophon {
    margin-top: 20px;
    font-family: "Cormorant Upright", serif;
    font-style: italic;
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(42, 36, 26, 0.7);
    max-width: 380px;
}
.teacup-mark {
    margin-top: 18px;
    font-family: "Spectral", serif;
    font-weight: 500;
    font-variant: small-caps;
    letter-spacing: 0.18em;
    font-size: 0.92rem;
    color: var(--bronze);
}

/* sumi line vocabulary — round caps, single weight feel */
.sumi path {
    fill: none;
    stroke: var(--inkstone);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.sumi--princess path:nth-child(1) { stroke-width: 1.4; }
.sumi--princess path:nth-child(2) { stroke-width: 1.6; }
.sumi--princess path:nth-child(3) { stroke-width: 3.2; }
.sumi--princess path:nth-child(4) { stroke-width: 2.8; }
.sumi--princess path:nth-child(5) { stroke-width: 2.2; }
.sumi--princess path:nth-child(6) { stroke-width: 1.4; }
.sumi--princess path:nth-child(7) { stroke-width: 2; fill: var(--inkstone); }
.sumi--basket path { stroke: var(--bronze); stroke-width: 1.6; }
.sumi--icon path { stroke: var(--inkstone); stroke-width: 1.6; }

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

@media (prefers-reduced-motion: reduce) {
    .lantern-glow { animation: none; }
    html { scroll-behavior: auto; }
}

@media (max-width: 640px) {
    .meridian-column { padding-top: 100px; }
    .blob { margin-bottom: 128px; }
    .folktale-excerpt { text-align: left; hyphens: none; }
}