/* Import Design System */
@import url('/design-system.css');

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--body-3-font-family);
  line-height: var(--body-3-line-height);
  color: var(--color-text-primary);
  background: var(--color-bg);
  font-size: var(--body-3-font-size);
  font-weight: var(--body-3-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--duration-base) var(--easing-standard), color var(--duration-base) var(--easing-standard);
}

::selection {
  background: rgba(252, 81, 19, 0.22);
}

/* Header */
.header {
  width: 100%;
  padding: var(--spacing-6) 0 var(--spacing-4);
  position: relative;
}

.header-content {
  max-width: var(--grid-container-width);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding-bottom: var(--spacing-3);
}

.logo-btn {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  font-weight: var(--body-3-weight-regular);
  line-height: var(--body-3-line-height);
  letter-spacing: var(--body-3-letter-spacing);
  color: var(--color-text-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: var(--transition-color);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.logo-btn:hover {
  color: var(--accent);
}

[data-theme="dark"] .logo-btn:hover {
  color: var(--accent);
}

[data-theme="dark"] .logo-btn {
  color: var(--color-text-primary);
}

.logo-star {
  width: var(--icon-lg);
  height: var(--icon-lg);
  flex-shrink: 0;
}

.main-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--spacing-4);
  align-items: center;
}

.nav-link {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  font-weight: var(--label-heading-weight-regular);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: var(--transition-color);
  white-space: nowrap;
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-md);
}

.nav-link:hover {
  color: var(--color-text-primary);
  background: var(--color-surface);
}

.nav-link.active {
  color: var(--accent);
  background: transparent;
}

[data-theme="dark"] .nav-link:hover {
  color: var(--color-text-primary);
  background: var(--color-surface);
}

[data-theme="dark"] .nav-link.active {
  color: var(--accent);
}

[data-theme="dark"] .nav-link {
  color: var(--color-text-secondary);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-2);
  min-width: var(--size-touch-target);
  min-height: var(--size-touch-target);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--size-nav-toggle-gap);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  transition: var(--transition-color);
}

.nav-toggle:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-muted);
}

[data-theme="dark"] .nav-toggle:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-muted);
}

.nav-toggle-icon {
  display: block;
  width: var(--size-nav-icon-width);
  height: var(--size-nav-icon-height);
  background: currentColor;
  border-radius: var(--size-nav-icon-radius);
  transition: transform var(--duration-fast) var(--easing-standard), opacity var(--duration-fast) var(--easing-standard);
}

.nav-toggle-icon:nth-child(2) { opacity: 1; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon:nth-child(1) {
  transform: translateY(var(--size-nav-icon-shift)) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon:nth-child(3) {
  transform: translateY(calc(var(--size-nav-icon-shift) * -1)) rotate(-45deg);
}

.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  gap: var(--spacing-1);
  align-items: center;
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  font-weight: var(--label-heading-weight-regular);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-md);
  transition: var(--transition-color);
}

.theme-label {
  transition: color var(--duration-base) var(--easing-standard);
}

.theme-label.active {
  color: var(--color-text-primary);
}

.theme-label.inactive {
  color: var(--color-text-secondary);
}

.theme-toggle:hover .theme-label.inactive {
  color: var(--color-text-primary);
}

[data-theme="dark"] .theme-label.active {
  color: var(--color-text-primary);
}

[data-theme="dark"] .theme-label.inactive {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .theme-toggle:hover .theme-label.inactive {
  color: var(--color-text-primary);
}

/* Focus visible for keyboard and touch */
:is(
  .nav-link,
  .logo-btn,
  .theme-toggle,
  .filter-btn,
  .glossary-filter-btn,
  .glossary-term,
  .article-nav-btn,
  .projects-overview-next,
  .writing-entry,
  .contact-value,
  .contact-item-link,
  .cv-link,
  .cv-close,
  .nav-toggle
):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

@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;
  }
}

/* Main Content */
.main-content {
  max-width: var(--grid-container-width);
  margin: 0 auto;
  padding: var(--page-padding-top) var(--grid-margin) var(--page-padding-bottom);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
  row-gap: var(--section-gap-large);
  grid-auto-rows: min-content;
}

/* Hero Section - Centered, spans full grid width */
.hero-section {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  width: 100%;
}

.hero-section-inner {
  width: var(--content-width-medium);
  max-width: 100%;
}

