/*
 * ═══════════════════════════════════════════════════════════════════════════
 * CREATIVE JOURNAL BLOG - Design System
 * A handcrafted aesthetic inspired by bullet journals and scrapbooks
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════
   FOUNDATIONS: CSS Variables & Base Styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* The four families, served from this domain. Vendored by build/vendor-fonts.js;
   see fonts/README.md for why they are not fetched from Google. */
@import url('fonts.css?v=2e78e4448f');

:root {
  /* Paper & Background Colors */
  --paper-cream: #fdf8f0;
  --paper-warm: #f5ede0;
  --paper-aged: #ede4d3;
  --kraft: #c9b896;
  --kraft-dark: #a89068;
  --kraft-light: #ddd4c0;

  /* Text Colors */
  --ink-black: #2d2a26;
  --ink-brown: #4a3f35;
  --ink-faded: #6b5e52;
  --ink-light: #8b7d6b;

  /* Accent Colors - Warm Palette */
  --terracotta: #c17f59;
  --terracotta-light: #e5a88a;
  --coral: #e8a598;
  --coral-soft: #f2c4ba;
  --mustard: #d4a843;
  --mustard-soft: #ebc978;
  --sage: #8b9a7b;
  --sage-soft: #b3c4a5;
  --dusty-rose: #c9a9a6;
  --lavender: #a8a0b8;

  /* Washi Tape Colors */
  --washi-stripe: repeating-linear-gradient(45deg, #d4856a, #d4856a 4px, #e5a88a 4px, #e5a88a 8px);
  --washi-dots: radial-gradient(circle, var(--sage) 2px, transparent 2px);
  --washi-solid-mustard: var(--mustard);
  --washi-solid-sage: var(--sage);

  /* Typography */
  --font-handwritten: 'Caveat', cursive;
  --font-handwritten-alt: 'Kalam', cursive;
  --font-serif: 'Lora', Georgia, serif;
  --font-typewriter: 'Special Elite', 'Courier New', monospace;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Shadows */
  --shadow-paper: 0 1px 2px rgba(45, 42, 38, 0.05), 0 4px 8px rgba(45, 42, 38, 0.08),
    0 8px 16px rgba(45, 42, 38, 0.04);
  --shadow-lifted: 0 2px 4px rgba(45, 42, 38, 0.08), 0 8px 16px rgba(45, 42, 38, 0.12),
    0 16px 32px rgba(45, 42, 38, 0.08);
  --shadow-tape: 0 1px 2px rgba(45, 42, 38, 0.1);

  /* Transitions */
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE RESET & DEFAULTS
   ═══════════════════════════════════════════════════════════════════════════ */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ink-black);
  background-color: var(--paper-cream);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-blend-mode: soft-light;
  min-height: 100vh;
  /* rotated tape and notes overhang the edge by design; clip them instead of
     letting the whole page scroll sideways on a phone */
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* anything embedded is capped at its column, so a wide figure never forces a sideways scroll */
svg,
video,
iframe,
object {
  max-width: 100%;
}

a {
  color: var(--terracotta);
  text-decoration: none;
  transition: var(--transition-smooth);
}

a:hover {
  color: var(--ink-brown);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 1: Paper Card
   The foundation element - a card that looks like actual paper
   ═══════════════════════════════════════════════════════════════════════════ */

.paper-card {
  background: var(--paper-warm);
  padding: var(--space-xl);
  position: relative;
  box-shadow: var(--shadow-paper);
  transition: var(--transition-smooth);

  /* Subtle paper texture */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='0.03'/%3E%3C/svg%3E");
}

.paper-card:hover {
  box-shadow: var(--shadow-lifted);
  transform: translateY(-2px) rotate(0.3deg);
}

/* Slight random rotation for that scattered look */
.paper-card:nth-child(odd) {
  transform: rotate(-0.5deg);
}

.paper-card:nth-child(even) {
  transform: rotate(0.5deg);
}

.paper-card:nth-child(odd):hover,
.paper-card:nth-child(even):hover {
  transform: translateY(-2px) rotate(0deg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 2: Torn Paper Edges
   CSS-only torn paper effect using clip-path
   ═══════════════════════════════════════════════════════════════════════════ */

.torn-edge-top {
  clip-path: polygon(
    0% 4%,
    2% 2%,
    5% 5%,
    8% 1%,
    12% 4%,
    15% 2%,
    20% 5%,
    25% 1%,
    30% 3%,
    35% 5%,
    40% 2%,
    45% 4%,
    50% 1%,
    55% 3%,
    60% 5%,
    65% 2%,
    70% 4%,
    75% 1%,
    80% 3%,
    85% 5%,
    90% 2%,
    95% 4%,
    100% 2%,
    100% 100%,
    0% 100%
  );
  padding-top: calc(var(--space-xl) + 0.5rem);
}

.torn-edge-bottom {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 96%,
    98% 98%,
    95% 95%,
    92% 99%,
    88% 96%,
    85% 98%,
    80% 95%,
    75% 99%,
    70% 97%,
    65% 95%,
    60% 98%,
    55% 96%,
    50% 99%,
    45% 97%,
    40% 95%,
    35% 98%,
    30% 96%,
    25% 99%,
    20% 97%,
    15% 95%,
    10% 98%,
    5% 96%,
    2% 98%,
    0% 96%
  );
  padding-bottom: calc(var(--space-xl) + 0.5rem);
}

.torn-edge-both {
  clip-path: polygon(
    0% 4%,
    2% 2%,
    5% 5%,
    8% 1%,
    12% 4%,
    15% 2%,
    20% 5%,
    25% 1%,
    30% 3%,
    35% 5%,
    40% 2%,
    45% 4%,
    50% 1%,
    55% 3%,
    60% 5%,
    65% 2%,
    70% 4%,
    75% 1%,
    80% 3%,
    85% 5%,
    90% 2%,
    95% 4%,
    100% 2%,
    100% 96%,
    98% 98%,
    95% 95%,
    92% 99%,
    88% 96%,
    85% 98%,
    80% 95%,
    75% 99%,
    70% 97%,
    65% 95%,
    60% 98%,
    55% 96%,
    50% 99%,
    45% 97%,
    40% 95%,
    35% 98%,
    30% 96%,
    25% 99%,
    20% 97%,
    15% 95%,
    10% 98%,
    5% 96%,
    2% 98%,
    0% 96%
  );
  padding-top: calc(var(--space-xl) + 0.5rem);
  padding-bottom: calc(var(--space-xl) + 0.5rem);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 3: Washi Tape
   Decorative tape strips that can be placed anywhere
   ═══════════════════════════════════════════════════════════════════════════ */

.washi-tape {
  position: absolute;
  height: 28px;
  width: 120px;
  opacity: 0.85;
  box-shadow: var(--shadow-tape);
  z-index: 10;
}

/* Striped pattern */
.washi-tape--striped {
  background: var(--washi-stripe);
}

/* Solid colors */
.washi-tape--mustard {
  background: var(--mustard);
  opacity: 0.7;
}

.washi-tape--sage {
  background: var(--sage);
  opacity: 0.7;
}

.washi-tape--coral {
  background: var(--coral);
  opacity: 0.7;
}

.washi-tape--kraft {
  background: var(--kraft);
  opacity: 0.8;
}

/* Positioning helpers */
.washi-tape--top-left {
  top: -8px;
  left: 20px;
  transform: rotate(-12deg);
}

.washi-tape--top-right {
  top: -8px;
  right: 20px;
  transform: rotate(8deg);
}

.washi-tape--bottom-left {
  bottom: -8px;
  left: 30px;
  transform: rotate(5deg);
}

.washi-tape--bottom-right {
  bottom: -8px;
  right: 25px;
  transform: rotate(-6deg);
}

/* Torn tape edges effect */
.washi-tape::before,
.washi-tape::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: inherit;
  opacity: 0.6;
}

.washi-tape::before {
  left: -2px;
  clip-path: polygon(0 0, 100% 10%, 100% 30%, 0 40%, 100% 50%, 0 60%, 100% 80%, 0 100%);
}

.washi-tape::after {
  right: -2px;
  clip-path: polygon(100% 0, 0 15%, 0 35%, 100% 45%, 0 55%, 100% 70%, 0 85%, 100% 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 4: Date Stamp
   Vintage-style stamp for dates and categories
   ═══════════════════════════════════════════════════════════════════════════ */

.stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border: 3px solid var(--ink-brown);
  border-radius: 4px;
  font-family: var(--font-typewriter);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: relative;
  transform: rotate(-3deg);

  /* Stamp ink effect */
  color: var(--terracotta);
  opacity: 0.9;

  /* Worn stamp effect */
  background: radial-gradient(ellipse at 30% 20%, transparent 40%, rgba(255, 255, 255, 0.3) 41%),
    radial-gradient(ellipse at 70% 80%, transparent 50%, rgba(255, 255, 255, 0.2) 51%);
}

.stamp::before {
  content: '';
  position: absolute;
  inset: -3px;
  border: 3px solid var(--terracotta);
  border-radius: 4px;
  opacity: 0.3;
  transform: translate(2px, 2px);
}

.stamp__date {
  font-size: 1.75rem;
  font-weight: bold;
  line-height: 1;
}

.stamp__month {
  font-size: 0.75rem;
  margin-top: 2px;
}

.stamp__year {
  font-size: 0.65rem;
  opacity: 0.8;
}

/* Circular stamp variant */
.stamp--circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px double var(--ink-brown);
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 5: Kraft Paper Section
   Sections with kraft paper background
   ═══════════════════════════════════════════════════════════════════════════ */

.kraft-paper {
  background: var(--kraft);
  padding: var(--space-xl);
  position: relative;

  /* Kraft paper texture */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='kraft'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23kraft)' opacity='0.08'/%3E%3C/svg%3E"),
    linear-gradient(
      135deg,
      transparent 40%,
      rgba(0, 0, 0, 0.02) 40%,
      rgba(0, 0, 0, 0.02) 60%,
      transparent 60%
    );
  color: var(--ink-brown);
}

.kraft-paper--light {
  background-color: var(--kraft-light);
}

.kraft-paper--dark {
  background-color: var(--kraft-dark);
  color: var(--paper-cream);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 6: Photo Frame with Tape Corners
   For images that look taped into a journal
   ═══════════════════════════════════════════════════════════════════════════ */

.photo-frame {
  position: relative;
  display: inline-block;
  padding: 8px;
  background: var(--paper-cream);
  box-shadow: var(--shadow-paper);
  transform: rotate(-1deg);
  transition: var(--transition-smooth);
}

/* Hovering the surrounding card lifts its photo too */
.photo-frame:hover,
.paper-card:hover .photo-frame {
  transform: rotate(0deg) scale(1.02);
  box-shadow: var(--shadow-lifted);
}

.photo-frame img {
  display: block;
  filter: saturate(0.95) contrast(1.02);
}

/* Tape corners */
.photo-frame::before,
.photo-frame::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 20px;
  background: var(--mustard);
  opacity: 0.7;
  z-index: 10;
}

.photo-frame::before {
  top: -6px;
  left: 10px;
  transform: rotate(-8deg);
}

.photo-frame::after {
  bottom: -6px;
  right: 10px;
  transform: rotate(5deg);
}

/* Polaroid variant */
.photo-frame--polaroid {
  padding: 12px 12px 48px 12px;
  transform: rotate(2deg);
}

.photo-frame--polaroid::after {
  content: attr(data-caption);
  position: absolute;
  bottom: 10px;
  left: 12px;
  right: 12px;
  font-family: var(--font-handwritten);
  font-size: 1.1rem;
  color: var(--ink-brown);
  text-align: center;
  background: none;
  width: auto;
  height: auto;
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 7: Quote Block / Note
   Styled like a torn piece of paper with a quote
   ═══════════════════════════════════════════════════════════════════════════ */

.quote-note {
  background: var(--paper-aged);
  padding: var(--space-lg) var(--space-xl);
  position: relative;
  font-family: var(--font-handwritten);
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--ink-brown);
  transform: rotate(-1deg);
  box-shadow: var(--shadow-paper);
  margin: var(--space-xl) 0;
}

.quote-note::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 15px;
  font-size: 4rem;
  font-family: Georgia, serif;
  color: var(--terracotta);
  opacity: 0.4;
  line-height: 1;
}

.quote-note__attribution {
  display: block;
  margin-top: var(--space-md);
  font-size: 1rem;
  font-family: var(--font-typewriter);
  color: var(--ink-faded);
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 8: Sticky Note
   Classic sticky note appearance
   ═══════════════════════════════════════════════════════════════════════════ */

.sticky-note {
  background: linear-gradient(180deg, #fff9c4 0%, #fff59d 100%);
  padding: var(--space-lg);
  width: 200px;
  min-height: 180px;
  font-family: var(--font-handwritten);
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--ink-brown);
  position: relative;
  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.12), inset 0 -40px 40px -40px rgba(0, 0, 0, 0.05);
  transform: rotate(2deg);
  transition: var(--transition-smooth);
}

.sticky-note:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 4px 6px 16px rgba(0, 0, 0, 0.15), inset 0 -40px 40px -40px rgba(0, 0, 0, 0.05);
}

/* Folded corner effect */
.sticky-note::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 25px 25px;
  border-color: transparent transparent var(--paper-cream) transparent;
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.1);
}

