/* Policy pages — Privacy, Terms, Refund & Cancellation, Fulfillment,
 * Club Rules.
 *
 * These five pages are hand-authored rather than rendered from the content
 * document: legal copy is not something the owner should be able to edit into
 * a paragraph of markup by accident. They share this stylesheet so a change to
 * the reading experience lands on all five at once. It was previously a
 * <style> block inside privacy.html; extracting it verbatim was the only way
 * to add four more pages without five copies of the same rules drifting apart.
 *
 * Everything here layers on top of css/styles.css and touches nothing the
 * homepage uses. Load order is styles.css first, then this.
 */

/* ---------- page head ---------- */
.doc-head{padding:clamp(56px,8vw,96px) 0 0}
.doc-head .back{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:.78rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);text-decoration:none;transition:color .3s}
.doc-head .back:hover{color:var(--gold-light)}
.doc-head h1{font-size:clamp(2.2rem,5vw,3.4rem);margin:26px 0 14px}
.doc-meta{font-size:.84rem;color:rgba(255,255,255,.5)}

/* ---------- body ----------
   78ch keeps a line of legal prose inside the 60–80 character band that reads
   comfortably; without it the copy would run the full 1280px wrap.

   The inline size is a min(), not the plain `max-width:78ch` this started as,
   and the block padding is set on its own axis rather than through the
   `padding` shorthand. Both exist for the same bug. These pages are
   <main class="wrap doc">, and doc.css loads after styles.css, so a `padding`
   shorthand here reset .wrap's padding-inline to zero. On a desktop that went
   unnoticed — 78ch is far narrower than the wrap, so the auto margins kept the
   column clear of the edges regardless. On a phone 78ch is wider than the
   screen, the max-width stopped binding, and every line ran flush into both
   edges of the display with the links clipping off the left.

   min() fixes it without a breakpoint and without disturbing the desktop
   layout: the column is 78ch wherever 78ch fits, and a gutter's width in from
   each edge wherever it does not. The gutter matches .wrap's own
   padding-inline, so the narrow layout lines up with the rest of the site. */
.doc{padding-block:clamp(44px,6vw,72px) clamp(84px,11vw,140px);
  padding-inline:0;max-width:min(78ch, 100% - 2 * clamp(28px,7vw,110px))}
.doc h2{font-size:clamp(1.25rem,2.4vw,1.6rem);margin:52px 0 16px;padding-top:26px;border-top:1px solid var(--line)}
.doc h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.doc h3{font-size:1.02rem;font-family:var(--sans);font-weight:700;letter-spacing:.02em;margin:26px 0 8px;color:var(--ink)}
.doc p{margin-bottom:15px;font-size:.96rem}
.doc ul{margin:0 0 15px 20px;font-size:.96rem}
/* Numbered lists carry a little more indent than bullets: the counters are
   wider than a bullet glyph and would otherwise hang outside the text column. */
.doc ol{margin:0 0 15px 22px;font-size:.96rem}
.doc li{margin-bottom:9px}
.doc a:not(.btn){color:var(--gold-light);text-decoration:underline;text-underline-offset:3px}
.doc a:not(.btn):hover{color:var(--gold)}

/* Standing aside — a cross-reference or an emphasis the reader should not skim
   past. Gold rule, same card tint the homepage uses. */
.note{border-left:2px solid var(--gold);background:var(--card);padding:16px 20px;margin:22px 0;font-size:.9rem}
.note b{color:var(--gold-light)}

/* ---------- unresolved business decisions ----------
   Where a policy question has not been answered by the owner, the page says so
   in the open rather than inventing a rule. Deliberately loud, and deliberately
   the same red as the pre-launch banner's draft mark: meant to be impossible to
   miss on the live site.

   CURRENTLY UNUSED. The owner's policy document of August 26, 2026 answered
   every open question, so all sixteen .todo blocks were deleted from the pages.
   The rules are kept because the next unanswered question will want them, and
   because the contrast working-out below is not worth deriving twice. If none
   arises, this block can go. */
.todo{border-left:2px solid #C25B4E;background:rgba(194,91,78,.08);padding:16px 20px;margin:22px 0;font-size:.9rem;color:#F0C9C2}
/* #E08A7A, not the #C25B4E of the rule and the footer's draft mark. That red
   reaches 4.4:1 on the near-black footer but only 3.1:1 against the tinted
   green these boxes sit on, and the label is 11px — too small to qualify for
   the large-text exemption, so it needs 4.5:1. Lightened to 5.1:1. The rule
   itself keeps the darker red: a border carries no text. */
.todo b{display:block;font-family:var(--sans);font-size:.68rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:#E08A7A;margin-bottom:7px}
.todo p:last-child{margin-bottom:0}
.todo ul{margin-bottom:0}
.todo li::marker{color:#E08A7A}

/* ---------- at-a-glance summary ----------
   A short "what this page says" block at the top of the longer policies, so a
   member looking for one answer does not have to read the whole document. */
.doc-summary{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(22px,3vw,30px) clamp(22px,3vw,32px);margin-bottom:12px}
.doc-summary h2{margin:0 0 14px;padding-top:0;border-top:0;font-size:1.05rem;font-family:var(--sans);
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.doc-summary ul{margin:0 0 0 20px}
.doc-summary li:last-child{margin-bottom:0}

/* ---------- cross-links between the four policies ----------
   Every policy page carries the same row, so the legal set is reachable from
   any one of them without going back to the homepage first. The current page
   renders as plain text rather than a link to itself. */
.doc-legal{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.doc-legal .here{color:var(--gold)}
@media(pointer:coarse){.doc-legal a,.doc-legal .here{display:inline-flex;align-items:center;min-height:44px}}