/* ==========================================================================
   UniCue — shared stylesheet for the site's pages (/, /notes, /about, /success)

   No build step, no framework, no JavaScript on / and /about. Edit this file
   directly on github.com if you like; Vercel redeploys in about 20 seconds.

   REBUILT 2026-09-05 from the Claude Design artboards
   (Overview.dc.html / Notes.dc.html / About.dc.html). The artboards were drawn
   with every rule inline; this file is that design translated into classes,
   because the site's Content-Security-Policy is `style-src 'self'` with no
   'unsafe-inline'. An inline style="" attribute does not render on this site.
   Same reason there are no Google Fonts links: the three families are
   self-hosted in /fonts, which `default-src 'self'` allows.

     Overview.dc.html -> /        index.html
     Notes.dc.html    -> /notes   notes.html
     About.dc.html    -> /about   about.html
     (derived)        -> /success success.html

   THE PALETTE
   Aubergine and gold. The dark sections are a plum gradient carrying white
   text; the light sections are white and a lilac tint. Gold is the one colour
   that means "this is the action" — it is the button fill and the section
   marker, and it is never used for body copy.

   THE ONE COLOUR RULE
   Gold at full strength (--gold) is a BACKGROUND and a RULE, never small text
   on a light surface: #D99A1F on white measures 2.44:1, which fails WCAG AA
   for text at any size. Where the design sets a gold label on white or lilac,
   this file uses --gold-ink instead — the same hue darkened until it clears
   AA. On the dark plum sections gold is fine as text and is used as drawn.

   CONTRAST (WCAG 2.1, computed from sRGB relative luminance, not eyeballed)
   Measured 2026-09-05. Where two figures are given, the second is the worst
   case across the light surfaces, which is always --lilac #F7F3F9.
     --ink      #2E2334 on white = 14.93 : 1  (13.61)  body text
     --head     #3B1E4E on white = 14.17 : 1  (12.92)  headings
     --body-2   #4B4155 on white =  9.60 : 1   (8.76)  card copy
     --muted    #5A506A on white =  7.53 : 1   (6.86)  secondary copy
     --meta     #6B6076 on white =  5.90 : 1   (5.38)  meta lines
     --meta-2   #766B82 on white =  5.01 : 1   (4.56)  numerals, faint meta
     --link     #4A1F5C on white = 12.79 : 1  (11.66)  links
     --gold-ink #8B6314 on white =  5.39 : 1   (4.92)  gold TEXT on light
     --gold     #D99A1F on white =  2.44 : 1   (2.23)  FILLS AND RULES ONLY
   On the gold button fill:
     --plum   #2A1636 on --gold   #D99A1F =  6.78 : 1
     --plum   #2A1636 on --gold-b #EDB846 =  9.12 : 1  (hover)
   On the plum sections (--plum #2A1636):
     #FFFFFF                     = 16.58 : 1  headings
     --on-plum     #D9D5DB       = 11.44 : 1  body copy
     --on-plum-mut #AEA6B3       =  7.03 : 1  meta
     --gold-b      #EDB846       =  9.12 : 1  the highlighted half of a heading
     --sky         #7FB2E8       =  7.73 : 1  the wordmark's strapline
   The three greys the artboards used for small text — #9A8FA5 (2.80 on lilac)
   and #7A6E85 (4.35 on lilac) — do not clear AA and are not in this file.

   CONTENTS
     1  tokens                 11  rails, page cards, lightbox
     2  reset & base           12  reviews
     3  links & focus          13  shelf — the Notes catalogue
     4  layout                 14  shelf search & filters
     5  type                   15  FAQ
     6  masthead & nav         16  request panel
     7  buttons                17  success page
     8  hero                   18  footer
     9  bands & sections       19  media queries
    10  feature cards          20  motion & print
   ========================================================================== */


/* == 1 · tokens =========================================================== */

