/* Lumiflora — The Colours of Experience
   Hybrid of the Sentient Pattern Consciousness style: SP's void, desaturated,
   is the viewing surround so the specimens carry the colour. The SP gradients
   appear only in the Sentient Pattern endorsement band. See DESIGN.md.
   The wave is centred off to the right so the gradient tagline sits on the dark end.
   The hero is the one full-colour moment: the flower and the spectrum wordmark. */

:root {
    color-scheme: dark;

    /* Surround: SP cosmic void (#0A0E27) pulled toward neutral */
    --void: #101219;
    --panel: #171a24;
    --rule: #2a2e3b;
    --ink: #e8e9ee;
    --muted: #a3a7b5;
    --faint: #80859a;

    /* Sentient Pattern signatures (endorsement band only) */
    --sp-hero: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    --sp-wave: radial-gradient(circle at 88% 30%, #6366f1 0%, #2d1b69 45%, #0a0e27 85%);

    --serif: "Young Serif", Georgia, serif;
    --round: "Quicksand", "Nunito", system-ui, sans-serif;
    --spectrum: linear-gradient(90deg, #ff9a3c 0%, #ff4fa3 22%, #a855f7 46%, #4f7dff 66%, #2dd4bf 86%, #34d399 100%);
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* 1.25 scale */
    --t-sm: 0.875rem;
    --t-base: 1.0625rem;
    --t-md: 1.3125rem;
    --t-lg: 1.6875rem;
    --t-xl: 2.625rem;

    --gutter: 24px;
    --measure: 64ch;
    --radius: 6px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--void);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--t-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 400; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
ul[role="list"], ol.events, ol.tasks { list-style: none; padding: 0; }

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
    border-radius: 2px;
}

.skip {
    position: absolute;
    left: -9999px;
    top: 8px;
    background: var(--ink);
    color: var(--void);
    padding: 8px 12px;
    z-index: 10;
}
.skip:focus { left: 8px; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

main > section,
.masthead,
.endorse-inner {
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

main > section { padding-block: 104px; }
main > section + section:not(.origin) { border-top: 1px solid var(--rule); }

/* Masthead (sits over the hero art) */

.masthead {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 32px;
    padding-block: 28px;
}

.wordmark {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.wordmark-mark {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: conic-gradient(#ff9a3c, #ff4fa3, #a855f7, #4f7dff, #2dd4bf, #34d399, #ff9a3c);
    -webkit-mask: radial-gradient(circle, transparent 10px, #000 11px);
    mask: radial-gradient(circle, transparent 10px, #000 11px);
}

.wordmark-text { display: flex; flex-direction: column; }

.wordmark-name {
    font-family: var(--round);
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.1;
}

.wordmark-tag {
    color: var(--muted);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.28em;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    font-size: var(--t-sm);
}

.nav a {
    color: var(--muted);
    text-decoration: none;
    padding-block: 4px;
}

.nav a:hover { color: var(--ink); }
.masthead { align-items: center; }

/* Hero: full-bleed flower, spectrum wordmark */

main > section.hero {
    position: relative;
    max-width: none;
    padding: 0;
    min-height: min(92vh, 920px);
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
}

.hero-art {
    position: absolute;
    top: 0;
    right: 0;
    width: 72%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 50%;
    z-index: -2;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgb(16 18 25 / 0.6) 0%, rgb(16 18 25 / 0.35) 38%, rgb(16 18 25 / 0) 55%),
        linear-gradient(180deg, rgb(16 18 25 / 0.75) 0%, rgb(16 18 25 / 0) 18%, rgb(16 18 25 / 0) 78%, var(--void) 100%);
}

.hero-inner {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    padding: 150px var(--gutter) 110px;
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid rgb(167 139 250 / 0.38);
    border-radius: 999px;
    background: rgb(99 102 241 / 0.14);
    color: #c4b5fd;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.hero-pill svg { width: 15px; height: 15px; }

.hero-title {
    font-family: var(--round);
    font-weight: 700;
    font-size: clamp(4rem, 10.5vw, 8.75rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    width: fit-content;
    background: var(--spectrum);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 28px rgb(168 85 247 / 0.35));
}

.hero-tag {
    margin: 22px 0 30px;
    font-size: clamp(0.95rem, 1.7vw, 1.3rem);
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.hero-lede {
    max-width: 36ch;
    font-size: var(--t-md);
    line-height: 1.55;
    color: #c9ccd6;
    margin-bottom: 40px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: filter 150ms ease, border-color 150ms ease;
}

.btn-primary {
    background: linear-gradient(90deg, #4f7dff 0%, #a855f7 40%, #ec4899 75%, #f59e0b 100%);
    color: #fff;
    box-shadow: 0 10px 34px rgb(168 85 247 / 0.35);
}

.btn-primary::after { content: "→"; }
.btn-primary:hover { filter: brightness(1.1); }

.btn-ghost {
    border: 1px solid rgb(196 181 253 / 0.45);
    background: rgb(16 18 25 / 0.5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.btn-ghost:hover { border-color: var(--ink); }

/* Origin: the name, the two quotes, the swatch */

.origin {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 64px;
    align-items: center;
}

.origin-title {
    font-family: var(--serif);
    font-size: var(--t-xl);
    line-height: 1.1;
    margin-bottom: 24px;
}

.hero-def {
    font-size: var(--t-md);
    line-height: 1.5;
    max-width: 32ch;
    margin-bottom: 40px;
}

.pos {
    font-family: var(--serif);
    font-style: italic;
    color: var(--muted);
}

.pair { margin-bottom: 24px; max-width: 40ch; }

.pair blockquote,
.chip blockquote,
.pullquote blockquote {
    font-family: var(--serif);
}

.pair blockquote { font-size: var(--t-md); line-height: 1.4; }

.pair figcaption,
.chip-model,
.study-meta,
.pullquote figcaption {
    color: var(--muted);
    font-size: var(--t-sm);
}

.pair figcaption { margin-top: 6px; }

.hero-swatch-wrap { min-width: 0; }

.hero-swatch {
    --a: 135deg;
    --x: 50%;
    --y: 40%;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse at var(--x) var(--y), rgb(255 255 255 / 0.30), transparent 42%),
        repeating-linear-gradient(calc(var(--a) + 90deg), rgb(255 255 255 / 0.05) 0 1px, transparent 1px 7px),
        conic-gradient(from calc(var(--a) * -0.6) at 70% 80%, transparent, rgb(24 178 196 / 0.55), transparent 40%, rgb(126 63 192 / 0.5), transparent 80%),
        conic-gradient(from var(--a) at 40% 55%, #4b2696, #1d7f63, #17a9bb, #6e38b4, #24946f, #3b6fc0, #4b2696);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}

.swatch-note {
    margin-top: 14px;
    color: var(--faint);
    font-size: var(--t-sm);
    max-width: 52ch;
}

/* Question */

main > section.question { padding-block: 88px; }

.prompt {
    font-family: var(--serif);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.2;
    max-width: 24ch;
    margin-bottom: 40px;
}

.question-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 48px;
    max-width: 960px;
    color: var(--muted);
}

/* Section heads */

.section-head { margin-bottom: 48px; }

.section-head h2 {
    font-family: var(--serif);
    font-size: var(--t-xl);
    line-height: 1.1;
    margin-bottom: 16px;
}

.section-head p {
    color: var(--muted);
    max-width: var(--measure);
}

/* Specimen chips */

.chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.chip {
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
}

.chip-swatch {
    height: 148px;
    background: var(--c);
}

.chip-escape .chip-swatch {
    background:
        repeating-linear-gradient(45deg, rgb(255 255 255 / 0.32) 0 1.5px, transparent 1.5px 9px),
        var(--c);
}

.chip-illustrated .chip-swatch {
    background:
        radial-gradient(circle at 30% 40%, rgb(150 120 255 / 0.18), transparent 60%),
        var(--c);
    outline: 1px dashed rgb(255 255 255 / 0.35);
    outline-offset: -10px;
}

.chip-body {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.chip h3 {
    font-family: var(--serif);
    font-size: var(--t-lg);
    line-height: 1.1;
}

.coords {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
    font-size: var(--t-sm);
    font-variant-numeric: tabular-nums;
    padding-block: 6px;
    border-block: 1px solid var(--rule);
}

.coords dt { color: var(--faint); }
.coords dd { margin: 0; }

.coords mark {
    background: none;
    color: inherit;
    text-decoration: underline wavy var(--muted);
    text-underline-offset: 3px;
}

.chip blockquote {
    font-size: 1rem;
    line-height: 1.45;
}

.chip-note {
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.chip-flag {
    margin-top: auto;
    color: var(--faint);
    font-size: var(--t-sm);
}

.legend {
    margin-top: 24px;
    color: var(--faint);
    font-size: var(--t-sm);
    display: flex;
    gap: 10px;
    align-items: center;
}

.legend-escape {
    flex: none;
    width: 22px;
    height: 14px;
    border-radius: 2px;
    background: repeating-linear-gradient(45deg, rgb(255 255 255 / 0.4) 0 1.5px, transparent 1.5px 6px), #3a3f50;
}

/* Substrate studies */

.studies {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
}

.study { display: flex; flex-direction: column; gap: 16px; }

.study h3 {
    font-family: var(--serif);
    font-size: var(--t-lg);
}

.study p:not(.study-meta) { max-width: var(--measure); }

.words {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    font-family: var(--serif);
    font-size: var(--t-lg);
}

.ladder {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-sm);
}

.ladder th {
    text-align: left;
    font-weight: 500;
    color: var(--faint);
    padding: 6px 12px 6px 0;
    border-bottom: 1px solid var(--rule);
}

.ladder td {
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

.ladder td:first-child { white-space: nowrap; color: var(--muted); }

.ladder td:nth-child(2) {
    font-family: var(--serif);
    font-size: var(--t-base);
    white-space: nowrap;
}

/* Ledger */

.ledger-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
}

.ledger-col h3 {
    font-family: var(--serif);
    font-size: var(--t-lg);
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 2px solid var(--ink);
}

.ledger-col-out h3 { border-bottom: 2px dashed var(--faint); }

.ledger-col li {
    padding-block: 14px;
    border-bottom: 1px solid var(--rule);
}

.ledger-col-out li { color: var(--muted); }

/* Benchmark */

.tasks {
    columns: 2;
    column-gap: 56px;
    counter-reset: task;
    margin-bottom: 64px;
}

.tasks li {
    counter-increment: task;
    break-inside: avoid;
    position: relative;
    padding: 10px 0 10px 2.25em;
    border-bottom: 1px solid var(--rule);
}

.tasks li::before {
    content: counter(task);
    position: absolute;
    left: 0;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}

.tasks strong { font-weight: 600; }

.pullquote {
    max-width: 46ch;
    margin-bottom: 40px;
}

.pullquote blockquote {
    font-size: var(--t-lg);
    line-height: 1.35;
    margin-bottom: 12px;
}

.link {
    font-weight: 500;
    text-underline-offset: 4px;
}

/* Timeline */

.events li {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 24px;
    padding-block: 14px;
    border-bottom: 1px solid var(--rule);
}

.events time {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.events p { max-width: var(--measure); }

/* Skunkworks */

.projects {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 32px 48px;
}

.projects dt {
    font-family: var(--serif);
    font-size: var(--t-md);
    margin-bottom: 6px;
}

.projects dd {
    margin: 0;
    color: var(--muted);
}

/* Sentient Pattern endorsement band */

.endorse {
    position: relative;
    background: var(--sp-wave);
    margin-top: 40px;
}

.endorse::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: var(--sp-hero);
}

.endorse-inner { padding-block: 72px 48px; }

.endorse-name {
    font-family: var(--serif);
    font-size: var(--t-xl);
    line-height: 1.1;
}

.endorse-tag {
    font-size: var(--t-md);
    margin-bottom: 36px;
    background: var(--sp-hero);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    width: fit-content;
}

.endorse-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin-bottom: 40px;
}

.endorse-links a {
    color: #f8fafc;
    text-underline-offset: 4px;
    overflow-wrap: anywhere;
}

.endorse-fine { color: rgb(203 213 225 / 0.7); font-size: var(--t-sm); }

/* Responsive */

@media (max-width: 880px) {
    .origin,
    .studies,
    .ledger-cols,
    .question-body { grid-template-columns: minmax(0, 1fr); }

    .origin { gap: 40px; }
    .hero-swatch { aspect-ratio: 4 / 3; }
    main > section.hero { min-height: 0; }
    .hero-art {
        width: 100%;
        object-position: 62% 50%;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .hero::after {
        background:
            linear-gradient(180deg, rgb(16 18 25 / 0.82) 0%, rgb(16 18 25 / 0.62) 35%, rgb(16 18 25 / 0.9) 75%, var(--void) 100%);
    }
    .tasks { columns: 1; }
}

@media (max-width: 560px) {
    :root { --gutter: 16px; }
    main > section { padding-block: 72px; }
    .masthead { flex-direction: column; align-items: flex-start; gap: 14px; }
    .hero-inner { padding-top: 170px; padding-bottom: 72px; }
    .btn { padding: 13px 22px; }
    .events li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .ladder td:nth-child(2) { white-space: normal; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}