/* One stylesheet for the list page and the How page. The look is "Sash".
   Every colour, typeface, type size, corner radius, line width and shadow is
   a token in the :root block below; the rules after it use only these tokens. */

:root {
  color-scheme: light;

  /* Colours: purple, white and green, the suffragettes' colours of 1908.
     Contrast (WCAG 2.2) in the notes. */
  --page: #ffffff;       /* page, cards, search field */
  --text: #1c1233;       /* headings, body, card edges: 17.74 on page, 14.80 on tint */
  --muted: #574d66;      /* category, "Founded by", small print, placeholder: 7.90 on page */
  --violet: #4f2a8c;     /* header, links, founders' names, counts, buttons: 10.28 on page, 8.58 on tint */
  --lilac: #d9ccf0;      /* line under the headline (6.78 on violet), quote marks */
  --tint: #eee8f7;       /* label ground */
  --green: #1e6b3c;      /* speech bubbles */
  --sash: #3fa35b;       /* the sash, the header edge, card shadows: decoration only */
  --on-colour: #ffffff;  /* text on violet (10.28) and on green (6.51), the white of the sash */

  /* Typefaces, both designed by women. Letters outside the fonts' Latin range
     (Chinese, emoji and others) fall back to the system fonts. */
  --font-text: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --font-name: "Mansalva", var(--font-text); /* founders' names */

  /* Type sizes; px at the browser's usual text size */
  --size-headline: 2rem;        /* 32 */
  --size-section: 1.4375rem;    /* 23: category headings */
  --size-card-name: 1.25rem;    /* 20: business names, How page headings */
  --size-count: 1.1875rem;      /* 19: the number beside a category */
  --size-founder: 1.6875rem;    /* 27: founders' names */
  --size-quote-mark: 3.25rem;   /* 52 */
  --size-lead: 1rem;            /* 16: line under the headline, count line */
  --size-input: 1rem;           /* 16: stops phones zooming in on the search field */
  --size-body: 0.96875rem;      /* 15.5 */
  --size-label: 0.9375rem;      /* 15: search label, card links */
  --size-small: 0.875rem;       /* 14: footer, "This is my business", "Jump to:" */
  --size-meta: 0.84375rem;      /* 13.5: category on a card, "Founded by" */
  --size-tiny: 0.8125rem;       /* 13: labels, quote credit, "Not yet confirmed" */
  --size-jump: 0.78125rem;      /* 12.5: jump links */

  /* Corners, lines and shadows */
  --radius: 0;
  --line: 2px;           /* card edges, buttons, jump links, link underlines */
  --line-thin: 1px;      /* edge of the small flag in each label */
  --line-rule: 4px;      /* rule above each category */
  --line-header: 10px;   /* green edge under the header */
  --line-focus: 3px;     /* keyboard focus ring */
  --shadow-card: 5px 5px 0 var(--sash);

  /* Spaces and sizes for the "Singapore" label and the drawings (Allan's picks,
     18 Oct 2026). The flag is the Wikimedia Commons file at 2:3. */
  --gutter: 20px;              /* page side margin */
  --top-header: 28px;          /* above the "Singapore" label */
  --flag-width: 24px;
  --flag-height: 16px;
  --gap-place: 8px;            /* flag to the word "Singapore" */
  --space-place: 26px;         /* "Singapore" label to the headline */
  --pad-place: 5px 10px 5px 5px; /* violet ground of the label in the footer */
  --gap-credit: 10px 14px;     /* footer label to the credit line */
  --width-credit: 20rem;       /* narrowest credit line beside the label */
  --space-peeps: 16px;         /* search field, or How page headline, to the drawings */
  --width-peeps: 212px;        /* four women at the foot of the header, phones */
  --width-peeps-wide: 315px;   /* 640 px and wider */
  --width-peep: 92px;          /* the woman on the nominate ribbon, phones */
  --width-peep-wide: 104px;    /* 640 px and wider, where she stands taller than the ribbon */
  --gap-peep: 12px;            /* ribbon question and button to her */
  --ribbon-bottom: 16px;       /* under the button: she stands on the ribbon's lower edge */
}

