/**
 * Serpentype UI System
 * Inspired by MedusaJS
 */

@font-face {
  font-family: 'Cast';
  src: url('/media/pages/fonts/cast/259866e8f7-1768858190/cast-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cast';
  src: url('/media/pages/fonts/cast/5f34ab2079-1771694898/cast-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cast';
  src: url('/media/pages/fonts/cast/54c95665d7-1768858192/cast-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cast';
  src: url('/media/pages/fonts/cast/e9f6d283a6-1768858192/cast-heavy.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-fg: #000;
  --color-muted: #000;
  --color-border: #000;
  --color-border-strong: #000;
  --color-line: #e0e0e0;
  --color-bg-subtle: #f3f4f6;
  --color-bg-elevated: #ffffff;
  --color-overlay: rgba(0, 0, 0, 0.4);
  --color-shadow: rgba(0, 0, 0, 0.08);
  --color-success-bg: #f0fdf4;
  --color-success-border: #86efac;
  --color-success-fg: #166534;
  --color-error: #cc0000;

  /* Spacing (8px base) - fluid scaling with clamp() */
  --space-1: clamp(0.5rem, 0.4rem + 0.25vw, 0.625rem);
  /* 8px → 10px */
  --space-2: clamp(1rem, 0.8rem + 0.5vw, 1.25rem);
  /* 16px → 20px */
  --space-3: clamp(1.5rem, 1.2rem + 0.75vw, 2rem);
  /* 24px → 32px */
  --space-4: clamp(2.5rem, 2rem + 1.25vw, 3.5rem);
  /* 40px → 56px */
  --space-5: clamp(4rem, 3rem + 2.5vw, 6rem);
  /* 64px → 96px */
  --space-6: clamp(6rem, 4.5rem + 3.75vw, 9rem);
  /* 96px → 144px */

  /* Typography Scale - fluid for large screens */
  --type-xs: clamp(0.75rem, 0.7rem + 0.125vw, 0.875rem);
  --type-sm: clamp(0.875rem, 0.8rem + 0.1875vw, 1rem);
  --type-base: clamp(1rem, 0.9rem + 0.25vw, 1.125rem);
  --type-lg: clamp(1.125rem, 1rem + 0.3125vw, 1.375rem);
  --type-xl: clamp(1.5rem, 1.25rem + 0.625vw, 2rem);
  --type-2xl: clamp(2.25rem, 1.75rem + 1.25vw, 3.25rem);
  --type-3xl: clamp(3.75rem, 2.75rem + 2.5vw, 5.5rem);

  /* Line Heights */
  --lh-tight: 1.1;
  --lh-base: 1.5;
  --lh-relaxed: 1.625;

  /* Constraints - Full-width fluid layout */
  --container-max-width: 100%;
  --container-padding: clamp(1.5rem, 3vw, 6rem);
  /* Scales from 24px to 96px based on viewport */

  /* Content max-width for readability (used for text-heavy sections) */
  --content-max-width: min(100% - var(--container-padding) * 2, 1600px);
  --content-narrow: min(100% - var(--container-padding) * 2, 900px);
  --content-wide: min(100% - var(--container-padding) * 2, 2400px);

  /* Transitions */
  --transition-fast: 150ms ease;
}

[data-theme="dark"] {
  --color-bg: #111111;
  --color-fg: #f0f0f0;
  --color-muted: #a0a0a0;
  --color-border: #333;
  --color-border-strong: #555;
  --color-line: #3a3a3a;
  --color-bg-subtle: #1a1a1a;
  --color-bg-elevated: #1c1c1c;
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-shadow: rgba(0, 0, 0, 0.3);
  --color-success-bg: #0a2e14;
  --color-success-border: #166534;
  --color-success-fg: #86efac;
  --color-error: #f87171;
  color-scheme: dark;
}

html[data-theme] body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body {
    transition: none;
  }
}

/* Large screens: proportionally larger padding for visual balance */
@media (min-width: 1440px) {
  :root {
    --container-padding: clamp(3rem, 4vw, 8rem);
  }
}

/* Extra large screens (2K+): maintain comfortable reading areas */
@media (min-width: 1920px) {
  :root {
    --container-padding: clamp(4rem, 5vw, 12rem);
  }
}

/* Ultra-wide screens (4K+): generous margins to prevent content sprawl */
@media (min-width: 2560px) {
  :root {
    --container-padding: clamp(6rem, 8vw, 16rem);
  }
}

/* Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: 'Cast', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: var(--lh-base);
  font-size: var(--type-base);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  line-height: var(--lh-tight);
  font-weight: 600;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: opacity var(--transition-fast);
}

a:hover {
  opacity: 0.7;
}

/* Form controls */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  border: 1px solid #c0c0c0;
  border-radius: 0.3rem;
  background: transparent;
  display: grid;
  place-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  transform: scale(0);
  transition: transform 0.12s ease-in-out;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 18%, 80% 0, 43% 62%);
  box-shadow: inset 1em 1em var(--color-fg);
}

input[type="checkbox"]:checked {
  border-color: var(--color-fg);
  background: var(--color-bg);
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-fg);
  outline-offset: 2px;
}

input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

html[data-theme="dark"] input[type="checkbox"] {
  border-color: color-mix(in srgb, var(--color-fg) 45%, transparent);
  background: color-mix(in srgb, var(--color-bg-subtle) 80%, transparent);
}

html[data-theme="dark"] input[type="checkbox"]:checked {
  border-color: var(--color-fg);
  background: color-mix(in srgb, var(--color-fg) 14%, var(--color-bg));
}

@media (max-width: 768px) {
  input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    border-width: 1.25px;
  }

  input[type="checkbox"]::before {
    width: 0.72rem;
    height: 0.72rem;
  }
}

/* Layout Primitives */
.l-container {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.l-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-3);
}

.l-stack>*+* {
  margin-top: var(--space-4);
}

/* Tighter spacing for Kirby layout block columns */
.l-section:has(.l-grid > .l-stack[style*="grid-column: span"]) {
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}

.l-grid > .l-stack[style*="grid-column: span"] > * + * {
  margin-top: var(--space-1);
}

.LayoutColumns-title {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--type-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

/* ==========================================================================
   LINE SYSTEM
   
   Unified system for horizontal and vertical lines.
   All lines align with the content frame (same as vertical lines).
   
   Horizontal: <hr class="Line"> or <div class="Line"></div>
   Full-width: <hr class="Line Line--full">
   ========================================================================== */

/* Base horizontal line - content width, responsive like vertical frame */
.Line {
  width: calc(100% - var(--container-padding) * 2);
  max-width: calc(var(--container-max-width) - var(--container-padding) * 2);
  height: 1px;
  margin: 0 auto;
  background-color: var(--color-line);
  border: none;
  display: block;
}

/* Full viewport width line */
.Line--full {
  width: 100vw;
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}

/* Legacy support - absolute positioned lines (full width) */
.l-line-hr {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background-color: var(--color-line);
  z-index: 10;
  pointer-events: none;
}

/* Content-width absolute line - aligns with vertical frame */
.l-line-hr--content {
  width: calc(100% - var(--container-padding) * 2);
  max-width: calc(var(--container-max-width) - var(--container-padding) * 2);
  left: 50%;
  transform: translateX(-50%);
}

.l-line-vr {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--color-line);
  z-index: 10;
  pointer-events: none;
}

/* Divider - alias for Line (backwards compatibility) */
.Divider {
  width: calc(100% - var(--container-padding) * 2);
  max-width: calc(var(--container-max-width) - var(--container-padding) * 2);
  height: 1px;
  margin: 0 auto;
  background-color: var(--color-line);
  border: none;
}

.Divider--full {
  width: 100vw;
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}

/* ==========================================================================
   VERTICAL CONTENT FRAME
   
   Adds vertical lines at the edges of content area.
   Always visible - on wide screens at max-width edge, on narrow screens at padding edge.
   Similar to MedusaJS design system.
   
   Usage:
   - Add class to wrapper: <div class="l-content-frame">
   ========================================================================== */

.l-content-frame {
  position: relative;
  /* Keep frame lines reaching viewport bottom on short pages */
  min-height: calc(100vh - 3.5rem);
  min-height: calc(100dvh - 3.5rem);
}

.l-content-frame::before,
.l-content-frame::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--color-line);
  pointer-events: none;
  z-index: 10;
}

/* On wide screens: lines at container max-width edges */
.l-content-frame::before {
  left: max(var(--container-padding), calc(50% - var(--container-max-width) / 2 + var(--container-padding)));
}

.l-content-frame::after {
  right: max(var(--container-padding), calc(50% - var(--container-max-width) / 2 + var(--container-padding)));
}

/* Hide vertical frame lines (e.g., on home page) */
.l-content-frame--hidden::before,
.l-content-frame--hidden::after {
  display: none;
}

/* Inner padding for content near vertical lines */
.l-content-frame .l-container {
  padding-left: calc(var(--container-padding) + var(--space-3));
  padding-right: calc(var(--container-padding) + var(--space-3));
}

/* Lines should extend to full content width, ignoring extra padding */
.l-content-frame .l-container .Line,
.l-content-frame .l-container .l-line-hr,
.l-content-frame .l-container .l-line-hr--content {
  margin-left: calc(-1 * var(--space-3));
  margin-right: calc(-1 * var(--space-3));
  width: calc(100% + var(--space-3) * 2);
  max-width: none;
}