:root {
  /* surfaces */
  --white:  #FFFFFF;
  --lilac:  #F7F3F9;   /* the recessed light band                            */
  --card:   #FCFAFD;   /* a card sitting on white                            */
  --plum:   #2A1636;   /* the dark sections                                  */
  --plum-2: #3A1F4E;
  --plum-3: #4A2A5E;
  --plum-4: #241432;   /* the masthead, and the darkest end of a cover        */
  --plum-5: #2E1B3F;

  /* text on light */
  --ink:    #2E2334;
  --head:   #3B1E4E;
  --body-2: #4B4155;
  --muted:  #5A506A;
  --meta:   #6B6076;
  --meta-2: #766B82;

  /* text on plum */
  --on-plum:     #D9D5DB;
  --on-plum-mut: #AEA6B3;

  /* interactive */
  --link:   #4A1F5C;

  /* gold. --gold is a FILL and a RULE. --gold-ink is the text version.
     See "THE ONE COLOUR RULE" at the top of this file before using either. */
  --gold:     #D99A1F;
  --gold-h:   #E8B23C;   /* button hover                                     */
  --gold-b:   #EDB846;   /* bright — on plum only                            */
  --gold-ink: #8B6314;   /* gold as TEXT on a light surface                  */
  --sky:      #7FB2E8;   /* the strapline under the wordmark, on plum only   */
  --select:   #F0DDB0;

  /* hairlines */
  --rule:   #EDE5F1;
  --rule-2: #E7DFEC;
  --rule-3: #DED2E6;
  --on-plum-rule: rgba(255,255,255,0.14);

  /* fonts, self-hosted in /fonts — see section 2. Source Sans carries every
     heading and all UI; Source Serif carries body prose; Cormorant is the
     wordmark and the UNICUE line on a document cover, nothing else. */
  --sans:  "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --display-f: "Cormorant Garamond", Georgia, serif;

  /* type scale, measured 390px -> 1600px viewport */
  --t-micro:   0.6875rem;                                        /* 11    */
  --t-meta:    0.84375rem;                                       /* 13.5  */
  --t-small:   0.90625rem;                                       /* 14.5  */
  --t-body:    clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);         /* 16→17 */
  --t-lede:    clamp(1.0625rem, 1.01rem + 0.24vw, 1.1875rem);    /* 17→19 */
  --t-h3:      clamp(1.1875rem, 1.14rem + 0.2vw, 1.375rem);      /* 19→22 */
  --t-h2:      clamp(1.625rem, 1.35rem + 1.15vw, 2.25rem);       /* 26→36 */
  --t-h1:      clamp(2rem, 1.60rem + 1.7vw, 3rem);               /* 32→48 */
  --t-display: clamp(2.125rem, 1.66rem + 1.95vw, 3.25rem);       /* 34→52 */

  /* layout */
  --maxw:   1180px;
  --pad:    clamp(1.25rem, 4vw, 1.5rem);
  --gap:    20px;
  --radius: 2px;   /* buttons, covers  */
  --radius-c: 3px; /* cards, panels    */

  --ease: cubic-bezier(.22,.7,.28,1);

  color-scheme: light;
}


/* == 2 · reset & base ===================================================== */

/* Variable fonts: one file each covers every weight the design uses, so
   Source Sans (400/600/700) and Source Serif (400/600) are one request each.
   font-display:swap means the page paints in Georgia / the system sans first
   and never blocks on a font — buyers are on campus data before a test. */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/source-sans-3-var.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/source-serif-4-var.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-400.woff2") format("woff2");
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  scroll-padding-top: 88px;   /* the sticky masthead, so #anchors clear it */
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.55;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }
::selection { background: var(--select); color: var(--plum-5); }

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--head);
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

p, ul, ol, dl, dd { margin: 0; }

/* The state machine on /success and the shelf filter both toggle the `hidden`
   attribute from JavaScript. Nothing in this file may out-specify it. */
[hidden] { display: none !important; }

.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--plum); color: var(--white);
  padding: 12px 18px; font-family: var(--sans); font-weight: 600;
  z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }


/* == 3 · links & focus ==================================================== */

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--gold-ink); }

/* Prose links keep an underline — colour alone is not an affordance. */
.prose a, .legal a, .u-link {
  text-decoration: underline;
  text-decoration-color: rgba(74,31,92,0.35);
  text-underline-offset: 2px;
}
.prose a:hover, .legal a:hover, .u-link:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 1px;
}
.on-dark :focus-visible, .masthead :focus-visible { outline-color: var(--gold-b); }


/* == 4 · layout =========================================================== */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* A section that holds a full-bleed scrolling rail: the rail must run to the
   viewport edge while the heading above it stays on the measure, so the
   wrapper drops its own side padding and the children put it back. */
.wrap--bleed { padding-left: 0; padding-right: 0; }
.wrap--bleed > *:not(.rail) { padding-left: var(--pad); padding-right: var(--pad); }

section { padding: 72px 0; }
section.hero { padding: 0; }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 48px;
  align-items: center;
}
.grid-2--top { align-items: start; }

.measure { max-width: 680px; }
.stack > * + * { margin-top: 14px; }


