/* QSync Ethical Music Foundation - qemf.org
   One page: mission statement and charter.

   ⭐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; }

.charter-note {
    color: var(--ink-3);
    font-size: .95rem;
    border-left: 2px solid var(--line);
    padding-left: 16px;
    margin-bottom: 34px;
}

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

/* ⭐NUMBERED, and the numbers are rendered rather than typed. An article somebody can cite as
   "Article 4" has to keep that number when one is inserted above it - and a hand-typed list is where
   two documents start disagreeing about which clause is which. */
ol.charter {
    list-style: none;
    counter-reset: article;
    margin: 0;
    padding: 0;
}

ol.charter > li {
    counter-increment: article;
    position: relative;
    padding: 22px 0 22px 58px;
    border-top: 1px solid var(--line);
}
ol.charter > li:last-child { border-bottom: 1px solid var(--line); }

ol.charter > li::before {
    content: counter(article);
    position: absolute;
    left: 0;
    top: 24px;
    width: 34px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--brand);
}

ol.charter h3 {
    margin: 0 0 8px;
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--ink);
}

/* ⚠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. */
@media (max-width: 520px) {
    ol.charter > li { padding-left: 0; padding-top: 20px; }

    /* ⛔⛔position: STATIC, not just repositioned. Leaving ::before absolute at left:0 while removing
       the indent stacked the NUMBER ON TOP OF ITS OWN HEADING - "1" printed over "The maker keeps what
       they earn" on a 390px screen. An absolutely positioned box takes no space, so removing the space
       that was reserved for it is what makes it collide.
       ⭐Static makes it a block that flows ABOVE the heading, which is the right shape on a narrow
       column anyway: the number reads as a label rather than a margin ornament.
       ⚠Caught by looking at the render at 390px. Nothing in the rule pair says the two overlap. */
    ol.charter > li::before {
        position: static;
        display: block;
        width: auto;
        text-align: left;
        margin-bottom: 2px;
        font-size: .82rem;
        letter-spacing: .12em;
    }
    ol.charter h3 { margin-top: 0; }
}

/* --- the closing note ------------------------------------------------------------ */

/* ⭐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. */
.coming {
    border-top: 1px solid var(--line);
    padding: clamp(40px, 7vw, 72px) 0;
    text-align: center;
}

.coming p {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.1rem, 2.6vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -.01em;
    /* ⚠"QEMF Music Store" and "coming soon" must break as two units if they break at all - splitting
       the product name across a line is what makes a heading look like an accident on a phone. */
    text-wrap: balance;
}

.coming span {
    color: var(--brand);
    white-space: nowrap;
}

/* --- 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; }
}

/* --- the Content Provider application form ---------------------------------------- */

/* ⭐Form controls inherit NOTHING useful by default - not the font, not the colour, not the sizing -
   so a dark page with default inputs gets white boxes with black text and a different typeface. Every
   one of these declarations is repairing that rather than decorating. */
.field { margin: 0 0 20px; }

.field label,
.check span { display: block; margin: 0 0 6px; color: var(--ink); font-weight: 600; font-size: .95rem; }

input[type=text], input[type=email], input:not([type]), select, textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    font-size: 1rem;
}

textarea { resize: vertical; min-height: 76px; }

/* ⚠A visible focus ring, and not the browser default which is nearly invisible on this background.
   A form somebody tabs through with no idea where they are is a form they abandon. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
    border-color: var(--brand);
}

.hint { margin: 6px 0 0; color: var(--ink-3); font-size: .85rem; line-height: 1.5; }

/* ⚠auto-fit rather than three fixed columns: city/region/postcode sit in a row on a desktop and stack
   on a phone without a second breakpoint to keep in step. */
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 16px; }

.notice {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0 0 20px;
}
.notice p { margin: 0 0 10px; font-size: .92rem; }
.notice p:last-child { margin-bottom: 0; }

/* ⭐The consent is a real target, not a 13px checkbox: it is the one control on this page that carries
   a legal meaning, and it must be obvious and hard to miss. */
.check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 24px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--brand); }
.check span { margin: 0; font-weight: 500; }

button[type=submit] {
    background: var(--brand);
    color: #fff;
    border: 0;
    border-radius: 9px;
    padding: 12px 22px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
button[type=submit]:disabled { opacity: .55; cursor: default; }

.msg { margin: 18px 0 0; padding: 14px 16px; border-radius: 9px; border-left: 3px solid; }
.msg.ok  { border-color: #14b8a6; background: #14b8a614; color: var(--ink); }
.msg.bad { border-color: #e0a05a; background: #e0a05a14; color: var(--ink); }

.eyebrow a { color: inherit; }
.coming-sub { margin: 14px 0 0 !important; font-size: 1rem !important; font-weight: 500 !important; color: var(--ink-2) !important; }