/* ============================================================
   chika.quest — Bauhaus Coral-Reef Field Manual
   Honeyed-neutral palette · Bauhaus-primary accents
   Sans-grotesk typography · Strict 12-col grid discipline
============================================================ */

:root {
    /* Honeyed-neutrals */
    --c-parchment: #F4E4C2;
    --c-aged-honey: #E8D2A0;
    --c-honey-tan: #C9A86A;
    --c-walnut: #3F2E1A;

    /* Bauhaus primaries */
    --c-red: #D32626;
    --c-blue: #1F45C9;
    --c-yellow: #F2C015;
    --c-black: #0A0A0A;

    --type-display: 'Work Sans', system-ui, sans-serif;
    --type-body: 'Inter', system-ui, sans-serif;

    --t-fast: 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
    --t-mid: 600ms cubic-bezier(0.4, 0.0, 0.2, 1);
    --t-slow: 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

html, body {
    background: var(--c-parchment);
    color: var(--c-walnut);
    font-family: var(--type-body);
    font-weight: 400;
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    scroll-behavior: smooth;
}

/* ============================================================
   SECTION SHELL (full-bleed)
============================================================ */

.section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 0;
    display: flex;
    align-items: stretch;
    background: var(--c-parchment);
    overflow: hidden;
}

.section + .section {
    border-top: 1px solid var(--c-honey-tan);
}

.section--plate,
.section--reefmap,
.section--construction,
.section--colophon {
    padding: clamp(28px, 4vh, 64px) clamp(20px, 4vw, 80px);
}

.plate-frame,
.cover-frame {
    position: relative;
    flex: 1;
    width: 100%;
    border: 2px solid var(--c-honey-tan);
    padding: clamp(28px, 4vw, 72px) clamp(28px, 5vw, 88px);
    display: flex;
    flex-direction: column;
    background: var(--c-parchment);
}

.cover-frame {
    border-color: var(--c-walnut);
    padding: clamp(36px, 5vh, 80px) clamp(28px, 6vw, 120px);
    justify-content: space-between;
}

/* ============================================================
   ALIGNMENT CROSSES (Bauhaus pedagogy mark)
============================================================ */

.plate-corner {
    position: absolute;
    width: 18px;
    height: 18px;
    line-height: 1;
    font-family: var(--type-display);
    font-weight: 500;
    font-size: 18px;
    color: var(--c-walnut);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    user-select: none;
}

.plate-corner--tl { top: -9px; left: -9px; }
.plate-corner--tr { top: -9px; right: -9px; }
.plate-corner--bl { bottom: -9px; left: -9px; }
.plate-corner--br { bottom: -9px; right: -9px; }

.corner {
    position: absolute;
    width: 24px;
    height: 24px;
    border-color: var(--c-walnut);
    border-style: solid;
    border-width: 0;
}
.corner--tl { top: 18px; left: 18px; border-top-width: 2px; border-left-width: 2px; }
.corner--tr { top: 18px; right: 18px; border-top-width: 2px; border-right-width: 2px; }
.corner--bl { bottom: 18px; left: 18px; border-bottom-width: 2px; border-left-width: 2px; }
.corner--br { bottom: 18px; right: 18px; border-bottom-width: 2px; border-right-width: 2px; }

/* ============================================================
   COVER (Section 0)
============================================================ */

.section--cover {
    padding: clamp(28px, 4vh, 64px) clamp(20px, 4vw, 80px);
    background: var(--c-parchment);
}

.cover-header,
.cover-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.meta-label {
    font-family: var(--type-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-walnut);
}

.meta-label--right { text-align: right; }

.divider-primary {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.divider-primary span {
    display: inline-block;
    width: 24px;
    height: 8px;
}

.dp-r { background: var(--c-red); }
.dp-b { background: var(--c-blue); }
.dp-y { background: var(--c-yellow); }

.cover-title-wrap {
    display: flex;
    justify-content: center;
    margin-top: clamp(24px, 5vh, 60px);
}

.cover-title {
    font-family: var(--type-display);
    font-weight: 700;
    font-size: clamp(48px, 7vw, 120px);
    line-height: 1.05;
    letter-spacing: -0.005em;
    color: var(--c-walnut);
    text-transform: uppercase;
    display: inline-flex;
    align-items: baseline;
    gap: clamp(12px, 2vw, 28px);
    flex-wrap: nowrap;
}

.ct-word {
    display: inline-flex;
}

.ct-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.4em);
    transition: opacity 360ms ease, transform 360ms ease;
}