/* Color variants */
.sticky-note--pink {
  background: linear-gradient(180deg, #ffcdd2 0%, #ef9a9a 100%);
}

.sticky-note--green {
  background: linear-gradient(180deg, #c8e6c9 0%, #a5d6a7 100%);
}

.sticky-note--blue {
  background: linear-gradient(180deg, #bbdefb 0%, #90caf9 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 9: Tag Labels
   Category tags that look like journal labels
   ═══════════════════════════════════════════════════════════════════════════ */

.tag {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-typewriter);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--kraft-light);
  color: var(--ink-brown);
  border: 1px dashed var(--kraft-dark);
  position: relative;
  transition: var(--transition-smooth);
}

.tag:hover {
  background: var(--kraft);
  transform: translateY(-2px);
}

/* String hole effect */
.tag::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--ink-faded);
  background: var(--paper-cream);
}

.tag {
  padding-left: var(--space-lg);
}

/* Color variants */
.tag--terracotta {
  background: var(--terracotta-light);
  border-color: var(--terracotta);
}

.tag--sage {
  background: var(--sage-soft);
  border-color: var(--sage);
}

.tag--mustard {
  background: var(--mustard-soft);
  border-color: var(--mustard);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 11: Botanical Divider
   Decorative dividers with a botanical feel
   ═══════════════════════════════════════════════════════════════════════════ */

.divider-botanical {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin: var(--space-2xl) 0;
  color: var(--sage);
}

.divider-botanical::before,
.divider-botanical::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sage), transparent);
}

