/* Shared styling for the generated reference pages.
   Palette and type lifted from index.html so these read as part of the site
   rather than as a bolted-on blog. Kept in ONE external file (unlike the
   landing page's inline CSS) because there are several of these pages and a
   reader who follows the cross-links should pay for it once. */

:root {
  --bg:#FDFBF4; --surface:#F3E7E0; --surface2:#FBF4EC; --ink:#453A41; --muted:#6B5C60;
  --plum:#5E4550; --mauve:#C9A2AE; --rose-deep:#815668; --sage:#4C6B3F; --forest:#33503C;
  --mint:#D5E0CF; --track:#E5DFCF; --accent:#5E4550; --accent-ink:#FDFBF4;
  --line:rgba(94,69,80,.14); --card:#FFFFFF;
  --shadow:0 18px 40px -24px rgba(69,58,65,.45);
}
@media (prefers-color-scheme:dark) {
  :root {
    --bg:#221A1F; --surface:#2C232C; --surface2:#31262F; --ink:#F3E9E4; --muted:#C4B2B2;
    --plum:#E9D9DF; --mauve:#C9A2AE; --rose-deep:#C98CA1; --sage:#9CB78C; --forest:#B7CBA9;
    --mint:#2E3B2E; --track:#3A3038; --accent:#E9D9DF; --accent-ink:#221A1F;
    --line:rgba(233,217,223,.16); --card:#2A212A;
  }
}

*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px; margin:0 auto; padding:0 1.2rem;}

/* Header ------------------------------------------------------------------ */
header{padding:1.6rem 0 0;}
.brand{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;}
.brand img{display:block; height:34px; width:auto;}
.brand span{
  font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:600;
  font-size:1.3rem; color:var(--plum);
}
/* Site menu — reference, blog, and 404 pages all carry it so a visitor who
   lands from a search can reach anywhere on the site. Colors ride the same
   variables as everything else, so dark mode needs nothing extra. */
.site-nav{display:flex; flex-wrap:wrap; align-items:center; gap:.1rem .2rem; margin:.9rem 0 0; font-size:.92rem;}
.site-nav a{color:var(--muted); text-decoration:none; padding:.3rem .6rem; border-radius:999px; white-space:nowrap;}
.site-nav a:hover{background:var(--surface); color:var(--plum);}
.site-nav .nav-join{background:var(--accent); color:var(--accent-ink); font-weight:600; margin-left:auto;}
.site-nav .nav-join:hover{background:var(--rose-deep); color:var(--accent-ink);}

/* Type -------------------------------------------------------------------- */
h1{
  font-family:'Fraunces',Georgia,serif; font-weight:600; line-height:1.12;
  font-size:clamp(1.9rem,5vw,2.6rem); color:var(--plum);
  margin:1.6rem 0 .6rem; text-wrap:balance;
}
h2{
  font-family:'Fraunces',Georgia,serif; font-weight:600; line-height:1.2;
  font-size:1.4rem; color:var(--plum); margin:2.4rem 0 .7rem; text-wrap:balance;
}
p{margin:0 0 1rem;}
.lede{font-size:1.08rem; color:var(--muted);}
a{color:var(--rose-deep);}

/* Tables ------------------------------------------------------------------
   Wide tables scroll inside their own container so the page body never
   scrolls sideways on a phone -- which is where most of this traffic lands. */
.tablewrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:16px; background:var(--card);
  box-shadow:var(--shadow); margin:0 0 1.4rem;
}
table{border-collapse:collapse; width:100%; font-size:.95rem;}
caption{
  text-align:left; padding:.9rem 1.1rem .2rem; color:var(--muted);
  font-size:.82rem;
}
th,td{padding:.7rem 1.1rem; text-align:left; vertical-align:middle;}
thead th{
  font-family:'JBMono','SFMono-Regular',ui-monospace,monospace;
  font-size:.68rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); font-weight:700; white-space:nowrap;
  border-bottom:1px solid var(--line);
}
tbody tr + tr td{border-top:1px solid var(--line);}
tbody tr:hover{background:var(--surface2);}
/* Figures line up when they're in a column together. */
td.num,th.num{font-variant-numeric:tabular-nums; white-space:nowrap;}
td.abbr{
  font-family:'JBMono','SFMono-Regular',ui-monospace,monospace;
  font-weight:700; color:var(--plum); white-space:nowrap;
}
td.sym{width:64px; text-align:center;}
td.sym svg{display:block; margin:0 auto; height:38px; width:auto; color:var(--ink);}

/* The warning box on the US/UK page — the whole reason that page exists. */
.warn{
  background:var(--surface); border-radius:16px; padding:1.1rem 1.3rem;
  margin:0 0 1.5rem; border-left:4px solid var(--rose-deep);
}
.warn p:last-child{margin-bottom:0;}
.warn strong{color:var(--rose-deep);}

/* Coach Bobble --------------------------------------------------------------
   The app's coach, saying one useful thing per chart. Deliberately quieter than
   the .cta below it: this is teaching, that is selling, and they sit next to
   each other. On a narrow screen he moves above the text rather than shrinking
   into a thumbnail nobody can read. */