/* Full width lines override - span full viewport */
.l-content-frame .l-container .Line.Line--full {
  width: 100vw;
  margin-left: 0;
  margin-right: 0;
  left: 50%;
  transform: translateX(-50%);
  position: relative;
}

/* Fonts in Use grid should extend to full content width */
.l-content-frame .l-container .FontsInUse-grid,
.l-content-frame .l-container .About-grid,
.l-content-frame .l-container .About-servicesGrid,
.l-content-frame .l-container .TypefacesGrid-grid,
.l-content-frame .l-container .FontsList-grid {
  margin-left: calc(-1 * var(--space-3));
  margin-right: calc(-1 * var(--space-3));
  width: calc(100% + var(--space-3) * 2);
}

/* Section with automatic borders */
.l-section {
  position: relative;
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

/* Section borders - content width by default (aligns with vertical frame) */
.l-section--border-top,
.l-section--border-bottom {
  position: relative;
}

.l-section--border-top::before,
.l-section--border-bottom::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - var(--container-padding) * 2);
  max-width: calc(var(--container-max-width) - var(--container-padding) * 2);
  height: 1px;
  background-color: var(--color-line);
  pointer-events: none;
}

.l-section--border-top::before {
  top: 0;
}

.l-section--border-bottom::after {
  bottom: 0;
}

/* Full-width section borders */
.l-section--border-top-full::before,
.l-section--border-bottom-full::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background-color: var(--color-line);
  pointer-events: none;
}

.l-section--border-top-full::before {
  top: 0;
}

.l-section--border-bottom-full::after {
  bottom: 0;
}

.l-divider {
  position: relative;
  width: 100%;
  height: 1px;
  margin: 0;
}

/* Global: l-section gets full-width bottom border by default */
.l-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background-color: var(--color-line);
  pointer-events: none;
}

/* Disable bottom border on specific sections/pages */
.l-section--no-border::after,
.l-section:last-child::after {
  display: none;
}

/* Blocks that have their own line elements */
.l-section.TypefaceTester::after,
.l-section.FontStack::after,
.l-section.FontGallery::after,
.l-section.HeroBanner::after {
  display: none;
}

/* LicensePricing: disable all full-width pseudo lines */
.l-section.LicensePricing::after,
.l-section:has(.LicensePricing)::after {
  display: none;
}

/* Remove outer l-section spacing when LicensePricing is inside */
.l-section:has(.LicensePricing) {
  padding: 0 !important;
  margin-top: 0 !important;
  border: none !important;
}

.l-section:has(.LicensePricing) > .l-container {
  padding: 0 !important;
}

/* LicensePricing section itself */
.l-section.LicensePricing {
  border: none;
}


/* Pages that don't use module borders (tiles/grids) */
body.page-home .l-section::after,
body.page-fonts .l-section::after,
body.page-fonts-in-use .l-section::after {
  display: none;
}

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.skip-link:focus {
  z-index: 50;
  padding: 1rem;
  background: var(--color-bg);
  color: var(--color-fg);
  clip: auto;
  width: auto;
  height: auto;
  position: fixed;
  top: 1rem;
  left: 1rem;
}

/* UI Components (Base) */
/* Keep all interactive buttons consistently in Cast. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn,
.ui-button,
.TypefacesGrid-testerButton,
.FontsList-trialButton,
.HeroBanner-button,
.LinksPage-button,
.TrialLibrarySuccess-btn,
.slider-button,
.slider-play,
.LicensePricing-addButton,
.LicensePricing-submit,
.LicensePricing-btnAdd,
.LicensePricing-expander-btn,
.Contact-submit,
.Newsletter-button,
.Error404-buttonSecondary {
  font-family: 'Cast', sans-serif;
}

.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-fg);
  font-weight: 500;
  font-size: var(--type-sm);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.ui-button:hover {
  background: var(--color-fg);
  color: var(--color-bg);
  opacity: 1;
}

.ui-button:active {
  opacity: 0.8;
}

.ui-badge {
  display: inline-flex;
  padding: 0.25rem 0.6rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Typography Utilities */
.t-h1 {
  font-size: var(--type-3xl);
  letter-spacing: -0.02em;
}

.t-h2 {
  font-size: var(--type-2xl);
  letter-spacing: -0.01em;
}

.t-h3 {
  font-size: var(--type-xl);
}

.t-body {
  font-size: var(--type-base);
}

.t-meta {
  font-size: var(--type-sm);
  color: var(--color-muted);
  text-transform: uppercase;
}

h1,
h2,
h3,
h4,
h5,
h6,
.t-h1,
.t-h2,
.t-h3,
.t-h4,
.t-h5,
.t-h6,
.t-headline,
strong,
b {
  font-family: 'Cast', sans-serif;
  font-weight: 700;
}

.Serpentype-logo,
.Serpentype-site-logo {
  font-family: 'Cast', sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}

/* Fonts in Use */
.FontsInUse {
  padding-top: 0;
}

.FontsInUse-post {
  padding-top: 0;
  padding-bottom: var(--space-3);
}

.FontsInUse-hero {
  position: relative;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
}

.FontsInUse-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: var(--color-line);
  bottom: 0;
  pointer-events: none;
}

.FontsInUse-kicker {
  letter-spacing: 0.12em;
}

.FontsInUse-title {
  margin-top: var(--space-2);
}

.FontsInUse-intro {
  margin-top: var(--space-3);
  font-size: var(--type-lg);
  color: var(--color-muted);
  max-width: 55ch;
}

.FontsInUse-heroMeta {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  text-align: right;
}

.FontsInUse-filterbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  margin-bottom: 0;
  min-height: 60px;
}

.FontsInUse-filterbar::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: var(--color-line);
  bottom: 0;
  pointer-events: none;
}

.FontsInUse-filterRow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.FontsInUse-pill {
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  text-decoration: none;
  font-size: var(--type-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.FontsInUse-pill.is-active,
.FontsInUse-pill:hover,
.FontsInUse-pill:focus-visible {
  background: var(--color-fg);
  color: var(--color-bg);
  opacity: 1;
}

.FontsInUse-search {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}

.FontsInUse-search input[type="search"] {
  border: 1px solid var(--color-line);
  padding: 0.35rem 0.8rem;
  font-size: var(--type-sm);
  font-family: 'Cast', sans-serif;
  background: transparent;
  min-width: 220px;
  border-radius: 2rem;
}

.FontsInUse-search button {
  border: 1px solid var(--color-line);
  background: transparent;
  padding: 0.35rem 0.9rem;
  font-size: var(--type-sm);
  font-family: 'Cast', sans-serif;
  cursor: pointer;
  border-radius: 2rem;
}

.FontsInUse-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-left: 1px solid var(--color-line);
  margin-top: 0;
}

/* Large screens: 4 columns */
@media (min-width: 1440px) {
  .FontsInUse-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .FontsInUse-tile:nth-child(-n+3) {
    border-top: 0;
    margin-top: 0;
  }
  .FontsInUse-tile:nth-child(-n+4) {
    border-top: 1px solid var(--color-line);
    margin-top: -1px;
  }
  .FontsInUse.no-pagination .FontsInUse-tile:nth-last-child(-n+3) {
    border-bottom: 1px solid var(--color-line);
  }
  .FontsInUse.no-pagination .FontsInUse-tile:nth-last-child(-n+4) {
    border-bottom: 0;
  }
}

/* Extra large screens: 5 columns */
@media (min-width: 1920px) {
  .FontsInUse-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .FontsInUse-tile:nth-child(-n+4) {
    border-top: 0;
    margin-top: 0;
  }
  .FontsInUse-tile:nth-child(-n+5) {
    border-top: 1px solid var(--color-line);
    margin-top: -1px;
  }
  .FontsInUse.no-pagination .FontsInUse-tile:nth-last-child(-n+4) {
    border-bottom: 1px solid var(--color-line);
  }
  .FontsInUse.no-pagination .FontsInUse-tile:nth-last-child(-n+5) {
    border-bottom: 0;
  }
}

.FontsInUse-tile {
  border-right: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg);
}

/* First row needs top border (3 columns) */
.FontsInUse-tile:nth-child(-n+3) {
  border-top: 1px solid var(--color-line);
  margin-top: -1px;
}

.FontsInUse-tileLink {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-4);
  gap: var(--space-2);
}

.FontsInUse-thumb {
  background: var(--color-bg-subtle);
  overflow: hidden;
}

.FontsInUse-thumb img,
.FontsInUse-thumbPlaceholder {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--color-bg-subtle);
}