.hero-text {
  font-family: var(--body-2-font-family);
  font-size: var(--body-2-font-size);
  line-height: var(--body-2-line-height);
  letter-spacing: var(--body-2-letter-spacing);
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  width: 100%;
}

.hero-text p {
  margin: 0;
}

.hero-text p:first-child {
  font-size: var(--body-1-font-size);
  line-height: var(--body-1-line-height);
}

/* Contact Section - Centered, matches hero width */
.contact-section {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  width: 100%;
}

.contact-section-inner {
  width: var(--content-width-medium);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.section-heading {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  font-weight: var(--label-heading-weight-regular);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-secondary);
  margin: 0;
  text-transform: uppercase;
}

.contact-description {
  font-family: var(--body-2-font-family);
  font-size: var(--body-2-font-size);
  font-weight: var(--body-2-weight-regular);
  line-height: var(--body-2-line-height);
  letter-spacing: var(--body-2-letter-spacing);
  color: var(--color-text-primary);
  margin: 0;
}

.contact-links-row {
  display: flex;
  gap: var(--spacing-8);
  align-items: center;
}

.contact-item {
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
}

.contact-label {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  font-weight: var(--body-3-weight-regular);
  line-height: var(--body-3-line-height);
  color: var(--color-text-primary);
}

.contact-value {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-3-font-size);
  font-weight: var(--label-3-weight-regular);
  line-height: var(--label-3-line-height);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: var(--transition-color);
}

.contact-value:hover {
  color: var(--accent);
}

.contact-item-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  font-weight: var(--body-3-weight-regular);
  line-height: var(--body-3-line-height);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: var(--transition-color);
}

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

.link-icon {
  font-size: var(--icon-sm);
  display: inline-block;
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex-shrink: 0;
}

/* Projects Section - Scroll rail + sticky overview */
.projects-section {
  grid-column: 1 / -1;
  width: 100%;
  padding-top: var(--section-gap-large);
}

.projects-navigator {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--size-project-nav-sidebar-width);
  gap: var(--size-project-nav-split-gap);
  align-items: start;
}

.projects-rail {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

.project-flow {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  padding-bottom: var(--spacing-10);
  border-bottom: var(--border);
}

.project-flow:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.project-flow-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.project-flow-title {
  font-family: var(--body-1-font-family);
  font-size: var(--body-1-font-size);
  font-weight: var(--body-1-weight-regular);
  line-height: var(--body-1-line-height);
  color: var(--color-text-primary);
  margin: 0;
}

.project-flow.is-active .project-flow-title {
  color: var(--accent);
}

.project-flow-subtitle {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  color: var(--color-text-secondary);
  margin: 0;
}

.project-flow-meta {
  display: none;
}

.project-flow-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.project-flow-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.project-flow-media {
  width: 100%;
  aspect-ratio: var(--size-project-nav-card-media-aspect);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-muted);
}

.project-flow-media-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-flow-caption {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-family: var(--label-heading-font-family);
  font-size: 10px;
  line-height: 14px;
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.project-flow-caption span:last-child {
  white-space: normal;
  color: var(--color-text-primary);
  font-family: var(--body-3-font-family);
  font-size: 10px;
  line-height: 14px;
  flex: 1;
  min-width: 0;
}

.project-flow-text-block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.project-flow-text {
  font-family: var(--body-3-font-family);
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text-primary);
  margin: 0;
}

.project-flow-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.project-flow-list li {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  color: var(--color-text-primary);
}

.projects-overview {
  position: sticky;
  top: var(--size-project-nav-sticky-top);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.projects-overview-inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-3);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.projects-overview-media {
  aspect-ratio: var(--size-project-nav-overview-media-aspect);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-muted);
}

.projects-overview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.projects-overview-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.projects-overview-file {
  display: none;
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-secondary);
  margin: 0;
  text-transform: uppercase;
}

.projects-overview-title {
  font-family: var(--body-2-font-family);
  font-size: var(--body-2-font-size);
  line-height: var(--body-2-line-height);
  font-weight: var(--body-2-weight-regular);
  color: var(--color-text-primary);
  margin: 0;
}

.projects-overview-about {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.projects-overview-about-text {
  font-family: var(--body-3-font-family);
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text-primary);
  margin: 0;
}

.projects-overview-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4);
}