/* == 5 · type ============================================================= */

.display { font-size: var(--t-display); line-height: 1.08; letter-spacing: -0.02em; }
h1 { font-size: var(--t-h1); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.01em; }

.hl { color: var(--gold-b); }   /* the second half of a hero heading, on plum */

.lede {
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--body-2);
  max-width: 30em;
}

/* The small-caps label above a section heading. Gold, but --gold-ink gold:
   at 11px this is the smallest text on the page and needs the full 4.5:1. */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 12px;
}

.hint {
  font-family: var(--sans);
  font-size: var(--t-meta);
  color: var(--meta);
  margin: 14px 0 0;
}
.small {
  font-family: var(--sans);
  font-size: var(--t-meta);
  line-height: 1.6;
  color: var(--muted);
}
.prose { color: var(--body-2); }
.prose > * + * { margin-top: 1em; }

/* On the plum sections everything inverts. */
.on-dark { color: var(--on-plum); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--white); }
.on-dark .lede { color: var(--on-plum); }
.on-dark .eyebrow { color: var(--gold-b); }
.on-dark .hint, .on-dark .small { color: var(--on-plum-mut); }
.on-dark .prose { color: var(--on-plum); }


/* == 6 · masthead & nav =================================================== */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(36,20,50,0.94);
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
@supports (backdrop-filter: blur(10px)) {
  .masthead { backdrop-filter: blur(10px); }
}

.masthead-in {
  display: flex;
  align-items: center;
  gap: 16px 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand { display: flex; flex-direction: column; gap: 2px; }
.brand:hover { color: inherit; }
.brand-mark {
  font-family: var(--display-f);
  font-size: 24px;
  letter-spacing: 0.30em;
  color: var(--white);
  line-height: 1;
}
.brand-sub {
  font-family: var(--sans);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--sky);
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px 22px;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 14px;
}
.nav a { color: rgba(255,255,255,0.72); }
.nav a:hover { color: var(--white); }
.nav a[aria-current="page"] { color: var(--white); font-weight: 600; }
.nav .btn { color: var(--plum); }


/* == 7 · buttons ========================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  padding: 16px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* the primary action, everywhere */
.btn--gold { background: var(--gold); color: var(--plum); }
.btn--gold:hover { background: var(--gold-h); color: var(--plum); }

/* the primary action where gold would be a third gold thing in one view */
.btn--plum { background: var(--plum); color: var(--white); }
.btn--plum:hover { background: var(--plum-2); color: var(--white); }

/* the secondary action on a plum section */
.btn--ghost {
  color: var(--white);
  font-weight: 600;
  border-color: rgba(255,255,255,0.30);
  padding: 16px 24px;
}
.btn--ghost:hover { border-color: rgba(255,255,255,0.65); color: var(--white); }

/* the secondary action on a light section */
.btn--quiet {
  color: var(--link);
  font-weight: 600;
  border-color: var(--rule-3);
  padding: 14px 22px;
}
.btn--quiet:hover { border-color: var(--gold); color: var(--head); }

.btn--sm { font-size: 14px; padding: 9px 18px; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.btn-note {
  font-family: var(--sans);
  font-size: var(--t-meta);
  line-height: 1.6;
  color: var(--muted);
  margin-top: 22px;
}
.on-dark .btn-note { color: var(--on-plum-mut); }


/* == 8 · hero ============================================================= */

.hero {
  position: relative;
  background: linear-gradient(160deg, var(--plum) 0%, var(--plum-2) 55%, var(--plum-3) 100%);
  color: var(--on-plum);
  overflow: hidden;
}

/* The tiled page strip behind the hero, and the warm glow over it. Both are
   decoration: they carry no information and are hidden from assistive tech. */
.hero-texture {
  position: absolute;
  top: -8%;
  right: -6%;
  width: 52%;
  opacity: 0.10;
  pointer-events: none;
  mix-blend-mode: screen;
}
.hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(1100px 520px at 22% 18%, rgba(217,154,31,0.16), transparent 70%);
  pointer-events: none;
}

.hero-in {
  position: relative;
  padding-top: 88px;
  padding-bottom: 80px;
}
.hero-in--short { padding-top: 72px; padding-bottom: 60px; }

.hero-fig { margin: 0; filter: drop-shadow(0 34px 60px rgba(10,4,18,0.55)); }
.hero-fig img { display: block; width: 100%; }
.hero-fig figcaption {
  margin: 22px auto 0;
  max-width: 400px;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--on-plum-mut);
  text-align: center;
  filter: none;
}
.hero-tag {
  display: block;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gold-b);
}


