/* =========================================================
   shinonome.date — styles.css
   Six full-bleed marble stones, monochrome, tilt-3d driven.
   Palette (Kuro-Mado / Shirakuni):
     #F4F1EB Shirakuni     #E6E1D6 Kinu      #A89F8E Kasumi
     #4A463F Sumi-Usu      #1C1B17 Kuro-Mado #0A0908 Shinonome-Yoru
     #FFFFFF Hikari (veins on dark stones only)
   ========================================================= */

/* ---------- Reset & root ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Tilt-3d cursor variables driven by JS, default to neutral */
    --mx: 0;
    --my: 0;

    /* Palette */
    --shirakuni: #F4F1EB;
    --kinu: #E6E1D6;
    --kasumi: #A89F8E;
    --sumi-usu: #4A463F;
    --kuro-mado: #1C1B17;
    --shinonome-yoru: #0A0908;
    --hikari: #FFFFFF;

    /* Type scale */
    --measure: clamp(38ch, 52vw, 62ch);

    /* Spring easing (same one used everywhere — discipline) */
    --spring: cubic-bezier(0.16, 1, 0.3, 1);

    background: var(--kuro-mado);
    color: var(--kinu);

    /* Scroll-snap proximity — gentle centering, never mandatory */
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

body {
    font-family: "Inria Serif", "Iowan Old Style", "Apple Garamond", Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.85;
    color: var(--sumi-usu);
    background: var(--kuro-mado);
}

/* Hidden defs (filters + symbols) live in the DOM but are not rendered. */
svg.defs {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ---------- The path of stones ---------- */
.path {
    display: block;
    width: 100vw;
    margin: 0;
    padding: 0;
}

/* ---------- A stone ---------- */
.stone {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1400px;
    perspective-origin: 30% 30%;
}

/* Index numeral i. ii. iii. … in the bottom-right corner of every stone. */
.stone__index {
    position: absolute;
    right: clamp(1.5rem, 4vw, 4rem);
    bottom: clamp(1.25rem, 3vw, 3rem);
    font-family: "Familjen Grotesk", "Inter", sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.55;
    z-index: 4;
    font-variant-numeric: tabular-nums;
}

.stone--light .stone__index { color: var(--sumi-usu); }
.stone--dark  .stone__index { color: var(--kinu); }

/* ---------- Marble surface ---------- */
.stone__marble {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: cover, cover, 1800px 1800px, auto;
    /* The marble itself never tilts — the tilt is applied to the content above it,
       which is the correct illusion: a slab held still while the imaginary light moves. */
    will-change: filter;
    filter: contrast(1.02) brightness(1.0);
}

/* Each seed produces a different SVG-turbulence layer. The url() inlines a tiny
   SVG that filters a rect, then a rgba radial-gradient haze is layered on top
   to simulate ambient veining. */
.stone--light .stone__marble {
    background:
      radial-gradient(ellipse 140% 80% at 30% 18%, rgba(230,225,214,0.0), rgba(168,159,142,0.18) 40%, rgba(74,70,63,0.06) 100%),
      radial-gradient(ellipse 80% 120% at 80% 70%, rgba(244,241,235,0.45), rgba(244,241,235,0) 60%),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1800' height='1800'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.04' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.94  0 0 0 0 0.92  0 0 0 1.6 -0.3'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>"),
      var(--shirakuni);
    background-size: cover, cover, 1800px 1800px, auto;
}

.stone--dark .stone__marble {
    background:
      radial-gradient(ellipse 140% 80% at 28% 22%, rgba(255,255,255,0.04), rgba(255,255,255,0.10) 35%, rgba(10,9,8,0.0) 100%),
      radial-gradient(ellipse 80% 120% at 78% 72%, rgba(10,9,8,0.45), rgba(10,9,8,0) 65%),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1800' height='1800'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.014 0.045' numOctaves='3' seed='13'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.06  0 0 0 0 0.05  0 0 0 1.7 -0.25'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>"),
      var(--kuro-mado);
    background-size: cover, cover, 1800px 1800px, auto;
}

/* Stone-specific seed swap-outs (each gets its own fractalNoise seed) ------- */

#stone-3 .stone__marble {
    background:
      radial-gradient(ellipse 140% 80% at 30% 18%, rgba(230,225,214,0.0), rgba(168,159,142,0.18) 40%, rgba(74,70,63,0.06) 100%),
      radial-gradient(ellipse 80% 120% at 80% 70%, rgba(244,241,235,0.45), rgba(244,241,235,0) 60%),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1800' height='1800'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.010 0.038' numOctaves='3' seed='19'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.94  0 0 0 0 0.92  0 0 0 1.55 -0.32'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>"),
      var(--shirakuni);
    background-size: cover, cover, 1800px 1800px, auto;
}

