/* Cursive Writing A to Z, the Copybook brand system.
   Tokens lifted from the Classical design system (_design/_ds/classical-*).
   Paper ground, ink text, one gold accent that is always a line and never a
   fill. Mobile first, one stylesheet, no JavaScript anywhere on the site. */

:root {
  /* ---- roles, lifted exactly from the design system ---- */
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-accent: #b68235;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  /* Tonal ramps, generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff3e4;
  --color-accent-200: #ffe3bf;
  --color-accent-300: #facb8d;
  --color-accent-400: #e1ad66;
  --color-accent-500: #c28d41;
  --color-accent-600: #a06f24;
  --color-accent-700: #7d5411;
  --color-accent-800: #5a3b0a;
  --color-accent-900: #3a270d;

  --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-heading-weight: 600;
  --font-body: "Lora", Georgia, "Times New Roman", serif;
  /* Two script faces, and they are not interchangeable.

     --font-glyph is the letter a child copies on the four-line plate, the
     practice strip and the letter grid. Pinyon Script, because every letter
     joins and slants, which is what a cursive copybook hand looks like. The
     round upright faces read as print with curly ends, which is exactly the
     complaint. Cap height is 0.688em, so build.py sizes a glyph at two band
     gaps divided by that to land the capital on line 1.

     --font-script is the wordmark in the masthead and nothing else.

     Neither is ever used for headings or UI. The fallbacks are the
     handwriting faces most Indian home machines already carry. */
  --font-glyph: "Pinyon Script", "Segoe Script", "Bradley Hand", "Lucida Handwriting", cursive;
  --font-script: "Dancing Script", "Segoe Script", "Bradley Hand", "Lucida Handwriting", cursive;

  --space-1: 4.6px;
  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --space-8: 36.8px;
  --space-10: 46px;
  --space-12: 55.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* ---- site level ---- */
  /* neutral-600 is the design system's meta grey but it only reaches 3.7:1 on
     this ground. Small print uses neutral-700 (5.7:1) so body copy holds AA. */
  --muted: var(--color-neutral-700);
  --max: 43rem;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.skip { position: absolute; left: -999px; }
.skip:focus {
  left: var(--space-2);
  top: var(--space-2);
  z-index: 5;
  background: var(--color-bg);
  color: var(--color-accent-700);
  border: 1px solid var(--color-accent);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}

a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-600); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* ── the four-line ruling ──────────────────────────────────────────────
   Line 1 top and line 4 bottom in grey, lines 2 and 3 in gold, because the
   middle space is where small letters are won or lost. Indian ruling only. */

/* No overflow rule here on purpose. A tall H or a long g tail has to be able
   to sit outside the ruling without being cut off. */
.ruled {
  position: relative;
  background:
    linear-gradient(var(--color-neutral-400), var(--color-neutral-400)) 0 0/100% 1px no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) 0 33.33%/100% 1px no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) 0 66.67%/100% 1px no-repeat,
    linear-gradient(var(--color-neutral-400), var(--color-neutral-400)) 0 100%/100% 1px no-repeat;
}

/* ── masthead ─────────────────────────────────────────────────────────── */

.site-head { border-bottom: 1px solid var(--color-divider); }
/* The first build squeezed the masthead into about 90px and it read as a
   toolbar. Give the brand and the nav room to sit apart. Not a hero, just
   space around the two things in the bar. */
.head-inner { padding-top: var(--space-6); padding-bottom: var(--space-4); }

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-script);
  font-size: 34px;
  line-height: 1.1;
  white-space: nowrap;
}
.brand:hover { color: var(--color-text); }
.brand span {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-accent-700);
}