.projects-overview-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.projects-overview-summary-list li,
.projects-overview-fact-value {
  font-family: var(--body-3-font-family);
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text-primary);
  margin: 0;
}

.projects-overview-facts {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.projects-overview-fact {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.projects-overview-next {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-2);
  background: none;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  cursor: pointer;
  transition: var(--transition-color), var(--transition-transform);
}

.projects-overview-next:hover {
  color: var(--accent);
}

.projects-overview-next-arrow {
  display: inline-flex;
  width: var(--icon-sm);
  justify-content: center;
}

.project-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-detail-title {
  font-family: var(--body-1-font-family);
  font-size: var(--body-1-font-size);
  font-weight: var(--body-1-weight-regular);
  line-height: var(--body-1-line-height);
  color: var(--color-text-primary);
}

.project-detail-close {
  background: none;
  border: none;
  font-size: var(--icon-lg);
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: var(--spacing-1);
  line-height: var(--label-heading-line-height);
  transition: var(--transition-color);
}

.project-detail-close:hover {
  color: var(--color-text-primary);
}

.project-detail-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-8);
}

.project-detail-about {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.project-detail-meta {
  display: flex;
  gap: var(--spacing-6);
}

.project-detail-meta-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

/* Shared detail styles */
.info-heading {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  font-weight: var(--label-heading-weight-regular);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-secondary);
  margin: 0;
  text-transform: uppercase;
}

.info-text {
  font-family: var(--label-3-font-family);
  font-size: var(--label-3-font-size);
  font-weight: var(--label-3-weight-regular);
  line-height: var(--label-3-line-height);
  letter-spacing: var(--label-3-letter-spacing);
  color: var(--color-text-primary);
  margin: 0;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-4);
}

.meta-item:last-child {
  margin-bottom: 0;
}

.meta-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.meta-list li {
  font-family: var(--label-3-font-family);
  font-size: var(--label-3-font-size);
  font-weight: var(--label-3-weight-regular);
  line-height: var(--label-3-line-height);
  letter-spacing: var(--label-3-letter-spacing);
  color: var(--color-text-primary);
}

/* ============================================
   CV Overlay Modal
   ============================================ */

.cv-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--spacing-6);
  overflow-y: auto;
}

.cv-overlay[hidden] {
  display: none;
}

[data-theme="dark"] .cv-overlay {
  background: var(--color-overlay-strong);
}

.cv-modal {
  background: var(--color-bg);
  max-width: var(--size-modal-max-width);
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  padding: var(--spacing-12);
  box-shadow: var(--shadow-modal);
}

[data-theme="dark"] .cv-modal {
  background: var(--color-bg);
  box-shadow: var(--shadow-modal-dark);
}

.cv-close {
  position: absolute;
  top: var(--spacing-6);
  right: var(--spacing-6);
  background: none;
  border: none;
  font-size: var(--size-close-icon);
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: var(--transition-color);
  width: var(--size-touch-target);
  height: var(--size-touch-target);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cv-close:hover {
  color: var(--color-text-primary);
}

.cv-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.cv-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding-bottom: var(--spacing-6);
  border-bottom: var(--border);
}

.cv-name {
  font-family: var(--body-1-font-family);
  font-size: var(--display-lg-font-size);
  line-height: 1.2;
  font-weight: var(--body-1-weight-regular);
  color: var(--accent);
  margin: 0;
}

[data-theme="dark"] .cv-name {
  color: var(--accent);
}

.cv-contact-info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  color: var(--color-text-secondary);
}

.cv-divider {
  color: var(--color-text-secondary);
}

.cv-phone,
.cv-location {
  color: var(--color-text-secondary);
}

.cv-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.cv-link {
  font-family: var(--label-3-font-family);
  font-size: var(--label-3-font-size);
  line-height: var(--label-3-line-height);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: var(--transition-color);
}

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

.cv-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.cv-section-title {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  font-weight: var(--label-heading-weight-regular);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--accent);
  margin: 0;
}

[data-theme="dark"] .cv-section-title {
  color: var(--accent);
}

.cv-entry {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.cv-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-4);
}

.cv-role {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  font-weight: var(--body-3-weight-regular);
  line-height: var(--body-3-line-height);
  color: var(--color-text-primary);
  margin: 0;
}

