/* ==================================================
   RESET & BASE
================================================== */

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

html {
  font-size: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.6;
  background-color: var(--bg);
  color: var(--text);
}

/* ==================================================
   BASE THEME TOKENS (DEFAULT)
================================================== */

body {
  --bg: #f7f7f8;
  --surface: #ffffff;
  --text: #1a1a1a;
  --muted-text: #555;
  --border: #dcdcdc;

  --primary: #005fcc;
  --primary-hover: #004bb0;

  --focus: #ffbf47;

  --link: var(--primary);
  --link-hover: var(--primary-hover);

  /* Caption tokens */
  --caption-text: var(--muted-text);
  --caption-bg: color-mix(in srgb, var(--primary) 6%, var(--surface));
  --caption-border: color-mix(in srgb, var(--primary) 25%, var(--border));
}

/* ==================================================
   GRID / LAYOUT
================================================== */

.row {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
}

.columns {
  width: 100%;
  padding: 0.75rem;
}

@media (min-width: 768px) {
  .four.columns {
    width: 33.3333%;
  }

  .eight.columns {
    width: 66.6667%;
  }

  .twelve.columns {
    width: 100%;
  }
}

/* ==================================================
   PANELS
================================================== */

.panel {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1.25rem;
}

/* ==================================================
   TYPOGRAPHY
================================================== */

h1,
h2 {
  line-height: 1.25;
  margin-top: 0;
}

h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

h2 {
  font-size: 1.25rem;
}

p {
  max-width: 70ch;
}

#dayDate {
  color: var(--muted-text);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

/* ==================================================
   LINKS & FOCUS
================================================== */

a {
  color: var(--link);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--link-hover);
}

a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* ==================================================
   NAVIGATION
================================================== */

#main-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

#main-nav li {
  margin-bottom: 0.5rem;
}

#main-nav a {
  display: block;
  padding: 0.5rem;
  border-radius: 0.375rem;
}

#main-nav a:hover,
#main-nav a:focus-visible {
  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
}

/* ==================================================
   NEXT LINK
================================================== */

#nextLink {
  margin-top: 2rem;
}

#nextLink a {
  font-weight: 600;
}

/* ==================================================
   IMAGE + CAPTION PARAGRAPHS
================================================== */

p:has(> img:first-child) {
  margin: 1.5rem 0;
  padding: 0.75rem;
  background-color: var(--caption-bg);
  border: 1px solid var(--caption-border);
  border-radius: 0.5rem;
  color: var(--caption-text);
  font-size: 0.95rem;
  text-align: center;
}

p:has(> img:first-child) > img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 0.5rem;
  border-radius: 0.375rem;
}

p:has(> img:first-child) > br {
  display: none;
}

/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}