/* == 9 · bands & sections ================================================= */

.band--lilac {
  background: var(--lilac);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.band--plum {
  background: linear-gradient(160deg, var(--plum-2) 0%, var(--plum) 100%);
  color: var(--on-plum);
}
.band--plum-flat {
  position: relative;
  background: var(--plum);
  color: var(--on-plum);
  overflow: hidden;
}
.band-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 420px at 80% 10%, rgba(217,154,31,0.14), transparent 68%);
  pointer-events: none;
}
.band-glow + * { position: relative; }

/* heading + hint on one line, the hint pushed right on wide screens */
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 20px;
}
.sec-head > .hint { margin-left: auto; }

/* The question a set of quotes is answering, under the heading. Without it the
   short answers read as fragments; with it they read as answers. */
.ask {
  margin-top: 12px;
  max-width: 46ch;
  font-family: var(--sans);
  font-size: var(--t-meta);
  line-height: 1.6;
  color: var(--meta);
}

/* the numbered steps under "How you get it" */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  list-style: none;
  padding: 0;
  margin-top: 40px;
}
.steps li { border-top: 1px solid var(--rule); padding-top: 18px; }
.step-n {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-ink);
  margin-bottom: 10px;
}
.steps p { color: var(--body-2); font-size: var(--t-body); line-height: 1.5; }

/* the gold-dot list */
.ticks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ticks li {
  display: flex;
  gap: 14px;
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--body-2);
}
.ticks li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 9px;
  background: var(--gold);
  border-radius: 50%;
}
.on-dark .ticks li { color: var(--on-plum); }

/* a definition list used for terms and POPIA facts */
.facts { display: flex; flex-direction: column; gap: 16px; }
.facts dt {
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--head);
}
.facts dd {
  margin-top: 4px;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--body-2);
}

/* the "what's in it" thumbnail grid beside a list */
.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.proof-grid img {
  display: block;
  width: 100%;
  border: 1px solid #E2D8E9;
  border-radius: var(--radius);
  background: var(--white);
}
.proof-grid .proof-note {
  grid-column: 1 / -1;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--meta-2);
}


/* == 10 · feature cards =================================================== */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap);
  list-style: none;
  padding: 0;
  margin-top: 44px;
}
.feature {
  padding: 32px 28px 36px;
  background: var(--lilac);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius);
}
.feature-n {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--meta-2);
  margin-bottom: 26px;
}
.feature h3 { margin-bottom: 12px; font-size: 22px; }
.feature p { font-size: var(--t-body); line-height: 1.5; color: var(--body-2); }

/* the four belief cards on /about */
.beliefs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  list-style: none;
  padding: 0;
  margin-top: 40px;
}
.beliefs li { border-top: 2px solid var(--gold); padding-top: 18px; }
.beliefs h3 { font-size: 19px; margin-bottom: 10px; }
.beliefs p { font-size: var(--t-body); line-height: 1.5; color: var(--body-2); }


/* == 11 · rails, page cards, lightbox ===================================== */

/* A horizontal, snap-scrolling row of document pages. Native overflow does the
   scrolling — no script — so this works on a page with script-src 'none'. */
.rail {
  margin-top: 36px;
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px var(--pad) 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { height: 0; display: none; }

.page-card {
  flex: none;
  width: min(100%, 660px);
  scroll-snap-align: start;
  display: block;
  background: var(--white);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-c);
  overflow: hidden;
  cursor: zoom-in;
  color: inherit;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.page-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 44px rgba(46,27,63,0.14);
  color: inherit;
}
.page-card img { display: block; width: 100%; }
.page-cap {
  padding: 16px 20px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  border-top: 1px solid var(--rule);
}
.page-cap strong { color: var(--head); }

.page-card--tint { background: var(--card); }
.rail--narrow .page-card { width: clamp(280px, 64vw, 420px); }

/* The lightbox is a :target — the card is a link to it and the scrim is a link
   back out. No JavaScript, which is what lets it live on / with
   script-src 'none'. It is hidden until its id is the fragment. */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px;
  background: rgba(24,12,34,0.92);
}
.lightbox:target { display: flex; }
.lightbox-scrim { position: absolute; inset: 0; cursor: zoom-out; }
.lightbox-fig {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-height: 100%;
}
.lightbox-fig img {
  max-width: min(980px, 100%);
  max-height: 76vh;
  width: auto;
  display: block;
  border-radius: var(--radius-c);
  box-shadow: 0 30px 70px rgba(0,0,0,0.6);
}
.lightbox-fig figcaption {
  max-width: 680px;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.80);
  text-align: center;
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  color: var(--white);
  font-family: var(--sans);
  font-size: 18px;
}
.lightbox-close:hover { border-color: var(--gold-b); color: var(--gold-b); }