#stone-4 .stone__marble {
    background:
      radial-gradient(ellipse 140% 80% at 28% 22%, rgba(255,255,255,0.04), rgba(255,255,255,0.10) 35%, rgba(10,9,8,0.0) 100%),
      radial-gradient(ellipse 80% 120% at 78% 72%, rgba(10,9,8,0.45), rgba(10,9,8,0) 65%),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1800' height='1800'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.016 0.05' numOctaves='3' seed='23'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.06  0 0 0 0 0.05  0 0 0 1.8 -0.22'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>"),
      var(--kuro-mado);
    background-size: cover, cover, 1800px 1800px, auto;
}

#stone-5 .stone__marble {
    background:
      radial-gradient(ellipse 140% 80% at 30% 18%, rgba(230,225,214,0.0), rgba(168,159,142,0.18) 40%, rgba(74,70,63,0.06) 100%),
      radial-gradient(ellipse 80% 120% at 80% 70%, rgba(244,241,235,0.45), rgba(244,241,235,0) 60%),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1800' height='1800'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.011 0.042' numOctaves='3' seed='29'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.94  0 0 0 0 0.92  0 0 0 1.58 -0.31'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>"),
      var(--shirakuni);
    background-size: cover, cover, 1800px 1800px, auto;
}

#stone-6 .stone__marble {
    background:
      radial-gradient(ellipse 140% 80% at 28% 22%, rgba(255,255,255,0.04), rgba(255,255,255,0.10) 35%, rgba(10,9,8,0.0) 100%),
      radial-gradient(ellipse 80% 120% at 78% 72%, rgba(10,9,8,0.45), rgba(10,9,8,0) 65%),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1800' height='1800'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.013 0.044' numOctaves='3' seed='31'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.06  0 0 0 0 0.05  0 0 0 1.75 -0.24'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>"),
      var(--kuro-mado);
    background-size: cover, cover, 1800px 1800px, auto;
}

/* ---------- Tilt wrapper ---------- */
.stone__tilt {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    /* Default rest tilt — a slab seen from upper-left light. */
    transform:
        rotateY(calc(-7deg + var(--mx) * 4deg))
        rotateX(calc(4deg + var(--my) * -3deg));
    transition: transform 600ms var(--spring);
    padding: clamp(2.5rem, 8vh, 7rem) clamp(1.5rem, 6vw, 6rem);
}

/* The actual content column lives one level deeper so it can have its own
   transform/translateZ feel and not be sheared by the tilt origin. */
.stone__inner {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
    transform: translateZ(0);
}

/* ---------- Stone 1: Threshold ---------- */
.stone--threshold .stone__inner {
    max-width: 92vw;
    text-align: left;
    color: var(--sumi-usu);
}

.stone__overline {
    font-family: "Familjen Grotesk", "Inter", sans-serif;
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kasumi);
    margin: 0 0 clamp(1.5rem, 3vh, 2.5rem) 0;
}

.wordmark {
    font-family: "Familjen Grotesk", "Inter", sans-serif;
    font-weight: 400;
    font-size: clamp(4rem, 14vw, 12rem);
    letter-spacing: -0.04em;
    line-height: 0.92;
    margin: 0;
    color: var(--sumi-usu);
    /* The wordmark sits "above" the slab — a small lift in 3D space. */
    transform: translateZ(28px);
}

.wordmark__dot {
    color: var(--kasumi);
    font-weight: 600;
    margin-left: -0.05em;
}

.stone__under {
    margin-top: clamp(1.5rem, 3vh, 2.5rem);
    font-style: italic;
    font-size: clamp(1.05rem, 1.5vw, 1.4rem);
    color: var(--sumi-usu);
    max-width: 36ch;
    line-height: 1.55;
}

/* The cast leaf-shadow on Stone 1. No fill — only a soft drop-shadow. */
.stone__leaf-shadow {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* The shadow drifts subtly over 40s. */
    animation: drift 40s ease-in-out infinite alternate;
}

.leaf-cast {
    width: 60vw;
    height: 60vw;
    max-width: 700px;
    max-height: 700px;
    color: transparent;
    fill: transparent;
    transform: rotate(-22deg) translateY(-4vh) translateX(8vw);
    /* Drop-shadow is what we see: a haze of kasumi. */
    filter:
        drop-shadow(0 0 80px rgba(168,159,142,0.55))
        drop-shadow(0 0 24px rgba(168,159,142,0.40));
    opacity: 0.95;
}

.leaf-cast use {
    fill: rgba(168,159,142,0.001); /* virtually transparent; the shadow does the work */
}

