/*****************************************************
TYPOGRAPHY

Everything that styles running prose and the things embedded in it. Fonts are
imported in base.css.

Sections, in order: body type and headings, tables, code blocks, syntax
highlighting, footnotes, blockquotes, pullquotes, alerts.

Loads:    every page
Used by:  typography/alert.html, typography/pullquote.html, and every page of
          Markdown — most of this file styles bare elements, not classes
Needs:    base.css tokens (--text-*, --font-*, --bg-code*, --spacing-*)
Not here: the `.container` grid that gives prose its measure (base.css)
*****************************************************/


@media screen {

/*****************************************************
TYPOGRAPHY
*****************************************************/

html, body {
  /* Typography */
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-body);
}

h1, h2, h3, h4, h5 {
  /* Typography */
  font-family: var(--font-heading);
  font-weight: 600;
  text-align: left;
  letter-spacing: 0;
  line-height: 1.15;
}

/* Heading color hierarchy - variety with restraint */
h1 {
  color: var(--text-h1);
  font-weight: 700;
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  font-size: clamp(2.15rem, 4vw, 2.85rem);
}

h2 {
  color: var(--text-h2);
  font-weight: 700;
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-sm);
  font-size: clamp(1.55rem, 3vw, 2rem);
}

.container > h2:first-child {
  margin-top: var(--spacing-md);
}

h3 {
  color: var(--text-h3);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-xs);
  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
}

h4 {
  color: var(--text-h4);
  margin-top: var(--spacing-md);
  margin-bottom: 0.8rem;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
}

/* Small uppercase label. Sized just above body copy so it still reads as a
   heading rather than a caption, with tracking so the caps don't crowd. */
h5 {
  color: var(--text-h5);
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

h6 {
  color: var(--text-body);
}

hr {
  /* Display */
  display: block;

  /* Box Model */
  height: 0;
  margin: 0.4rem 0;
  clear: both;

  /* Visual */
  border: 0;
  border-top: 2px solid var(--accent-border);
}

p {
  /* Box Model */
  margin-bottom: var(--spacing-md);

  /* Typography */
  line-height: 1.65em;
  text-align: left;
}

/* Reduce spacing between paragraphs and lists */
p:has(+ ul),
p:has(+ ol) {
  margin-bottom: var(--spacing-xs);
}

/* Editorial utilities: simple classes for stronger page rhythm */
/* No max-width of its own: the lede sits in the container's content column
   like everything else, so its right edge lines up with the body copy. The
   larger type already shortens the measure in characters — capping the width
   as well made it noticeably narrower than the text around it. */
/* The lede is set in a Garamond rather than the body sans. The face is the
   argument as much as the decoration: this site's imagery is Aldine, and
   Garamond's romans descend from the types Francesco Griffo cut for Aldus —
   the opening paragraph is set in the closest living relative of the type in
   the header image.

   Three settings below exist because of the face, not by preference:
     - Size is up a step. EB Garamond has a small x-height and a light colour;
       at the sans's 1.2–1.45rem it reads smaller than the body copy under it
       rather than larger, which defeats the point of a standfirst.
     - Tracking is 0, not the sans's -0.01em. Garamond is already close-fitting
       at this size and negative tracking closes the counters up.
     - Line height comes down slightly, because the larger size more than makes
       up the leading the old value was buying. */
.lede,
.lead {
  margin: 0 0 var(--spacing-lg) 0;
  color: var(--text-lede);
  font-family: var(--font-lede);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  line-height: 1.45;

  /* Justified to both margins. hyphens is not optional here: without it the
     browser can only stretch the word spaces to reach the right edge, which
     opens rivers of white down a paragraph set this large. Hyphenation lets
     it break words instead and keeps the spacing even.

     But unconstrained hyphenation breaks short words — "writ-ing" turned up
     in the lead at tablet widths, which reads as a typo at this size. The
     limits below require 4 characters on each side of the break, so nothing
     under eight letters can ever split, while long words still break and go
     on doing the spacing work justification needs them for.

     Two properties for one job: hyphenate-limit-chars is the standard and is
     unsupported in Safari, where the -webkit- pair from the old CSS3 Text
     draft is what lands. Both are needed; neither alone covers every browser. */
  text-align: justify;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;

  /* No text-wrap here, deliberately. A short last line is the one justified
     flaw CSS can't currently fix: `pretty` is specified for it but Chrome
     ignores it on justified text (measured — identical breaks on and off),
     and `balance` does apply but makes things worse, shortening every line so
     justification then stretches the spacing wide open. Reword the sentence
     if a lead strands its last line; don't reach for a wrap property. */

  letter-spacing: 0;
}

.section-intro {
  max-width: 42rem;
  margin: 0 0 var(--spacing-lg) 0;
  padding-left: var(--spacing-md);
  border-left: 4px solid var(--accent-border);
  color: var(--text-muted);
  font-size: 1.12rem;
  line-height: 1.65;
  text-align: left;
}

/* Editorial vocabulary you apply in Markdown with {: .class}. Not used by any
   include, which is the point — these are for authors, not components. The
   documented siblings are .lede, .field-note, .metadata-strip and
   .section-intro in docs/reference/typography.md; .editorial-label and
   .evidence-note work the same way and are not yet written up there. */
.editorial-label,
.kicker {
  margin: var(--spacing-lg) 0 var(--spacing-xs);
  color: var(--text-kicker);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.metadata-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs) var(--spacing-md);
  margin: var(--spacing-md) 0 var(--spacing-lg);
  padding: var(--spacing-xs) 0;
  border-top: 1px solid var(--metadata-border);
  border-bottom: 1px solid var(--metadata-border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: left;
}

.field-note,
.evidence-note {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-editorial-note);
  border-left: 4px solid var(--border-editorial-note);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-size: 0.96rem;
  line-height: 1.6;
  text-align: left;
}