/* == 12 · reviews ========================================================= */

.reviews {
  margin-top: 32px;
  display: flex;
  align-items: stretch;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px var(--pad) 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  list-style: none;
}
.reviews::-webkit-scrollbar { height: 0; display: none; }

.review {
  flex: none;
  width: clamp(240px, 74vw, 296px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-c);
}
.review .stars {
  font-size: 13px;
  line-height: 1;
  letter-spacing: 3px;
  color: var(--gold-ink);
  margin-bottom: 14px;
}
.review p { font-size: var(--t-body); line-height: 1.5; color: #3B3346; }
.review .who {
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--meta);
}
.reviews-note {
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--meta);
}


/* == 13 · shelf — the Notes catalogue ===================================== */

/* HANDS OFF THE CLASS NAMES IN THIS SECTION AND THE NEXT.
   notes.js builds these nodes itself when /api/catalogue answers, so every
   selector here is a contract with that file: .shelf/#shelf, .item, .cover,
   .cover-mark, .cover-sub, .cover-code, .cover-assess, .cover-kicker,
   .item-body, .item-kicker, .item-name, .item-desc, .item-buy, .item-price,
   .cur, .item-note, .shelf-search, .shelf-filters, .chip, .shelf-count,
   .shelf-empty. Rename one here and you must rename it in notes.js in the
   same commit, or the live shelf loses its styling. */

.shelf {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  align-items: start;
  list-style: none;
  padding: 0;
}

.item {
  display: grid;
  grid-template-columns: minmax(96px, clamp(96px, 26%, 150px)) 1fr;
  gap: 20px;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-c);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s ease;
}
.item:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 50px rgba(46,27,63,0.13);
  border-color: #DCCDE6;
}

/* The generated document cover. notes.js builds this from the SKU alone, so a
   new product on the Sheet needs no image file. */
.cover {
  aspect-ratio: 0.72;
  padding: 16px 14px;
  background: linear-gradient(165deg, var(--plum-5) 0%, var(--plum-4) 100%);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 26px rgba(36,20,50,0.28);
}
.cover-mark {
  font-family: var(--display-f);
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--white);
  line-height: 1;
}
/* notes.js emits the strapline; the redesigned cover does not show it. Left in
   the DOM rather than removed from the script, so the two files stay in step. */
.cover-sub { display: none; }
.cover-code {
  margin-top: auto;
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--white);
}
.cover-assess {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gold-b);
}
.cover-kicker {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px solid var(--gold);
  max-width: 40px;
  font-size: 0;          /* the rule is the design; the words stay for the DOM */
  line-height: 0;
}

.item-body { display: flex; flex-direction: column; }
.item-kicker {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--meta-2);
  margin-bottom: 8px;
}
.item-name { font-size: 21px; line-height: 1.2; margin-bottom: 8px; }
.item-desc {
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--body-2);
  margin-bottom: 14px;
}
.item-buy {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.item-price {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 700;
  color: var(--head);
}
.item-price .cur { font-size: 14px; font-weight: 600; color: var(--meta-2); }
.item-buy .btn { font-size: 14.5px; padding: 12px 20px; }
.item-note {
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--meta);
}


/* == 14 · shelf search & filters ========================================== */

.shelf-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}

.shelf-search { position: relative; flex: 1 1 280px; max-width: 400px; }
.shelf-search input {
  width: 100%;
  padding: 14px 16px 14px 44px;
  font-family: var(--sans);
  font-size: 16px;          /* 16px or iOS zooms the page on focus */
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule-3);
  border-radius: var(--radius);
}
.shelf-search input:focus {
  border-color: var(--link);
  background: var(--white);
}
.shelf-search svg {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--meta-2);
  pointer-events: none;
}

.shelf-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--sans);
  font-size: var(--t-meta);
  font-weight: 600;
  padding: 9px 15px;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--body-2);
  border: 1px solid var(--rule-3);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.chip:hover { border-color: var(--gold); }
.chip[aria-pressed="true"] {
  background: var(--plum);
  color: var(--white);
  border-color: var(--plum);
}

.shelf-count {
  margin-left: auto;
  font-family: var(--sans);
  font-size: var(--t-meta);
  color: var(--meta);
}