/* Leaf SVG in the middle */
.divider-botanical__leaf {
  width: 40px;
  height: 40px;
  opacity: 0.7;
}

/* Simple text divider variant */
.divider-text {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
  font-family: var(--font-handwritten);
  font-size: 1.1rem;
  color: var(--ink-faded);
}

.divider-text::before,
.divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--kraft);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 12: Doodle Border
   Hand-drawn style border
   ═══════════════════════════════════════════════════════════════════════════ */

.doodle-border {
  position: relative;
  padding: var(--space-xl);
}

.doodle-border::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 2px solid var(--ink-faded);
  border-radius: 3px 8px 5px 10px;
  opacity: 0.4;
  /* Slightly irregular border effect */
  clip-path: polygon(
    0 5%,
    3% 0,
    10% 2%,
    20% 0,
    35% 3%,
    50% 0,
    65% 2%,
    80% 0,
    95% 3%,
    100% 0,
    98% 15%,
    100% 30%,
    97% 50%,
    100% 70%,
    98% 85%,
    100% 100%,
    95% 98%,
    80% 100%,
    65% 97%,
    50% 100%,
    35% 98%,
    20% 100%,
    5% 97%,
    0 100%,
    2% 85%,
    0 70%,
    3% 50%,
    0 30%,
    2% 15%
  );
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 13: Handwritten Headings
   Typography that feels hand-lettered
   ═══════════════════════════════════════════════════════════════════════════ */

.handwritten {
  font-family: var(--font-handwritten);
  font-weight: 600;
  color: var(--ink-black);
  line-height: 1.2;
}

.handwritten--xl {
  font-size: 3.5rem;
}

.handwritten--lg {
  font-size: 2.5rem;
}

.handwritten--md {
  font-size: 1.8rem;
}

.handwritten--sm {
  font-size: 1.4rem;
}

/* Underline decoration */
.handwritten--underline {
  position: relative;
  display: inline-block;
}

.handwritten--underline::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 8px;
  background: var(--mustard);
  opacity: 0.5;
  z-index: -1;
  transform: rotate(-1deg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 14: Calendar Date Block
   Mini calendar-style date display
   ═══════════════════════════════════════════════════════════════════════════ */

.calendar-date {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
  background: var(--paper-cream);
  border: 1px solid var(--kraft);
  box-shadow: var(--shadow-paper);
  overflow: hidden;
}

.calendar-date__month {
  width: 100%;
  padding: 4px;
  background: var(--terracotta);
  color: var(--paper-cream);
  font-family: var(--font-typewriter);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
}

.calendar-date__day {
  padding: 8px;
  font-family: var(--font-handwritten);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ink-black);
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container--narrow {
  max-width: 800px;
}

.container--wide {
  max-width: 1400px;
}

/* Grid for article cards - organic, scattered layout */
.article-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-lg);
  padding: var(--space-xl) 0;
}

/* Default card spans */
.article-grid > * {
  grid-column: span 4;
}

/* Varied card sizes for organic feel */
.article-grid > *:nth-child(1) {
  grid-column: 1 / span 5;
  transform: rotate(-1.5deg);
}

.article-grid > *:nth-child(2) {
  grid-column: 6 / span 4;
  margin-top: 2rem;
  transform: rotate(1deg);
}

.article-grid > *:nth-child(3) {
  grid-column: 10 / span 3;
  margin-top: -1rem;
  transform: rotate(-0.5deg);
}

.article-grid > *:nth-child(4) {
  grid-column: 2 / span 4;
  margin-top: -2rem;
  transform: rotate(0.8deg);
}

.article-grid > *:nth-child(5) {
  grid-column: 6 / span 3;
  transform: rotate(-1deg);
}

.article-grid > *:nth-child(6) {
  grid-column: 9 / span 4;
  margin-top: 1.5rem;
  transform: rotate(0.5deg);
}

/* Additional cards follow a looser pattern */
.article-grid > *:nth-child(7) {
  grid-column: 1 / span 4;
  transform: rotate(1deg);
}

.article-grid > *:nth-child(8) {
  grid-column: 5 / span 5;
  margin-top: -1rem;
  transform: rotate(-0.8deg);
}

.article-grid > *:nth-child(9) {
  grid-column: 10 / span 3;
  transform: rotate(1.2deg);
}

/* Responsive - stack on smaller screens */
@media (max-width: 1100px) {
  .article-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .article-grid > * {
    grid-column: span 3 !important;
    margin-top: 0 !important;
  }

  .article-grid > *:nth-child(odd) {
    transform: rotate(-0.5deg);
  }

  .article-grid > *:nth-child(even) {
    transform: rotate(0.5deg);
    margin-top: 1rem !important;
  }
}

@media (max-width: 768px) {
  .article-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .article-grid > * {
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
    transform: rotate(0deg) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER COMPONENT
   ═══════════════════════════════════════════════════════════════════════════ */

.site-header {
  padding: var(--space-2xl) 0;
  text-align: center;
  position: relative;
}

.site-title {
  font-family: var(--font-handwritten);
  font-size: clamp(2.4rem, 9vw, 4rem);
  font-weight: 700;
  color: var(--ink-black);
  margin-bottom: var(--space-sm);
  position: relative;
  display: inline-block;
}

.site-title::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: -10px;
  right: -10px;
  height: 14px;
  background: var(--mustard);
  opacity: 0.4;
  z-index: -1;
  transform: rotate(-1deg);
}

.site-tagline {
  font-family: var(--font-typewriter);
  font-size: 0.9rem;
  color: var(--ink-faded);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Navigation */
.site-nav {
  margin-top: var(--space-xl);
}

.site-nav__list {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  list-style: none;
}

.site-nav__link {
  font-family: var(--font-handwritten);
  font-size: 1.3rem;
  color: var(--ink-brown);
  padding: var(--space-xs) var(--space-sm);
  position: relative;
}

.site-nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--terracotta);
  transition: var(--transition-smooth);
}

.site-nav__link:hover::after {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ARTICLE CARD COMPONENT
   ═══════════════════════════════════════════════════════════════════════════ */

.article-card {
  background: var(--paper-warm);
  position: relative;
  box-shadow: var(--shadow-paper);
  transition: var(--transition-smooth);
  overflow: visible;
}

.article-card:hover {
  box-shadow: var(--shadow-lifted);
  transform: translateY(-4px) rotate(0deg) !important;
}

.article-card__image {
  position: relative;
  overflow: hidden;
}

.article-card__image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  filter: saturate(0.9);
  transition: var(--transition-smooth);
}

.article-card:hover .article-card__image img {
  filter: saturate(1);
  transform: scale(1.03);
}

.article-card__content {
  padding: var(--space-lg);
}

.article-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.article-card__title {
  font-family: var(--font-handwritten);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ink-black);
  line-height: 1.3;
  margin-bottom: var(--space-sm);
}

.article-card__title a {
  color: inherit;
}

.article-card__title a:hover {
  color: var(--terracotta);
}

.article-card__excerpt {
  font-size: 1rem;
  color: var(--ink-faded);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ARTICLE PAGE STYLES
   Clean, readable styles for article content
   ═══════════════════════════════════════════════════════════════════════════ */

.article {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg);
}

.article__header {
  text-align: center;
  margin-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--kraft);
}