.FontsInUse-tileBody {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.FontsInUse-font {
  font-size: var(--type-xs);
  color: var(--color-muted);
  letter-spacing: 0.02em;
}

.FontsInUse-tileTitle {
  font-size: var(--type-xl);
}

.FontsInUse-excerpt {
  color: var(--color-muted);
  margin: 0;
  line-height: var(--lh-relaxed);
}

.FontsInUse-tags,
.FontsInUse-postTags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.FontsInUse-tag {
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  font-size: var(--type-sm);
  padding: 0.2rem 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.FontsInUse-empty {
  border: 1px solid var(--color-border-strong);
  padding: var(--space-4);
  grid-column: 1 / -1;
}

.FontsInUse-reset {
  display: inline-block;
  margin-top: var(--space-2);
  border: 1px solid var(--color-border-strong);
  padding: 0.4rem 0.75rem;
  text-decoration: none;
}

.FontsInUse-pagination {
  margin-top: -1px; /* Collapse with tile bottom borders */
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  position: relative;
  border-top: 1px solid var(--color-line);
}

/* Pagination line is handled by border-top now, no need for ::before */

/* When no pagination, reduce bottom padding */
.FontsInUse.no-pagination {
  padding-bottom: 0;
}

/* Remove bottom border from all tiles in the last row when no pagination (3 columns desktop) */
/* This covers all cases: complete last row (3 tiles) or incomplete (1-2 tiles) */
.FontsInUse.no-pagination .FontsInUse-tile:nth-last-child(-n+3) {
  border-bottom: 0;
}

/* 2 columns tablet */
@media (max-width: 900px) {
  /* Reset desktop rules */
  .FontsInUse.no-pagination .FontsInUse-tile:nth-last-child(-n+3) {
    border-bottom: 1px solid var(--color-line);
  }
  /* First row for tablet (2 columns) */
  .FontsInUse-tile:nth-child(-n+3) {
    border-top: 0;
    margin-top: 0;
  }
  .FontsInUse-tile:nth-child(-n+2) {
    border-top: 1px solid var(--color-line);
    margin-top: -1px;
  }
  /* Remove bottom border from all tiles in the last row when no pagination (2 columns tablet) */
  .FontsInUse.no-pagination .FontsInUse-tile:nth-last-child(-n+2) {
    border-bottom: 0;
  }
}

/* 1 column mobile */
@media (max-width: 700px) {
  /* Reset tablet rules */
  .FontsInUse.no-pagination .FontsInUse-tile:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--color-line);
  }
  /* First row for mobile (1 column) */
  .FontsInUse-tile:nth-child(-n+2) {
    border-top: 0;
    margin-top: 0;
  }
  .FontsInUse-tile:first-child {
    border-top: 1px solid var(--color-line);
    margin-top: -1px;
  }
  /* Always remove border from last tile (1 column = always complete row) */
  .FontsInUse.no-pagination .FontsInUse-tile:last-child {
    border-bottom: 0;
  }
}

.FontsInUse-pageList {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.FontsInUse-pageLink,
.FontsInUse-pageNumber {
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  text-decoration: none;
  font-size: var(--type-sm);
}

.FontsInUse-pageNumber.is-active {
  background: var(--color-fg);
  color: var(--color-bg);
}

.FontsInUse-pageLink.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.FontsInUse-back {
  display: flex;
  align-items: center;
  padding: var(--space-3) 0;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  min-height: 60px;
}

.FontsInUse-back a {
  display: inline-block;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  text-decoration: none;
  font-size: var(--type-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.FontsInUse-back a:hover,
.FontsInUse-back a:focus-visible {
  background: var(--color-fg);
  color: var(--color-bg);
}

.FontsInUse-postHeader {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--space-3) 0;
}

.FontsInUse-postFontLabel {
  font-size: var(--type-xs);
  color: var(--color-muted);
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-1) 0;
}

.FontsInUse-postTitle {
  font-size: var(--type-2xl);
  margin: 0;
}

.FontsInUse-postFont {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--space-3) 0;
}

.FontsInUse-postFont p {
  margin: 0;
}

.FontsInUse-postFont .t-meta {
  text-transform: none;
}

/* Lines in post reach full container width (align with vertical frame) */
.FontsInUse-post .Line {
  width: 100%;
  max-width: none;
}

.FontsInUse-postBody {
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.FontsInUse-postMeta {
  margin: 0;
}

.FontsInUse-postTitle {
  margin-top: var(--space-1);
}

.FontsInUse-postExcerpt {
  font-size: var(--type-lg);
  color: var(--color-muted);
}

/* Side-by-side layout for image and text */
.FontsInUse-postMain {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--space-4);
  align-items: flex-start;
}

.FontsInUse-postThumb {
  flex: 0 0 66.666%;
  max-width: 66.666%;
  margin: 0;
}

.FontsInUse-postThumb img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.FontsInUse-postThumbPlaceholder {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--color-bg-subtle);
}

/* Hide broken images */
.FontsInUse-postThumb img[src=""],
.FontsInUse-postThumb img:not([src]) {
  display: none;
}

.FontsInUse-postText {
  flex: 1;
  line-height: var(--lh-relaxed);
  min-width: 0; /* Prevent flex item from overflowing */
}

/* Ensure blocks inside Fonts in Use posts maintain proper layout */
.FontsInUse-postText .l-container {
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.FontsInUse-postText .l-section {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

/* Stack on mobile */
@media (max-width: 768px) {
  .FontsInUse-postMain {
    flex-direction: column;
  }
  
  .FontsInUse-postThumb {
    flex: none;
    max-width: 100%;
  }
}

/* Gallery Grid */
.FontsInUse-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
}

.FontsInUse-galleryItem {
  margin: 0;
}

.FontsInUse-galleryItem img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 700px) {
  .FontsInUse-gallery {
    grid-template-columns: 1fr;
  }
}

/* Lightbox */
.Lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  cursor: zoom-out;
}

.Lightbox-image {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  cursor: default;
}

.Lightbox-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: none;
  border: none;
  color: var(--color-bg);
  cursor: pointer;
  padding: var(--space-1);
  opacity: 0.8;
  transition: opacity var(--transition-fast);
}

.Lightbox-close:hover {
  opacity: 1;
}

/* Lightbox transitions */
.Lightbox-enter,
.Lightbox-leave {
  transition: opacity 0.2s ease;
}

.Lightbox-enter-start,
.Lightbox-leave-end {
  opacity: 0;
}

.Lightbox-enter-end,
.Lightbox-leave-start {
  opacity: 1;
}

@media (max-width: 1000px) {
  .FontsInUse-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Removed: tiles always keep bottom border */
}

@media (max-width: 700px) {
  /* On mobile, keep TypeTester visible and hide duplicate previews */
  .FontTester,
  .FontPreviews,
  .ParagraphTester {
    display: none;
  }

  .FontsInUse-heroMeta {
    justify-content: flex-start;
    text-align: left;
  }

  .FontsInUse-filterbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .FontsInUse-search {
    width: 100%;
  }

  .FontsInUse-search input[type="search"] {
    flex: 1;
    width: 100%;
    min-width: 0;
  }

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

  /* Tiles keep bottom border on mobile too */

  .FontsInUse-pagination {
    justify-content: center;
  }

  .FontsInUse-pagination > .FontsInUse-pageLink {
    display: none;
  }
}

/* Home Intro Section */
.HomeIntro.l-section {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  margin-bottom: -1px;
}

.HomeIntro-content {
  max-width: clamp(600px, 50vw, 1000px);
}

.HomeIntro-title {
  font-size: var(--type-2xl);
  font-weight: 500;
  margin: 0 0 var(--space-3) 0;
  line-height: var(--lh-base);
}

@media (min-width: 1024px) {
  .HomeIntro-title {
    font-size: var(--type-xl);
    line-height: 1.25;
  }
}

.HomeIntro-text {
  font-size: var(--type-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-muted);
  margin: 0;
}

@media (max-width: 900px) {
  body.page-home #main {
    display: flex;
    flex-direction: column;
  }

  body.page-home #main > .TypefacesGrid {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    align-self: stretch;
  }

  /* Keep typeface tiles wide on mobile home */
  body.page-home .TypefacesGrid .l-container {
    padding-left: var(--container-padding) !important;
    padding-right: var(--container-padding) !important;
  }

  /* Use full width between the vertical frame lines */
  body.page-home .TypefacesGrid .TypefacesGrid-title,
  body.page-home .TypefacesGrid .TypefacesGrid-tester,
  body.page-home .TypefacesGrid .TypefacesGrid-grid {
    width: 100% !important;
    max-width: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.page-home #main > .featured-slider {
    order: 1;
  }

  body.page-home #main > .About-intro {
    order: 2;
  }

  body.page-home #main > .TypefacesGrid {
    order: 3;
  }
}

/* Fonts Intro Section */
.FontsIntro {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.FontsIntro-content {
  max-width: clamp(600px, 50vw, 1000px);
}

.FontsIntro-title {
  font-size: var(--type-2xl);
  font-weight: 500;
  margin: 0 0 var(--space-3) 0;
  line-height: var(--lh-base);
}

.FontsIntro-text {
  font-size: var(--type-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-muted);
  margin: 0;
}

.FontsIntro-text p {
  margin: 0;
}

/* Fonts List Section */
.FontsList {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
}

.FontsList-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-left: 1px solid var(--color-line);
}

/* 1500px+: allow more than 4 columns */
@media (min-width: 1500px) {
  .FontsList-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Extra large screens: 6 columns */
@media (min-width: 1920px) {
  .FontsList-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 1024px) {
  .FontsList-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Reset desktop rules and apply 2-column rules */
  .FontsList-tile:nth-last-child(1):nth-child(4n),
  .FontsList-tile:nth-last-child(2):nth-child(4n-1),
  .FontsList-tile:nth-last-child(3):nth-child(4n-2),
  .FontsList-tile:nth-last-child(4):nth-child(4n-3) {
    border-bottom: 1px solid var(--color-line);
  }
  
  /* Remove border-bottom from last row (2 columns tablet) */
  .FontsList-tile:nth-last-child(1):nth-child(even),
  .FontsList-tile:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
  }
}