.cv-date {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  line-height: var(--label-heading-line-height);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.cv-company {
  font-family: var(--label-3-font-family);
  font-size: var(--label-3-font-size);
  line-height: var(--label-3-line-height);
  color: var(--color-text-secondary);
  margin: 0;
}

.cv-description {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  color: var(--color-text-primary);
  margin: 0;
}

.cv-skills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.cv-skill {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-secondary);
  padding: var(--spacing-1) var(--spacing-2);
  border: var(--border);
  border-radius: var(--radius-md);
}

.cv-languages {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.cv-language-item {
  display: flex;
  justify-content: space-between;
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
}

.cv-language {
  color: var(--color-text-primary);
}

.cv-proficiency {
  color: var(--color-text-secondary);
}

/* ============================================
   Responsive Design
   Breakpoints: 1280px (tablet landscape), 
                768px (tablet portrait), 
                480px (mobile)
   ============================================ */

/* --- Tablet Landscape / Small Desktop (<=1280px) --- */
@media (max-width: 1280px) {
  .main-content {
    padding: var(--spacing-12) var(--grid-margin) var(--page-padding-bottom);
  }

  .projects-navigator {
    grid-template-columns: minmax(0, 1fr) var(--size-project-nav-sidebar-width-tablet);
  }

  .projects-overview {
    top: calc(var(--size-project-nav-sticky-top) - var(--spacing-1));
  }
}

/* --- Tablet Portrait (<=768px) --- */
@media (max-width: 768px) {
  :root {
    --grid-margin: var(--spacing-4);
  }

  /* Align header with main content: same horizontal inset */
  .header {
    padding-left: var(--grid-margin);
    padding-right: var(--grid-margin);
  }

  .header-content {
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-2);
  }

  .main-content {
    row-gap: var(--section-gap);
  }

  .projects-section {
    padding-top: var(--section-gap);
  }

  /* Nav in flow so it doesn't overlap logo/theme on narrow widths */
  .main-nav {
    position: static;
    transform: none;
    flex: 1;
    min-width: 0;
    justify-content: center;
    gap: var(--spacing-1);
    padding: var(--spacing-2) 0;
  }

  /* Touch targets: nav, theme, logo */
  .nav-link {
    min-height: var(--size-touch-target);
    min-width: var(--size-touch-target);
    flex-shrink: 0;
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .theme-toggle {
    min-height: var(--size-touch-target);
    min-width: var(--size-touch-target);
    padding: var(--spacing-2) var(--spacing-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .logo-btn {
    min-height: var(--size-touch-target);
    min-width: var(--size-touch-target);
    padding: var(--spacing-2) var(--spacing-2);
    display: inline-flex;
    align-items: center;
  }

  .info-columns {
    flex-direction: column;
    gap: var(--spacing-6);
  }

  .info-column {
    width: 100%;
  }

  .info-column-wide {
    width: 100%;
  }

  .projects-navigator {
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
  }

  .projects-overview {
    position: static;
    order: -1;
  }

  .projects-overview-inner {
    gap: var(--spacing-4);
  }

  .projects-overview-meta {
    gap: var(--spacing-3);
  }

  .projects-overview-next {
    align-self: flex-start;
  }

  .projects-rail {
    gap: var(--spacing-6);
  }

  .project-flow {
    gap: var(--spacing-4);
    padding-bottom: var(--spacing-8);
  }

  .contact-links-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-4);
  }

  /* Detail panel: stack vertically */
  .project-detail-body {
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
  }

  .article-nav {
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
  }

  .article-nav-btn {
    padding: var(--spacing-4) 0;
  }

  .project-image-grid-2,
  .project-image-grid-3 {
    grid-template-columns: 1fr;
  }

  /* Improve touch targets for mobile-ish screens */
  .column-list {
    gap: var(--spacing-2);
  }

  .column-link {
    padding: var(--spacing-2) 0;
    min-height: var(--size-touch-target);
    display: inline-flex;
    align-items: center;
  }
}

/* --- Mobile (<=480px) --- */
@media (max-width: 480px) {
  :root {
    --grid-margin: var(--spacing-4);
    --grid-gutter: var(--spacing-2);
  }

  .main-content {
    padding: var(--spacing-4) var(--grid-margin) var(--page-padding-bottom);
    row-gap: var(--spacing-8);
  }

  .header {
    padding: var(--spacing-4) var(--grid-margin);
  }

  .header-content {
    padding-left: 0;
    padding-right: 0;
  }

  .logo-btn {
    min-height: var(--size-touch-target);
    min-width: var(--size-touch-target);
    padding: var(--spacing-2);
  }

  .theme-toggle {
    min-height: var(--size-touch-target);
    min-width: var(--size-touch-target);
    padding: var(--spacing-2) var(--spacing-4);
  }

  .hero-text {
    font-size: var(--body-2-font-size);
    line-height: var(--body-2-line-height);
  }

  /* Minimum 16px for main content readability */
  .project-flow-title,
  .writing-title,
  .writing-excerpt,
  .glossary-term-text {
    font-size: var(--body-2-font-size);
    line-height: var(--body-2-line-height);
  }

  .article-body p,
  .glossary-definition p {
    font-size: var(--body-2-font-size);
    line-height: var(--body-2-line-height);
  }

  /* Larger touch targets on mobile */
  .column-link {
    padding: var(--spacing-2) 0;
    font-size: var(--label-2-font-size);
    line-height: var(--label-2-line-height);
  }

  .column-heading {
    font-size: var(--label-heading-sm-font-size);
    line-height: var(--label-heading-sm-line-height);
  }

  .contact-description {
    font-size: var(--label-2-font-size);
    line-height: var(--label-2-line-height);
  }

  .project-detail-meta {
    flex-direction: column;
    gap: var(--spacing-4);
  }

  /* CV Modal responsive */
  .cv-modal {
    padding: var(--spacing-8) var(--spacing-6);
  }

  .cv-close {
    top: var(--spacing-4);
    right: var(--spacing-4);
  }

  .cv-name {
    font-size: var(--display-sm-font-size);
  }

  .cv-entry-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-1);
  }

  /* Mobile: nav in one row, no scroll – as compact as possible while tappable */
  .header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-bg);
  }

  [data-theme="dark"] .header {
    background: var(--color-bg);
  }

  .header-content {
    flex-wrap: nowrap;
    gap: var(--spacing-2);
  }

  .main-nav {
    position: static;
    transform: none;
    flex: 1;
    min-width: 0;
    justify-content: center;
    gap: var(--spacing-1);
    padding: var(--spacing-2) 0;
  }

  .nav-link {
    flex-shrink: 0;
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
  }

  /* Article/Project nav responsive */
  .article-nav {
    grid-template-columns: 1fr;
  }

  .article-nav-btn {
    min-height: var(--size-touch-target);
    padding: var(--spacing-4) 0;
  }

  .project-image-grid-2,
  .project-image-grid-3 {
    grid-template-columns: 1fr;
  }

  .project-detail-page-header {
    max-width: 100%;
  }

  /* Writings list touch targets */
  .writing-entry {
    padding: var(--spacing-4) 0;
    min-height: var(--size-touch-target);
  }

  /* Glossary term touch targets */
  .glossary-term {
    min-height: var(--size-touch-target);
    padding: var(--spacing-4) 0;
  }
}