.coach{
  display:flex; gap:1rem; align-items:flex-start;
  background:var(--surface2); border:1px solid var(--line); border-radius:18px;
  padding:1.1rem 1.2rem; margin:2.2rem 0 0;
}
.coach img{flex:0 0 auto; width:64px; height:64px; border-radius:50%; background:var(--surface);}
.coach-name{
  margin:0 0 .25rem; font-size:.78rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--rose-deep);
}
.coach-tip{margin:0; color:var(--ink); font-size:.95rem; line-height:1.6;}
@media (max-width:520px){
  .coach{flex-direction:column; gap:.7rem;}
}

/* Call to action ---------------------------------------------------------- */
.cta{
  background:var(--mint); border-radius:22px; padding:1.7rem 1.6rem;
  margin:2.6rem 0 1.4rem; text-align:center;
}
.cta h2{margin-top:0; color:var(--forest);}
.cta p{color:var(--forest); max-width:46ch; margin-inline:auto;}
.btn{
  display:inline-block; margin-top:.5rem; padding:.85rem 1.5rem;
  background:var(--accent); color:var(--accent-ink); border-radius:999px;
  font-weight:700; text-decoration:none; font-size:.98rem;
}
.btn:hover{opacity:.92;}

/* Cross-links + footer ---------------------------------------------------- */
.more{margin:2.2rem 0 0;}
.more ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem;}
.more a{
  display:block; background:var(--surface2); border:1px solid var(--line);
  border-radius:14px; padding:.8rem 1rem; text-decoration:none; color:var(--ink);
  font-weight:700; font-size:.95rem;
}
.more a:hover{background:var(--surface);}
footer{
  margin:3rem 0 2.5rem; padding-top:1.4rem; border-top:1px solid var(--line);
  color:var(--muted); font-size:.85rem;
}
footer a{color:var(--muted);}

/* Blog post images (emitted by scripts/blog-lib.mjs for ![alt](src)) */
.post-img{display:block; max-width:100%; height:auto; margin:1.2rem auto; border-radius:14px;}

:focus-visible{outline:3px solid var(--mauve); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important;}}

/* Per-size hook answers (crochet-hook-sizes) -------------------------------
   One card per US letter, answering "what is a G hook in mm" in a sentence
   rather than only in a table row. Every selector here is scoped to .sizecard
   / .sizejump: this stylesheet is shared with the blog, so a bare h3 rule
   would quietly restyle posts too. */
.sizejump{
  display:flex; flex-wrap:wrap; gap:.4rem .5rem; align-items:center;
  margin:0 0 1.1rem; font-size:.9rem;
}
.sizejump span{color:var(--muted);}
.sizejump a{
  display:inline-block; min-width:2.1rem; padding:.25rem .5rem;
  text-align:center; border:1px solid var(--line); border-radius:9px;
  background:var(--card); color:var(--plum); font-weight:600;
  text-decoration:none;
}
.sizejump a:hover{background:var(--surface); border-color:var(--mauve);}

.sizecards{
  display:grid; gap:.7rem; margin:0 0 1.6rem;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.sizecard{
  border:1px solid var(--line); border-radius:14px; background:var(--card);
  padding:.85rem 1rem; scroll-margin-top:1rem;
}
.sizecard h3{
  font-family:'Fraunces',Georgia,serif; font-weight:600; color:var(--plum);
  font-size:1.05rem; margin:0 0 .25rem;
}
.sizecard p{margin:0; font-size:.94rem; line-height:1.5;}
.sizecard:target{border-color:var(--mauve); box-shadow:var(--shadow);}

/* The beta door under the signup on blog and reference pages (2026-09-03).
   Same class the home page uses so the two read identically; home styles it
   inline, and these thirteen pages load this sheet instead. A LINK, never a
   button - the form above it stays the page's one call to action. */
.waitlist-alt{margin:12px 0 0;font-size:13.5px;color:var(--muted)}
.waitlist-alt a{color:var(--rose-deep);font-weight:700;text-decoration:none;border-bottom:1.5px solid currentColor}
.waitlist-alt a:hover{color:var(--plum)}

/* THE TOOLBOX ADVERT (2026-09-03). Option A's content in option B's filled box,
   her call. A LINK inside, never a button - the signup below stays the page's
   one call to action.

   --plum is a deep aubergine in light and a pale pink in dark, so the fill
   follows the reader's theme and the INK HAS TO FLIP WITH IT. Both states are
   written out; a colour defined in only one theme is how a box ends up with its
   own text invisible on it. */
.toolbox-ad{
  display:flex;gap:14px;align-items:center;
  margin:22px 0 0;padding:15px 17px;border-radius:13px;
  background:var(--plum);color:var(--accent-ink);
}
.toolbox-ad svg{flex:0 0 auto;width:38px;height:38px}
.toolbox-ad p{margin:0;font-size:14.5px;line-height:1.5}
.toolbox-ad a{color:inherit;font-weight:700;text-decoration:none;border-bottom:1.5px solid currentColor;white-space:nowrap}
@media (max-width:520px){ .toolbox-ad{gap:11px;padding:13px 14px} .toolbox-ad svg{width:30px;height:30px} .toolbox-ad p{font-size:13.8px} }