/* Untapped site. Tokens from projects/untapped/DESIGN.md ("The Pocket Memo Book"):
   day = chipboard ground + carbon ink, night = indigo ground + silver ink, Blaze as a fill only,
   Blaze Ink for thin/small marks. 1 px rules instead of cards; Jost for labels and display,
   system sans for body text. */

@font-face {
    font-family: "Jost";
    src: url("/untapped/fonts/jost-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light dark;
    --ground: #E4E1DA;
    --light: #ECEAE4;
    --raised: #D9D5CD;
    --ink: #1C1D1F;
    --ink-soft: #4A4B4F;
    --rule: #6B6C70;
    --blaze: #FF5B1F;
    --on-blaze: #1C1D1F;
    --blaze-ink: #A13710;
    --display: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ground: #141A2E;
        --light: #0F1426;
        --raised: #1B2238;
        --ink: #D6D9E0;
        --ink-soft: #A3A8B6;
        --rule: #828899;
        --on-blaze: #141A2E;
        --blaze-ink: #FF6A33;
    }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font: 400 1rem/1.5 var(--body);
    overflow-wrap: anywhere;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--blaze-ink); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blaze-ink); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--display); color: var(--ink); margin: 0 0 0.75rem; }
h1 { font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 700; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; }
h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.25; letter-spacing: 0.01em; }
h3 { font-size: 1rem; font-weight: 700; line-height: 1.4; }
p { margin: 0 0 1rem; }

.caps { font-family: var(--display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; }

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

.skip-link {
    position: absolute; left: 1rem; top: -4rem; z-index: 10;
    background: var(--blaze); color: var(--on-blaze);
    padding: 0.75rem 1rem; border-radius: 4px; font-family: var(--display); font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.wrap { width: min(72rem, 100% - 2rem); margin-inline: auto; }
.narrow { width: min(44rem, 100% - 2rem); }

/* Header */
.topbar { border-bottom: 1px solid var(--rule); }
.topbar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 0.5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 48px; text-decoration: none; }
.brand img { border-radius: 8px; }
.wordmark { font-family: var(--display); font-weight: 700; font-size: 1.125rem; letter-spacing: 0.12em; text-transform: uppercase; }
.site-nav ul, .footer-links, .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.site-nav ul { gap: 0 1.25rem; }
.site-nav a {
    display: inline-flex; align-items: center; min-height: 48px;
    font-family: var(--display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase;
    text-decoration: none;
}
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--blaze-ink); text-decoration-thickness: 2px; }

.crumbs { border-bottom: 1px solid var(--rule); font-size: 0.875rem; color: var(--ink-soft); }
.crumbs ol { gap: 0 0.5rem; padding-block: 0.25rem; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "›"; margin-right: 0.5rem; }
.crumbs a { color: var(--ink-soft); display: inline-flex; align-items: center; min-height: 48px; }
.crumbs [aria-current] { color: var(--ink); }

/* Hero */
.hero { padding-block: 2.5rem 1rem; }
.hero-grid { display: grid; gap: 2rem; align-items: center; }
.kicker { color: var(--ink-soft); margin-bottom: 0.75rem; }
.sub { font-size: 1.125rem; color: var(--ink); max-width: 36rem; }
.cta { display: grid; gap: 0.5rem; justify-items: start; margin-top: 1.5rem; }
.cta-note { color: var(--ink-soft); font-size: 0.875rem; margin: 0; }
.play-badge { display: inline-block; line-height: 0; }
.play-badge img { width: 188px; height: 56px; }
.hero-shot { margin: 0; justify-self: center; max-width: 22rem; }
.hero-shot figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: var(--ink-soft); }
.dark-only { display: none; }
@media (prefers-color-scheme: dark) { .dark-only { display: block; } }

/* Framed marketing shots carry a 1 px rule border (DESIGN.md: rules, not shadows). */
.phone { border: 1px solid var(--rule); border-radius: 8px; background: var(--light); }