.site-head nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 16px;
}
.site-head nav li { margin: 0; }
.site-head nav a {
  color: inherit;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.site-head nav a:hover { color: var(--color-accent-700); }
.site-head nav a[aria-current] {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

/* Shop sits in the bar as the one outlined action. */
.site-head nav .nav-cta { margin-left: auto; }
.site-head nav .nav-cta a,
.site-head nav .nav-cta a[aria-current] {
  color: var(--color-accent-700);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  letter-spacing: 0.02em;
}
.site-head nav .nav-cta a:hover {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

/* ── type ─────────────────────────────────────────────────────────────── */

/* The nav used to sit almost on top of the h1. Two reasons: too little room
   asked for, and .wrap setting padding with a shorthand, which quietly zeroed
   whatever plain `main` asked for. Hence main.wrap, which outweighs it. */
main.wrap { padding-top: var(--space-10); padding-bottom: var(--space-10); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
/* The bigger the text, the lighter it sets. Display sizes take the normal cut. */
h1 { font-size: clamp(31px, 6.6vw, 44px); font-weight: 400; margin-bottom: var(--space-3); }
h2 { font-size: clamp(24px, 4.4vw, 30px); font-weight: 400; margin: var(--space-8) 0 var(--space-3); }
h3 { font-size: 21px; margin: var(--space-6) 0 var(--space-2); }
h4 { font-size: 18px; }

p, ul, ol { margin: 0 0 var(--space-4); }
li { margin-bottom: var(--space-2); }
strong { font-weight: 600; }

.lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-neutral-800);
}
.small, .updated, figcaption, .cta-note { font-size: 13px; color: var(--muted); }
.updated {
  margin: var(--space-8) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  font-variant-numeric: tabular-nums;
}

code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.875em;
  background: var(--color-neutral-200);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}

/* Body lists take a gold hairline marker. Gold is a line, never a fill. */
main ul { list-style: none; padding-left: 0; }
main ul li { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-1); }
main ul li::before {
  content: "";
  width: 12px;
  height: 1px;
  margin-top: 0.8em;
  background: var(--color-accent);
}

main ol { padding-left: 1.35rem; }
main ol li { display: list-item; }
main ol li::marker { color: var(--color-accent-700); font-family: var(--font-heading); }

/* ── the shop path ────────────────────────────────────────────────────
   A rail under the masthead that says the same thing on every page: which
   book, what it costs, and that it is not finished yet. It sticks to the top
   so the way to the book is never more than one tap away. No Pay now button,
   because there is nothing to pay for until the gateway and the PDF are real. */

.shopbar {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-accent);
}
.shopbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
.shopbar p { margin: 0; }
.shopbar-book {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 15px;
}
.shopbar-price {
  color: var(--color-accent-700);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.shopbar-link {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  text-decoration: none;
  color: var(--color-accent-700);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: 2px var(--space-3);
  white-space: nowrap;
}
.shopbar-link:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.shopbar-note {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--muted);
}
/* The rail is sticky, so a jump to #main or to a question heading has to stop
   below it instead of under it. */
#main, main [id] { scroll-margin-top: var(--space-12); }

/* ── actions ──────────────────────────────────────────────────────────── */

.cta {
  margin: var(--space-6) 0;
  padding: var(--space-4);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: transparent;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 15px;
  line-height: 1.2;
  color: var(--color-accent-700);
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-2) calc(var(--space-3) * 1.2);
}
.button:hover {
  color: var(--color-accent-700);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}
.button:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.cta-note { margin: var(--space-3) 0 0; }

/* The lighter CTA. A gold hairline instead of a box, so it can repeat after
   the lede and under the letter plate without shouting at a reader. */
.cta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-6) 0;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  border-top: 1px solid var(--color-accent);
  border-bottom: 1px solid var(--color-divider);
  text-align: left;
}
.cta-line a {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 17px;
  text-decoration: none;
}
.cta-line a:hover { text-decoration: underline; }
.cta-line-note { font-size: 13px; color: var(--muted); }

/* Honesty callouts. A gold hairline down the side, no tinted panel. */
.note {
  margin: var(--space-6) 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  border-left: 1px solid var(--color-accent);
  font-size: 15px;
  color: var(--color-neutral-800);
}
.note p { margin: 0 0 var(--space-2); }
.note p:last-child { margin: 0; }

/* ── letter art on the ruling ─────────────────────────────────────────── */

.letterart { margin: var(--space-6) 0; }
.letterart figcaption { margin-top: var(--space-2); font-style: italic; }