.field-note p,
.evidence-note p {
  margin-bottom: var(--spacing-xs);
  text-align: left;
}

.field-note p:last-child,
.evidence-note p:last-child {
  margin-bottom: 0;
}

.feature-band {
  grid-column: full;
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-xl) max(var(--spacing-sm), calc(50% - 24rem));
  background: var(--bg-feature-band);
  color: var(--text-feature-band);
}

.feature-band h2,
.feature-band h3,
.feature-band h4,
.feature-band p,
.feature-band li {
  color: var(--text-feature-band);
}

.feature-band p,
.feature-band li {
  color: var(--text-feature-band-muted);
  text-align: left;
}

.feature-band a,
.feature-band a:visited {
  color: var(--text-feature-band-link);
  border-bottom-color: var(--text-feature-band-link);
}

.feature-band a:hover {
  color: var(--text-feature-band-link-hover);
  border-bottom-color: var(--text-feature-band-link-hover);
}

ul, ol {
  /* Box Model */
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  padding-left: 2rem;

  /* Typography */
  font-size: 0.95rem;
}

a {
  /* Typography */
  text-decoration: none;
  color: var(--accent-primary);

  /* Visual */
  border-bottom: 1px dotted var(--accent-primary);
}

a:visited {
  /* Typography */
  color: var(--accent-primary);

  /* Visual */
  border-bottom: 1px dotted var(--accent-primary);
}

a:hover {
  /* Typography */
  color: var(--interactive-hover);
  text-decoration: none;
}

.container li {
  /* Box Model */
  margin: 0 0 var(--spacing-xs) 0;
  padding: 0;
  
  /* Typography */
  line-height: 1.7rem;
}

/*****************************************************
TABLES
*****************************************************/

table {
  /* Box Model */
  width: 100%;
  margin-bottom: var(--spacing-lg);

  /* Visual */
  border-collapse: collapse;
}