.ct-letter.is-in {
    opacity: 1;
    transform: translateY(0);
}

.ct-slashes {
    display: inline-block;
    color: var(--c-red);
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 360ms ease 200ms, transform 360ms ease 200ms;
}

.cover-title.is-in .ct-slashes {
    opacity: 1;
    transform: scale(1);
}

.cover-fish {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vh, 60px) 0;
}

.cover-fish-svg {
    width: min(880px, 70vw);
    height: auto;
    max-height: 44vh;
}

.cover-fish-svg .cf-body {
    fill: var(--c-yellow);
    stroke: var(--c-walnut);
    stroke-width: 2;
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
    transition: stroke-dashoffset 900ms ease, fill 700ms ease 700ms;
    fill-opacity: 0;
}
.cover-fish-svg.is-in .cf-body {
    stroke-dashoffset: 0;
    fill-opacity: 1;
}

.cover-fish-svg .cf-fin {
    fill: var(--c-blue);
    transform-origin: 620px 200px;
    transform: scaleX(0);
    transition: transform 500ms ease 600ms;
}
.cover-fish-svg.is-in .cf-fin { transform: scaleX(1); }

.cover-fish-svg .cf-tail {
    fill: var(--c-red);
    transform-origin: 680px 200px;
    transform: scaleX(0);
    transition: transform 400ms ease 800ms;
}
.cover-fish-svg.is-in .cf-tail { transform: scaleX(1); }

.cover-fish-svg .cf-lateral {
    stroke: var(--c-walnut);
    stroke-width: 2;
    stroke-dasharray: 360;
    stroke-dashoffset: 360;
    transition: stroke-dashoffset 700ms ease 900ms;
}
.cover-fish-svg.is-in .cf-lateral { stroke-dashoffset: 0; }

.cover-fish-svg .cf-stripe {
    fill: var(--c-red);
    transform-origin: 410px 147px;
    transform: scaleX(0);
    transition: transform 400ms ease 1000ms;
}
.cover-fish-svg.is-in .cf-stripe { transform: scaleX(1); }

.cover-fish-svg .cf-eye {
    fill: var(--c-black);
    transform-origin: 500px 180px;
    transform: scale(0);
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 1100ms;
}
.cover-fish-svg.is-in .cf-eye { transform: scale(1); }

.cover-fish-svg .cf-eye-highlight {
    fill: var(--c-parchment);
    opacity: 0;
    transition: opacity 220ms ease 1280ms;
}
.cover-fish-svg.is-in .cf-eye-highlight { opacity: 1; }

.cover-subtitle-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(24px, 4vh, 48px);
}

.cover-subtitle {
    font-family: var(--type-body);
    font-weight: 400;
    font-size: clamp(15px, 1.4vw, 19px);
    color: var(--c-walnut);
    letter-spacing: 0.02em;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4em;
    justify-content: center;
}

.cs-word {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 300ms ease, transform 300ms ease;
}
.cs-word.is-in {
    opacity: 1;
    transform: translateY(0);
}

.cs-word--mark {
    color: var(--c-red);
    font-weight: 600;
}

.cover-anchor {
    position: absolute;
    width: clamp(48px, 6vw, 84px);
    height: clamp(48px, 6vw, 84px);
}

.cover-anchor svg {
    width: 100%;
    height: 100%;
    display: block;
}

.cover-anchor--bl { bottom: clamp(40px, 6vh, 80px); left: clamp(40px, 5vw, 100px); }
.cover-anchor--tr { top: clamp(40px, 6vh, 80px); right: clamp(40px, 5vw, 100px); }

.anchor-tri {
    opacity: 0;
    transform: scale(0.6);
    transform-origin: center;
    transition: opacity 400ms ease 1500ms, transform 400ms ease 1500ms;
}

.anchor-tri--red { fill: var(--c-red); }
.anchor-tri--blue { fill: var(--c-blue); }

.cover-anchor.is-in .anchor-tri {
    opacity: 1;
    transform: scale(1);
}

/* ============================================================
   PLATE (Sections 1–9)
============================================================ */

.plate-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 72px);
    align-items: center;
    padding: clamp(24px, 4vh, 56px) 0;
    transition: filter 600ms cubic-bezier(0.4, 0, 0.2, 1), opacity 600ms ease;
    filter: blur(8px);
    opacity: 0.6;
}