@media (max-width: 480px) {
  .FontsList-grid {
    grid-template-columns: 1fr;
  }

  .FontsList-weightLine {
    font-size: clamp(1.15rem, 8.8cqw, 2.4rem);
    line-height: 1.16;
  }
  
  /* Reset tablet rules */
  .FontsList-tile:nth-last-child(1):nth-child(even),
  .FontsList-tile:nth-last-child(2):nth-child(odd) {
    border-bottom: 1px solid var(--color-line);
  }
  
  /* Mobile: only last tile loses border (1 column = always complete row) */
  .FontsList-tile:last-child {
    border-bottom: 0;
  }
}

.FontsList-tile {
  border-right: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;
}

/* Remove border-bottom from last row (4 columns desktop) */
/* This covers all cases: complete last row (4 tiles) or incomplete (1-3 tiles) */
.FontsList-tile:nth-last-child(-n+4) {
  border-bottom: 0;
}
/* But we need to restore border for tiles that are NOT in the last row */
/* If there are more than 4 tiles, the 5th from last should have border */
.FontsList-tile:nth-last-child(5) {
  border-bottom: 1px solid var(--color-line);
}

.FontsList-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  color: inherit;
  background: var(--color-bg);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.FontsList-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.FontsList-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.FontsList-title {
  font-size: var(--type-lg);
  font-weight: 500;
  margin: 0;
}

.FontsList-preview {
  height: 120px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.FontsList-preview p {
  font-size: 4rem;
  margin: 0;
  white-space: nowrap;
}

/* Weight Stack - Stack & Justify style */
.FontsList-weightStack {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-1) 0;
  min-width: 0;
  overflow: visible;
}

.FontsList-weightLine {
  flex: 1 1 auto;
  margin: 0;
  font-size: clamp(0.95rem, 8.25cqw, 2rem);
  line-height: 1.18;
  padding-bottom: 0.05em;
  text-align: left;
  -webkit-text-stroke: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  min-width: 0;
  max-width: none;
  width: auto;
}

.FontsList-excerpt {
  font-size: var(--type-base);
  color: var(--color-muted);
  margin: 0;
  line-height: var(--lh-relaxed);
}

.FontsList-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--type-sm);
  text-transform: uppercase;
  margin-top: auto;
}