.article__title {
  font-family: var(--font-handwritten);
  font-size: clamp(2.1rem, 7vw, 3rem);
  font-weight: 700;
  color: var(--ink-black);
  line-height: 1.2;
  margin-bottom: var(--space-md);
}

.article__meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.article__date {
  font-family: var(--font-typewriter);
  font-size: 0.85rem;
  color: var(--ink-faded);
}

/* Article content typography */
.article__content {
  font-size: 1.125rem;
  line-height: 1.8;
}

.article__content p {
  margin-bottom: var(--space-lg);
}

.article__content h2 {
  font-family: var(--font-handwritten);
  font-size: 2rem;
  font-weight: 600;
  color: var(--ink-black);
  margin: var(--space-2xl) 0 var(--space-md);
  position: relative;
  display: inline-block;
}

.article__content h2::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 8px;
  background: var(--mustard);
  opacity: 0.3;
  z-index: -1;
}

.article__content h3 {
  font-family: var(--font-handwritten);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink-brown);
  margin: var(--space-xl) 0 var(--space-sm);
}

.article__content a {
  color: var(--terracotta);
  text-decoration: underline;
  text-decoration-color: var(--terracotta-light);
  text-underline-offset: 3px;
}

.article__content a:hover {
  text-decoration-color: var(--terracotta);
}

.article__content blockquote {
  margin: var(--space-xl) 0;
  padding: var(--space-lg) var(--space-xl);
  background: var(--paper-aged);
  border-left: 4px solid var(--terracotta);
  font-family: var(--font-handwritten);
  font-size: 1.3rem;
  color: var(--ink-brown);
  transform: rotate(-0.5deg);
}

.article__content ul,
.article__content ol {
  margin: var(--space-lg) 0;
  padding-left: var(--space-xl);
}

.article__content li {
  margin-bottom: var(--space-sm);
}

.article__content img {
  margin: var(--space-xl) auto;
  box-shadow: var(--shadow-paper);
}

.article__content code {
  font-family: var(--font-typewriter);
  font-size: 0.9em;
  background: var(--kraft-light);
  padding: 2px 6px;
  border-radius: 3px;
}

.article__content pre {
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  background: var(--kraft-light);
  overflow-x: auto;
  font-family: var(--font-typewriter);
  font-size: 0.9rem;
  line-height: 1.5;
}

.article__content pre code {
  background: none;
  padding: 0;
}

/* Article featured image */
.article__featured-image {
  margin: var(--space-xl) calc(-1 * var(--space-lg));
  position: relative;
}

.article__featured-image img {
  width: 100%;
  box-shadow: var(--shadow-paper);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 16: Paper Clip
   Realistic metal paper clip that can attach notes
   ═══════════════════════════════════════════════════════════════════════════ */

.paper-clip {
  position: absolute;
  width: 20px;
  height: 50px;
  z-index: 20;
}

.paper-clip::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 44px;
  border: 3px solid #8b8b8b;
  border-radius: 8px 8px 0 0;
  background: transparent;
  top: 0;
  left: 2px;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5), 1px 1px 2px rgba(0, 0, 0, 0.15);
}

.paper-clip::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 32px;
  border: 3px solid #8b8b8b;
  border-radius: 5px 5px 0 0;
  border-bottom: none;
  background: transparent;
  top: 6px;
  left: 5px;
}

/* Gold variant */
.paper-clip--gold::before,
.paper-clip--gold::after {
  border-color: #d4a843;
}

/* Rose gold variant */
.paper-clip--rose::before,
.paper-clip--rose::after {
  border-color: #c9a9a6;
}

/* Positioned variants */
.paper-clip--top {
  top: -15px;
  left: 30px;
  transform: rotate(-5deg);
}

