/* Locke Werks — shared product page stylesheet.

   Every page that links this file sets its own identity in one declaration:

       <link rel="stylesheet" href="/css/product.css">
       <style>:root { --accent: #ff2d4d; }</style>

   Everything else below is the house material language: wet near-black, violet
   warmed text, hairlines that are never white, and one accent per product that
   is spent on emission rather than on fill. Accent tints are derived with
   color-mix, so a page never declares more than that single hex.

   Nothing here is page specific. Change a component and all of them change.

   The three house faces are linked from each page's head rather than imported
   here, so the browser can start fetching them without waiting to parse this
   file first. */

:root {
    --accent: #ff2d95;

    --void: #07030e;
    --surface: #0d0518;
    --raised: #150a24;
    --hairline: rgba(190, 120, 255, .13);

    --t-primary: #f7effc;
    --t-body: #d9c8e8;
    --t-secondary: #b9a3cf;
    --t-label: #a98cc4;
    --t-faint: #8a76a2;
    /* Text drawn in the page's accent is mixed toward white so it clears 4.5:1
       on the dark ground; borders, glows and icons keep the pure accent. */
    --accent-text: color-mix(in srgb, var(--accent) 70%, #fff);

    --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --label: 'Chakra Petch', 'Segoe UI', sans-serif;
    --body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
    --mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace;

    --pad-x: clamp(20px, 4vw, 56px);
    --maxw: 1080px;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--body);
    background: var(--void);
    color: var(--t-body);
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

code { font-family: var(--mono); font-size: .92em; }

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

/* ── Background layers ───────────────────────────────────────

   The same two the studio page carries, so a product page sits in the same
   room rather than on a flat panel. Both are fixed and inert; everything real
   sits above them. */

.bg-grid {
    position: fixed; inset: -10%; z-index: 0; pointer-events: none;
    background: linear-gradient(118deg, #ff2d4d 0%, #ff2d95 46%, #a020f0 100%);
    opacity: .12;
    -webkit-mask-image: linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg, #000 1px, transparent 1px);
    mask-image: linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg, #000 1px, transparent 1px);
    -webkit-mask-size: 72px 72px; mask-size: 72px 72px;
    -webkit-mask-position: 0 0; mask-position: 0 0;
}
/* The grid stays the mark's own fade on every page. The accent belongs to the
   product; the room belongs to the studio. */
@supports (animation-timeline: scroll()) {
    .bg-grid { animation: lw-grid-drift linear both; animation-timeline: scroll(root block); }
    @keyframes lw-grid-drift { to { -webkit-mask-position: 0 -288px; mask-position: 0 -288px; } }
}

.bg-dust { position: fixed; inset: 0; z-index: 0; pointer-events: none; width: 100%; height: 100%; }

.topnav, .hero, section, footer { position: relative; z-index: 1; }

/* ── Top nav ─────────────────────────────────────────────────── */

.topnav {
    position: sticky; top: 0; z-index: 40;
    padding: 14px var(--pad-x);
    background: rgba(7, 3, 14, .82);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hairline);
}
.topnav a {
    font-family: var(--label); font-size: 12px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--t-label); text-decoration: none;
    transition: color .2s ease;
}
.topnav a:hover { color: var(--t-primary); }

/* ── Hero ────────────────────────────────────────────────────── */

.hero {
    position: relative; overflow: hidden;
    padding: clamp(64px, 9vw, 112px) var(--pad-x) clamp(52px, 7vw, 84px);
    text-align: center;
}
/* The bloom belongs to the room, not to any object in it. */
.hero::before {
    content: ''; position: absolute; top: -220px; left: 50%;
    width: min(760px, 120vw); height: 460px; transform: translateX(-50%);
    background: radial-gradient(circle, var(--accent), transparent 66%);
    filter: blur(100px); opacity: .26; pointer-events: none;
}
.hero > * { position: relative; }