/* --- Tablet/Mobile nav collapse: hamburger menu (nav + theme inside) --- */
@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
    margin-left: auto;
  }

  /* Theme only inside dropdown, not in header row */
  .theme-toggle {
    display: none;
  }

  /* Dark overlay when menu open (same as CV popup) */
  .nav-overlay {
    display: none;
    position: fixed;
    cursor: pointer;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-overlay);
    z-index: 40;
  }

  [data-theme="dark"] .nav-overlay {
    background: var(--color-overlay-strong);
  }

  .header.nav-open .nav-overlay:not([hidden]) {
    display: block;
  }

  /* Header content (logo + close) above overlay; close icon stays visible and usable */
  .header.nav-open .header-content {
    position: relative;
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "logo hamburger"
      "nav nav"
      "theme theme";
    background: var(--color-bg);
  }

  [data-theme="dark"] .header.nav-open .header-content {
    background: var(--color-bg);
  }

  .main-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--spacing-2) var(--grid-margin) var(--spacing-4);
    background: var(--color-bg);
    border: var(--border);
    border-top: none;
  }

  [data-theme="dark"] .main-nav {
    background: var(--color-bg);
    border-color: var(--color-border);
  }

  .header.nav-open .main-nav {
    display: flex;
    grid-area: nav;
    align-items: stretch;
  }

  .header.nav-open .logo-btn {
    grid-area: logo;
  }

  .header.nav-open .nav-toggle {
    grid-area: hamburger;
  }

  .header.nav-open .theme-toggle {
    display: flex;
    grid-area: theme;
    justify-content: flex-start;
    align-items: center;
    padding: var(--spacing-4) var(--grid-margin);
    background: var(--color-bg);
    border: var(--border);
    border-top: none;
  }

  [data-theme="dark"] .header.nav-open .theme-toggle {
    background: var(--color-bg);
    border-color: var(--color-border);
  }

  .main-nav .nav-link {
    min-height: var(--size-nav-menu-link-min-height);
    padding: var(--spacing-4) var(--spacing-2);
    justify-content: flex-start;
    border-radius: var(--radius-md);
  }
}