.FontsList-empty {
  padding: var(--space-4);
  border-right: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.FontsList-tester {
  padding: var(--space-2) var(--space-3);
  margin: 0 calc(-1 * var(--space-3));
  width: calc(100% + var(--space-3) * 2);
  max-width: calc(100% + var(--space-3) * 2);
  display: flex;
  gap: var(--space-2);
  align-items: center;
  border-bottom: 1px solid var(--color-line);
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.FontsList-testerInputWrapper {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
}

.FontsList-testerIcon {
  position: absolute;
  left: 1rem;
  width: 1em;
  height: 1em;
  color: var(--color-muted);
  pointer-events: none;
}

.FontsList-testerInput {
  width: 100%;
  max-width: 100%;
  font-size: var(--type-sm);
  font-family: inherit;
  border: 1px solid var(--color-line);
  border-radius: 2rem;
  background: transparent;
  outline: none;
  padding: 0.5rem 1rem 0.5rem 2.5rem;
  height: 2.25rem;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.FontsList-testerInput:focus {
  border-color: var(--color-fg);
}

.FontsList-testerInput::placeholder {
  color: var(--color-muted);
}

.FontsList-testerColorPicker {
  position: relative;
}

.FontsList-colorLabel {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  border: 1px solid var(--color-line);
  border-radius: 2rem;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.FontsList-colorLabel:hover {
  border-color: var(--color-fg);
}

.FontsList-colorLabel svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.FontsList-colorInput {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  top: 0;
  left: 0;
}

.FontsList-colorSwatch {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  flex-shrink: 0;
}

/* Toggle for weight display */
.FontsList-testerToggle {
  position: relative;
}

@media (max-width: 768px) {
  .FontsList-testerColorPicker,
  .FontsList-testerToggle {
    display: none;
  }
}

.FontsList-toggleLabel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  border: 1px solid var(--color-line);
  border-radius: 2rem;
  cursor: pointer;
  transition: border-color var(--transition-fast);
  font-size: var(--type-sm);
  white-space: nowrap;
}

.FontsList-toggleLabel:hover {
  border-color: var(--color-fg);
}

.FontsList-toggleInput {
  display: none;
}

.FontsList-toggleButton {
  background: transparent;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.FontsList-toggleSwitch {
  width: 2rem;
  height: 1rem;
  background: var(--color-line);
  border-radius: 0.5rem;
  position: relative;
  transition: background var(--transition-fast);
}

.FontsList-toggleSwitch::after {
  content: '';
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  background: white;
  border-radius: 50%;
  top: 0.125rem;
  left: 0.125rem;
  transition: transform var(--transition-fast);
}

.FontsList-toggleButton[aria-checked="true"] .FontsList-toggleSwitch {
  background: var(--color-fg);
}

.FontsList-toggleButton[aria-checked="true"] .FontsList-toggleSwitch::after {
  transform: translateX(1rem);
}

.FontsList-toggleText {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Weight row with value column */
.FontsList-weightRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: clamp(0.35rem, 1.5cqw, 0.7rem);
  min-width: 0;
  overflow: visible;
}

.FontsList-weightValue {
  font-size: clamp(0.6rem, 2cqw, 0.72rem);
  color: inherit;
  opacity: 0.5;
  min-width: 2.2rem;
  text-align: right;
  flex-shrink: 0;
}

.TypefacesGrid {
  max-width: var(--container-max-width);
  margin: 0 auto;
  color: var(--color-fg);
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
}

.TypefacesGrid-title {
  font-size: var(--type-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 400;
  padding: var(--space-2) 0;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  margin: 0 calc(-1 * var(--space-3));
  width: calc(100% + var(--space-3) * 2);
  border-top: 1px solid var(--color-line);
}

.TypefacesGrid-tester {
  padding: var(--space-2) var(--space-3);
  margin: 0 calc(-1 * var(--space-3));
  width: calc(100% + var(--space-3) * 2);
  display: flex;
  gap: var(--space-2);
  align-items: center;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.TypefacesGrid-testerInputWrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.TypefacesGrid-testerIcon {
  position: absolute;
  left: 1rem;
  width: 1em;
  height: 1em;
  color: var(--color-muted);
  pointer-events: none;
}

.TypefacesGrid-testerInput {
  width: 100%;
  font-size: var(--type-sm);
  font-family: inherit;
  border: 1px solid var(--color-line);
  border-radius: 0.5rem;
  background: transparent;
  outline: none;
  padding: 0.4rem 1rem 0.4rem 2.5rem;
  height: 2.1rem;
  box-sizing: border-box;
}

.TypefacesGrid-testerInput:focus {
  border-color: var(--color-fg);
}

.TypefacesGrid-testerInput::placeholder {
  color: var(--color-muted);
}

.TypefacesGrid-testerButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: 2rem;
  font-size: var(--type-sm);
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  height: 2.1rem;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.TypefacesGrid-testerButton:hover {
  border-color: var(--color-fg);
  background: var(--color-fg);
  color: var(--color-bg);
}

.TypefacesGrid-testerColorPicker {
  position: relative;
}

.TypefacesGrid-colorLabel {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.75rem;
  height: 2.1rem;
  border: 1px solid var(--color-line);
  border-radius: 2rem;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.TypefacesGrid-colorLabel:hover {
  border-color: var(--color-fg);
}

.TypefacesGrid-colorLabel svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.TypefacesGrid-colorInput {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  top: 0;
  left: 0;
}

.TypefacesGrid-colorSwatch {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  flex-shrink: 0;
}

.TypefacesGrid-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  --typeface-padding: 1.25rem;
  --typeface-gap: 1rem;
  --typeface-row-extra: 2rem;
  --typeface-line: var(--color-line);
  border-left: 1px solid var(--typeface-line);
}

/* Large screens: 3 columns for TypefacesGrid */
@media (min-width: 1440px) {
  .TypefacesGrid-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Extra large screens: 4 columns for TypefacesGrid */
@media (min-width: 2200px) {
  .TypefacesGrid-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.TypefacesGrid-rowLine {
  display: none; /* Tiles have border-bottom, no extra row lines needed */
}

.TypefacesGrid-tile {
  border-right: 1px solid var(--typeface-line);
  border-bottom: 1px solid var(--typeface-line);
  transition: border-color var(--transition-fast);
}

/* Remove bottom border ONLY when last row is complete (2 columns) */
/* Complete row = last tile at even position, both tiles in last row lose border */
.TypefacesGrid-tile:nth-last-child(1):nth-child(even),
.TypefacesGrid-tile:nth-last-child(2):nth-child(odd) {
  border-bottom: 0;
}

/* Incomplete last row (single tile in 2-column grid) */
.TypefacesGrid-tile:last-child:nth-child(odd) {
  border-bottom: 0;
}

/* 3-column layout: remove border from full last row */
@media (min-width: 1440px) {
  .TypefacesGrid-tile:nth-last-child(1):nth-child(3n),
  .TypefacesGrid-tile:nth-last-child(2):nth-child(3n-1),
  .TypefacesGrid-tile:nth-last-child(3):nth-child(3n-2) {
    border-bottom: 0;
  }
}

/* 4-column layout: remove border from full last row */
@media (min-width: 2200px) {
  .TypefacesGrid-tile:nth-last-child(1):nth-child(4n),
  .TypefacesGrid-tile:nth-last-child(2):nth-child(4n-1),
  .TypefacesGrid-tile:nth-last-child(3):nth-child(4n-2),
  .TypefacesGrid-tile:nth-last-child(4):nth-child(4n-3) {
    border-bottom: 0;
  }
}

.TypefacesGrid-tile:hover,
.TypefacesGrid-tile:focus-within {
  border-color: var(--typeface-line);
}

.TypefacesGrid-link {
  text-decoration: none;
  color: inherit;
  display: block;
  height: 100%;
  padding: var(--typeface-padding);
  background: var(--color-bg);
}

.TypefacesGrid-stack {
  display: flex;
  flex-direction: column;
  gap: var(--typeface-gap);
}

.TypefacesGrid-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.TypefacesGrid-header h3 {
  font-size: var(--type-xl);
}

.TypefacesGrid-preview {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: hidden;
}

.TypefacesGrid-preview p {
  font-size: clamp(1.75rem, 5vw, 4rem);
  margin: 0;
  white-space: nowrap;
}

.TypefacesGrid-meta {
  display: flex;
  justify-content: space-between;
}

.TypefacesGrid-meta.t-meta {
  color: inherit;
}

@media (max-width: 900px) {
  .TypefacesGrid-testerInputWrapper,
  .TypefacesGrid-testerColorPicker {
    display: none;
  }

  .TypefacesGrid-grid .l-line-hr {
    display: none;
  }

  /* Responsive header: stack title and price on small screens */
  .TypefacesGrid-header {
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
  }

  .TypefacesGrid-header h3 {
    font-size: clamp(1.1rem, 4vw, var(--type-xl));
  }

  .TypefacesGrid-header span {
    font-size: clamp(0.75rem, 2.5vw, var(--type-sm));
    white-space: nowrap;
  }

  /* Smaller preview area on mobile */
  .TypefacesGrid-preview {
    height: 120px;
  }

  /* Compact meta row */
  .TypefacesGrid-meta {
    font-size: clamp(0.7rem, 2.5vw, var(--type-sm));
    gap: 0.5rem;
  }
}

@media (max-width: 700px) {
  .TypefacesGrid-grid {
    grid-template-columns: 1fr;
  }

  /* Reset 2-column border rules */
  .TypefacesGrid-tile:nth-last-child(1):nth-child(even),
  .TypefacesGrid-tile:nth-last-child(2):nth-child(odd) {
    border-bottom: 1px solid var(--typeface-line);
  }

  .TypefacesGrid-tile:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 480px) {
  .TypefacesGrid-header {
    gap: 0.15rem 0.5rem;
  }

  .TypefacesGrid-header h3 {
    font-size: clamp(1rem, 3.5vw, 1.25rem);
  }

  .TypefacesGrid-preview {
    height: 90px;
  }

  /* Smaller badge on very small screens */
  .TypefacesGrid-meta .ui-badge {
    padding: 0.15rem 0.4rem;
    font-size: 0.65rem;
    letter-spacing: 0.03em;
  }
}

/* =====================================================
   ABOUT PAGE
   ===================================================== */

/* Intro Section */
.About-intro {
  padding-bottom: var(--space-3);
}

/* Tighter top spacing for the Fonts page intro on desktop */
body.page-fonts .About-intro.l-section,
body.page-font-index .About-intro.l-section {
  padding-top: var(--space-3);
}

.About-introContent {
  max-width: clamp(700px, 55vw, 1200px);
}

.About-label {
  font-size: var(--type-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}

.About-introText {
  font-size: var(--type-2xl);
  font-weight: 400;
  line-height: 1.4;
}

@media (min-width: 1024px) {
  .About-introText {
    font-size: var(--type-xl);
    line-height: 1.25;
  }
}

@media (max-width: 900px) {
  .About-intro {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
}

.About-introText p {
  margin: 0;
}

/* Section Titles with horizontal lines */
.About-sectionTitle {
  font-size: var(--type-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  margin: 0 calc(-1 * var(--space-3));
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  width: calc(100% + var(--space-3) * 2);
}

/* Team Grid */
.About-team.l-section {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
}

.About-team .About-sectionTitle {
  border-top: 0;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.About-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-left: 1px solid var(--color-line);
}

/* Large screens: 4 columns for About grid */
@media (min-width: 1440px) {
  .About-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Extra large screens: 5 columns for About grid */
@media (min-width: 1920px) {
  .About-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.About-member {
  border-right: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* First row needs top border (3 columns) */
.About-member:nth-child(-n+3) {
  border-top: 1px solid var(--color-line);
  margin-top: -1px;
}

/* Large screens: first row (4 columns) */
@media (min-width: 1440px) {
  .About-member:nth-child(-n+3) {
    border-top: 0;
    margin-top: 0;
  }
  .About-member:nth-child(-n+4) {
    border-top: 1px solid var(--color-line);
    margin-top: -1px;
  }
}

/* Extra large screens: first row (5 columns) */
@media (min-width: 1920px) {
  .About-member:nth-child(-n+4) {
    border-top: 0;
    margin-top: 0;
  }
  .About-member:nth-child(-n+5) {
    border-top: 1px solid var(--color-line);
    margin-top: -1px;
  }
}

/* Remove bottom border ONLY when last row is complete (3 columns) */
.About-member:nth-last-child(1):nth-child(3n),
.About-member:nth-last-child(2):nth-child(3n-1),
.About-member:nth-last-child(3):nth-child(3n-2) {
  border-bottom: 0;
}

.About-memberPhoto {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-line);
}

.About-memberPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.About-memberPhoto--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-4xl);
  font-weight: 700;
  color: var(--color-muted);
}

.About-memberInfo {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.About-memberName {
  font-size: var(--type-xl);
  font-weight: 700;
}

.About-memberRole {
  font-size: var(--type-sm);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: -0.15rem;
}

.About-memberBio {
  font-size: var(--type-sm);
  color: var(--color-muted);
  margin-top: var(--space-2);
}

.About-memberBio p {
  margin: 0;
}

.About-memberFonts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.2rem;
}

.About-memberFont {
  display: inline-block;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: var(--type-xs);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.About-memberFont:hover {
  background: var(--color-fg);
  color: var(--color-bg);
  opacity: 1;
}

/* Expertise Section */
.About-expertise {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: -1px; /* Collapse with team grid bottom border */
}

.About-servicesGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-left: 1px solid var(--color-line);
}

/* Large screens: 4 columns for services grid */
@media (min-width: 1440px) {
  .About-servicesGrid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Extra large screens: 5 columns for services grid */
@media (min-width: 1920px) {
  .About-servicesGrid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.About-service {
  border-right: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: var(--space-3);
}

/* First row needs top border (3 columns) */
.About-service:nth-child(-n+3) {
  border-top: 1px solid var(--color-line);
  margin-top: -1px;
}

/* Large screens: first row (4 columns) */
@media (min-width: 1440px) {
  .About-service:nth-child(-n+3) {
    border-top: 0;
    margin-top: 0;
  }
  .About-service:nth-child(-n+4) {
    border-top: 1px solid var(--color-line);
    margin-top: -1px;
  }
}

/* Extra large screens: first row (5 columns) */
@media (min-width: 1920px) {
  .About-service:nth-child(-n+4) {
    border-top: 0;
    margin-top: 0;
  }
  .About-service:nth-child(-n+5) {
    border-top: 1px solid var(--color-line);
    margin-top: -1px;
  }
}

/* Remove bottom border ONLY when last row is complete (3 columns) */
.About-service:nth-last-child(1):nth-child(3n),
.About-service:nth-last-child(2):nth-child(3n-1),
.About-service:nth-last-child(3):nth-child(3n-2) {
  border-bottom: 0;
}

.About-serviceTitle {
  font-size: var(--type-xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.About-serviceDesc {
  font-size: var(--type-base);
  color: var(--color-muted);
}

.About-serviceDesc p {
  margin: 0;
}

/* Responsive - Tablet */
@media (max-width: 900px) {
  .About-grid,
  .About-servicesGrid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .About-introText {
    font-size: var(--type-xl);
  }
  
  /* Reset 3-column rules for members */
  .About-member:nth-child(-n+3) {
    border-top: 0;
    margin-top: 0;
  }
  .About-member:nth-child(-n+2) {
    border-top: 1px solid var(--color-line);
    margin-top: -1px;
  }
  .About-member:nth-last-child(1):nth-child(3n),
  .About-member:nth-last-child(2):nth-child(3n-1),
  .About-member:nth-last-child(3):nth-child(3n-2) {
    border-bottom: 1px solid var(--color-line);
  }
  .About-member:nth-last-child(1):nth-child(even),
  .About-member:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
  }
  
  /* Reset 3-column rules for services */
  .About-service:nth-child(-n+3) {
    border-top: 0;
    margin-top: 0;
  }
  .About-service:nth-child(-n+2) {
    border-top: 1px solid var(--color-line);
    margin-top: -1px;
  }
  .About-service:nth-last-child(1):nth-child(3n),
  .About-service:nth-last-child(2):nth-child(3n-1),
  .About-service:nth-last-child(3):nth-child(3n-2) {
    border-bottom: 1px solid var(--color-line);
  }
  .About-service:nth-last-child(1):nth-child(even),
  .About-service:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
  }
}

/* Responsive - Mobile */
@media (max-width: 600px) {
  .About-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .About-servicesGrid {
    grid-template-columns: 1fr;
  }
  
  .About-introText {
    font-size: var(--type-lg);
  }
  
  /* Reset tablet rules for services */
  .About-service:nth-child(-n+2) {
    border-top: 0;
    margin-top: 0;
  }
  .About-service:first-child {
    border-top: 1px solid var(--color-line);
    margin-top: -1px;
  }
  .About-service:nth-last-child(1):nth-child(even),
  .About-service:nth-last-child(2):nth-child(odd) {
    border-bottom: 1px solid var(--color-line);
  }
  .About-service:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 420px) {
  .About-grid {
    grid-template-columns: 1fr;
  }

  .About-member:nth-child(-n+2) {
    border-top: 0;
    margin-top: 0;
  }

  .About-member:first-child {
    border-top: 1px solid var(--color-line);
    margin-top: -1px;
  }

  .About-member:nth-last-child(1):nth-child(even),
  .About-member:nth-last-child(2):nth-child(odd) {
    border-bottom: 1px solid var(--color-line);
  }

  .About-member:last-child {
    border-bottom: 0;
  }
}

/* Featured slider */
.featured-slider .l-container {
  position: relative;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.featured-slider.l-section {
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
  z-index: 15;
  background: var(--color-bg);
}

.slider {
  --peek: 0.2;
  --gap: 0;
  --frame-border: 2px;
  --slide-max-height: 90vh;
  --slide-max-width: 90vw;
  --slide-meta-max: 6rem;
  position: relative;
}

.slider-viewport {
  position: relative;
  overflow: hidden;
  outline: none;
  touch-action: pan-y;
  cursor: auto;
}

.slider-viewport[data-cursor="prev"],
.slider-viewport[data-cursor="next"] {
  cursor: none;
}

.slider-cursor {
  position: absolute;
  width: 150px;
  height: 150px;
  pointer-events: none;
  mix-blend-mode: difference;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 10;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.15s ease;
  will-change: left, top;
}

.slider-cursor.is-visible {
  opacity: 1;
}

.slider-viewport:focus-visible {
  outline: 2px solid var(--color-fg);
  outline-offset: 4px;
}

.slider-track {
  display: flex;
  align-items: stretch;
  gap: var(--gap);
  list-style: none;
  padding: 0;
  margin: 0;
  will-change: transform;
}

.slider-slide {
  flex: 0 0 auto;
  /* Width is constrained by both 90vw and the height-based calculation (90vh with 3:2 ratio) */
  width: min(
    var(--slide-max-width),
    calc((var(--slide-max-height) - var(--slide-meta-max)) * 3 / 2)
  );
  max-width: var(--slide-max-width);
  border: 0;
  background: var(--color-bg);
}

.slider-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: calc(var(--slide-max-height) - var(--slide-meta-max));
  background: var(--color-bg-subtle);
  overflow: hidden;
}

.slider-image {
  width: 100%;
  height: 100%;
  background: var(--color-bg-subtle);
}

.slider-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slider-meta {
  --slider-meta-pad-x: 0.78rem;
  --slider-meta-pad-top: 1rem;
  --slider-meta-pad-bottom: 0.78rem;
  padding: var(--slider-meta-pad-top) var(--slider-meta-pad-x) var(--slider-meta-pad-bottom);
  display: block;
  background: #fff;
  color: #111;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  border-left: 1px solid var(--color-line);
  border-right: 0;
}

.slider-meta-link {
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

.slider-meta-link:hover,
.slider-meta-link:focus-visible {
  opacity: 1;
}

.slider-slide:last-child .slider-meta {
  border-right: 1px solid var(--color-line);
}

.slider-meta-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  position: relative;
}

.slider-meta-layout > * {
  min-height: 100%;
  align-self: stretch;
}

.slider-meta-top {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.slider-meta-main {
  position: relative;
  display: grid;
  gap: 0.02rem;
  min-width: 0;
  padding-right: 0.75rem;
  align-content: start;
}

/* Vertical divider lines */
.slider-meta-main::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--slider-meta-pad-top, 1rem));
  bottom: 0;
  right: 0;
  width: 1px;
  height: auto;
  min-height: calc(100% + var(--slider-meta-pad-top, 1rem) + var(--slider-meta-pad-bottom, 0.78rem));
  background: var(--color-line);
  pointer-events: none;
}

.slider-feature {
  position: relative;
}

.slider-feature::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--slider-meta-pad-top, 1rem));
  bottom: 0;
  right: 0;
  width: 1px;
  height: auto;
  min-height: calc(100% + var(--slider-meta-pad-top, 1rem) + var(--slider-meta-pad-bottom, 0.78rem));
  background: rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.slider-feature:last-child::after {
  display: none;
}

.slider-title {
  color: inherit;
  font-weight: 900;
  font-size: inherit;
  letter-spacing: 0;
  line-height: inherit;
  display: inline;
  margin-right: 0.35rem;
}

.slider-title:focus-visible,
.slider-title:hover {
  text-decoration: none;
}

.slider-subtitle {
  color: rgba(0, 0, 0, 0.5);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

.slider-description {
  margin: 0;
  color: rgba(0, 0, 0, 0.78);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.08rem);
  line-height: 1.2;
  max-width: 58ch;
}

.slider-feature {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border: 0;
  border-radius: 0;
  padding: 0 0.75rem 0 1rem;
  background: transparent;
  color: rgba(0, 0, 0, 0.58);
}

.slider-feature-title {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
}

.slider-feature-text {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.33;
  color: inherit;
}

.slider-tag {
  border: 1px solid rgba(0, 0, 0, 0.35);
  color: #111;
  padding: 0.14rem 0.52rem;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  white-space: nowrap;
  justify-self: start;
}

/* Home slider meta in dark mode: black panel + light text */
[data-theme="dark"] body.page-home .slider--home .slider-meta {
  background: #000;
  color: #f2f2f2;
}

[data-theme="dark"] body.page-home .slider--home .slider-meta-main::after,
[data-theme="dark"] body.page-home .slider--home .slider-feature::after {
  background: rgba(255, 255, 255, 0.22);
}

[data-theme="dark"] body.page-home .slider--home .slider-subtitle {
  color: rgba(255, 255, 255, 0.68);
}

[data-theme="dark"] body.page-home .slider--home .slider-description {
  color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] body.page-home .slider--home .slider-feature {
  color: rgba(255, 255, 255, 0.72);
}

[data-theme="dark"] body.page-home .slider--home .slider-tag {
  border-color: rgba(255, 255, 255, 0.45);
  color: #f2f2f2;
}

.slider-controls {
  display: none; /* Hidden - controls not needed */
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.slider-button {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-fg);
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  text-transform: uppercase;
  font-size: var(--type-xs);
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.slider-button:hover {
  background: var(--color-fg);
  color: var(--color-bg);
}

.slider-button:focus-visible {
  outline: 2px solid var(--color-fg);
  outline-offset: 2px;
}

.slider-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-bg);
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--color-fg);
  background: transparent;
  opacity: 0.6;
  transition:
    width 200ms ease,
    opacity 200ms ease,
    background 200ms ease,
    border-color 200ms ease,
    transform 200ms ease;
  cursor: pointer;
}

.slider-dot.is-active {
  width: 18px;
  background: var(--color-fg);
  opacity: 1;
}

.slider-dot:hover {
  opacity: 0.85;
}

.slider-dot:focus-visible {
  outline: 2px solid var(--color-fg);
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .slider {
    --peek: 0.06;
  }

  .slider--home {
    --peek: 0;
    --slide-max-width: 100vw;
  }

  .slider-controls {
    flex-wrap: wrap;
  }

  .slider-meta {
    --slider-meta-pad-x: 0.72rem;
    --slider-meta-pad-top: 0.9rem;
    --slider-meta-pad-bottom: 0.72rem;
    padding: var(--slider-meta-pad-top) var(--slider-meta-pad-x) var(--slider-meta-pad-bottom);
  }

  .slider-title {
    font-size: inherit;
    line-height: inherit;
  }

  .slider-description {
    font-size: 0.92rem;
    line-height: 1.52;
    max-width: 100%;
  }

  .slider-meta-layout {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .slider-meta-layout > * + * {
    border-left: none;
    border-top: 1px solid var(--color-line);
    padding-top: 0.55rem;
  }

  .slider-meta-layout > .slider-feature:first-of-type,
  .slider-meta-layout > .slider-feature + .slider-feature {
    border-left: none;
  }

  .slider-meta-main::after,
  .slider-feature::after {
    display: none;
  }

  .slider-feature {
    padding: 0;
  }

  .slider-meta-layout .slider-feature {
    display: none;
  }

  .slider-feature-title {
    font-size: 0.72rem;
  }

  .slider-feature-text {
    font-size: 0.8rem;
    line-height: 1.4;
  }
}

@media (max-width: 1100px) and (min-width: 701px) {
  .slider-meta-layout {
    grid-template-columns: 1.25fr 1fr 1fr;
  }
}

@media (max-width: 900px) {
  /* Font-family header slider: keep inside frame on mobile/tablet */
  body.page-font-family {
    overflow-x: clip;
  }

  body.page-font-family .featured-slider .l-container {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  body.page-font-family .featured-slider .slider--font-family {
    --slide-max-width: 100%;
  }
}

/* ---------- Slider Play Button ---------- */

.slider-play {
  display: none;
  position: absolute;
  bottom: var(--space-2);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem 0.45rem 0.65rem;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 999px;
  color: #fff;
  /* Intentionally white on dark overlay */
  font-size: var(--type-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.2s ease, transform 0.2s ease;
}

.slider-play:hover,
.slider-play:focus-visible {
  background: rgba(0, 0, 0, 0.9);
  transform: translateX(-50%) scale(1.04);
}

.slider-play:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.slider-play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  flex-shrink: 0;
  /* Intentionally white circle on dark overlay */
}

.slider-play-icon svg {
  width: 10px;
  height: 10px;
  color: #000;
  /* Intentionally black on white circle */
  margin-left: 1px;
}

.slider-play-label {
  font-weight: 500;
  line-height: 1;
}

/* ---------- Video Lightbox ---------- */

.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.video-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.video-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}

.video-lightbox-content {
  position: relative;
  width: 90vw;
  max-width: 1100px;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.3s ease;
}

.video-lightbox.is-open .video-lightbox-content {
  transform: scale(1) translateY(0);
}

.video-lightbox-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  /* Video embed background — always black */
  border-radius: 4px;
  overflow: hidden;
}

.video-lightbox-embed iframe,
.video-lightbox-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-lightbox-close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #fff;
  /* On dark overlay — always white */
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
  padding: 0;
}

.video-lightbox-close:hover,
.video-lightbox-close:focus-visible {
  opacity: 1;
  transform: scale(1.1);
}

.video-lightbox-close:focus-visible {
  outline: 2px solid #fff;
  /* On dark overlay — always white */
  outline-offset: 2px;
}

.video-lightbox-close svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 700px) {
  .slider-play {
    padding: 0.35rem 0.7rem 0.35rem 0.5rem;
    gap: 0.4rem;
  }

  .slider-play-icon {
    width: 18px;
    height: 18px;
  }

  .slider-play-icon svg {
    width: 8px;
    height: 8px;
  }

  .video-lightbox-content {
    width: 96vw;
  }

  .video-lightbox-close {
    top: -40px;
    right: -2px;
  }
}

/* ==========================================================================
   LICENSE PRICING - Compact Layout
   ========================================================================== */

.LicensePricing-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.LicensePricing-entities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.LicensePricing-entity {
  border: none;
  padding: 0;
  background: transparent;
}

.LicensePricing-entityLabel {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--type-xs);
  font-weight: 600;
  font-family: 'Cast', sans-serif;
}

.LicensePricing-entitySelect {
  width: 100%;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-fg);
  font-size: var(--type-sm);
  outline: none;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Cast', sans-serif;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

.LicensePricing .t-meta,
.LicensePricing-entitySelect option {
  font-family: 'Cast', sans-serif;
}

[data-theme="dark"] .LicensePricing-entitySelect {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f0f0f0' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

.LicensePricing-entitySelect:hover {
  background-color: var(--color-bg-subtle);
}

.LicensePricing-message {
  margin-bottom: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: 4px;
}

.LicensePricing-fonts {
  border-top: none;
  padding-top: 0;
  position: relative;
}

.LicensePricing-fonts::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1 * (var(--container-padding) + var(--space-3)));
  right: calc(-1 * (var(--container-padding) + var(--space-3)));
  height: 1px;
  background-color: var(--color-line);
}

.LicensePricing-fontsList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1);
}

.LicensePricing-fontItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-line);
  gap: var(--space-2);
  transition: background 0.2s;
}