@keyframes drift {
    0%   { transform: translate3d(0,0,0) rotate(0deg); }
    50%  { transform: translate3d(2vw, 1vh, 0) rotate(2deg); }
    100% { transform: translate3d(-1.5vw, -0.8vh, 0) rotate(-1.5deg); }
}

/* ---------- Stone 2: Meaning (prose) ---------- */
.stone--dark .stone__inner {
    color: var(--kinu);
}

.stone__inner--prose {
    text-align: left;
    color: var(--kinu);
}

.stone__heading {
    font-family: "Familjen Grotesk", "Inter", sans-serif;
    font-weight: 500;
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    letter-spacing: -0.012em;
    line-height: 1.18;
    color: var(--shirakuni);
    margin: 0 0 clamp(1.8rem, 4vh, 3rem) 0;
    transform: translateZ(14px);
}

.stone__heading em {
    font-style: italic;
    color: var(--kasumi);
    font-weight: 400;
}

.stone__inner--prose p {
    margin: 0 0 clamp(1.1rem, 2.2vh, 1.7rem) 0;
    color: var(--kinu);
}

.stone__inner--prose p em {
    font-style: italic;
    color: var(--shirakuni);
}

/* Inline leaf "rule" — replaces *** between paragraphs. */
.leaf-rule {
    display: block;
    width: 0.9em;
    height: 0.9em;
    margin: clamp(1.4rem, 3.4vh, 2.4rem) 0;
    color: var(--kasumi);
    opacity: 0.85;
}

.stone--light .leaf-rule { color: var(--kasumi); }
.stone--dark  .leaf-rule { color: var(--kasumi); }

/* ---------- Stone 3: Almanac ---------- */
.stone__inner--almanac {
    text-align: left;
    max-width: 56ch;
    color: var(--sumi-usu);
}

.almanac__label {
    font-family: "Familjen Grotesk", "Inter", sans-serif;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kasumi);
    margin: 0 0 clamp(1.2rem, 2.4vh, 2rem) 0;
}

.almanac__date {
    font-family: "Familjen Grotesk", "Inter", sans-serif;
    font-weight: 400;
    font-size: clamp(2.4rem, 5.6vw, 4.6rem);
    letter-spacing: -0.028em;
    line-height: 1.02;
    color: var(--sumi-usu);
    margin: 0 0 clamp(1.6rem, 3vh, 2.2rem) 0;
    transform: translateZ(20px);
}

.almanac__times {
    font-family: "Familjen Grotesk", "Inter", sans-serif;
    font-weight: 600;
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--sumi-usu);
    margin: 0 0 clamp(2rem, 4vh, 3rem) 0;
    font-variant-numeric: tabular-nums;
    display: flex;
    gap: 0.6em;
    align-items: baseline;
}

.almanac__times .arrow {
    color: var(--kasumi);
    font-weight: 400;
}

.almanac__weather {
    font-family: "Inria Serif", Georgia, serif;
    font-style: normal;
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.78;
    color: var(--sumi-usu);
    margin: 0 0 clamp(1.6rem, 3.2vh, 2.4rem) 0;
}

.almanac__weather em {
    font-style: italic;
    color: var(--kasumi);
}

