/* QEMF Music Store - qemfmusic.store
   One page: a holding page until the store opens.
   ⭐Deliberately the SAME stylesheet as qemf.org. The store is the Foundation's, and a visitor moving
   between the two should see one hand at work rather than two unrelated sites.

   ⭐It shares QSYNC's dark palette on purpose - the Foundation and the products come from the same
   place and a visitor moving between them should feel that - but it is deliberately QUIETER. No
   gradients, no product chrome, no buy button. A charter page that looks like a sales page reads as
   marketing, which is the exact impression this document exists to avoid. */

:root {
    --ink:        #e8eaf2;
    --ink-2:      #b9bed0;
    --ink-3:      #8e95ab;
    --page:       #06070d;
    --panel:      #10131f;
    --line:       #232840;
    --brand:      #6d7cff;

    /* ⛔⛔THE SIDE GUTTER SCALES, AND THE READING WIDTH DOES NOT. Learned the hard way on qsync.info
       the same week: a FLAT 20px gutter gave a 360px phone and a 1024px iPad the same margin, and the
       owner's verdict on the tablet was "no side margins destroys the page appeal... horrible".
       ⭐Two tokens, not one. max-width includes padding under border-box, so a growing gutter inside a
       fixed max-width silently narrows the desktop measure. The calc adds it back, so the line length
       is constant and only the margin moves. */
    --gutter:      clamp(20px, 5vw, 56px);
    --content-max: 720px;   /* a READING measure - this page is prose, not a dashboard */
}

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

html { color-scheme: dark; }

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.wrap {
    max-width: calc(var(--content-max) + 2 * var(--gutter));
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* --- masthead ------------------------------------------------------------------ */

.masthead {
    border-bottom: 1px solid var(--line);
    padding: clamp(48px, 9vw, 104px) 0 clamp(36px, 6vw, 64px);
}

/* ⛔A WIDER MASTHEAD MEASURE WAS TRIED HERE AND REVERTED. It did put the title on one line, and it
   also pushed it 110px LEFT of every heading below it - measured at 1100px, 80 vs 190. On a page whose
   whole credibility is looking considered, a masthead that does not line up with its own body reads as
   a mistake, and that costs more than a slightly smaller title. The size is capped instead, below. */

.eyebrow {
    margin: 0 0 18px;
    font-size: .82rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brand);
}

.masthead h1 {
    margin: 0;
    /* ⭐THE UPPER BOUND IS SET BY THE LINE, NOT BY TASTE. "QSync Ethical Music Foundation" is 30
       characters, and 2.7rem is the largest size at which it still fits the 720px reading measure on
       one line - which is what the owner asked for on 2026-09-01: "make the top section sentences
       without line feeds". Raise it and the title wraps again; the number is load-bearing.
       ⚠It still wraps below about 900px, and that is honest rather than forced: at 390px no size that
       is readable fits thirty characters on one line, so it breaks where the viewport makes it break
       instead of where a <br> used to. */
    font-size: clamp(2.1rem, 6vw, 2.7rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.02em;
}

.standfirst {
    margin: 22px 0 0;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    color: var(--ink-2);
    /* ⛔NO max-width HERE. A 34ch cap wrapped this one sentence onto two lines on every screen,
       which is a LINE FEED the reader did not ask for - owner, 2026-09-01: "make the top section
       sentences without line feeds". It now breaks only when the viewport actually makes it break. */
}

/* --- blocks --------------------------------------------------------------------- */

/* ⛔⛔LONGHANDS, NOT `padding: X 0`. Every section carries BOTH .wrap and .block, and the shorthand
   sets all four sides - so it silently reset .wrap's padding-left/right to zero and the side gutter
   vanished on every section while .wrap still reported 38px. MEASURED before the fix: text sitting at
   x=0 on a 768px viewport, hard against the glass, which is the exact defect qsync.info was fixed for
   the same week. ⚠A shorthand quietly overwriting a longhand set elsewhere is invisible in both rules;
   only rendering it shows the damage. */
.block { padding-top: clamp(40px, 7vw, 72px); padding-bottom: clamp(40px, 7vw, 72px); }
.block + .block { border-top: 1px solid var(--line); }

h2 {
    margin: 0 0 20px;
    font-size: clamp(1.35rem, 3vw, 1.7rem);
    font-weight: 750;
    letter-spacing: -.01em;
}

p { margin: 0 0 18px; color: var(--ink-2); }
p:last-child { margin-bottom: 0; }

.lead { color: var(--ink); font-size: 1.12rem; }


/* --- the charter ---------------------------------------------------------------- */





/* ⚠On a narrow phone a 58px indent costs a fifth of the line. Below 520px the number sits ABOVE the
   article rather than beside it, which keeps the reading measure and keeps the numbering visible. */


/* ⭐It ends the page on the thing the charter is FOR, which a list of constraints does not do by
   itself. ⚠Quiet on purpose: a charter page that finishes with a marketing flourish reads as a pitch
   dressed up as principles, which is the impression the whole document exists to avoid. So it is one
   line, centred, with only the second half in the brand colour. */



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

footer {
    border-top: 1px solid var(--line);
    padding: 30px 0 60px;
}
footer p { margin: 0; color: var(--ink-3); font-size: .9rem; }

/* ⭐Respect a reduced-motion preference even though nothing animates today - the declaration costs
   nothing now and stops the next person adding a transition without thinking about it. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}