/* ============================================================
   haru.systems — a Bauhaus workshop staged at the hour of dawn
   ============================================================ */

:root {
    /* palette — complementary, candle-anchored */
    --vellum: #ece7dd;
    --graphite: #1c1f26;
    --cobalt-pre-dawn: #2a3b6e;
    --iron-oxide-flame: #c4612a;
    --tallow: #e8c97a;
    --ash: #7d7a73;
    --vellum-shadow: #d6cfc1;

    /* asymmetric tripartite division */
    --measure: 38.2%;
    --plate-fr: 47%;
    --gutter: 14.8%;

    /* modular scale = sqrt(phi) ≈ 1.272 */
    --ms: 1.272;
    --s-0: 0.96rem;
    --s-1: calc(var(--s-0) * var(--ms));
    --s-2: calc(var(--s-1) * var(--ms));
    --s-3: calc(var(--s-2) * var(--ms));
    --s-4: calc(var(--s-3) * var(--ms));

    /* counter-animate properties driven by JS */
    --rotation: 0deg;
    --counter-rotation: 0deg;

    --font-display: "Oswald", "Inter Tight", sans-serif;
    --font-condensed: "Barlow Condensed", "Oswald", sans-serif;
    --font-body: "Inter Tight", "Oswald", sans-serif;
    --font-serif: "Cormorant Infant", "Inter Tight", serif;
}

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

html { scroll-behavior: smooth; }

body {
    background: var(--vellum);
    color: var(--graphite);
    font-family: var(--font-body);
    font-size: var(--s-0);
    line-height: 1.62;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

::selection { background: var(--cobalt-pre-dawn); color: var(--vellum); }

/* ---------- vertical nav rail ---------- */
.rail {
    position: fixed;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    writing-mode: vertical-rl;
}
.rail a {
    font-family: var(--font-condensed);
    font-weight: 200;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: lowercase;
    text-decoration: none;
    color: var(--ash);
    transition: color 0.5s ease, transform 0.5s ease;
}
.rail a:hover { color: var(--graphite); }
.rail a.active { color: var(--iron-oxide-flame); transform: translateX(-2px); }
.rail-flicker {
    width: 1px;
    height: 28px;
    background: linear-gradient(180deg, transparent, var(--iron-oxide-flame), transparent);
    opacity: 0.5;
    animation: rail-flick 1.4s ease-in-out infinite;
}
@keyframes rail-flick {
    0%, 100% { opacity: 0.35; transform: scaleY(0.9); }
    47% { opacity: 0.7; transform: scaleY(1.08); }
}

/* ---------- document ---------- */
.document {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 7vw 0 calc(24px + 5vw);
}

/* ---------- plate ---------- */
.plate {
    position: relative;
    display: grid;
    grid-template-columns: var(--measure) var(--plate-fr) var(--gutter);
    grid-template-rows: 1fr auto;
    gap: 0 calc(var(--s-1));
    align-items: stretch;
    min-height: 100vh;
    padding: calc(var(--s-3)) 0;
    border-bottom: 1px solid var(--vellum-shadow);
}
.plate:last-child { border-bottom: none; }

/* alternating inversion: measure on the right, gutter on the left */
.plate:nth-child(even) {
    grid-template-columns: var(--gutter) var(--plate-fr) var(--measure);
}
.plate:nth-child(even) .measure { grid-column: 3; }
.plate:nth-child(even) .primitive { grid-column: 2; }
.plate:nth-child(even) .gutter { grid-column: 1; }
.plate:nth-child(even) .measure { text-align: left; }
.plate:nth-child(even) .measure-rule { left: auto; right: 0; }

/* heights resist round numbers */
.plate[data-plate="i"] { min-height: max(100vh, 798px); }
.plate[data-plate="ii"] { min-height: max(100vh, 1015px); }
.plate[data-plate="iii"] { min-height: max(100vh, 627px); }
.plate[data-plate="iv"] { min-height: max(100vh, 798px); }

/* ---------- measurement column ---------- */
.measure {
    grid-column: 1;
    position: relative;
    padding: 0 calc(var(--s-1)) 0 calc(var(--s-2));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: calc(var(--s-1));
}
.measure-rule {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 1px;
    background: var(--graphite);
    opacity: 0.55;
}
.indices {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: calc(var(--s-0));
}
.indices li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.tick { display: inline-block; height: 0.5px; background: var(--graphite); opacity: 0.7; }
.t3 { width: 6px; }
.t5 { width: 14px; }
.t8 { width: 26px; }
.t13 { width: 42px; }
.ix {
    font-family: var(--font-condensed);
    font-weight: 200;
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--ash);
}
.measure-caption {
    writing-mode: vertical-rl;
    transform-origin: top right;
    transform: rotate(var(--counter-rotation));
    font-family: var(--font-condensed);
    font-weight: 200;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: lowercase;
    color: var(--graphite);
    max-height: 52vh;
    align-self: flex-end;
    will-change: transform;
}
.plate:nth-child(even) .measure-caption { transform-origin: top left; }