/* ============================================
   Shared Sub-Page Styles (Writings, Glossary)
   ============================================ */

.logo-link {
  text-decoration: none;
  grid-column: 2;
  justify-self: center;
}

.page-content {
  max-width: var(--grid-container-width);
  margin: 0 auto;
  padding: var(--page-padding-top) var(--grid-margin) var(--page-padding-bottom);
}

.page-inner {
  max-width: var(--content-width-narrow);
  margin: 0 auto;
}

.page-header {
  margin-bottom: var(--spacing-12);
}

.page-title {
  font-family: var(--body-1-font-family);
  font-size: var(--body-1-font-size);
  font-weight: var(--body-1-weight-regular);
  line-height: var(--body-1-line-height);
  letter-spacing: var(--body-1-letter-spacing);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-2);
}

[data-theme="dark"] .page-title {
  color: var(--color-text-primary);
}

.page-description {
  font-family: var(--label-3-font-family);
  font-size: var(--label-3-font-size);
  font-weight: var(--label-3-weight-regular);
  line-height: var(--label-3-line-height);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .page-description {
  color: var(--color-text-secondary);
}

/* ============================================
   Writings Page
   ============================================ */

.writings-list {
  display: flex;
  flex-direction: column;
}

.writing-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: var(--spacing-2) var(--spacing-8);
  align-items: start;
  padding: var(--spacing-6) 0;
  border-top: var(--border);
  text-decoration: none;
  color: inherit;
  transition: var(--transition-opacity);
}

.writing-entry:first-child {
  border-top: none;
}

.writing-entry:last-child {
  border-bottom: var(--border);
}

.writing-entry:hover {
  opacity: 1;
}

.writing-entry:hover .writing-title,
.writing-entry:hover .writing-excerpt,
.writing-entry:hover .writing-date {
  opacity: var(--opacity-hover-strong);
}

[data-theme="dark"] .writing-entry:hover .writing-title,
[data-theme="dark"] .writing-entry:hover .writing-excerpt,
[data-theme="dark"] .writing-entry:hover .writing-date {
  opacity: var(--opacity-hover-strong);
}

[data-theme="dark"] .writing-entry {
  border-color: var(--color-border);
}

.writing-title {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  font-weight: var(--body-3-weight-regular);
  line-height: var(--body-3-line-height);
  color: var(--color-text-primary);
  margin: 0;
  transition: var(--transition-opacity);
}

[data-theme="dark"] .writing-title {
  color: var(--color-text-primary);
}

.writing-excerpt {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--label-3-font-family);
  font-size: var(--label-3-font-size);
  font-weight: var(--label-3-weight-regular);
  line-height: var(--label-3-line-height);
  color: var(--color-text-secondary);
  margin: 0;
  transition: var(--transition-opacity);
}

[data-theme="dark"] .writing-excerpt {
  color: var(--color-text-secondary);
}

.writing-date {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  font-weight: var(--label-heading-weight-regular);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-secondary);
  white-space: nowrap;
  text-align: right;
  transition: var(--transition-opacity);
}

[data-theme="dark"] .writing-date {
  color: var(--color-text-secondary);
}

/* ============================================
   Article Page
   ============================================ */

.article-inner {
  max-width: var(--content-width-narrow);
  margin: 0 auto;
  padding: 0;
}

.article-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding-bottom: var(--spacing-8);
  margin-bottom: var(--spacing-8);
  border-bottom: var(--border);
}