/* Self-hosted, cut down to Google Fonts' Latin range (the same unicode-range
   as the files). OFL texts beside them in fonts/. */
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Mansalva";
  src: url("fonts/mansalva-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--size-body);
  line-height: 1.5;
  /* The page script keeps the reader's place when a category opens or
     closes, so the browser should not move the page on its own. */
  overflow-anchor: none;
}

a { color: var(--violet); text-underline-offset: 2px; }
:focus-visible { outline: var(--line-focus) solid var(--text); outline-offset: 2px; }

/* Read out by screen readers, not shown. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Header: violet, crossed by the sash ---------- */

.top {
  position: relative;
  /* Clips the sash, so it can never make the page scroll sideways. */
  overflow: hidden;
  overflow: clip;
  padding: var(--top-header) 0 0;
  background: var(--violet);
  color: var(--on-colour);
  border-bottom: var(--line-header) solid var(--sash);
}
/* The sash: white over green, across the top right corner. */
.top::before {
  content: "";
  position: absolute;
  top: -29px;
  right: -125px;
  width: 340px;
  height: 72px;
  transform-origin: 50% 100%;
  transform: rotate(36deg);
  background: linear-gradient(var(--on-colour) 0 46px, var(--sash) 46px);
}
.top .wrap { position: relative; }
.top a { color: var(--on-colour); }
.top :focus-visible { outline-color: var(--on-colour); }

/* "Singapore" with the flag: a small location label above the headline, and again
   in the footer. The flag is the Wikimedia Commons file as it is: never recoloured,
   cropped, outlined, turned or put inside the drawings. */
.place {
  display: flex;
  align-items: center;
  gap: var(--gap-place);
  margin: 0 0 var(--space-place);
  font-size: var(--size-small);
  font-weight: 700;
  line-height: var(--flag-height);
}
.place img { display: block; flex: none; width: var(--flag-width); height: var(--flag-height); }

/* Four drawn women peeking over the green edge at the foot of the header, below
   the text and the search field. Decorative only. */
.peeps { display: block; width: var(--width-peeps); height: auto; margin-top: var(--space-peeps); }
@media (min-width: 640px) {
  .peeps { width: var(--width-peeps-wide); }
}

h1 {
  margin: 0;
  font-size: var(--size-headline);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.lede { margin: 10px 0 0; color: var(--lilac); font-size: var(--size-lead); font-weight: 500; }

/* Search */
.search { margin-top: 18px; }
.search label { display: block; font-size: var(--size-label); font-weight: 700; }
.search input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  /* Same colour as the field, so it shows only in high contrast mode. */
  border: var(--line) solid var(--page);
  border-radius: var(--radius);
  background: var(--page);
  color: var(--text);
  font: inherit;
  font-size: var(--size-input);
  font-weight: 500;
  -webkit-appearance: none;
  appearance: none;
}
/* The hint is a size smaller than typed text, so it fits on a phone; typed
   text stays at 16 px. The clear button shows once there is text to clear. */
.search input::placeholder { color: var(--muted); opacity: 1; font-size: var(--size-label); }
.search input:placeholder-shown::-webkit-search-cancel-button { display: none; }
@media (max-width: 380px) {
  .search input::placeholder { font-size: var(--size-small); }
}

/* Nominate: a dark green ribbon right under the header, like a third stripe
   of the sash, so it shows on the first screen (Allan's pick, 18 Oct 2026). */
.nominate { padding: 14px 0 var(--ribbon-bottom); background: var(--green); color: var(--on-colour); }
/* A drawn woman stands at the ribbon's right end, pointing at the button. The
   question and the button keep a column clear for her. */
