@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400&family=Instrument+Sans:wght@400;500;600&display=swap');

/* ============================================================
   Desu Studio — legal & trust pages
   ============================================================
   Built from the LANDING PAGE's design language so a visitor who
   clicks "Privacy" from desustudio.com lands somewhere that clearly
   belongs to the same product: same palette, same fonts, same
   grain, same surfaces.

   The deliberate difference is SCALE, not vocabulary. The landing
   page is being scanned and sold to, so it uses 54px display type
   and big gestures. These pages are READ — dense prose, careful
   attention, sometimes printed. So the tokens are identical while
   the type is smaller, the measure is tighter (~68 characters),
   and the line-height is looser than the landing's.

   Self-contained: no dependency on style.css or the app bundle.
   ============================================================ */

:root {
    /* Copied verbatim from the landing page so the two can never
       drift apart by accident. If a token changes there, change it
       here in the same commit. */
    --black: #080808;
    --off-black: #0d0d0d;
    --surface: #111111;
    --surface2: #161616;
    --border: rgba(255, 255, 255, 0.07);
    --border-light: rgba(255, 255, 255, 0.13);
    --text: #e8e4dc;
    --text-dim: rgba(232, 228, 220, 0.42);
    --text-mid: rgba(232, 228, 220, 0.68);
    --accent: #c8a96e;
    --teal: #4ecdc4;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--black);
    color: var(--text);
    /* Instrument Sans for prose, matching the landing's body face.
       16px rather than the landing's 15px: this is continuous
       reading, not scanning. */
    font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.72;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1;
}

/* The landing page's signature film grain. Imperceptible on its own
   at 3% but it's what stops a flat #080808 from reading as "unstyled
   black" — and carrying it here is most of why these pages feel like
   the same site. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- header: wordmark + document strip ---------- */

.site-head {
    max-width: 780px;
    margin: 0 auto;
    padding: 34px 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

/* Mono, uppercase, wide tracking — the same treatment the landing
   gives its labels and wordmark. */
.wordmark {
    font-family: 'DM Mono', ui-monospace, monospace;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.30em;
    text-decoration: none;
    color: var(--text);
    white-space: nowrap;
    transition: color 140ms ease;
}
.wordmark:hover { color: var(--accent); }

.doc-strip {
    display: flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
}

.doc-strip a {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 12px;
    padding: 6px 11px;
    border-radius: 7px;
    white-space: nowrap;
    transition: background-color 140ms ease, color 140ms ease;
}
.doc-strip a:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
}
/* Current page marked in accent — the one place the nav uses colour,
   so it reads instantly without a heavy active pill. */
.doc-strip a[aria-current="page"] {
    background: rgba(255, 255, 255, 0.05);
    color: var(--accent);
}

a:focus-visible,
.doc-strip a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------- document ---------- */

main {
    /* ~68 characters at 16px: the comfortable end of the classic
       reading measure. The landing uses 720px, but it's mixing cards
       and images; this is unbroken prose and wants to be narrower. */
    max-width: 660px;
    margin: 0 auto;
    padding: 56px 24px 32px;
}

/* Maps directly onto the landing's .section-label: DM Mono, 10px,
   0.24em tracking, uppercase, dimmed. */
.doc-eyebrow {
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 0 0 18px;
}

/* Same face as the body, not a borrowed display serif. A single
   decorative font used once for five words read as a flourish rather
   than a decision, so the headline is doing this in Instrument Sans
   with real typographic weight instead: 600, tight negative tracking,
   and a slightly compressed line-height, which is what actually
   makes a sans headline feel authored rather than just "big text".
   `em` carries the accent through colour and weight alone. Instrument
   Sans' italic was never loaded, so an italic style here would have
   rendered as a browser-faked oblique — the cheap version of emphasis
   we're avoiding entirely. */
h1 {
    font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: clamp(30px, 4.4vw, 40px);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -0.022em;
    color: var(--text);
    margin: 0 0 14px;
    text-wrap: balance; /* progressive enhancement: keeps a two-line title from breaking on one orphan word */
}
h1 em { font-style: normal; font-weight: 600; color: var(--accent); }

.doc-dates {
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 11.5px;
    letter-spacing: 0.02em;
    color: var(--text-dim);
    margin: 0 0 44px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--border);
}

/* Sans, medium weight, tight tracking. Deliberately NOT the serif:
   these recur every few paragraphs, and a display face at that
   frequency fights the prose instead of organising it. */
h2 {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--text);
    margin: 42px 0 12px;
}