.paper-clip--top-right {
  top: -15px;
  right: 40px;
  transform: rotate(8deg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 17: Binder Clip
   Those black binder clips for a more "organized" look
   ═══════════════════════════════════════════════════════════════════════════ */

.binder-clip {
  position: absolute;
  width: 40px;
  height: 20px;
  z-index: 20;
}

/* Main clip body */
.binder-clip::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 16px;
  background: linear-gradient(180deg, #4a4a4a 0%, #2d2d2d 50%, #1a1a1a 100%);
  border-radius: 2px 2px 0 0;
  top: 0;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Wire handles */
.binder-clip::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 14px;
  border: 2px solid #7a7a7a;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  top: -12px;
  left: 6px;
  background: transparent;
}

.binder-clip--top {
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
}

.binder-clip--corner {
  top: -5px;
  left: -5px;
  transform: rotate(-25deg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 18: Highlighter Marks
   Yellow/pink highlighter strokes behind text
   ═══════════════════════════════════════════════════════════════════════════ */

.highlight {
  position: relative;
  display: inline;
  isolation: isolate;
}

.highlight::before {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  top: -2px;
  bottom: -2px;
  z-index: -1;
  transform: rotate(-0.5deg) skewX(-5deg);
  border-radius: 2px;
}

.highlight--yellow::before {
  background: linear-gradient(
    104deg,
    rgba(255, 237, 79, 0) 0.9%,
    rgba(255, 237, 79, 0.7) 2.4%,
    rgba(255, 237, 79, 0.6) 5.8%,
    rgba(255, 237, 79, 0.55) 93%,
    rgba(255, 237, 79, 0.7) 96%,
    rgba(255, 237, 79, 0) 98%
  );
}

.highlight--pink::before {
  background: linear-gradient(
    104deg,
    rgba(255, 182, 193, 0) 0.9%,
    rgba(255, 182, 193, 0.75) 2.4%,
    rgba(255, 182, 193, 0.65) 5.8%,
    rgba(255, 182, 193, 0.6) 93%,
    rgba(255, 182, 193, 0.75) 96%,
    rgba(255, 182, 193, 0) 98%
  );
}

.highlight--green::before {
  background: linear-gradient(
    104deg,
    rgba(179, 229, 179, 0) 0.9%,
    rgba(179, 229, 179, 0.75) 2.4%,
    rgba(179, 229, 179, 0.65) 5.8%,
    rgba(179, 229, 179, 0.6) 93%,
    rgba(179, 229, 179, 0.75) 96%,
    rgba(179, 229, 179, 0) 98%
  );
}

.highlight--blue::before {
  background: linear-gradient(
    104deg,
    rgba(173, 216, 230, 0) 0.9%,
    rgba(173, 216, 230, 0.75) 2.4%,
    rgba(173, 216, 230, 0.65) 5.8%,
    rgba(173, 216, 230, 0.6) 93%,
    rgba(173, 216, 230, 0.75) 96%,
    rgba(173, 216, 230, 0) 98%
  );
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 19: Margin Notes
   Small handwritten notes that appear in the margin
   ═══════════════════════════════════════════════════════════════════════════ */

.margin-note {
  position: absolute;
  right: -180px;
  width: 150px;
  padding: 0.5rem;
  font-family: var(--font-handwritten);
  font-size: 0.95rem;
  color: var(--terracotta);
  line-height: 1.3;
  transform: rotate(2deg);
}

.margin-note::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 50%;
  width: 15px;
  height: 2px;
  background: var(--terracotta);
  opacity: 0.5;
}

.margin-note--left {
  right: auto;
  left: -180px;
}

.margin-note--left::before {
  left: auto;
  right: -20px;
}

/* Arrow pointing to text */
.margin-note--arrow::after {
  content: '←';
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
}

.margin-note--left.margin-note--arrow::after {
  content: '→';
  left: auto;
  right: -25px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 20: Coffee/Tea Stain
   Circular ring stains from mugs
   ═══════════════════════════════════════════════════════════════════════════ */

.coffee-stain {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  opacity: 0.15;
  background: radial-gradient(ellipse at center, transparent 50%, #8b6914 52%, transparent 54%),
    radial-gradient(ellipse at 30% 40%, rgba(139, 105, 20, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(139, 105, 20, 0.2) 0%, transparent 40%);
}

.coffee-stain--small {
  width: 50px;
  height: 50px;
}

.coffee-stain--large {
  width: 120px;
  height: 120px;
}

/* Tea stain - lighter */
.tea-stain {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  opacity: 0.12;
  background: radial-gradient(ellipse at center, transparent 48%, #a67b3d 50%, transparent 53%),
    radial-gradient(ellipse at 40% 30%, rgba(166, 123, 61, 0.25) 0%, transparent 45%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 21: Postage Stamps
   Decorative vintage-style stamps
   ═══════════════════════════════════════════════════════════════════════════ */

.postage-stamp {
  position: relative;
  display: inline-block;
  padding: 8px;
  background: var(--paper-cream);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transform: rotate(-5deg);
}

.postage-stamp__inner {
  width: 60px;
  height: 70px;
  background: var(--dusty-rose);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--paper-cream);
  outline: 1px dashed rgba(0, 0, 0, 0.2);
  outline-offset: -6px;
}

.postage-stamp__value {
  font-family: var(--font-typewriter);
  font-size: 0.65rem;
  color: var(--ink-faded);
}

.postage-stamp__icon {
  font-size: 1.5rem;
  margin: 4px 0;
}

/* Color variants */
.postage-stamp--sage .postage-stamp__inner {
  background: var(--sage-soft);
}
.postage-stamp--mustard .postage-stamp__inner {
  background: var(--mustard-soft);
}
.postage-stamp--lavender .postage-stamp__inner {
  background: var(--lavender);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 22: Ticket Stub
   Movie/concert ticket stubs
   ═══════════════════════════════════════════════════════════════════════════ */

.ticket-stub {
  display: inline-flex;
  background: linear-gradient(135deg, #f5e6d3 0%, #ede0cc 100%);
  font-family: var(--font-typewriter);
  position: relative;
  transform: rotate(-3deg);
  box-shadow: var(--shadow-paper);
}

.ticket-stub__main {
  padding: 12px 16px;
  border-right: 2px dashed var(--kraft-dark);
  min-width: 140px;
}

.ticket-stub__tear {
  padding: 12px 10px;
  background: linear-gradient(135deg, #ede0cc 0%, #e5d6c0 100%);
  min-width: 40px;
  text-align: center;
}

.ticket-stub__title {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--ink-brown);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ticket-stub__detail {
  font-size: 0.65rem;
  color: var(--ink-faded);
  margin-top: 4px;
}

.ticket-stub__number {
  font-size: 0.7rem;
  color: var(--ink-faded);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 23: Photo Corners
   Classic triangular photo mounting corners
   ═══════════════════════════════════════════════════════════════════════════ */

.photo-corners {
  position: relative;
  display: inline-block;
}

.photo-corners::before,
.photo-corners::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  z-index: 10;
}

/* Top corners */
.photo-corners::before {
  top: -2px;
  left: -2px;
  border-left: 20px solid var(--ink-black);
  border-right: 20px solid transparent;
  border-bottom: 20px solid transparent;
  opacity: 0.8;
}

.photo-corners::after {
  top: -2px;
  right: -2px;
  border-right: 20px solid var(--ink-black);
  border-left: 20px solid transparent;
  border-bottom: 20px solid transparent;
  opacity: 0.8;
}

/* Use additional elements for bottom corners */
.photo-corner {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 10;
}

.photo-corner--bl {
  bottom: -2px;
  left: -2px;
  border-left: 20px solid var(--ink-black);
  border-right: 20px solid transparent;
  border-top: 20px solid transparent;
  opacity: 0.8;
}

.photo-corner--br {
  bottom: -2px;
  right: -2px;
  border-right: 20px solid var(--ink-black);
  border-left: 20px solid transparent;
  border-top: 20px solid transparent;
  opacity: 0.8;
}

/* Gold variant */
.photo-corners--gold::before,
.photo-corners--gold::after {
  border-left-color: #d4a843;
  border-right-color: #d4a843;
}

.photo-corner--gold {
  border-left-color: #d4a843 !important;
  border-right-color: #d4a843 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 24: Page Flags / Tabs
   Small sticky page markers
   ═══════════════════════════════════════════════════════════════════════════ */

.page-flag {
  position: absolute;
  width: 30px;
  height: 60px;
  right: -10px;
  top: 20px;
  z-index: 15;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1);
}

.page-flag--pink {
  background: linear-gradient(180deg, #ffb6c1 0%, #ff91a4 100%);
}
.page-flag--yellow {
  background: linear-gradient(180deg, #fff9c4 0%, #ffee58 100%);
}
.page-flag--green {
  background: linear-gradient(180deg, #c8e6c9 0%, #81c784 100%);
}
.page-flag--blue {
  background: linear-gradient(180deg, #bbdefb 0%, #64b5f6 100%);
}
.page-flag--orange {
  background: linear-gradient(180deg, #ffe0b2 0%, #ffb74d 100%);
}

/* Multiple flags stacked */
.page-flags {
  position: absolute;
  right: -10px;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.page-flags .page-flag {
  position: relative;
  right: auto;
  top: auto;
  height: 40px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 25: Rubber Stamps
   "DRAFT", "IMPORTANT", "APPROVED" style stamps
   ═══════════════════════════════════════════════════════════════════════════ */

.rubber-stamp {
  display: inline-block;
  padding: 8px 20px;
  font-family: var(--font-typewriter);
  font-size: 0.9rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border: 3px solid currentColor;
  border-radius: 4px;
  transform: rotate(-8deg);
  position: relative;
  opacity: 0.75;
}

.rubber-stamp--red {
  color: #c62828;
}

.rubber-stamp--blue {
  color: #1565c0;
}

.rubber-stamp--green {
  color: #2e7d32;
}

.rubber-stamp--faded {
  opacity: 0.4;
}

/* Circle variant */
.rubber-stamp--circle {
  width: 70px;
  height: 70px;
  padding: 0;
  border-radius: 50%;
  border-width: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  text-align: center;
  line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 26: Folded Corner / Dog Ear
   Page corner that looks folded down
   ═══════════════════════════════════════════════════════════════════════════ */

.folded-corner {
  position: relative;
  overflow: hidden;
}

.folded-corner::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 40px 40px 0;
  border-color: transparent var(--paper-cream) transparent transparent;
  z-index: 10;
}

.folded-corner::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 0 0 40px;
  border-color: transparent transparent transparent var(--kraft-light);
  box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.1);
  z-index: 9;
}

/* Bottom right variant */
.folded-corner--bottom {
  overflow: hidden;
}

.folded-corner--bottom::before {
  top: auto;
  bottom: 0;
  border-width: 40px 40px 0 0;
  border-color: var(--kraft-light) transparent transparent transparent;
  box-shadow: 2px -2px 3px rgba(0, 0, 0, 0.1);
}

.folded-corner--bottom::after {
  top: auto;
  bottom: 0;
  border-width: 0 0 40px 40px;
  border-color: transparent transparent var(--paper-cream) transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 27: Hand-drawn Underlines & Circles
   Emphasis marks that look hand-drawn
   ═══════════════════════════════════════════════════════════════════════════ */

.hand-underline {
  position: relative;
  display: inline;
}

.hand-underline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'%3E%3Cpath d='M0,5 Q25,0 50,5 T100,5' fill='none' stroke='%23C17F59' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
    repeat-x;
  background-size: 100px 10px;
}

.hand-underline--wavy::after {
  height: 8px;
  bottom: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 15'%3E%3Cpath d='M0,7 Q12.5,2 25,7 T50,7 T75,7 T100,7' fill='none' stroke='%23C17F59' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
    repeat-x;
  background-size: 50px 15px;
}

/* Hand-drawn circle around text */
.hand-circle {
  position: relative;
  display: inline-block;
}

.hand-circle::before {
  content: '';
  position: absolute;
  inset: -4px -8px;
  border: 2px solid var(--terracotta);
  border-radius: 50% 45% 55% 48% / 45% 50% 48% 52%;
  transform: rotate(-2deg);
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 28: Pinned Note
   A note that looks attached with a push pin
   ═══════════════════════════════════════════════════════════════════════════ */

.pinned-note {
  position: relative;
  background: var(--paper-cream);
  padding: var(--space-lg);
  padding-top: calc(var(--space-lg) + 10px);
  box-shadow: var(--shadow-lifted);
  transform: rotate(-2deg);
  max-width: 250px;
}

/* Push pin */
.pinned-note::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: radial-gradient(circle at 30% 30%, #e53935 0%, #b71c1c 100%);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.2),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

/* Pin needle shadow */
.pinned-note::after {
  content: '';
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 50%;
}

/* Pin color variants */
.pinned-note--green::before {
  background: radial-gradient(circle at 30% 30%, #43a047 0%, #1b5e20 100%);
}

.pinned-note--blue::before {
  background: radial-gradient(circle at 30% 30%, #1e88e5 0%, #0d47a1 100%);
}

.pinned-note--yellow::before {
  background: radial-gradient(circle at 30% 30%, #fdd835 0%, #f9a825 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 29: String/Twine Decoration
   Decorative string element
   ═══════════════════════════════════════════════════════════════════════════ */

.twine-horizontal {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, #8b7355 0px, #a08060 2px, #8b7355 4px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.twine-horizontal::before,
.twine-horizontal::after {
  content: '';
  position: absolute;
  top: -8px;
  width: 12px;
  height: 18px;
  border: 2px solid #8b7355;
  border-radius: 50%;
  background: transparent;
}

.twine-horizontal::before {
  left: 20%;
  transform: rotate(-30deg);
}

.twine-horizontal::after {
  right: 20%;
  transform: rotate(30deg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 31: Lined Paper Section
   Notebook lined paper background
   ═══════════════════════════════════════════════════════════════════════════ */

.lined-paper {
  background-color: var(--paper-cream);
  background-image: linear-gradient(var(--kraft-light) 1px, transparent 1px);
  background-size: 100% 28px;
  background-position: 0 20px;
  padding: 20px;
  padding-left: 60px;
  position: relative;
  line-height: 28px;
}

/* Red margin line */
.lined-paper::before {
  content: '';
  position: absolute;
  left: 50px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(229, 115, 115, 0.5);
}

/* Hole punches */
.lined-paper--holes::after {
  content: '';
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 80%;
  background-image: radial-gradient(circle, var(--paper-cream) 6px, transparent 6px);
  background-size: 16px 60px;
  background-position: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 32: Graph Paper Section
   Grid paper background
   ═══════════════════════════════════════════════════════════════════════════ */

.graph-paper {
  background-color: var(--paper-cream);
  background-image: linear-gradient(rgba(150, 180, 150, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 180, 150, 0.3) 1px, transparent 1px);
  background-size: 20px 20px;
  padding: var(--space-lg);
}

/* Darker grid variant */
.graph-paper--dark {
  background-image: linear-gradient(rgba(100, 130, 100, 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 130, 100, 0.4) 1px, transparent 1px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 33: Checkbox / To-Do Item
   Hand-drawn style checkboxes
   ═══════════════════════════════════════════════════════════════════════════ */

.todo-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-family: var(--font-handwritten);
  font-size: 1.2rem;
  margin: var(--space-sm) 0;
}

.todo-item__checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid var(--ink-faded);
  border-radius: 3px;
  flex-shrink: 0;
  margin-top: 4px;
  position: relative;
  transform: rotate(-2deg);
}

.todo-item--checked .todo-item__checkbox::after {
  content: '✓';
  position: absolute;
  top: -4px;
  left: 2px;
  font-size: 1.4rem;
  color: var(--sage);
  font-weight: bold;
}

.todo-item--checked .todo-item__text {
  text-decoration: line-through;
  color: var(--ink-faded);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 34: Star Rating
   Hand-drawn star rating display
   ═══════════════════════════════════════════════════════════════════════════ */

.star-rating {
  display: inline-flex;
  gap: 2px;
  font-size: 1.2rem;
}

.star-rating__star {
  color: var(--kraft);
}

.star-rating__star--filled {
  color: var(--mustard);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 35: Weather Doodle
   Small weather indicator icons
   ═══════════════════════════════════════════════════════════════════════════ */

.weather-doodle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-handwritten);
  font-size: 0.95rem;
  color: var(--ink-faded);
}

.weather-doodle__icon {
  font-size: 1.3rem;
}

.weather-doodle__icon--sun {
  color: var(--mustard);
}
.weather-doodle__icon--cloud {
  color: var(--ink-light);
}
.weather-doodle__icon--rain {
  color: #64b5f6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 39: Tech & Finance Paper Elements
   Paper-based decorations for tech/finance themed content
   ═══════════════════════════════════════════════════════════════════════════ */

/* Code Snippet Card - Index card with handwritten code */
.code-snippet-card {
  background: var(--paper-cream);
  padding: 1rem 1.25rem;
  min-width: 200px;
  max-width: 280px;
  font-family: var(--font-handwritten-alt);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-brown);
  border: 1px solid var(--kraft);
  box-shadow: 2px 2px 0 var(--kraft-light), 3px 3px 8px rgba(0, 0, 0, 0.1);
  transform: rotate(-1deg);
  position: relative;
}

.code-snippet-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: repeating-linear-gradient(
    90deg,
    var(--terracotta-light) 0px,
    var(--terracotta-light) 2px,
    transparent 2px,
    transparent 4px
  );
}

.code-snippet-card__title {
  font-family: var(--font-typewriter);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faded);
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px dashed var(--kraft);
}

.code-snippet-card__code {
  white-space: pre-wrap;
  color: var(--ink-brown);
}

.code-snippet-card__code .keyword {
  color: var(--terracotta);
}

.code-snippet-card__code .comment {
  color: var(--ink-light);
  font-style: italic;
}

/* Napkin Sketch - Idea sketched on napkin */
.napkin-sketch {
  background: #fefefe;
  padding: 1.5rem;
  min-width: 180px;
  max-width: 240px;
  position: relative;
  box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.08);
  transform: rotate(2deg);
}

.napkin-sketch::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(200, 200, 200, 0.3);
}

.napkin-sketch::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(220, 220, 220, 0.15) 3px,
    rgba(220, 220, 220, 0.15) 4px
  );
  pointer-events: none;
}

.napkin-sketch__content {
  position: relative;
  z-index: 1;
  font-family: var(--font-handwritten);
  font-size: 1.1rem;
  color: var(--ink-brown);
  text-align: center;
}

.napkin-sketch__drawing {
  margin: 1rem 0;
  padding: 0.5rem;
  border: 2px solid var(--ink-light);
  border-radius: 50%;
  display: inline-block;
}

.napkin-sketch__arrow {
  font-size: 1.5rem;
  color: var(--ink-light);
}

.napkin-sketch__label {
  font-size: 0.9rem;
  color: var(--ink-faded);
  margin-top: 0.5rem;
}

/* Receipt Slip - For financial/spending posts */
.receipt-slip {
  background: #fffef8;
  padding: 1rem;
  min-width: 160px;
  max-width: 200px;
  font-family: var(--font-typewriter);
  font-size: 0.75rem;
  line-height: 1.8;
  color: var(--ink-faded);
  border: 1px dashed var(--kraft-light);
  position: relative;
  box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.06);
}

.receipt-slip::before,
.receipt-slip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(
      135deg,
      transparent 33.33%,
      var(--paper-warm) 33.33%,
      var(--paper-warm) 66.66%,
      transparent 66.66%
    ),
    linear-gradient(
      225deg,
      transparent 33.33%,
      var(--paper-warm) 33.33%,
      var(--paper-warm) 66.66%,
      transparent 66.66%
    );
  background-size: 8px 8px;
}

.receipt-slip::before {
  top: -8px;
}

.receipt-slip::after {
  bottom: -8px;
}

.receipt-slip__header {
  text-align: center;
  font-size: 0.85rem;
  font-weight: bold;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--ink-light);
  color: var(--ink-brown);
}

.receipt-slip__line {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}

.receipt-slip__line--total {
  border-top: 1px solid var(--ink-light);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  font-weight: bold;
  color: var(--ink-brown);
}

.receipt-slip__footer {
  text-align: center;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--ink-light);
  font-size: 0.65rem;
  color: var(--ink-light);
}

/* Spreadsheet Scrap - Piece of graph paper with cells */
.spreadsheet-scrap {
  background: linear-gradient(var(--sage-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--sage-soft) 1px, transparent 1px), var(--paper-cream);
  background-size: 24px 20px;
  padding: 0.5rem;
  min-width: 180px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
  transform: rotate(-2deg);
  position: relative;
}

.spreadsheet-scrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 22px;
  background: var(--sage-soft);
  border-bottom: 1px solid var(--sage);
}

.spreadsheet-scrap__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-typewriter);
  font-size: 0.7rem;
  position: relative;
  z-index: 1;
}

.spreadsheet-scrap__table th {
  background: var(--sage-soft);
  padding: 4px 8px;
  text-align: center;
  font-weight: normal;
  color: var(--ink-faded);
  border: 1px solid var(--sage);
}

.spreadsheet-scrap__table td {
  padding: 4px 8px;
  text-align: right;
  border: 1px solid rgba(139, 154, 123, 0.3);
  color: var(--ink-brown);
  background: rgba(255, 255, 255, 0.5);
}

.spreadsheet-scrap__table td.label {
  text-align: left;
  font-family: var(--font-handwritten-alt);
  font-size: 0.85rem;
}

.spreadsheet-scrap__table td.formula {
  color: var(--sage);
  font-style: italic;
}

.spreadsheet-scrap__table td.highlight {
  background: var(--mustard-soft);
  font-weight: bold;
}

/* Business Card - Minimalist card decoration */
.business-card {
  background: var(--paper-cream);
  width: 200px;
  height: 110px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.business-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--terracotta);
}

.business-card--sage::before {
  background: var(--sage);
}
.business-card--mustard::before {
  background: var(--mustard);
}
.business-card--lavender::before {
  background: var(--lavender);
}

.business-card__name {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-black);
  letter-spacing: 0.02em;
}

.business-card__title {
  font-family: var(--font-typewriter);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faded);
  margin-top: 2px;
}

.business-card__details {
  font-family: var(--font-typewriter);
  font-size: 0.6rem;
  color: var(--ink-light);
  line-height: 1.6;
}

.business-card__logo {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  font-family: var(--font-handwritten);
  font-size: 1.5rem;
  color: var(--kraft);
  opacity: 0.5;
}

/* Dark/inverted business card variant */
.business-card--dark {
  background: var(--ink-black);
}

.business-card--dark .business-card__name {
  color: var(--paper-cream);
}

.business-card--dark .business-card__title {
  color: var(--kraft-light);
}

.business-card--dark .business-card__details {
  color: var(--kraft);
}

.business-card--dark .business-card__logo {
  color: var(--ink-faded);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 36: Masking Tape
   More muted, translucent tape (different from washi)
   ═══════════════════════════════════════════════════════════════════════════ */

.masking-tape {
  position: absolute;
  height: 24px;
  width: 100px;
  background: rgba(245, 235, 220, 0.85);
  opacity: 0.9;
  z-index: 10;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.masking-tape--vertical {
  width: 24px;
  height: 100px;
}

/* Torn edges */
.masking-tape::before,
.masking-tape::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  background: inherit;
}

.masking-tape::before {
  left: -3px;
  clip-path: polygon(
    100% 0,
    100% 15%,
    50% 20%,
    100% 30%,
    50% 45%,
    100% 55%,
    50% 65%,
    100% 80%,
    50% 90%,
    100% 100%,
    0 100%,
    0 0
  );
}

.masking-tape::after {
  right: -3px;
  clip-path: polygon(
    0 0,
    0 15%,
    50% 25%,
    0 35%,
    50% 50%,
    0 60%,
    50% 75%,
    0 85%,
    50% 95%,
    0 100%,
    100% 100%,
    100% 0
  );
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 37: Scribble Out / Correction
   Text that looks scribbled/crossed out
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hand-drawn strikethrough - like pen strokes through text */
.scribble-out {
  position: relative;
  display: inline-block;
  color: var(--ink-light);
}

.scribble-out::before,
.scribble-out::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  height: 2px;
  background: var(--ink-brown);
  border-radius: 1px;
}

.scribble-out::before {
  top: 45%;
  transform: rotate(-2deg);
}

.scribble-out::after {
  top: 55%;
  transform: rotate(1deg);
}

/* Single line variant */
.scribble-out--single::after {
  display: none;
}

.scribble-out--single::before {
  top: 50%;
  transform: rotate(-1.5deg);
}

/* Red pen variant */
.scribble-out--red::before,
.scribble-out--red::after {
  background: var(--terracotta);
}

/* Diagonal cross variant */
.scribble-out--cross::before {
  top: 30%;
  transform: rotate(12deg);
  transform-origin: left center;
}

.scribble-out--cross::after {
  top: 70%;
  transform: rotate(-12deg);
  transform-origin: left center;
}

.scribble-out--basic {
  text-decoration: line-through;
  color: var(--ink-faded);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 38: Mini Calendar
   Small calendar widget for date context
   ═══════════════════════════════════════════════════════════════════════════ */

.mini-calendar {
  display: inline-block;
  background: var(--paper-cream);
  border: 1px solid var(--kraft);
  font-family: var(--font-typewriter);
  font-size: 0.6rem;
  box-shadow: var(--shadow-paper);
  overflow: hidden;
}

.mini-calendar__header {
  background: var(--terracotta);
  color: var(--paper-cream);
  padding: 4px 8px;
  text-align: center;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.mini-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  padding: 4px;
}

.mini-calendar__day {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
}

.mini-calendar__day--today {
  background: var(--mustard);
  border-radius: 50%;
  color: var(--ink-black);
  font-weight: bold;
}

.mini-calendar__day--marked {
  position: relative;
}

.mini-calendar__day--marked::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--terracotta);
  border-radius: 50%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT 40: Scattered Observations
   Small notes that can be placed anywhere on the page
   ═══════════════════════════════════════════════════════════════════════════ */

.observation {
  position: absolute;
  font-family: var(--font-handwritten);
  font-size: 0.95rem;
  color: var(--ink-faded);
  max-width: 160px;
  line-height: 1.3;
  z-index: 5;
}

.observation--ink {
  color: var(--ink-brown);
}

.observation--terracotta {
  color: var(--terracotta);
}

.observation--small {
  font-size: 0.85rem;
  max-width: 120px;
}

/* With arrow pointing */
.observation--arrow-right::after {
  content: ' →';
}

.observation--arrow-left::before {
  content: '← ';
}

.observation--arrow-down::after {
  content: ' ↓';
  display: block;
  text-align: center;
}

/* Circled observation */
.observation--circled {
  padding: 8px 12px;
  border: 2px solid var(--ink-faded);
  border-radius: 50% 45% 55% 48% / 45% 50% 48% 52%;
}

/* With a small doodle star */
.observation--starred::before {
  content: '✦ ';
  color: var(--mustard);
}

/* Taped observation - like a small piece of paper */
.observation-taped {
  background: var(--paper-cream);
  padding: 12px 16px;
  font-family: var(--font-handwritten);
  font-size: 0.95rem;
  color: var(--ink-brown);
  max-width: 180px;
  line-height: 1.4;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
  position: absolute;
  z-index: 10;
}

.observation-taped::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 50px;
  height: 18px;
  background: var(--mustard);
  opacity: 0.6;
}

/* Scribbled in margin style */
.margin-scribble {
  font-family: var(--font-handwritten);
  font-size: 0.9rem;
  color: var(--ink-faded);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  position: absolute;
  letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

.mt-sm {
  margin-top: var(--space-sm);
}
.mt-md {
  margin-top: var(--space-md);
}
.mt-lg {
  margin-top: var(--space-lg);
}
.mt-xl {
  margin-top: var(--space-xl);
}
.mt-2xl {
  margin-top: var(--space-2xl);
}

.mb-sm {
  margin-bottom: var(--space-sm);
}
.mb-md {
  margin-bottom: var(--space-md);
}
.mb-lg {
  margin-bottom: var(--space-lg);
}
.mb-xl {
  margin-bottom: var(--space-xl);
}
.mb-2xl {
  margin-bottom: var(--space-2xl);
}

.rotate-left {
  transform: rotate(-2deg);
}
.rotate-right {
  transform: rotate(2deg);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(2deg);
  }
}

.animate-fade-in {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fade-in-delay-1 {
  animation-delay: 0.1s;
  opacity: 0;
}
.animate-fade-in-delay-2 {
  animation-delay: 0.2s;
  opacity: 0;
}
.animate-fade-in-delay-3 {
  animation-delay: 0.3s;
  opacity: 0;
}
.animate-fade-in-delay-4 {
  animation-delay: 0.4s;
  opacity: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE RULES
   Every component above is drawn for a wide page. The rules in this section
   are what make the same markup hold on a phone, a tablet and an ultrawide
   monitor, so an article built from these components is responsive without
   any work of its own. The written version is in styleguide.html, under
   "Responsive Rules".

   Breakpoints, max-width unless stated:
     1100px  nothing fits beside the article column: margin notes join the flow
      900px  tablets: tighter page gutters
      768px  the root type steps down a point
      600px  phones: one column everywhere, floats and side notes stack
     1800px  and up, ultrawide: the type steps up, the columns stay put

   Rules for new articles:
     1. No fixed widths on content. Use max-width, %, min() or clamp().
     2. Side by side layouts use .feature-split or .article-grid. Never write
        grid-template-columns or float in a style attribute.
     3. Absolutely positioned pieces (.margin-note, .observation-taped, stains,
        tape) are decoration. The page must read with them inlined or gone.
     4. A style attribute on a component cannot be overridden from here. If a
        component needs a one-off, add a modifier class in this file instead.
     5. Check every page at 360, 768, 1024, 1440 and 2560 wide before it ships.
   ═══════════════════════════════════════════════════════════════════════════ */

/* A two column feature block, a photo beside its text, that becomes one column on phones */
.feature-split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-xl);
  align-items: center;
}

/* A business card floated into the article text, with its own tilt */
.business-card--aside {
  float: right;
  transform: rotate(5deg);
  overflow: visible;
}

/* A photo frame set on its own line, half the column wide */
.photo-frame--inset {
  display: block;
  margin: var(--space-lg) auto;
  width: 50%;
}

/* Lined paper with a wider left margin, so to-do items sit clear of the red line */
.lined-paper--indent {
  padding: var(--space-lg) var(--space-lg) var(--space-lg) 5rem;
}

@media (min-width: 1800px) {
  html {
    font-size: 17px;
  }
}

@media (min-width: 2400px) {
  html {
    font-size: 18px;
  }
}

@media (max-width: 1100px) {
  /* the article column is 720px and the note hangs 180px outside it, so below this
     width it has nowhere to go: it joins the flow as a handwritten aside instead */
  .margin-note,
  .margin-note--left {
    position: static;
    display: block;
    width: auto;
    max-width: 36ch;
    margin: var(--space-xs) 0 var(--space-sm);
    padding: 0 var(--space-sm);
    transform: rotate(-1deg);
  }

  .margin-note::before,
  .margin-note--arrow::after {
    display: none;
  }

  /* inside a to-do line the aside drops under the text rather than beside it */
  .todo-item {
    flex-wrap: wrap;
  }

  .todo-item > span {
    flex: 1 1 0;
    min-width: 0;
  }

  .todo-item .margin-note {
    flex-basis: 100%;
    max-width: none;
    margin-left: calc(20px + var(--space-sm));
  }
}

@media (max-width: 900px) {
  .container {
    padding: 0 var(--space-md);
  }

  .article {
    padding: var(--space-xl) var(--space-md);
  }
}

@media (max-width: 768px) {
  html {
    font-size: 15px;
  }

  .handwritten--xl {
    font-size: 2.5rem;
  }

  .article-grid {
    grid-template-columns: 1fr;
  }

  .article-grid > *:nth-child(3n + 2) {
    transform: none;
  }

  .site-nav__list {
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .sticky-note {
    width: 100%;
    min-height: auto;
  }
}

@media (max-width: 600px) {
  .site-header {
    padding: var(--space-xl) 0;
  }

  .paper-card {
    padding: var(--space-lg);
  }

  .washi-tape {
    width: 80px;
  }

  .feature-split {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .business-card--aside {
    float: none;
    margin: var(--space-lg) auto;
  }

  .photo-frame--inset {
    width: min(100%, 320px);
  }

  /* the red margin line and everything to its right move in */
  .lined-paper,
  .lined-paper--indent {
    padding-left: 3rem;
  }

  .lined-paper::before {
    left: 34px;
  }

  .todo-item .margin-note {
    margin-left: 0;
  }

  /* a taped note has no free margin to sit in, so it sits above the card it annotates */
  .observation-taped {
    position: static;
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto var(--space-md);
  }

  .quote-note {
    padding: var(--space-md) var(--space-lg);
    font-size: 1.25rem;
  }

  .article__content h2 {
    font-size: 1.7rem;
  }
}