.nominate .wrap { position: relative; padding-right: calc(var(--gutter) + var(--width-peep) + var(--gap-peep)); }
.nominate-peep {
  position: absolute;
  right: var(--gutter);
  bottom: calc(-1 * var(--ribbon-bottom));
  width: var(--width-peep);
  height: auto;
}
/* Below 360 px there is no room for her beside the button. */
@media (max-width: 359px) {
  .nominate .wrap { padding-right: var(--gutter); }
  .nominate-peep { display: none; }
}
.nominate p { margin: 0; font-size: var(--size-label); font-weight: 700; }
.nominate-button {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  border: var(--line) solid var(--on-colour);
  border-radius: var(--radius);
  background: var(--on-colour);
  color: var(--green);
  font-size: var(--size-label);
  font-weight: 800;
  text-decoration: none;
}
.nominate-button:hover { text-decoration: underline; }
.nominate :focus-visible { outline-color: var(--on-colour); }
/* Wide screens: the question and the button on one line. */
@media (min-width: 640px) {
  .nominate .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding-right: calc(var(--gutter) + var(--width-peep-wide) + var(--gap-peep));
  }
  .nominate-button { margin-top: 0; }
  .nominate-peep { width: var(--width-peep-wide); }
}
/* From 960 px there is room beside the text: she stands just past the button, and
   the question and the button share one line again. */
@media (min-width: 960px) {
  .nominate .wrap { padding-right: var(--gutter); }
  .nominate-peep { right: calc(var(--gutter) - var(--width-peep-wide) - var(--gap-peep)); }
}

/* ---------- Count line and "Jump to" links ---------- */

.status { margin: 20px 0 0; font-size: var(--size-lead); font-weight: 800; }

.jump { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 5px; margin-top: 10px; }
.jump-label { flex-basis: 100%; font-size: var(--size-small); font-weight: 800; }
.jump a {
  padding: 3px 7px;
  border: var(--line) solid var(--violet);
  border-radius: var(--radius);
  color: var(--violet);
  font-size: var(--size-jump);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.jump a:hover { background: var(--tint); }

.empty {
  margin: 16px 0 0;
  padding: 4px 16px;
  border: var(--line) solid var(--violet);
  border-radius: var(--radius);
  background: var(--tint);
}

/* ---------- Category sections ---------- */

.category { margin-top: 32px; }
.category-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  margin: 0;
  padding-top: 12px;
  border-top: var(--line-rule) solid var(--text);
  font-size: var(--size-section);
  font-weight: 800;
  line-height: 1.15;
  scroll-margin-top: 16px;
}
.category-count { color: var(--violet); font-size: var(--size-count); }

/* ---------- Cards ---------- */

.cards { display: grid; gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }

.card {
  padding: 18px 16px;
  border: var(--line) solid var(--text);
  border-radius: var(--radius);
  background: var(--page);
  box-shadow: var(--shadow-card);
  overflow-wrap: anywhere;
}
.card h2, .card h3 { margin: 0; font-size: var(--size-card-name); font-weight: 800; line-height: 1.2; }
.card p, .card figure { margin: 8px 0 0; }
.card .cat { margin-top: 2px; color: var(--muted); font-size: var(--size-meta); font-weight: 500; }
.card .line { margin-top: 10px; }

/* "Named by 4 people", with a small flag in the three colours */
.label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px 4px 6px;
  border-radius: var(--radius);
  background: var(--tint);
  color: var(--violet);
  font-size: var(--size-tiny);
  font-weight: 700;
  line-height: 1.35;
}
.label::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  outline: var(--line-thin) solid var(--violet);
  background: linear-gradient(135deg, var(--violet) 0 36%, var(--on-colour) 36% 64%, var(--sash) 64%);
}