.section--plate.is-focus .plate-grid {
    filter: blur(0);
    opacity: 1;
}

.plate-grid--rev .plate-stage { order: 2; }
.plate-grid--rev .plate-caption { order: 1; }

.plate-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-aged-honey);
    border: 2px solid var(--c-honey-tan);
    padding: clamp(20px, 4vh, 60px);
    aspect-ratio: 1 / 1;
    max-height: 70vh;
    position: relative;
}

.plate-stage::before,
.plate-stage::after {
    content: '+';
    position: absolute;
    font-family: var(--type-display);
    font-weight: 500;
    font-size: 14px;
    color: var(--c-walnut);
    line-height: 1;
}

.plate-stage::before { top: 8px; left: 8px; }
.plate-stage::after { bottom: 8px; right: 8px; }

.fish-svg {
    width: 100%;
    height: 100%;
    max-width: 540px;
    max-height: 540px;
    display: block;
}

/* Caption */
.plate-caption {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.5vh, 22px);
    color: var(--c-walnut);
}

.plate-overline {
    font-family: var(--type-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-walnut);
}

.plate-title {
    font-family: var(--type-display);
    font-weight: 700;
    font-size: clamp(28px, 3.5vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.005em;
    text-transform: lowercase;
    color: var(--c-walnut);
}

.plate-latin {
    font-family: var(--type-body);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(15px, 1.2vw, 18px);
    color: var(--c-walnut);
    margin-bottom: 8px;
}

.caption-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 2.5vw, 36px);
    border-top: 1px solid var(--c-honey-tan);
    padding-top: clamp(14px, 2vh, 24px);
}

.cap-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cap-line {
    font-family: var(--type-body);
    font-weight: 400;
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.7;
    color: var(--c-walnut);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 320ms ease, transform 320ms ease;
}

.section--plate.is-focus .cap-line {
    opacity: 1;
    transform: translateY(0);
}

.cap-key {
    font-family: var(--type-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-walnut);
    margin-right: 4px;
}

.scale-bar {
    margin-top: clamp(8px, 1.5vh, 16px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sb-cell {
    display: inline-block;
    width: 28px;
    height: 12px;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 380ms ease;
}

.section--plate.is-focus .sb-cell { transform: scaleX(1); }

.sb-cell--r { background: var(--c-red); transition-delay: 0ms; }
.sb-cell--b { background: var(--c-blue); transition-delay: 80ms; }
.sb-cell--y { background: var(--c-yellow); transition-delay: 160ms; }
.sb-cell--k { background: var(--c-black); transition-delay: 240ms; }

.sb-label {
    font-family: var(--type-display);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-walnut);
    margin-left: 6px;
    opacity: 0;
    transition: opacity 320ms ease 360ms;
}

.section--plate.is-focus .sb-label { opacity: 1; }

/* Fish SVG shapes — appear when in focus */
.fs-shape {
    opacity: 0;
    transition: opacity 480ms ease;
}

.section--plate.is-focus .fs-shape { opacity: 1; }

.fs-shape.fs-body {
    transition-delay: 60ms;
}
.fs-shape.fs-eye { transition-delay: 360ms; }
.fs-shape.fs-eye-hl { transition-delay: 420ms; }
.fs-shape.fs-lateral { transition-delay: 280ms; }

/* Hover refocus gesture */
.plate-stage {
    transition: filter 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.plate-stage.is-refocus { filter: blur(4px); }

.plate-stage .fs-eye-hl {
    transition: opacity 480ms ease 420ms, r 200ms ease;
}

.plate-stage.is-hover .fs-eye-hl {
    r: 5;
}

.plate-stage.is-hover .sb-cell { transform: scaleX(1.08); }

/* Footer of each plate */
.plate-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: clamp(12px, 1.5vh, 22px);
    border-top: 1px solid var(--c-honey-tan);
}

/* ============================================================
   REEF MAP (Section 10)
============================================================ */

.section--reefmap .plate-frame {
    background: var(--c-parchment);
}

.reef-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: clamp(16px, 2vh, 30px);
}