.shelf-empty {
  margin-top: 32px;
  padding: 40px 32px;
  background: var(--lilac);
  border: 1px solid var(--rule);
  border-radius: var(--radius-c);
  text-align: center;
}
.shelf-empty h3 { margin-bottom: 20px; font-size: 22px; }


/* == 15 · FAQ ============================================================= */

/* <details>/<summary>, so the accordion needs no script. */
.faq { border-top: 1px solid var(--rule); margin-top: 30px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 4px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--head);
  list-style: none;
  transition: color .25s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--link); }
.faq summary span { flex: 1; }
.faq summary::after {
  content: "+";
  flex: none;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 400;
  color: var(--gold-ink);
  border: 1px solid var(--rule-3);
  border-radius: 50%;
  transition: transform .35s var(--ease), border-color .3s ease;
}
.faq details[open] summary::after {
  transform: rotate(135deg);
  border-color: var(--gold);
}
.faq details > p {
  padding: 0 4px 22px;
  max-width: 660px;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--body-2);
}


/* == 16 · request panel =================================================== */

.panel {
  padding: 28px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--on-plum-rule);
  border-radius: var(--radius-c);
}
.panel h3 { font-size: 16px; margin-bottom: 14px; color: var(--white); }
.panel ol { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.panel li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--on-plum);
}
.panel li::before {
  content: counter(list-item, decimal-leading-zero);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-b);
}


/* == 17 · success page ==================================================== */

/* /success is where Paystack returns a buyer. success.js shows exactly one of
   these states by toggling the `hidden` attribute — see the note in section 2
   about not out-specifying it. */
.receipt {
  max-width: 620px;
  margin: 0 auto;
  padding: 36px 32px 40px;
  background: var(--white);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-c);
  box-shadow: 0 26px 50px rgba(46,27,63,0.10);
}
.receipt h1 { font-size: clamp(1.625rem, 1.4rem + 0.9vw, 2.125rem); margin-bottom: 14px; }
.receipt .lede { max-width: none; }
.receipt .actions { margin-top: 26px; }

.refbox {
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--lilac);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: var(--t-meta);
  color: var(--muted);
}
.refbox b { color: var(--head); }
.ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
  color: var(--head);
  word-break: break-all;
}

.spinner {
  width: 26px;
  height: 26px;
  margin-bottom: 18px;
  border: 2px solid var(--rule-3);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* == 18 · footer ========================================================== */

.foot {
  background: var(--white);
  border-top: 1px solid var(--rule);
}
.foot-in {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 32px;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 40px;
  padding-bottom: 28px;
}
.foot-line {
  margin: 0;
  max-width: 600px;
  font-family: var(--sans);
  font-size: var(--t-meta);
  line-height: 1.6;
  color: var(--muted);
}
.foot-line strong { color: var(--head); }
.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-family: var(--sans);
  font-size: var(--t-meta);
}

/* EDIT: LEGAL — the ECTA §43 disclosure. It is a legal requirement for a South
   African online seller, not decoration. Do not delete it. */
.legal {
  padding-top: 24px;
  padding-bottom: 56px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--meta);
}
.legal p + p, .legal ul + p { margin-top: 10px; }
.legal b { color: var(--body-2); }
.legal .contact {
  list-style: none;
  padding: 0;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}


/* == 19 · media queries =================================================== */

@media (max-width: 47.99rem) {
  section { padding: 56px 0; }
  .hero-in { padding-top: 60px; padding-bottom: 56px; }
  .grid-2 { gap: 36px; }
  .hero-texture { width: 78%; opacity: 0.07; }

  /* The masthead's third item is the CTA; on a narrow screen the wordmark and
     the links need the full width, so it wraps under them rather than
     squeezing the nav into two characters. */
  .masthead-in { flex-wrap: wrap; }
  .nav { width: 100%; margin-left: 0; justify-content: space-between; }

  /* The cover would be a stamp at this width — the card goes one column. */
  .item { grid-template-columns: 1fr; gap: 16px; }
  .cover { aspect-ratio: auto; max-width: 150px; min-height: 190px; }

  .shelf-count { margin-left: 0; }
}

@media (min-width: 64rem) {
  .hero-in { padding-top: 96px; padding-bottom: 88px; }
}


/* == 20 · motion & print ================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .item:hover, .page-card:hover { transform: none; }
}

@media print {
  .masthead, .rail, .reviews, .lightbox, .actions, .shelf-tools { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}