/* Comments as green speech bubbles, the tail pointing at the credit line */
.card .quote { margin-top: 14px; }
.quote blockquote {
  position: relative;
  margin: 0;
  padding: 13px 16px 14px 48px;
  border-radius: var(--radius);
  background: var(--green);
  color: var(--on-colour);
  font-size: var(--size-body);
  font-weight: 600;
  line-height: 1.42;
  /* Shows as an edge only in high contrast mode, where the green goes. */
  outline: var(--line) solid transparent;
}
.quote blockquote::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20px;
  width: 16px;
  height: 14px;
  background: var(--green);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.quote-mark {
  position: absolute;
  top: 3px;
  left: 11px;
  color: var(--lilac);
  font-size: var(--size-quote-mark);
  font-weight: 800;
  line-height: 1;
}
.quote figcaption { margin-top: 16px; padding-left: 42px; font-size: var(--size-tiny); font-weight: 500; }

/* "Founded by" in small type, each founder's name in Mansalva. Screen
   readers get the plain line once, from a hidden copy (see app.js). */
.card .founder { margin-top: 14px; color: var(--muted); font-size: var(--size-meta); font-weight: 600; }
.founder-shown { word-spacing: 0.3em; }
.founder-shown > span { word-spacing: normal; }
.founder-name { display: inline-block; }
.signature {
  color: var(--violet);
  font-family: var(--font-name);
  font-size: var(--size-founder);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.15;
}
.founder .visually-hidden { -webkit-user-select: none; user-select: none; }

.card .links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.links a {
  color: var(--violet);
  font-size: var(--size-label);
  font-weight: 700;
  text-decoration-thickness: var(--line);
  text-underline-offset: 3px;
}

.card .unconfirmed { margin-top: 10px; color: var(--muted); font-size: var(--size-tiny); font-weight: 500; }
.card .confirmed { margin-top: 10px; color: var(--green); font-size: var(--size-tiny); font-weight: 700; }

.claim {
  display: inline-block;
  margin-top: 10px;
  padding: 7px 12px;
  border: var(--line) solid var(--violet);
  border-radius: var(--radius);
  color: var(--violet);
  font-size: var(--size-small);
  font-weight: 700;
  text-decoration: none;
}
a.claim:hover { background: var(--tint); }

/* "+ Show all N" and "Show fewer" */
.more {
  display: block;
  width: 100%;
  margin: 20px 0 0;
  padding: 12px;
  border: var(--line) solid var(--violet);
  border-radius: var(--radius);
  background: var(--violet);
  color: var(--on-colour);
  font: inherit;
  font-size: var(--size-body);
  font-weight: 800;
  cursor: pointer;
}
.more:hover { border-color: var(--text); background: var(--text); }

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--violet);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* ---------- Footer, under the sash again ---------- */

.foot { margin-top: 40px; padding-bottom: 28px; color: var(--muted); font-size: var(--size-small); font-weight: 500; }
.foot::before {
  content: "";
  display: block;
  height: 22px;
  margin-bottom: 18px;
  background: linear-gradient(var(--violet) 0 8px, var(--on-colour) 8px 14px, var(--sash) 14px);
}
.foot p { margin: 0; }
/* The "Singapore" label on a violet ground, so the flag's white half shows,
   beside the credit line (under it on phones). */
.credit { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gap-credit); }
.credit p:last-child { flex: 1 1 var(--width-credit); }
.foot .place { padding: var(--pad-place); background: var(--violet); color: var(--on-colour); }
.foot ul { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; padding: 0; list-style: none; }
.foot a { font-weight: 700; }

/* ---------- How page ---------- */

.back { margin: 0 0 14px; font-size: var(--size-small); font-weight: 700; }
.prose h2 { margin: 32px 0 8px; font-size: var(--size-card-name); font-weight: 800; line-height: 1.2; }
.prose p, .prose ul { margin: 0 0 12px; }
.prose ul { padding-left: 20px; }
.prose li { margin: 4px 0; }
.prose li::marker { color: var(--violet); }