th,
td {
  /* Box Model */
  padding: 0.6rem 1rem;

  /* Typography */
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.4;
}

th {
  /* Typography */
  font-weight: 600;
  color: var(--text-h3);

  /* Visual */
  border-bottom: 2px solid color-mix(in srgb, var(--accent-primary) 25%, var(--bg-page));
}

td {
  /* Visual */
  border-bottom: 1px solid var(--bg-card);
}

tr:last-child td {
  border-bottom: none;
}


/*****************************************************
CODE BLOCKS
*****************************************************/

/* Inline code (in paragraphs, lists, tables, headings) */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-weight: 400;
  color: var(--text-body);
  background-color: color-mix(in srgb, var(--bg-code) 34%, var(--bg-page));
  border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.06em 0.3em;
}

/* Keep fenced/indented code blocks clean and unchanged */
pre code,
.highlight pre code {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.highlight {
  /* Display */
  overflow-x: auto;

  /* Box Model */
  margin: var(--spacing-md) 0;
  padding: var(--spacing-sm) var(--spacing-md);

  /* Visual */
  background: var(--bg-code-block);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.highlight pre {
  /* Box Model */
  margin: 0;
  padding: 0;

  /* Typography */
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-code-block);
}

/*****************************************************
SYNTAX HIGHLIGHTING
*****************************************************/
/* Rouge emits these classes for any fence that declares a language
   (```yaml, ```liquid, ```css …). A fence with no language still gets the
   dark block, just no colour — so adding a language to a fence is what turns
   highlighting on.
   👉 Recolour by editing --code-* in base.css, not the rules below. */

/* Keys and tags: YAML keys, HTML tags, Liquid tag names — the labels */
.highlight .na, .highlight .nt, .highlight .py, .highlight .nl,
.highlight .nc, .highlight .nf { color: var(--code-key); }

/* Strings */
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb,
.highlight .sc, .highlight .sd, .highlight .se, .highlight .sh,
.highlight .si, .highlight .sx, .highlight .ss, .highlight .sr {
  color: var(--code-string);
}

/* Names, variables, namespaces */
.highlight .n, .highlight .nv, .highlight .nn, .highlight .nb,
.highlight .no, .highlight .nd { color: var(--code-name); }

/* Numbers, keywords, booleans */
.highlight .m, .highlight .mi, .highlight .mf, .highlight .k,
.highlight .kc, .highlight .kd, .highlight .kn, .highlight .kt,
.highlight .kr, .highlight .kp { color: var(--code-literal); }

/* Punctuation and operators recede */
.highlight .p, .highlight .pi, .highlight .o, .highlight .ow {
  color: var(--code-quiet);
}

/* Comments recede furthest */
.highlight .c, .highlight .c1, .highlight .cm, .highlight .cs,
.highlight .cp { color: var(--code-quiet); font-style: italic; }

/* Rouge marks unlexed fragments .err — common in Liquid examples. Do not
   paint those red; a false alarm in a teaching snippet is worse than none. */
.highlight .err { color: var(--text-code-block); background: transparent; }

.highlight .w { color: inherit; }

/* Generic tokens, mostly from ```markdown samples */
.highlight .gh, .highlight .gu { color: var(--code-key); font-weight: 600; }
.highlight .gs { font-weight: 600; }
.highlight .ge { font-style: italic; }
.highlight .gt, .highlight .gd { color: var(--code-literal); }


/*****************************************************
FOOTNOTE STYLING
*****************************************************/

/* Footnote reference buttons (superscript numbers) */
.littlefoot__button {
  /* Display & Positioning */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: -0.15em;

  /* Box Model */
  width: 1.2rem;
  height: 1.2rem;
  padding: 0;
  margin: 0 0.15em;

  /* Typography */
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  color: white;

  /* Visual */
  background: var(--accent-primary);
  border: 1px solid var(--accent-primary);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  opacity: 0.6;

  /* Interactivity */
  cursor: pointer;
  transition: all var(--transition-fast);
}

.littlefoot__button:hover,
.littlefoot__button:focus {
  /* Typography */
  color: white;

  /* Visual */
  background: var(--interactive-hover);
  border-color: var(--interactive-hover);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  outline: none;
  opacity: 1;
  transform: scale(1.05);
}

/* Footnote popup styling */
.littlefoot__popover {
  /* Box Model */
  max-width: 28rem;
  padding: 0;
  margin: 0.5rem 0;

  /* Visual */
  background: var(--bg-card);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.littlefoot__content {
  /* Box Model */
  padding: 1rem;

  /* Typography */
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-body);
}

.littlefoot__content p {
  /* Box Model */
  margin: 0 0 0.5rem 0;
}

.littlefoot__content p:last-child {
  margin-bottom: 0;
}



/*****************************************************
BLOCKQUOTE
*****************************************************/
/* Native <blockquote> element — used via Markdown > syntax */
blockquote {
  /* Box Model */
  max-width: 80%;
  margin: var(--spacing-sm) auto;
  padding: var(--spacing-xs);

  /* Typography */
  font-size: 120%;
  font-style: italic;
  quotes: """ """ "'" "'";

  /* Visual */
  border-left: 4px solid var(--text-muted);
}



/*****************************************************
PULLQUOTES
*****************************************************/
/* 👉 To change pullquote style, edit this block */
.pullquote {
  /* Box Model */
  position: relative;
  width: 70%;
  margin: var(--spacing-lg) auto var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-xs);
  justify-self: center;

  /* Typography */
  color: var(--text-body);
}

