/* ---------------------------------------------------------------------------
   undertext docs — a tiny atomic design system
   ---------------------------------------------------------------------------
   the quiet skin of privacy.html, grown into tokens → atoms → molecules →
   organisms. these pages are static, hand-held, and breathe on purpose.
   nothing here touches the reader app or its CSP.
--------------------------------------------------------------------------- */

/* -- tokens ---------------------------------------------------------------- */

:root {
    color-scheme: light;

    /* palette — the same warm cream the reader lives in */
    --paper: #f6f0e4;
    --ink: #2b2620;
    --faded: #7a6f5f;
    --accent: #a9572f;
    --hairline: #e5dcc8;
    --card: #efe7d6;

    /* type — serif voice, georgia carries when the webfont is absent */
    --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --fs-small: 0.85rem;
    --fs-meta: 0.95rem;
    --fs-body: 1.02rem;
    --fs-sub: 1.15rem;
    --fs-title: 1.9rem;
    --fs-hero: 2.3rem;

    /* rhythm — everything sits on an 8px beat */
    --s1: 8px;
    --s2: 16px;
    --s3: 24px;
    --s4: 32px;
    --s5: 56px;
    --measure: 640px;
}

/* -- base ------------------------------------------------------------------ */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

main {
    max-width: var(--measure);
    margin: 0 auto;
    padding: var(--s4) 22px 80px;
}

/* -- atoms ----------------------------------------------------------------- */

/* link — accent, underlined only by intent */
a {
    color: var(--accent);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* headings — quiet scale, generous space above */
h1 {
    font-size: var(--fs-title);
    margin: 0 0 4px;
    font-weight: 600;
}
h2 {
    font-size: var(--fs-sub);
    margin: var(--s4) 0 var(--s1);
    font-weight: 600;
}
p,
li {
    font-size: var(--fs-body);
}

/* label — small caps eyebrow, the manifesto's whisper */
.label {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}

/* meta — the soft line under a title */
.meta {
    color: var(--faded);
    font-size: var(--fs-meta);
    margin-bottom: var(--s3);
}

/* hairline rule */
hr {
    border: 0;
    border-top: 1px solid var(--hairline);
    margin: var(--s4) 0;
}

/* buttons — one solid, one open-handed */
.btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: var(--fs-meta);
    line-height: 1.3;
}
.btn-ink {
    background: var(--ink);
    color: var(--paper);
}
.btn-ink:hover {
    text-decoration: none;
    opacity: 0.92;
}
.btn-line {
    border: 1px solid var(--accent);
    color: var(--accent);
}
.btn-line:hover {
    text-decoration: none;
    background: rgba(169, 87, 47, 0.06);
}

/* badge — a license held up to the light */
.badge {
    display: inline-block;
    font-size: var(--fs-small);
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--hairline);
    color: var(--faded);
}
.badge-warn {
    border-color: var(--accent);
    color: var(--accent);
}

/* -- molecules ------------------------------------------------------------- */

/* nav — the wordmark and four quiet doors */
.nav {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
    flex-wrap: wrap;
    margin-bottom: var(--s5);
}
.nav .wordmark {
    color: var(--accent);
    font-size: var(--fs-body);
}
.nav .links {
    display: flex;
    gap: var(--s2);
    flex-wrap: wrap;
}
.nav .links a {
    color: var(--faded);
    font-size: var(--fs-meta);
}
.nav .links a:hover,
.nav .links a[aria-current] {
    color: var(--accent);
}

/* faq item — a question that opens gently, no script required */
.faq {
    border-top: 1px solid var(--hairline);
    padding: var(--s1) 0;
}
.faq:last-of-type {
    border-bottom: 1px solid var(--hairline);
}
.faq summary {
    cursor: pointer;
    font-size: var(--fs-body);
    padding: var(--s1) 0;
    list-style: none;
}
.faq summary::-webkit-details-marker {
    display: none;
}
.faq summary::after {
    content: '+';
    float: right;
    color: var(--faded);
}
.faq[open] summary::after {
    content: '—';
}
.faq p {
    color: var(--ink);
    margin: var(--s1) 0 var(--s2);
}

/* source entry — name, body, link, license. legal words keep their casing. */
.src {
    border-top: 1px solid var(--hairline);
    padding: var(--s2) 0;
}
.src h2 {
    margin: 0 0 4px;
}
.src p {
    margin: 4px 0;
}
.src .ack {
    font-size: var(--fs-small);
    color: var(--faded);
    margin-top: var(--s1);
}

/* step — a numbered breath in a how-to */
.steps {
    padding-left: 1.2em;
}
.steps li {
    margin: var(--s1) 0;
}

/* -- organisms ------------------------------------------------------------- */

/* hero — the front door takes a slightly larger breath */
.hero h1 {
    font-size: var(--fs-hero);
    line-height: 1.15;
    margin: 0 0 var(--s1);
}
.hero .meta {
    margin-bottom: var(--s3);
}
.hero .doors {
    display: flex;
    gap: var(--s2);
    flex-wrap: wrap;
    margin: var(--s3) 0;
}

/* screenshot row — three quiet frames, no chrome pretending to be a phone */
.shots {
    display: flex;
    gap: var(--s2);
    margin: var(--s4) 0;
    justify-content: space-between;
}
.shots img {
    width: 31%;
    height: auto;
    border-radius: 18px;
    border: 1px solid var(--hairline);
    display: block;
}

/* footer — where every page rests */
.footer {
    margin-top: var(--s5);
    padding-top: var(--s3);
    border-top: 1px solid var(--hairline);
    color: var(--faded);
    font-size: var(--fs-meta);
}
.footer .links {
    display: flex;
    gap: var(--s2);
    flex-wrap: wrap;
    margin-bottom: var(--s1);
}
.footer .links a {
    color: var(--faded);
}
.footer .links a:hover {
    color: var(--accent);
}

/* -- small screens --------------------------------------------------------- */

@media (max-width: 520px) {
    main {
        padding-top: var(--s3);
    }
    .hero h1 {
        font-size: var(--fs-title);
    }
    .shots {
        flex-wrap: wrap;
        justify-content: center;
    }
    .shots img {
        width: 47%;
    }
    .shots img:last-child {
        width: 47%;
    }
}