.article-date {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .article-date {
  color: var(--color-text-secondary);
}

.article-title {
  font-family: var(--body-1-font-family);
  font-size: var(--display-md-font-size);
  line-height: var(--display-md-line-height);
  font-weight: var(--body-1-weight-regular);
  color: var(--color-text-primary);
  margin: 0;
}

[data-theme="dark"] .article-title {
  color: var(--color-text-primary);
}

.article-intro {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  color: var(--color-text-secondary);
  margin: 0;
}

[data-theme="dark"] .article-intro {
  color: var(--color-text-secondary);
}

.article-body {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  color: var(--color-text-primary);
}

[data-theme="dark"] .article-body {
  color: var(--color-text-primary);
}

.article-body h2 {
  font-family: var(--body-3-font-family);
  font-size: var(--body-2-font-size);
  line-height: var(--body-2-line-height);
  font-weight: var(--body-3-weight-regular);
  color: var(--color-text-primary);
  margin: var(--spacing-8) 0 var(--spacing-4) 0;
}

[data-theme="dark"] .article-body h2 {
  color: var(--color-text-primary);
}

.article-body p {
  margin: 0 0 var(--spacing-4) 0;
}

.article-body ul,
.article-body ol {
  margin: 0 0 var(--spacing-4) 0;
  padding-left: var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.article-body li {
  color: var(--color-text-primary);
}

[data-theme="dark"] .article-body li {
  color: var(--color-text-primary);
}

.article-body strong {
  font-weight: var(--body-3-weight-regular);
  color: var(--color-text-primary);
}

[data-theme="dark"] .article-body strong {
  color: var(--color-text-primary);
}

.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-12);
  margin-top: var(--spacing-12);
  padding-top: var(--spacing-8);
  border-top: var(--border);
}

.article-nav-btn {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-2);
  text-decoration: none;
  padding: var(--spacing-6) 0;
  transition: var(--transition-color);
}

.article-nav-btn:hover .article-nav-title {
  color: var(--accent);
}

[data-theme="dark"] .article-nav-btn:hover .article-nav-title {
  color: var(--accent);
}

.article-nav-prev .article-nav-title {
  order: 1;
  text-align: left;
}

.article-nav-prev .article-nav-label {
  order: 2;
  flex-shrink: 0;
}

.article-nav-next {
  justify-content: flex-end;
}

.article-nav-next .article-nav-label {
  order: 1;
  flex-shrink: 0;
}

.article-nav-next .article-nav-title {
  order: 2;
  text-align: right;
}

.article-nav-label {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .article-nav-label {
  color: var(--color-text-secondary);
}

.article-nav-title {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  color: var(--color-text-primary);
  transition: var(--transition-color);
  min-width: 0;
}

[data-theme="dark"] .article-nav-title {
  color: var(--color-text-primary);
}

/* ============================================
   Project Detail Page
   ============================================ */

.project-detail-page {
  width: 100%;
  max-width: var(--grid-content-width);
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap-large);
}

.project-detail-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  max-width: var(--content-width-narrow);
  margin: 0 auto;
  width: 100%;
  min-width: 0;
}

.project-detail-page-title {
  font-family: var(--body-1-font-family);
  font-size: var(--display-lg-font-size);
  line-height: var(--display-lg-line-height);
  font-weight: var(--body-1-weight-regular);
  color: var(--color-text-primary);
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

[data-theme="dark"] .project-detail-page-title {
  color: var(--color-text-primary);
}

.project-detail-page-meta {
  display: flex;
  gap: var(--spacing-8);
  flex-wrap: wrap;
}

.project-detail-page-meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.project-meta-label {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

[data-theme="dark"] .project-meta-label {
  color: var(--color-text-secondary);
}

.project-meta-value {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  color: var(--color-text-primary);
}

[data-theme="dark"] .project-meta-value {
  color: var(--color-text-primary);
}

/* Vertical layout: text then images (no text + image side by side) */
.project-section {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap-large);
  min-width: 0;
}

.project-section-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-width: 0;
  max-width: var(--content-width-narrow);
  width: 100%;
  margin: 0 auto;
}

.project-section-title {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  font-weight: var(--label-heading-weight-regular);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-secondary);
  margin: 0;
  text-transform: uppercase;
}

[data-theme="dark"] .project-section-title {
  color: var(--color-text-secondary);
}

.project-section-text {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  color: var(--color-text-primary);
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

[data-theme="dark"] .project-section-text {
  color: var(--color-text-primary);
}

.project-section-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  color: var(--color-text-primary);
  overflow-wrap: break-word;
  word-break: break-word;
}