.pullquote::before {
  content: '\201C'; /* left double quotation mark */
  position: absolute;
  top: -0.05em;
  left: -0.05em;
  z-index: 0;

  /* Typography */
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14rem;
  line-height: 0.8;
  color: var(--accent-primary);
  opacity: 0.22;
  pointer-events: none;
}

.pullquote p {
  /* Display */
  position: relative;
  z-index: 1;

  /* Typography */
  font-family: var(--font-serif);
  font-size: 1.55rem;
  line-height: 1.6;
  font-style: italic;
  text-align: center;
}


/*****************************************************
ALERTS
*****************************************************/

.alert {
  /* Box Model */
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border-radius: var(--radius-md);
  border-left: 4px solid transparent;

  /* Typography */
  font-size: 0.95rem;
  line-height: 1.5;
}

.alert-heading {
  /* Box Model */
  margin-top: 0;
  margin-bottom: var(--spacing-xs);

  /* Typography */
  font-size: 1rem;
  font-weight: 600;
}

.alert-info {
  background: color-mix(in srgb, var(--info) 12%, var(--bg-page));
  border-left-color: var(--info);
  color: var(--text-body);
}

.alert-warning {
  background: color-mix(in srgb, var(--warning) 12%, var(--bg-page));
  border-left-color: var(--warning);
  color: var(--text-body);
}

.alert-danger {
  background: color-mix(in srgb, var(--error) 12%, var(--bg-page));
  border-left-color: var(--error);
  color: var(--text-body);
}

.alert-success {
  background: color-mix(in srgb, var(--success) 12%, var(--bg-page));
  border-left-color: var(--success);
  color: var(--text-body);
}

} /* end regular styles */





/*****************************************************************************/
/*
/* SMALL SCREEN
/*
/*****************************************************************************/

.practice-anchor {
  scroll-margin-top: 5rem;
}

@media (max-width: 768px) {

  /* Reduce base font size for mobile */
  html, body {
    font-size: 1rem;
  }

  /* Pullquotes fill full width on mobile */
  .pullquote {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .pullquote p {
    font-size: 1.2rem;
  }

  blockquote {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: var(--spacing-xs) var(--spacing-sm);
  }
}