/* ==========================================================================
   LEGAL PAD — the canary draft
   The whole site is one long yellow pad: blue rules, the double red margin
   line, ballpoint ink, and handwriting in the margins where a pen would
   actually go. Warm, funny, unprecious. Always light — pads don't dim.
   ========================================================================== */

html[data-design="legalpad"] {
  --bg: oklch(0.93 0.085 100);
  --surface: oklch(0.955 0.07 100);
  --text: oklch(0.28 0.04 272);
  --text-muted: oklch(0.42 0.05 270);
  --accent: oklch(0.5 0.19 27);
  --accent-hover: oklch(0.42 0.18 27);
  --rule-line: color-mix(in oklch, oklch(0.6 0.08 250) 38%, var(--bg));
  --rule-strong: oklch(0.32 0.05 270);
  --margin-rule: oklch(0.55 0.19 27);
  --selection: color-mix(in oklch, oklch(0.6 0.08 250) 30%, var(--bg));
  --code-bg: color-mix(in oklch, oklch(0.6 0.08 250) 12%, var(--bg));
  /* Pin area colors to the light ramp regardless of saved theme */
  --area-red: oklch(0.58 0.19 20);
  --area-periwinkle: oklch(0.58 0.12 270);
  --area-green: oklch(0.55 0.12 150);
  --area-gold: oklch(0.68 0.14 75);
  --area-indigo: oklch(0.5 0.15 290);
}

html[data-design="legalpad"] .theme-toggle {
  display: none;
}

/* The pad itself: blue rules across the entire page */
html[data-design="legalpad"] body {
  background-image: linear-gradient(to bottom, transparent calc(100% - 1px), var(--rule-line) calc(100% - 1px));
  background-size: 100% 2.05rem;
}

/* The double red margin line, full height */
@media (min-width: 720px) {
  html[data-design="legalpad"] body::before {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: clamp(2.5rem, 7vw, 7rem);
    width: 5px;
    border-left: 1.5px solid color-mix(in oklch, var(--margin-rule) 75%, transparent);
    border-right: 1.5px solid color-mix(in oklch, var(--margin-rule) 75%, transparent);
    pointer-events: none;
    z-index: 1;
  }
}

/* Gummed binding strip up top */
html[data-design="legalpad"] .design-bar {
  background: oklch(0.42 0.05 60);
  border-bottom: none;
}

html[data-design="legalpad"] .design-bar-label {
  color: oklch(0.85 0.03 80);
}

html[data-design="legalpad"] .design-choice {
  color: oklch(0.85 0.03 80);
  border-color: oklch(0.55 0.04 65);
}

html[data-design="legalpad"] .design-choice[aria-pressed="true"] {
  background: oklch(0.93 0.085 100);
  color: oklch(0.35 0.05 60);
  border-color: oklch(0.93 0.085 100);
}

html[data-design="legalpad"] .masthead {
  border-top: 10px solid oklch(0.42 0.05 60);
}

html[data-design="legalpad"] .masthead-row {
  border-bottom: none;
}

html[data-design="legalpad"] .site-title {
  background: transparent;
  color: var(--text);
  padding-left: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  text-decoration: underline;
  text-decoration-style: double;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

html[data-design="legalpad"] .site-title:hover {
  background: transparent;
  color: var(--accent-hover);
}

/* Tabs: pen-circled when active */
html[data-design="legalpad"] .tab {
  font-family: var(--font-sans);
  font-weight: bold;
  font-size: 1rem;
  color: var(--text-muted);
  border: 2px solid transparent;
  border-radius: 50% 45% 55% 48% / 60% 50% 65% 45%;
  box-shadow: none;
}

html[data-design="legalpad"] .tab:hover {
  box-shadow: none;
  color: var(--tab-color);
}

html[data-design="legalpad"] .tab[aria-current="page"] {
  background: transparent;
  border: 2px solid var(--accent);
  border-radius: 50% 45% 55% 48% / 60% 50% 65% 45%;
  margin-bottom: 0;
  padding-bottom: 0.5rem;
  box-shadow: none;
  transform: rotate(-1deg);
}

html[data-design="legalpad"] .utility-row {
  border-top: none;
}

/* Handwriting where a pen would go */
html[data-design="legalpad"] .site-tagline,
html[data-design="legalpad"] .entry-kind,
html[data-design="legalpad"] .keep-reading,
html[data-design="legalpad"] figcaption,
html[data-design="legalpad"] .gallery-caption,
html[data-design="legalpad"] .footer-note {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
}

html[data-design="legalpad"] .entry-kind {
  font-size: 1.15rem;
}

html[data-design="legalpad"] .entry-meta time {
  font-family: var(--font-hand);
  font-size: 1.15rem;
  color: var(--text-muted);
}

html[data-design="legalpad"] .area-chip {
  font-family: var(--font-hand);
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--area-color, var(--accent));
}

html[data-design="legalpad"] .keep-reading {
  font-size: 1.3rem;
}

html[data-design="legalpad"] .keep-reading:hover {
  color: var(--accent-hover);
}

/* Entries sit on the ruling; separators are pen strikes */
html[data-design="legalpad"] .entry {
  border-bottom: none;
  position: relative;
}

html[data-design="legalpad"] .entry::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 7rem;
  border-bottom: 2px solid color-mix(in oklch, var(--text) 55%, transparent);
  transform: rotate(-0.6deg);
}

html[data-design="legalpad"] .feed::before {
  display: none;
}

html[data-design="legalpad"] .post-frame::before {
  display: none;
}

html[data-design="legalpad"] blockquote {
  border-top: none;
  border-bottom: none;
  padding-left: 1.1rem;
  box-shadow: inset 3px 0 0 var(--accent);
  font-family: var(--font-hand);
  font-size: 1.45rem;
  line-height: 1.5;
}

html[data-design="legalpad"] .prose img,
html[data-design="legalpad"] .entry img {
  border: 4px solid oklch(0.99 0.005 95);
  border-radius: 1px;
  box-shadow: 0 1px 4px rgba(60, 50, 10, 0.25);
  transform: rotate(-0.4deg);
}

html[data-design="legalpad"] .site-footer {
  border-top: 2px solid var(--rule-strong);
}

html[data-design="legalpad"] .footer-note::after {
  content: " — Z.";
  font-family: var(--font-hand);
}

html[data-design="legalpad"] .pagination a {
  font-family: var(--font-hand);
  font-size: 1.3rem;
  text-decoration-style: wavy;
}