/* ---------- primitive ---------- */
.primitive {
    grid-column: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: calc(var(--s-1));
}
.plate-no {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2.4rem, 5.2vw, 4.8rem);
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: var(--graphite);
    line-height: 1;
}
.mesh-holder {
    position: relative;
    width: min(38vmin, 100%);
    aspect-ratio: 1 / 1;
}
.mesh-holder.small { width: min(26vmin, 80%); }
.mesh-holder svg {
    width: 100%;
    height: 100%;
    display: block;
    transform-origin: 50% 50%;
    transform: rotate(var(--rotation));
}
/* perimeter index marks on the primitive */
.pmark {
    position: absolute;
    background: var(--graphite);
    opacity: 0.7;
}
.pmark.pm-t, .pmark.pm-b { left: 50%; width: 0.5px; transform: translateX(-50%); }
.pmark.pm-l, .pmark.pm-r { top: 50%; height: 0.5px; transform: translateY(-50%); }
.pmark.pm-t { top: -10px; }
.pmark.pm-b { bottom: -10px; }
.pmark.pm-l { left: -10px; }
.pmark.pm-r { right: -10px; }
.pmark[data-len="3"]  { --d: 3px; }
.pmark[data-len="5"]  { --d: 5px; }
.pmark[data-len="8"]  { --d: 8px; }
.pmark[data-len="13"] { --d: 13px; }
.pmark.pm-t, .pmark.pm-b { height: var(--d); }
.pmark.pm-l, .pmark.pm-r { width: var(--d); }

.plate-caption {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 34ch;
}
.ptitle {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--s-2);
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: var(--graphite);
    border-left: 2px solid var(--iron-oxide-flame);
    padding-left: 0.7rem;
}
.psub {
    font-family: var(--font-body);
    font-size: 0.96rem;
    color: var(--graphite);
    max-width: 32ch;
}

/* ---------- gutter / margin ---------- */
.gutter {
    grid-column: 3;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}
.gutter-stamp {
    font-family: var(--font-condensed);
    font-weight: 200;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--ash);
    writing-mode: vertical-rl;
    margin-top: auto;
}
/* negative-density blocks — the heaviest objects on the page */
.negative-block {
    background: var(--vellum-shadow);
    width: 38vw;
    height: 24vh;
    position: absolute;
    pointer-events: none;
}
.nb-a { top: 14%; right: -6vw; }
.nb-b { bottom: 12%; left: -10vw; }
.plate:nth-child(even) .negative-block { right: auto; }

/* ---------- candle flame ---------- */
.flame-wrap {
    position: absolute;
    width: 16px; height: 18px;
    border-radius: 50%;
    box-shadow: 0 0 24px 6px rgba(232, 201, 122, 0.14);
    animation: glow-pulse 1.4s ease-in-out infinite;
    z-index: 10;
}
.corner-ul { top: calc(var(--s-2)); left: calc(var(--s-1)); }
.corner-ll { bottom: calc(var(--s-2)); left: calc(var(--s-1)); }
.corner-ur { top: calc(var(--s-2)); right: calc(var(--s-1)); }
.corner-lr { bottom: calc(var(--s-2)); right: calc(var(--s-1)); }
.flame {
    display: block;
    transform-origin: 50% 100%;
    will-change: transform;
    animation: flicker-y 0.714s ease-in-out infinite, flicker-x 1.428s ease-in-out infinite;
}
.flame-outer { fill: var(--iron-oxide-flame); }
.flame-inner { fill: var(--tallow); }
@keyframes flicker-y {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.04); }
}
@keyframes flicker-x {
    0%, 100% { transform: scaleX(1) translateX(0); }
    50% { transform: scaleX(1.015) translateX(0.4px); }
}
@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 22px 5px rgba(232, 201, 122, 0.12); }
    50% { box-shadow: 0 0 28px 8px rgba(232, 201, 122, 0.18); }
}

/* ---------- signature ---------- */
.signature {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: end;
    margin-top: calc(var(--s-1));
    font-family: var(--font-serif);
    font-weight: 300;
    font-style: italic;
    font-size: 0.72rem;
    color: var(--ash);
    letter-spacing: 0.01em;
}

/* ---------- wordmark ---------- */
.wordmark {
    position: fixed;
    right: 1.4rem;
    bottom: 1rem;
    z-index: 50;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 11pt;
    text-transform: lowercase;
    letter-spacing: 0.04em;
    color: var(--graphite);
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .flame, .flame-wrap, .rail-flicker { animation: none; }
    html { scroll-behavior: auto; }
}

/* ---------- narrow viewports — the layout fails honestly but stays readable ---------- */
@media (max-width: 760px) {
    .document { padding: 0 6vw 0 calc(24px + 5vw); }
    .plate, .plate:nth-child(even) {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        gap: calc(var(--s-2)) 0;
    }
    .measure, .plate:nth-child(even) .measure { grid-column: 1; }
    .primitive, .plate:nth-child(even) .primitive { grid-column: 1; }
    .gutter, .plate:nth-child(even) .gutter { grid-column: 1; align-items: flex-start; }
    .measure-caption { writing-mode: horizontal-tb; max-height: none; transform: none; }
    .plate:nth-child(even) .measure-rule { left: 0; right: auto; }
    .gutter-stamp { writing-mode: horizontal-tb; margin-top: 0; }
    .negative-block { display: none; }
    .mesh-holder { width: min(56vmin, 100%); }
}