.almanac__coords {
    font-family: "Familjen Grotesk", "Inter", sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    color: var(--kasumi);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.almanac__coords em {
    font-family: "Inria Serif", Georgia, serif;
    font-style: italic;
    letter-spacing: 0;
}

/* ---------- Stone 4: Field of Leaves ---------- */
.stone__inner--field {
    position: relative;
    width: 100%;
    height: 100vh;
    max-width: none;
    margin: 0;
    pointer-events: none;
}

.leaf-field {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.leaf-field__leaf {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
    color: var(--shirakuni);
    opacity: var(--o);
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    animation: leaf-spin 110s linear infinite, leaf-breathe 18s ease-in-out infinite alternate;
    animation-delay: var(--d), var(--d);
    will-change: transform;
}

.leaf-field__leaf use {
    color: inherit;
}

@keyframes leaf-spin {
    0%   { transform: rotate(var(--r)) rotate3d(1, 1, 0.3, 0deg); }
    100% { transform: rotate(var(--r)) rotate3d(1, 1, 0.3, 360deg); }
}

@keyframes leaf-breathe {
    0%   { filter: blur(0px); }
    50%  { filter: blur(0.6px); }
    100% { filter: blur(0px); }
}

/* ---------- Stone 5: Correspondence ---------- */
.stone__inner--invite {
    text-align: left;
    color: var(--sumi-usu);
    max-width: 54ch;
}

.invite__lead {
    font-family: "Inria Serif", Georgia, serif;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.55;
    color: var(--sumi-usu);
    margin: 0;
}

.invite__lead em {
    font-style: italic;
    color: var(--kasumi);
}

.invite__mail {
    color: var(--sumi-usu);
    text-decoration: none;
    border-bottom: 0.5px solid var(--kasumi);
    padding-bottom: 0.05em;
    font-style: italic;
    transition: border-color 600ms var(--spring), color 600ms var(--spring);
}

.invite__mail:hover {
    color: var(--kuro-mado);
    border-bottom-color: var(--sumi-usu);
}

.invite__mail .at {
    font-style: normal;
    font-family: "Familjen Grotesk", "Inter", sans-serif;
    font-weight: 600;
    color: var(--kasumi);
}

.invite__quiet {
    display: block;
    margin-top: clamp(1.2rem, 2.6vh, 2rem);
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    color: var(--kasumi);
    font-style: normal;
}

/* ---------- Stone 6: Colophon ---------- */
.stone__inner--colophon {
    text-align: left;
    color: var(--kinu);
    max-width: 72ch;
}

.colophon__title {
    font-family: "Familjen Grotesk", "Inter", sans-serif;
    font-weight: 500;
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kasumi);
    margin: 0 0 clamp(2rem, 4vh, 3rem) 0;
}

.colophon__list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(8rem, 14ch) 1fr;
    column-gap: clamp(1.5rem, 3vw, 3rem);
    row-gap: clamp(0.6rem, 1.4vh, 1.2rem);
    color: var(--kinu);
    font-family: "Inria Serif", Georgia, serif;
    font-size: clamp(0.98rem, 1.25vw, 1.15rem);
    line-height: 1.6;
}

.colophon__list dt {
    font-family: "Familjen Grotesk", "Inter", sans-serif;
    font-weight: 500;
    color: var(--kasumi);
    letter-spacing: 0.06em;
    font-size: 0.9rem;
    text-transform: uppercase;
    padding-top: 0.25em;
}

.colophon__list dd {
    margin: 0;
    color: var(--kinu);
}

.colophon__list dd em {
    font-style: italic;
    color: var(--shirakuni);
}

.dipper {
    font-family: "Familjen Grotesk", "Courier New", ui-monospace, monospace;
    font-weight: 400;
    color: var(--shirakuni);
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    line-height: 1.05;
    margin: clamp(2.4rem, 5vh, 4rem) 0 clamp(1.6rem, 3vh, 2.4rem) 0;
    letter-spacing: 0.05em;
    white-space: pre;
    opacity: 0.92;
    transform: translateZ(18px);
}

.colophon__close {
    font-family: "Inria Serif", Georgia, serif;
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    line-height: 1.7;
    color: var(--kinu);
    margin: 0;
    max-width: 56ch;
}

.colophon__close em {
    font-style: italic;
    color: var(--shirakuni);
}

/* ---------- Stone visual treatments ---------- */

/* A hairline edge between adjacent stones — half a pixel of kasumi, so the
   stones look "set" against each other rather than bleeding. */
.stone + .stone {
    box-shadow: 0 -0.5px 0 0 rgba(168, 159, 142, 0.18);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .stone__tilt {
        transform: none !important;
        transition: none !important;
    }
    .stone__leaf-shadow {
        animation: none !important;
    }
    .leaf-field__leaf {
        animation: none !important;
    }
    .wordmark,
    .almanac__date,
    .stone__heading,
    .dipper {
        transform: none !important;
    }
}

/* ---------- Narrow viewports ---------- */
@media (max-width: 720px) {
    .stone {
        min-height: 100svh;
    }
    .stone__tilt {
        padding: clamp(2rem, 6vh, 4rem) clamp(1.2rem, 5vw, 2.4rem);
        transform:
            rotateY(calc(-3deg + var(--mx) * 2deg))
            rotateX(calc(2deg + var(--my) * -1.6deg));
    }
    .wordmark {
        font-size: clamp(3rem, 16vw, 5.6rem);
    }
    .stone__inner--prose {
        max-width: 38ch;
    }
    .colophon__list {
        grid-template-columns: 1fr;
        row-gap: 0.2rem;
    }
    .colophon__list dt {
        margin-top: 0.8rem;
    }
    .almanac__times {
        font-size: clamp(1.4rem, 6vw, 2rem);
    }
    .almanac__date {
        font-size: clamp(2rem, 9vw, 3.4rem);
    }
}

/* ---------- Very-wide viewports ---------- */
@media (min-width: 1800px) {
    .stone__inner--prose {
        max-width: 60ch;
    }
    .wordmark {
        font-size: 12rem;
    }
}