/* ------------------------------------------------------------------ *
 * English Tail: the sheet of paper everything is written on.
 * Tokens, reset, page furniture, buttons.
 * ------------------------------------------------------------------ */

:root {
  --paper: #fdfcf8;
  --paper-card: #ffffff;
  --rule: #dce6f3;
  --margin-line: #ecb6ad;
  --edge: #e8e3d8;

  --ink: #26384f;
  --ink-soft: #5d6b80;
  --pencil: #93999f;

  --accent: #c75b39;
  --correct: #3f9d7a;
  --wrong: #d1554f;
  --highlight: #ffe9a8;

  --rule-height: 34px;
  /* The sheet, and half of it. The margin rule is positioned from its edge. */
  --sheet-width: 1240px;
  --sheet-half: 620px;
  --radius: 14px;
  --shadow-soft: 0 1px 2px rgb(38 56 79 / 6%), 0 8px 24px -12px rgb(38 56 79 / 18%);
  --shadow-lift: 0 2px 4px rgb(38 56 79 / 8%), 0 18px 36px -16px rgb(38 56 79 / 28%);

  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  position: relative;
}

/* The ruled page itself: faint horizontal lines and a red margin rule.
   Kept on a fixed layer so content scrolls over a continuous sheet. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--rule-height) - 1px),
    var(--rule) calc(var(--rule-height) - 1px),
    var(--rule) var(--rule-height)
  );
  opacity: 0.75;
}

/* The red margin rule. It is pinned to the left edge of the sheet rather than
   to the viewport, so it never ends up slicing through the content at the
   widths where the sheet stops growing and starts hugging the window. */
body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: calc(max(16px, 50vw - var(--sheet-half)) + 20px);
  width: 2px;
  z-index: -1;
  pointer-events: none;
  background: var(--margin-line);
  opacity: 0.55;
}

@media (max-width: 759px) {
  body::after {
    display: none;
  }
}

img,
svg {
  max-width: 100%;
}

/* Flex and grid display values beat the UA's `[hidden] { display: none }`. */
[hidden] {
  display: none !important;
}

button {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

/* ------------------------------------------------------------------ *
 * Layout
 * ------------------------------------------------------------------ */

.sheet {
  width: min(var(--sheet-width), 100% - 32px);
  margin-inline: auto;
  padding-block: 28px 72px;
}

/* Leave room to the right of the margin rule, the way a notebook does. */
@media (min-width: 760px) {
  .sheet {
    padding-left: 52px;
  }
}

.site-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--edge);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
}

.brand__mark {
  font-family: var(--font-hand);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.brand__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.stat-row {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.stat {
  text-align: right;
}

.stat__value {
  font-family: var(--font-hand);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

.stat__label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pencil);
}

.page-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.3rem);
  font-weight: 600;
  margin: 0 0 6px;
}

.page-lede {
  margin: 0 0 32px;
  max-width: 62ch;
  color: var(--ink-soft);
  font-family: var(--font-serif);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.back-link:hover {
  color: var(--accent);
}

.site-footer {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--edge);
  font-size: 0.82rem;
  color: var(--pencil);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------ *
 * Buttons
 * ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--paper-card);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  box-shadow: 0 1px 2px rgb(38 56 79 / 6%);
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

.btn:active:not(:disabled) {
  transform: translateY(0);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 80%, black);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  border-style: dashed;
  color: var(--ink-soft);
}

.btn--small {
  padding: 5px 11px;
  font-size: 0.78rem;
}

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2.5px solid color-mix(in srgb, var(--accent) 70%, white);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ------------------------------------------------------------------ *
 * Shared pieces
 * ------------------------------------------------------------------ */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--accent) 12%, white);
  color: color-mix(in srgb, var(--accent) 75%, black);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, white);
}

.tag--easy {
  --accent: #3f9d7a;
}

.tag--medium {
  --accent: #c7873a;
}

.tag--hard {
  --accent: #b24a46;
}

.notice {
  padding: 18px 20px;
  border: 1px dashed var(--edge);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--highlight) 22%, white);
  color: var(--ink-soft);
  font-family: var(--font-serif);
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 540px) {
  .brand__mark {
    font-size: 2.1rem;
  }

  .brand__tagline {
    display: none;
  }

  .site-header {
    margin-bottom: 20px;
    padding-bottom: 14px;
  }

  .stat__value {
    font-size: 1.6rem;
  }
}