.reef-map {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reef-svg {
    width: 100%;
    height: auto;
    max-height: 64vh;
    background: var(--c-parchment);
    border: 2px solid var(--c-honey-tan);
    display: block;
    flex: 1;
}

.reef-duotone polygon { transition: opacity 800ms ease; }

.reef-grid line {
    stroke: var(--c-honey-tan);
    stroke-width: 1;
    stroke-dasharray: 4 6;
}

.rzl {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    fill: var(--c-walnut);
}

.reef-icon {
    cursor: pointer;
    transition: transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
    transform-box: fill-box;
}

.reef-icon.is-hover {
    /* Bauhaus-snap scale 1.2, no spring */
    /* applied via JS scale on transform attribute */
}

.reef-legend {
    display: flex;
    justify-content: flex-end;
    padding: 4px 4px 0;
}

#calloutGroup line {
    stroke: var(--c-red);
    stroke-width: 1.8;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: dash-in 320ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#calloutGroup rect {
    fill: var(--c-parchment);
    stroke: var(--c-walnut);
    stroke-width: 1.5;
}

#calloutGroup text {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    fill: var(--c-walnut);
}

@keyframes dash-in {
    to { stroke-dashoffset: 0; }
}

/* Highlighted plate (from reef map hover) */
.section--plate.is-callout > .plate-frame {
    border-color: var(--c-red);
    box-shadow: 0 0 0 2px var(--c-red);
}

/* ============================================================
   CONSTRUCTION (Section 11)
============================================================ */

.construction-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: clamp(16px, 2vh, 30px);
}

.construction-stage {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 72px);
    align-items: center;
}

.construction-svg {
    width: 100%;
    height: auto;
    max-width: 560px;
    max-height: 60vh;
    margin: 0 auto;
    display: block;
    background: var(--c-aged-honey);
    border: 2px solid var(--c-honey-tan);
    padding: 24px;
    aspect-ratio: 1/1;
}

.cn-shape {
    transition: opacity 420ms ease, transform 420ms ease;
    transform-origin: center;
}

.cn-shape.is-removed {
    opacity: 0;
    transform: scale(0.85);
}

.construction-legend {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.2vh, 16px);
}

.cl-row {
    display: grid;
    grid-template-columns: 48px 96px 1fr;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--c-honey-tan);
    color: var(--c-walnut);
    transition: background 200ms ease, padding-left 200ms ease;
}

.cl-row.is-active {
    background: var(--c-aged-honey);
    padding-left: 12px;
}

.cl-num {
    font-family: var(--type-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--c-red);
    letter-spacing: 0.12em;
}

.cl-key {
    font-family: var(--type-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.cl-desc {
    font-family: var(--type-body);
    font-weight: 400;
    font-size: clamp(14px, 1vw, 16px);
    color: var(--c-walnut);
}

/* ============================================================
   COLOPHON (Section 12)
============================================================ */

.colophon-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2vh, 24px);
    align-items: flex-start;
}

.colophon-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(14px, 2vh, 24px) clamp(24px, 4vw, 56px);
    width: 100%;
    padding: clamp(16px, 2vh, 28px) 0;
    border-top: 1px solid var(--c-honey-tan);
    border-bottom: 1px solid var(--c-honey-tan);
}

.col-item {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 16px;
    align-items: baseline;
}

.col-key {
    font-family: var(--type-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-walnut);
}

.col-val {
    font-family: var(--type-body);
    font-weight: 400;
    font-size: clamp(14px, 1vw, 16px);
    color: var(--c-walnut);
}

.colophon-fish {
    align-self: center;
    width: 240px;
}

.colophon-fish svg {
    width: 100%;
    height: auto;
    display: block;
}

.colophon-mark {
    font-family: var(--type-display);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--c-walnut);
    align-self: center;
}

/* ============================================================
   RESPONSIVE — collapse to single column under 880px
============================================================ */

@media (max-width: 880px) {
    .plate-grid,
    .construction-stage {
        grid-template-columns: 1fr;
    }
    .plate-grid--rev .plate-stage { order: 1; }
    .plate-grid--rev .plate-caption { order: 2; }

    .caption-cols { grid-template-columns: 1fr; }

    .plate-stage {
        max-height: 56vh;
        aspect-ratio: 1 / 0.9;
    }

    .colophon-grid { grid-template-columns: 1fr; }
    .col-item { grid-template-columns: 90px 1fr; }

    .cover-fish-svg { width: 90vw; max-height: 36vh; }
    .cover-anchor--bl { left: 18px; bottom: 18px; }
    .cover-anchor--tr { right: 18px; top: 18px; }
}

@media (max-width: 560px) {
    .plate-frame,
    .cover-frame {
        padding: 28px 18px;
    }
    .plate-footer,
    .cover-footer,
    .cover-header {
        flex-wrap: wrap;
        gap: 10px;
    }
}