.hero-icon { margin-bottom: 26px; }
.hero-icon svg { width: 76px; height: 76px; color: var(--accent); filter: drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 45%, transparent)); }

.hero-wordmark {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(42px, 7vw, 76px); line-height: 1.02;
    letter-spacing: -.015em; color: var(--t-primary);
}
.hero-tagline {
    margin: 18px auto 0; max-width: 46ch;
    font-family: var(--label); font-size: clamp(13px, 1.4vw, 15px); font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent-text);
}
.hero-sub {
    margin: 24px auto 0; max-width: 62ch;
    font-size: clamp(15px, 1.5vw, 17px); line-height: 1.8;
    color: var(--t-secondary); text-wrap: pretty;
}

.hero-badges { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 30px; }
.badge {
    font-family: var(--label); font-size: 10px; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--t-label);
    border: 1px solid var(--hairline); border-radius: 2px;
    padding: 5px 11px;
}
.badge-accent { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 38%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.badge-oss    { color: #8fe3b0; border-color: rgba(143, 227, 176, .34); background: rgba(143, 227, 176, .07); }
.badge-warn   { color: #ffc93c; border-color: rgba(255, 201, 60, .34); background: rgba(255, 201, 60, .07); }
.badge-danger { color: #ff7d94; border-color: rgba(255, 45, 77, .38); background: rgba(255, 45, 77, .08); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }
.btn {
    display: inline-block; font-family: var(--label); font-size: 12px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
    border-radius: 3px; padding: 14px 28px;
    transition: border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.btn-primary {
    color: var(--t-primary);
    background: linear-gradient(color-mix(in srgb, var(--accent) 14%, #120610), #120610);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 18%, transparent);
}
.btn-primary:hover {
    color: #fff;
    border-color: color-mix(in srgb, var(--accent) 75%, transparent);
    box-shadow: 0 0 38px color-mix(in srgb, var(--accent) 34%, transparent);
    transform: translateY(-1px);
}
.btn-secondary { color: var(--t-secondary); border: 1px solid rgba(190, 120, 255, .22); }
.btn-secondary:hover { color: var(--t-primary); border-color: rgba(190, 120, 255, .5); }
.btn:active { transform: translateY(0); }

/* ── Sections ────────────────────────────────────────────────── */

section {
    padding: clamp(56px, 7vw, 92px) var(--pad-x);
    border-top: 1px solid var(--hairline);
}
section > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.alt { background: linear-gradient(rgba(13, 5, 24, .78), rgba(8, 4, 15, .78)); }

.section-label {
    font-family: var(--label); font-size: 11px; font-weight: 600;
    letter-spacing: .24em; text-transform: uppercase;
    color: var(--accent-text); margin-bottom: 16px;
}
.section-label::before { content: '// '; opacity: .65; }

.section-heading {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1;
    color: var(--t-primary); text-wrap: balance;
    margin-bottom: 28px;
}
.section-intro {
    font-size: 16px; line-height: 1.85; color: var(--t-secondary);
    max-width: 72ch; margin-bottom: 36px; text-wrap: pretty;
}

.prose { max-width: 72ch; }
.prose p { font-size: 16px; line-height: 1.85; color: var(--t-secondary); text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.prose p + p { margin-top: 18px; }
.prose a { color: var(--accent-text); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.prose a:hover { border-bottom-color: var(--accent); }

/* ── Cards ───────────────────────────────────────────────────── */

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

/* The suite's traced edge: outer stroke plus an echo 3px inside it. */
.card {
    position: relative;
    background: linear-gradient(var(--raised), rgba(10, 4, 20, .9));
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 26px 24px;
    transition: border-color .2s ease, transform .2s ease;
}
.card::before {
    content: ''; position: absolute; inset: 3px;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
    border-radius: 11px; pointer-events: none;
}
.alt .card { background: linear-gradient(rgba(21, 10, 36, .9), rgba(8, 4, 15, .9)); }
.card:hover { border-color: color-mix(in srgb, var(--accent) 34%, transparent); transform: translateY(-2px); }

.card-icon { margin-bottom: 16px; }
.card-icon svg { width: 30px; height: 30px; color: var(--accent); }

.card-name {
    font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.2;
    color: var(--t-primary); margin-bottom: 10px;
}
.card-desc { font-size: 14.5px; line-height: 1.8; color: var(--t-secondary); text-wrap: pretty; }
.card-desc code { color: var(--accent-text); }

/* ── Spec table ──────────────────────────────────────────────── */

.spec { border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; }
.spec-row { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: 20px; padding: 15px 22px; border-bottom: 1px solid var(--hairline); }
.spec-row:last-child { border-bottom: 0; }
.spec-key {
    font-family: var(--label); font-size: 11px; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--t-label);
    align-self: center;
}
.alt .spec-key { color: var(--t-label); }
.spec-val { font-size: 15px; line-height: 1.7; color: var(--t-body); }

/* ── Callout ─────────────────────────────────────────────────── */

.callout {
    border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
    border-left: 2px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, rgba(13, 5, 24, .7));
    border-radius: 3px;
    padding: 26px 28px;
    max-width: var(--maxw);
}
.alt .callout { background: color-mix(in srgb, var(--accent) 7%, rgba(8, 4, 15, .8)); }
/* Crimson at full emission is the one reserved reading in the house: act on
   this now. Nothing decorative is allowed to look like this. */
.callout.severe { border-color: rgba(255, 45, 77, .4); border-left-color: #ff2d4d; background: rgba(255, 45, 77, .07); }
.callout h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; color: var(--t-primary); margin-bottom: 12px; }
.callout.severe h3 { color: #ff8fa0; }
.callout p { font-size: 15px; line-height: 1.8; color: var(--t-secondary); }
.callout p + p { margin-top: 14px; }
.callout p:last-child { margin-bottom: 0; }
.callout ul { list-style: none; margin-top: 14px; }
.callout li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.75; color: var(--t-secondary); }
.callout li + li { margin-top: 8px; }
/* A node, not a bullet: lit, with a two stop glow. */
.callout li::before {
    content: ''; position: absolute; left: 2px; top: .72em;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 85%, transparent);
}
.callout.severe li::before { background: #ff2d4d; box-shadow: 0 0 8px rgba(255, 45, 77, .85); }
.callout a { color: var(--accent-text); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.callout a:hover { border-bottom-color: var(--accent); }

/* ── Code ────────────────────────────────────────────────────── */

.codeblock {
    background: #05030b;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 20px 22px;
    overflow-x: auto;
    max-width: var(--maxw);
}
.codeblock pre { font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--t-body); }
.codeblock pre .c { color: var(--t-faint); }

.center { text-align: center; }

/* ── Footer ──────────────────────────────────────────────────── */

footer {
    padding: 40px var(--pad-x);
    border-top: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
    background: rgba(5, 3, 11, .88);
    text-align: center;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; margin-bottom: 14px; }
.footer-links a {
    font-family: var(--label); font-size: 11px; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--t-faint); text-decoration: none;
    transition: color .2s ease;
}
.footer-links a:hover { color: var(--t-secondary); }
.copyright { font-family: var(--label); font-size: 11px; letter-spacing: .14em; color: var(--t-faint); }

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 880px) {
    .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
    .spec-row { grid-template-columns: 1fr; gap: 6px; }
    .spec-key { align-self: start; }
}

@media (max-width: 768px) {
    .hero { padding-top: clamp(48px, 10vw, 72px); }
    .hero-wordmark { font-size: clamp(36px, 11vw, 52px); }
    .hero-tagline { font-size: 12px; letter-spacing: .1em; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .section-heading { font-size: clamp(25px, 7vw, 32px); }
    section { padding-left: 20px; padding-right: 20px; }
    .callout { padding: 22px 20px; }
    .codeblock { padding: 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .card:hover, .btn-primary:hover { transform: none; }
}