/* ============================================================
   merryn.dev — Merryn (the public name of Mira)
   Part 1: tokens (the brand palette; ../../../brand holds the marks)
   Part 2: base
   Part 3: components
   ============================================================ */

/* ---------- 1. tokens ---------- */
:root {
    color-scheme: dark;

    /* Type (Cloud.typography 607958/6586032). Chronicle Display Semibold 600 is the wordmark,
       Roman 400 for editorial lines; Ideal Sans SSm Book 400 + Italic, Medium 500, Semibold 600 for text (the kit also carries Whitney SSm 400/500/600).
       The kit is domain-locked: it serves merryn.dev and localhost, anything else falls back. */
    --serif: "Chronicle Display A", "Chronicle Display B", Georgia, "Times New Roman", serif;
    --font: "Ideal Sans SSm A", "Ideal Sans SSm B", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Purple leads. */
    --violet-950: #150B2E;
    --violet-900: #1F1140;
    --violet-700: #4C1D95;
    --violet-600: #6D28D9;
    --violet-500: #7C3AED;
    --violet-300: #B59CFF;
    --violet-100: #E9E0FF;
    --violet-50:  #FBFAFF;

    /* Water: accents only, never a surface. */
    --tide:     #2563EB;
    --sea:      #14B8A6;
    --shallows: #34D399;

    /* Roles */
    --bg: var(--violet-950);
    --bg-deep: #0F0822;
    --ink: #F6F2FF;
    --ink-soft: var(--violet-100);
    --muted: #B9AEDC;
    --accent: var(--sea);
    --focus: var(--shallows);
    --line: rgba(255, 255, 255, .12);

    --r-tag: 4px;
    --gutter: clamp(16px, 5vw, 48px);
    --measure: 760px;
}

/* ---------- 2. base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; background: var(--bg); color: var(--ink);
    font-family: var(--font); font-weight: 400; font-size: 18px; line-height: 1.55;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    min-height: 100dvh; display: flex; flex-direction: column;
}
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
img, svg { display: block; max-width: 100%; }
.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- 3. components ---------- */
.hero {
    position: relative; overflow: hidden; isolation: isolate; flex: 1 0 auto;
    display: flex; align-items: center; text-align: center;
    padding: clamp(72px, 12vw, 144px) 0 clamp(150px, 17vw, 260px);
}
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(124, 58, 237, .28), transparent 70%);
}
.waves { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; width: 100%; height: clamp(120px, 14vw, 240px); opacity: .7; }

.lockup { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 0 28px; }
.lockup .mark { width: clamp(120px, 20vw, 196px); height: auto; }
.lockup .name {
    font-family: var(--serif); font-weight: 600; font-size: clamp(64px, 12vw, 128px); line-height: 1; letter-spacing: -.01em;
}
/* Chronicle Display Semibold sets y·n touching at display sizes; open that one pair by a hair. */
.lockup .kern-n { margin-left: .028em; }
.tag {
    display: inline-block; margin: 0 0 22px; padding: 5px 12px; border-radius: var(--r-tag);
    font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--violet-100); background: rgba(124, 58, 237, .22); border: 1px solid rgba(181, 156, 255, .35);
}
.lede { margin: 0 0 14px; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.2; letter-spacing: -.005em; }
.body { margin: 0 auto; max-width: 560px; color: var(--ink-soft); }

.foot { background: var(--bg-deep); color: var(--muted); font-size: 14px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; padding-top: 28px; padding-bottom: 28px; max-width: 1120px; }

@media (max-width: 600px) {
    body { font-size: 16px; }
}