@media (min-width: 56rem) {
    .hero-grid { grid-template-columns: 1fr 22rem; gap: 4rem; }
}

/* Sections */
.section { padding-block: 2.5rem; border-top: 1px solid var(--rule); }
.hero + .section { border-top: 0; }
.page-head { padding-block: 2.5rem 1rem; }
.lede { font-size: 1.125rem; max-width: 44rem; }
.answer { max-width: 44rem; }
.note { color: var(--ink-soft); font-size: 0.875rem; max-width: 44rem; margin-top: 1rem; }
.framed { border: 1px solid var(--rule); border-radius: 4px; padding: 1.25rem; background: var(--light); color: var(--ink); max-width: none; }

.split { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .split { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* Spec list: caps label left, value right, over a 1 px rule (the app's signature). */
.spec { margin: 0; border-top: 1px solid var(--rule); }
.spec div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding-block: 0.75rem; border-bottom: 1px solid var(--rule); }
.spec dt { font-family: var(--display); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.spec dd { margin: 0; text-align: right; }

/* Model table, stacks into ruled rows at 600 px and below */
.table-wrap { margin-top: 1.5rem; }
.models { width: 100%; border-collapse: collapse; }
.models th, .models td { text-align: left; padding: 0.75rem 0.75rem 0.75rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.models thead th { font-family: var(--display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); border-bottom-color: var(--ink); }
.models tbody th { font-weight: 600; }
@media (max-width: 600px) {
    .models thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .models tr { display: block; border-top: 1px solid var(--ink); padding-block: 0.5rem 1rem; }
    .models th, .models td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; }
    .models td { text-align: right; }
    .models td::before { content: attr(data-label); font-family: var(--display); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); text-align: left; }
}

/* Steps: the one circle motif is the mic stamp, so numbers are printed ink, not badges. */
.steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.5rem; counter-reset: step; }
.steps li { counter-increment: step; border-top: 2px solid var(--ink); padding-top: 0.75rem; }
.steps li::before { content: "0" counter(step); display: block; font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: var(--blaze-ink); margin-bottom: 0.25rem; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

.nots, .limits { list-style: none; margin: 0; padding: 0; }
.nots li { display: flex; gap: 0.75rem; padding-block: 0.75rem; border-bottom: 1px solid var(--rule); }
.nots svg { flex: none; width: 1rem; height: 1rem; margin-top: 0.25rem; stroke: var(--ink); }
.limits li { padding: 0.75rem 0 0.75rem 1.25rem; border-bottom: 1px solid var(--rule); position: relative; }
.limits li::before { content: ""; position: absolute; left: 0; top: 1.3rem; width: 0.5rem; height: 2px; background: var(--blaze-ink); }

/* Gallery */
.gallery { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
@media (min-width: 48rem) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.shot { margin: 0; }
.shot figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: var(--ink-soft); }

.qlinks { list-style: none; margin: 0 0 2rem; padding: 0; border-top: 1px solid var(--rule); }
.qlinks a { display: flex; align-items: center; min-height: 48px; padding-block: 0.5rem; border-bottom: 1px solid var(--rule); text-decoration: none; font-weight: 600; }
.qlinks a::after { content: "→"; margin-left: auto; padding-left: 1rem; color: var(--blaze-ink); }

.band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 1.5rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--raised); color: var(--ink); }
.band-h { font-family: var(--display); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; }

/* FAQ */
.faq { padding-bottom: 2.5rem; }
.qa { padding-block: 1.5rem; border-top: 1px solid var(--rule); }
.qa h2 { font-size: 1.25rem; }

/* Footer */
.footer { border-top: 1px solid var(--rule); padding-block: 2rem 3rem; color: var(--ink-soft); font-size: 0.875rem; }
.footer a { color: var(--ink); }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.footer-top p { margin: 0; color: var(--ink); font-size: 1rem; }
.footer-links { gap: 0 1.5rem; margin-block: 1rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 48px; }
.fine p { margin: 0 0 0.5rem; }