/* .plate, the design system's mat. No sepia grade here, this is drawn art. */
.fourline {
  display: block;
  width: 100%;
  height: auto;
  background: var(--color-neutral-100);
  border: 6px solid var(--color-surface);
  outline: 1px solid var(--color-divider);
}
.fourline .rule { stroke: var(--color-neutral-400); stroke-width: 1; }
.fourline .rule.mid { stroke: var(--color-accent); }
.fourline .glyph {
  fill: var(--color-text);
  font-family: var(--font-glyph);
  font-weight: 400;
}
.fourline .ghost { fill: var(--color-neutral-400); }
.fourline .label {
  fill: var(--color-neutral-600);
  font-family: var(--font-body);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

/* The practice strip: three faint traces, then one in ink. */
.strip { margin: var(--space-4) 0 var(--space-6); }
.strip .fourline { border-width: 4px; }

/* ── the 26 letter grid ───────────────────────────────────────────────── */

.letter-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.8rem, 1fr));
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-6);
  padding: 0;
}
.letter-grid li { display: block; margin: 0; }
.letter-grid li::before { content: none; }
.letter-grid a {
  display: flex;
  justify-content: center;
  height: 76px;
  text-decoration: none;
  color: var(--color-text);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) 0 33.33%/100% 1px no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) 0 66.67%/100% 1px no-repeat;
}
.letter-grid a:hover {
  color: var(--color-text);
  border-color: var(--color-accent);
  background-color: var(--color-accent-100);
}
.letter-grid a[aria-current="page"] {
  border-color: var(--color-accent);
  background-color: var(--color-accent-100);
}
/* The cell is a four-line ruling in miniature: its top border is line 1, the
   two gold lines are 2 and 3, its bottom border is line 4, so a band is
   25.3px. 42px with line-height 1 and this offset drops the baseline on the
   lower gold line, so the capital crosses the middle band and the tail of a g
   still finishes inside the cell. The offset is 20px rather than the 18px the
   round face wanted, because Pinyon sits lower in its line box. */
.grid-caps, .grid-small {
  font-family: var(--font-glyph);
  font-weight: 400;
  font-size: 42px;
  line-height: 1;
  position: relative;
  top: 20px;
}

.letter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: baseline;
  margin: var(--space-6) 0;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 15px;
}
.letter-nav .next { margin-left: auto; }

/* ── steps, questions, tables ─────────────────────────────────────────── */

.howto {
  list-style: none;
  counter-reset: step;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.howto li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--space-2);
  counter-increment: step;
  margin: 0;
}
.howto li::before {
  content: counter(step);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 22px;
  line-height: 1.1;
  color: var(--color-accent-700);
  font-variant-numeric: tabular-nums;
}

.faq-item { border-top: 1px solid var(--color-divider); padding-top: var(--space-3); }
.faq-item h3 { margin-top: 0; }
.faq-item p { margin-bottom: var(--space-4); }

.table-wrap { overflow-x: auto; margin: var(--space-4) 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left;
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}

.related { margin-top: var(--space-8); padding-top: var(--space-3); border-top: 1px solid var(--color-divider); }
.related h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.related li { display: block; margin: 0; }
.related li::before { content: none; }
.related a {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 17px;
  text-decoration: none;
  color: var(--color-text);
}
.related a:hover { color: var(--color-accent-700); }

/* ── footer ───────────────────────────────────────────────────────────── */

.site-foot {
  border-top: 1px solid var(--color-divider);
  padding: var(--space-6) 0 var(--space-8);
  font-size: 13px;
  color: var(--muted);
}
.site-foot .brand { font-size: 24px; margin-bottom: var(--space-4); }
.site-foot nav { margin-bottom: var(--space-4); }
.site-foot ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.site-foot li { display: block; margin: 0; }
.site-foot li::before { content: none; }
.site-foot a { color: inherit; text-decoration: none; }
.site-foot a:hover { color: var(--color-accent-700); }
.site-foot .small { margin: 0; max-width: 34rem; }

/* ── wider than a phone ───────────────────────────────────────────────── */

@media (min-width: 46rem) {
  body { font-size: 17px; }
  .wrap { padding: 0 var(--space-6); }
  .site-head .wrap, .shopbar .wrap, .site-foot .wrap { max-width: 58rem; }
  /* Brand on its own line with the nav under it, rather than the two fighting
     for one row. Six items plus the Shop button do not fit beside a 38px
     wordmark, and the old single row pushed Shop onto a stray second line. */
  .head-inner { padding-top: var(--space-8); padding-bottom: var(--space-6); }
  .brand { font-size: 38px; }
  .site-head nav ul { margin-top: var(--space-6); gap: var(--space-3) var(--space-6); }
  .shopbar-inner {
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
  .shopbar-book { font-size: 16px; }
  .shopbar-note { flex-basis: auto; margin-left: auto; }
  main.wrap { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  /* Justified copy at a comfortable measure, never on a phone. */
  main > p:not(.updated):not(.cta-line), .lede, .note p { text-align: justify; }
  .site-foot .wrap { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4) var(--space-8); }
  .site-foot .brand { grid-row: span 3; margin-bottom: 0; }
}

@media print {
  .site-head nav, .site-foot nav, .cta, .cta-line, .shopbar, .skip,
  .letter-nav { display: none; }
  body { background: #fff; font-size: 11pt; }
  .fourline { border-color: #eee; }
}