.project-section-list li::before {
  content: "— ";
  color: var(--color-text-secondary);
}

[data-theme="dark"] .project-section-list {
  color: var(--color-text-primary);
}

.project-section-list strong {
  font-weight: var(--body-3-weight-regular);
  color: var(--color-text-primary);
}

[data-theme="dark"] .project-section-list strong {
  color: var(--color-text-primary);
}

.project-section-media {
  width: 100%;
  max-width: var(--grid-container-width);
}

.project-image-full {
  width: 100%;
  max-width: var(--grid-container-width);
}

.project-image-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
  width: 100%;
  max-width: var(--grid-container-width);
}

.project-image-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-4);
  width: 100%;
  max-width: var(--grid-container-width);
}

.project-image-placeholder {
  width: 100%;
  border-radius: var(--radius-md);
}

[data-theme="dark"] .project-image-placeholder {
  background: var(--color-surface-muted) !important;
}

/* ============================================
   Glossary Page
   ============================================ */

.glossary-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

.glossary-group {
  display: flex;
  flex-direction: column;
}

.glossary-group-title {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  font-weight: var(--label-heading-weight-regular);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-4) 0;
  text-transform: uppercase;
}

[data-theme="dark"] .glossary-group-title {
  color: var(--color-text-secondary);
}

.glossary-entry {
  border-top: var(--border);
}

.glossary-group .glossary-entry:first-child {
  border-top: none;
}

.glossary-group .glossary-entry:last-child {
  border-bottom: var(--border);
}

.glossary-entry.open .glossary-term {
  padding-bottom: var(--spacing-4);
}

.glossary-entry.open .glossary-toggle {
  transform: rotate(45deg);
  transition: transform var(--duration-base) var(--easing-standard);
}

.glossary-entry:not(.open) .glossary-toggle {
  transition: transform var(--duration-base) var(--easing-standard);
}

[data-theme="dark"] .glossary-entry {
  border-color: var(--color-border);
}

.glossary-term {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--spacing-4) 0;
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  transition: var(--transition-color);
}

.glossary-term-text {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  font-weight: var(--body-3-weight-regular);
  line-height: var(--body-3-line-height);
  color: var(--color-text-primary);
  transition: var(--transition-color);
}

[data-theme="dark"] .glossary-term-text {
  color: var(--color-text-primary);
}

.glossary-toggle {
  font-family: var(--label-heading-font-family);
  font-size: var(--icon-md);
  line-height: var(--label-heading-line-height);
  color: var(--color-text-secondary);
  flex-shrink: 0;
  width: var(--icon-lg);
  text-align: center;
}

[data-theme="dark"] .glossary-toggle {
  color: var(--color-text-secondary);
}

.glossary-definition-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-base) var(--easing-standard);
}

.glossary-entry.open .glossary-definition-wrapper {
  grid-template-rows: 1fr;
}

@media (prefers-reduced-motion: reduce) {
  .glossary-definition-wrapper {
    transition-duration: 0.01ms;
  }
}

.glossary-definition {
  padding: 0 0 var(--spacing-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-height: 0;
  overflow: hidden;
}

.glossary-definition p {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  font-weight: var(--body-3-weight-regular);
  line-height: var(--body-3-line-height);
  color: var(--color-text-primary);
  margin: 0;
}

[data-theme="dark"] .glossary-definition p {
  color: var(--color-text-primary);
}

.glossary-tag {
  display: none;
}

/* ============================================
   Sub-Page Responsive
   ============================================ */

@media (max-width: 1280px) {
  .page-content {
    padding: var(--spacing-12) var(--grid-margin) var(--page-padding-bottom);
  }
}

@media (max-width: 768px) {
  .page-inner {
    max-width: 100%;
  }

  .page-header {
    margin-bottom: var(--spacing-8);
  }

  .writing-entry {
    grid-template-columns: 1fr;
    gap: var(--spacing-2);
  }

  .writing-date {
    grid-column: 1;
    grid-row: 3;
    text-align: left;
  }
}

@media (max-width: 480px) {
  .page-content {
    padding: var(--spacing-4) var(--grid-margin) var(--page-padding-bottom);
  }

  .glossary-term {
    padding: var(--spacing-4) 0;
  }

  .writing-entry {
    padding: var(--spacing-4) 0;
  }
}