.LicensePricing-fontItem:hover {
  background: var(--color-bg-subtle);
}

.LicensePricing-fontInfo {
  flex: 1;
  min-width: 0;
}

.LicensePricing-fontName {
  font-size: var(--type-sm, 0.875rem);
  font-weight: 500;
  margin-bottom: 0.125rem;
  line-height: 1.2;
}

.LicensePricing-fontMeta {
  font-size: var(--type-xs);
  color: var(--color-muted);
  line-height: 1.2;
}

.LicensePricing-fontActions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.LicensePricing-price {
  font-size: var(--type-sm, 0.875rem);
  font-weight: 500;
  min-width: 60px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.LicensePricing-addButton {
  background: var(--color-bg);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: var(--space-1) var(--space-2);
  font-size: var(--type-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  min-width: 70px;
  font-weight: 500;
}

.LicensePricing-addButton:hover:not(:disabled) {
  background: var(--color-fg);
  color: var(--color-bg);
}

.LicensePricing-addButton:active:not(:disabled) {
  opacity: 0.8;
}

.LicensePricing-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 2px solid var(--color-fg);
}

.LicensePricing-submit {
  padding: var(--space-1) var(--space-3);
  font-size: var(--type-sm);
  background: var(--color-bg);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.LicensePricing-submit:hover {
  background: var(--color-fg);
  color: var(--color-bg);
}

.LicensePricing-submit:active {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .LicensePricing-entities {
    grid-template-columns: 1fr;
  }
  
  .LicensePricing-fontsList {
    grid-template-columns: 1fr;
  }
  
  .LicensePricing-fontItem {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  
  .LicensePricing-fontActions {
    width: 100%;
    justify-content: space-between;
  }
}

/* ==========================================================================
   Contact Page
   ========================================================================== */

.Contact-intro {
  padding-bottom: var(--space-4);
}

.Contact-introContent {
  max-width: clamp(600px, 50vw, 1000px);
}

.Contact-headline {
  margin-bottom: var(--space-2);
}

.Contact-introText {
  font-size: var(--type-lg);
  line-height: var(--lh-relaxed);
}

/* Form Layout */
.Contact-body {
  padding-top: var(--space-5);
}

.Contact-formColumn {
  grid-column: 1 / span 7;
}

.Contact-detailsColumn {
  grid-column: 9 / span 4;
}

@media (max-width: 900px) {
  .Contact-formColumn {
    grid-column: 1 / -1;
    margin-bottom: var(--space-5);
  }
  
  .Contact-detailsColumn {
    grid-column: 1 / -1;
  }
}

/* Success Message */
.Contact-success {
  padding: var(--space-4);
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  border-radius: 0.5rem;
  color: var(--color-success-fg);
}

.Contact-success p {
  margin: 0;
  font-size: var(--type-base);
}

/* Form Styling */
.Contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 600px) {
  .Contact-form {
    grid-template-columns: 1fr;
  }
}

.Contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.Contact-label {
  display: block;
  font-size: var(--type-sm);
  font-weight: 500;
}

.t-required {
  opacity: 0.5;
  font-weight: 400;
  font-size: 0.9em;
  margin-left: 0.25rem;
}

.Contact-input,
.Contact-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  color: var(--color-fg);
  border-radius: 0.5rem;
  font-family: inherit;
  font-size: var(--type-base);
  transition: all 0.2s ease;
  -webkit-appearance: none;
}

.Contact-input {
   /* Slightly more rounded for inputs if desired, but 0.5rem is consistent */
}

.Contact-input:focus,
.Contact-textarea:focus {
  outline: none;
  border-color: var(--color-fg);
  background: var(--color-bg); /* Keep white/bg on focus */
}

/* Make inputs filled background initially? User said "flat looking". 
   Often implies filled light grey. 
*/
.Contact-input, .Contact-textarea {
	background: var(--color-bg-subtle);
	border-color: transparent;
}
.Contact-input:focus, .Contact-textarea:focus {
	background: var(--color-bg);
	border-color: var(--color-fg);
}


.Contact-submit {
  align-self: flex-start;
  min-width: 120px;
  background: var(--color-fg);
  color: var(--color-bg);
  border: none;
}
.Contact-submit:hover {
  opacity: 0.8;
  background: var(--color-fg);
}

/* Details Styling */
.Contact-address {
  margin-bottom: var(--space-4);
  font-style: normal;
}

.Contact-address p {
  margin: 0;
  line-height: var(--lh-relaxed);
}

.Contact-contactInfo p {
  margin: 0.5rem 0;
}

.Contact-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Contact Form - Additional Styling
   ========================================================================== */

/* Support for half-width fields in fieldGroup */
.Contact-field--is-half {
  /* Already handled by grid in Contact-fieldGroup */
}

.Contact-field--is-full {
  grid-column: 1 / -1;
}

/* Alignment options for submit button */
.Contact-actions--center {
  justify-content: center;
}

.Contact-actions--right {
  justify-content: flex-end;
}

.Contact-actions--left {
  justify-content: flex-start;
}

/* ==========================================================================
   SITE FOOTER
   ========================================================================== */

.SiteFooter {
  background: var(--color-bg);
  color: var(--color-fg);
  font-size: var(--type-sm);
}

.SiteFooter.l-section {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.SiteFooter-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr 0.8fr 0.8fr 1.5fr;
  gap: var(--space-2);
  align-items: start;
}

.SiteFooter-copy {
  color: var(--color-muted);
  margin: 0 0 var(--space-2);
  font-weight: 600;
}

.SiteFooter-desc {
  max-width: 400px;
  font-size: var(--type-sm);
  margin: 0;
}

.SiteFooter-navCol {
  display: block;
}

.SiteFooter-navTitle {
  margin: 0 0 var(--space-2);
  font-weight: 600;
}

.SiteFooter-navLinks {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: var(--type-xs);
}

.SiteFooter-navLinks a {
  display: block;
  text-decoration: none;
}

/* ---- Newsletter Signup ---- */
.SiteFooter-newsletterTitle {
  margin: 0 0 var(--space-2);
  font-weight: 600;
}

.Newsletter-desc {
  margin: var(--space-1) 0 0;
  font-size: var(--type-xs);
}

.Newsletter-form {
  position: relative;
}

.Newsletter-inputGroup {
  display: flex;
  gap: 0;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: var(--color-bg-subtle);
  overflow: hidden;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.Newsletter-inputGroup:focus-within {
  border-color: var(--color-fg);
  background: var(--color-bg);
}

.Newsletter-input {
  flex: 1;
  padding: 12px 20px;
  border: none;
  background: transparent;
  color: var(--color-fg);
  font-size: var(--type-xs);
  font-family: inherit;
  min-width: 0;
}

.Newsletter-input:focus {
  outline: none;
}

.Newsletter-input::placeholder {
  color: var(--color-muted);
}

.Newsletter-button {
  padding: 12px 20px;
  background: transparent;
  color: var(--color-fg);
  border: none;
  font-size: var(--type-xs);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}

.Newsletter-button:hover {
  opacity: 0.6;
}

.Newsletter-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.Newsletter-message {
  margin-top: 8px;
  font-size: var(--type-xs);
  padding: 0 4px;
}

.Newsletter-message.is-success {
  color: var(--color-success-fg);
}

.Newsletter-message.is-error {
  color: var(--color-error);
}

/* ---- Mobile Footer ---- */
@media (max-width: 700px) {
  /* Stack layout columns on small screens */
  .l-grid:has(> .l-stack[style*="grid-column: span"]) {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .l-grid > .l-stack[style*="grid-column: span"] {
    grid-column: 1 / -1 !important;
  }

  .SiteFooter.l-section {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }

  .SiteFooter-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-1);
  }

  .SiteFooter-info {
    grid-column: 1 / -1;
  }

  .SiteFooter-desc {
    max-width: none;
  }

  .SiteFooter-navCol {
    margin-top: var(--space-2);
  }

  .SiteFooter-navTitle {
    margin-bottom: 0.25rem;
  }

  .SiteFooter-navLinks {
    gap: 0.25rem;
    font-size: var(--type-sm);
  }

  .SiteFooter-newsletter {
    grid-column: 1 / -1;
    margin-top: var(--space-2);
  }
}

/* ---- Global Cart Toast ---- */
.CartToast {
  position: fixed;
  top: calc(3.5rem + var(--space-2));
  right: var(--space-3);
  padding: 12px 20px;
  border-radius: 8px;
  font-size: var(--type-sm);
  font-weight: 500;
  z-index: 200;
  box-shadow: 0 4px 12px var(--color-shadow);
  pointer-events: none;
  max-width: 320px;
}

.CartToast--success {
  background: var(--color-fg);
  color: var(--color-bg);
}

.CartToast--error {
  background: var(--color-error);
  color: #fff;
}

.CartToast-enter,
.CartToast-leave {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.CartToast-hidden {
  opacity: 0;
  transform: translateY(-8px);
}

.CartToast-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- EULA / Legal pages ---- */
.Legal-section {
  padding-top: var(--space-4);
  padding-bottom: var(--space-5);
}

.Legal-header {
  margin-bottom: var(--space-2);
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
}

.Legal-title {
  font-size: var(--type-xl);
}

.Legal-section .l-divider {
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
}

.Legal-columns {
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
}

.Eula-content h2 {
  font-size: var(--type-lg);
  margin-top: var(--space-3);
  margin-bottom: var(--space-1);
}

.Eula-content h2:first-child {
  margin-top: 0;
}

.Eula-content h3 {
  font-size: var(--type-base);
  font-weight: 600;
  margin-top: var(--space-2);
  margin-bottom: 0.25rem;
}

.Eula-content p {
  line-height: 1.55;
  margin-bottom: 0.5rem;
}

.Eula-content p + p {
  margin-top: 0;
}

.Eula-content ul,
.Eula-content ol {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  padding-left: 1.25rem;
}

.Eula-content li {
  line-height: 1.5;
  margin-bottom: 0.15rem;
}

.Eula-content hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-2) 0;
}