p { margin: 0 0 16px; color: var(--text-mid); text-wrap: pretty; }

/* Accent links with a restrained underline. text-underline-offset
   keeps the rule off the descenders so long link runs stay legible. */
main a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(200, 169, 110, 0.4);
    transition: text-decoration-color 140ms ease;
}
main a:hover { text-decoration-color: var(--accent); }

ul { margin: 0 0 16px; padding-left: 20px; }
li { margin-bottom: 9px; color: var(--text-mid); }
li::marker { color: var(--text-dim); }
strong { color: var(--text); font-weight: 500; }

/* The promise plate — one sentence set apart as a commitment.
   The accent rule down its left edge is the only structural use of
   gold in the body, which is what makes it read as "this line is
   the point" rather than decoration. */
.plate {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 2px solid var(--accent);
    border-radius: 10px;
    padding: 18px 20px;
    margin: 26px 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--text);
}
.plate small {
    display: block;
    margin-top: 8px;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-dim);
}

/* License credit cards — the landing's surface-card treatment. */
.credit {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0 0 12px;
    transition: border-color 140ms ease;
}
.credit:hover { border-color: var(--border-light); }
.credit h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.006em;
    color: var(--text);
}
.credit .credit-meta {
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-dim);
    margin: 0 0 9px;
}
.credit p { font-size: 14px; margin: 0 0 8px; }
.credit p:last-child { margin-bottom: 0; }

/* Verbatim license text (/licenses/texts). Monospace because these are legal
   notices reproduced exactly — the fixed measure is what signals "this is a
   copy, not our prose". Wrapped rather than scrolled: a horizontal scrollbar
   would hide clauses, and this page's whole purpose is that nothing is
   hidden. Slightly dimmer than body copy so the surrounding explanation
   still leads. */
pre {
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 12px;
    line-height: 1.62;
    color: var(--text-dim);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0 0 30px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* The anchor list at the top of the texts page: an index, not prose. */
main > ul { margin-bottom: 34px; }

/* ---------- footer ---------- */

.site-foot {
    max-width: 660px;
    margin: 0 auto;
    padding: 26px 24px 64px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-dim);
}
.site-foot p { margin: 16px 0 0; color: var(--text-dim); }
.site-foot a {
    color: var(--text-dim);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(232, 228, 220, 0.18);
    transition: color 140ms ease;
}
.site-foot a:hover { color: var(--text); }

/* ---------- responsive ---------- */

@media (max-width: 620px) {
    body { font-size: 15.5px; }
    .site-head {
        justify-content: center;
        padding-top: 26px;
    }
    .doc-strip {
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
    main { padding-top: 40px; }
    .doc-dates { margin-bottom: 34px; }
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}

/* ---------- print ----------
   Legal pages get printed and filed, which is exactly when a dark
   theme becomes hostile: it wastes ink and prints grey-on-grey.
   Invert to black on white, drop the chrome, and expand link URLs
   so a paper copy is still complete and verifiable. */

@media print {
    body {
        background: #fff;
        color: #111;
        font-size: 11pt;
        line-height: 1.5;
    }
    body::after { display: none; }          /* no grain on paper */
    .site-head, .doc-strip { display: none; }

    main, .site-foot {
        max-width: none;
        padding: 0;
        margin: 0;
    }

    h1, h2, strong, .plate { color: #000; }
    p, li, .site-foot, .site-foot p { color: #222; }

    .plate, .credit {
        background: transparent;
        border: 1px solid #bbb;
        border-left: 2px solid #666;
    }
    /* Printed license texts must stay readable and complete. */
    pre {
        background: transparent;
        border: 1px solid #bbb;
        color: #333;
        font-size: 8.5pt;
        line-height: 1.4;
    }
    .plate small, .credit-meta, .doc-eyebrow, .doc-dates { color: #555; }

    main a, .site-foot a {
        color: #000;
        text-decoration: underline;
    }
    /* A printed page can't be clicked: show where links actually go. */
    main a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
        word-break: break-all;
    }

    h1, h2 { page-break-after: avoid; }
    .plate, .credit { page-break-inside: avoid; }
    /* A license text is longer than a page; let it break, but never
       immediately after its own heading. */
    pre { page-break-inside: auto; }
    /* The texts page repeats each project's URL in the body already; the
       link-expanding rule above would double it inside every notice. */
    pre a[href^="http"]::after { content: none; }
    .site-foot { border-top: 1px solid #bbb; margin-top: 24pt; }
}