.Eula-content a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- 404 Page ---- */
.Error404.l-section {
  min-height: clamp(60vh, 70vh, 78vh);
  display: flex;
  align-items: center;
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.Error404-wrap {
  position: relative;
  width: min(100%, 70rem);
  padding: clamp(1.25rem, 3vw, 3rem);
  border: 1px solid var(--color-line);
  background:
    radial-gradient(circle at 90% 10%, var(--color-bg-subtle) 0%, transparent 50%),
    var(--color-bg);
  overflow: hidden;
}

.Error404-kicker {
  margin: 0 0 var(--space-2) 0;
  letter-spacing: 0.12em;
}

.Error404-title {
  margin: 0 0 var(--space-2) 0;
  font-size: clamp(2rem, 4.5vw, 4.25rem);
  line-height: 1.05;
  max-width: 16ch;
}

.Error404-text {
  margin: 0;
  color: var(--color-muted);
  max-width: 58ch;
}

.Error404-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--space-3);
}

.Error404-buttonSecondary {
  background: transparent;
}

.Error404-code {
  position: absolute;
  right: clamp(0.75rem, 2.5vw, 1.5rem);
  bottom: clamp(-0.45rem, -0.8vw, -0.25rem);
  font-size: clamp(5rem, 15vw, 11rem);
  line-height: 0.85;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--color-fg);
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 800px) {
  .Error404.l-section {
    min-height: auto;
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .Error404-wrap {
    padding: var(--space-3);
  }

  .Error404-title {
    max-width: none;
  }
}

/* ==========================================================================
   PORTFOLIO PAGE
   ========================================================================== */

body.page-portfolio,
body.page-silvio {
  --color-bg: #000000;
  --color-fg: #f5f5f5;
  --color-muted: rgba(245, 245, 245, 0.72);
  --color-border: rgba(255, 255, 255, 0.3);
  --color-border-strong: rgba(255, 255, 255, 0.45);
  --color-line: rgba(255, 255, 255, 0.14);
  --color-bg-subtle: #0f0f0f;
  --color-bg-elevated: #111111;
  background: #000;
  color: var(--color-fg);
}

body.page-portfolio .SiteHeader-themeToggle,
body.page-silvio .SiteHeader-themeToggle {
  display: none;
}

body.page-portfolio .SiteHeader-right .SiteHeader-divider--desktop:first-child,
body.page-silvio .SiteHeader-right .SiteHeader-divider--desktop:first-child {
  display: none;
}

.PortfolioPage.l-section {
  padding-top: var(--space-2);
  padding-bottom: var(--space-4);
}

body.page-portfolio .SiteHeader,
body.page-portfolio .l-content-frame,
body.page-portfolio #main,
body.page-portfolio .SiteFooter,
body.page-silvio .SiteHeader,
body.page-silvio .l-content-frame,
body.page-silvio #main,
body.page-silvio .SiteFooter {
  background: #000;
  color: var(--color-fg);
}

.PortfolioPage-intro {
  max-width: min(100%, 48rem);
  margin: 0 auto var(--space-3);
}

.PortfolioPage-kicker {
  margin: 0 0 var(--space-1);
  font-size: var(--type-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.PortfolioPage-title {
  margin: 0;
  font-size: clamp(1.4rem, 2.2vw, 2.2rem);
  line-height: 1.25;
  font-weight: 500;
}

.PortfolioPage-title p {
  margin: 0;
}

.PortfolioPage-grid {
  max-width: min(100%, 72rem);
  margin: 0 auto;
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.PortfolioGroup {
  display: grid;
  gap: 0;
}

.PortfolioMasonry {
  position: relative;
  min-height: 120px;
}

.PortfolioMasonry-item {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  overflow: hidden;
  background: transparent;
  will-change: transform, width, height;
  transition: transform 240ms ease;
}

.PortfolioMasonry-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: transparent;
}

.PortfolioMasonry-item.is-spacer {
  background: transparent;
  pointer-events: none;
}

@media (max-width: 900px) {
  .PortfolioPage.l-section {
    padding-top: var(--space-2);
  }

  .PortfolioPage-intro {
    margin-bottom: var(--space-2);
  }

  .PortfolioPage-grid {
    max-width: 100%;
    gap: var(--space-3);
  }

  .PortfolioMasonry-item {
    transition: none;
  }
}

@media (max-width: 520px) {
  .PortfolioPage .l-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}