/** ARTICLE PAGE **/

:root{
  /* =========================================
     ARTICLE FLUID SCALE
     reference width: 1920px
     ========================================= */

  /* ===== wide screen scaling ===== */
  /*
    1   = old behavior, stops at the 1920px design size
    1.5 = continues growing to 150% of the old max caps
    2   = continues growing to 200% of the old max caps
  */
  --wide-scale: 2;

  /* page spacing */
  --article-page-top-pad: clamp(4px, calc(8 / 1920 * 100vw), 8px);

  /* content widths */
  --article-content-w: clamp(320px, calc(1492 / 1920 * 100vw), 700px);

  /* hero widths */
  --article-hero-w: clamp(420px, 72vw, 680px);
  --article-hero-w-sm: clamp(320px, 55vw, 480px);
  --article-hero-w-md: clamp(380px, 65vw, 580px);
  --article-hero-w-lg: clamp(460px, 78vw, 760px);

  /* type scale */
  --article-body-line-height: 1.8;
  --article-body-font-size: clamp(16px, calc(18 / 1920 * 100vw), 18px);

  --article-topic-size: clamp(12px, calc(14 / 1920 * 100vw), 14px);
  --article-h3-size: clamp(18px, calc(22 / 1920 * 100vw), 22px);
  --article-h2-size: clamp(22px, calc(30 / 1920 * 100vw), 30px);
  --article-h1-size: clamp(28px, calc(40 / 1920 * 100vw), 40px);

  /* spacing scale */
  --article-space-xs: clamp(8px, calc(10 / 1920 * 100vw), 10px);
  --article-space-sm: clamp(14px, calc(18 / 1920 * 100vw), 18px);
  --article-space-md: clamp(18px, calc(22 / 1920 * 100vw), 22px);
  --article-space-lg: clamp(22px, calc(34 / 1920 * 100vw), 34px);
  --article-space-xl: clamp(32px, calc(48 / 1920 * 100vw), 48px);
  --article-space-2xl: clamp(48px, calc(64 / 1920 * 100vw), 64px);

  /* mapped article spacing */
  --article-head-mb: var(--article-space-lg);
  --article-topic-mb: var(--article-space-xs);
  --article-paragraph-gap: var(--article-space-md);
  --article-section-gap: var(--article-space-lg);
  --article-hero-mb: var(--article-space-lg);
  --article-inline-image-mt: var(--article-space-lg);
  --article-inline-image-mb: var(--article-space-lg);

  /* radii */
  --article-inline-image-radius: clamp(12px, calc(18 / 1920 * 100vw), 18px);
  --radius-md: clamp(10px, calc(14 / 1920 * 100vw), 14px);
  --radius-lg: clamp(14px, calc(18 / 1920 * 100vw), 18px);

  /* top nav */
  --top-link-w: clamp(72px, calc(209.6 / 1920 * 100vw), 209.6px);
  --top-links-gap: clamp(12px, calc(34 / 1920 * 100vw), 34px);
  --top-links-shift-x: 0px;
  --top-links-shift-y: clamp(-83px, calc(var(--content-pad) * -0.8), -10px);

  /* bottom nav */
  --article-bottom-nav-mt: clamp(40px, calc(80 / 1920 * 100vw), 80px);
  --article-bottom-nav-mb: clamp(20px, calc(40 / 1920 * 100vw), 40px);
  --article-bottom-nav-altar-shift-y: clamp(40px, calc(150 / 1920 * 100vw), 150px);
  --article-bottom-nav-altar-w: clamp(246px, calc(706 / 1920 * 100vw), 706px);

  /* effects */
  --shadow-nav: drop-shadow(0 8px 16px rgba(0,0,0,0.22));
  --shadow-image: drop-shadow(0 8px 22px rgba(0,0,0,0.14));
  --shadow-image-lg: drop-shadow(0 8px 24px rgba(0,0,0,0.18));
  --shadow-altar: drop-shadow(0 8px 14px rgba(0,0,0,.45));

  --hover-glow2: rgba(150,190,255,0.65);
}

/* =========================================
   WIDE SCREEN UPSCALE ONLY
   nothing changes at or below 1920px
   ========================================= */

@media (min-width: 1920px){
  :root{
    /* page spacing */
    --article-page-top-pad: clamp(8px, calc(8 / 1920 * 100vw), calc(8px * var(--wide-scale)));

    /* content widths */
    --article-content-w: clamp(700px, calc(700 / 1920 * 100vw), calc(700px * var(--wide-scale)));

    /* hero widths */
    --article-hero-w: clamp(680px, calc(680 / 1920 * 100vw), calc(680px * var(--wide-scale)));
    --article-hero-w-sm: clamp(480px, calc(480 / 1920 * 100vw), calc(480px * var(--wide-scale)));
    --article-hero-w-md: clamp(580px, calc(580 / 1920 * 100vw), calc(580px * var(--wide-scale)));
    --article-hero-w-lg: clamp(760px, calc(760 / 1920 * 100vw), calc(760px * var(--wide-scale)));

    /* type scale */
    --article-body-font-size: clamp(18px, calc(18 / 1920 * 100vw), calc(18px * var(--wide-scale)));
    --article-topic-size: clamp(14px, calc(14 / 1920 * 100vw), calc(14px * var(--wide-scale)));
    --article-h3-size: clamp(22px, calc(22 / 1920 * 100vw), calc(22px * var(--wide-scale)));
    --article-h2-size: clamp(30px, calc(30 / 1920 * 100vw), calc(30px * var(--wide-scale)));
    --article-h1-size: clamp(40px, calc(40 / 1920 * 100vw), calc(40px * var(--wide-scale)));

    /* spacing scale */
    --article-space-xs: clamp(10px, calc(10 / 1920 * 100vw), calc(10px * var(--wide-scale)));
    --article-space-sm: clamp(18px, calc(18 / 1920 * 100vw), calc(18px * var(--wide-scale)));
    --article-space-md: clamp(22px, calc(22 / 1920 * 100vw), calc(22px * var(--wide-scale)));
    --article-space-lg: clamp(34px, calc(34 / 1920 * 100vw), calc(34px * var(--wide-scale)));
    --article-space-xl: clamp(48px, calc(48 / 1920 * 100vw), calc(48px * var(--wide-scale)));
    --article-space-2xl: clamp(64px, calc(64 / 1920 * 100vw), calc(64px * var(--wide-scale)));

    /* radii */
    --article-inline-image-radius: clamp(18px, calc(18 / 1920 * 100vw), calc(18px * var(--wide-scale)));
    --radius-md: clamp(14px, calc(14 / 1920 * 100vw), calc(14px * var(--wide-scale)));
    --radius-lg: clamp(18px, calc(18 / 1920 * 100vw), calc(18px * var(--wide-scale)));

    /* top nav */
    --top-link-w: clamp(209.6px, calc(209.6 / 1920 * 100vw), calc(209.6px * var(--wide-scale)));
    --top-links-gap: clamp(34px, calc(34 / 1920 * 100vw), calc(34px * var(--wide-scale)));
    --top-links-shift-y: clamp(calc(-83px * var(--wide-scale)), calc(-83 / 1920 * 100vw), -83px);

    /* bottom nav */
    --article-bottom-nav-mt: clamp(80px, calc(80 / 1920 * 100vw), calc(80px * var(--wide-scale)));
    --article-bottom-nav-mb: clamp(40px, calc(40 / 1920 * 100vw), calc(40px * var(--wide-scale)));
    --article-bottom-nav-altar-shift-y: clamp(150px, calc(150 / 1920 * 100vw), calc(150px * var(--wide-scale)));
    --article-bottom-nav-altar-w: clamp(706px, calc(706 / 1920 * 100vw), calc(706px * var(--wide-scale)));
  }
}

.page--inner{
  --page-bottom-clearance: clamp(50px, calc(80 / 1920 * 100vw), 80px);
}

@media (min-width: 1920px){
  .page--inner{
    --page-bottom-clearance: clamp(80px, calc(80 / 1920 * 100vw), calc(80px * var(--wide-scale)));
  }
}

/* =========================================
   AUTHOR THEMES
   ========================================= */

.article-author--jesse{
  --corner-tl: url("/static/site_imgs/knot_tlcj.png");
  --corner-tr: url("/static/site_imgs/knot_trcj.png");
  --corner-br: url("/static/site_imgs/knot_brcj.png");
  --corner-bl: url("/static/site_imgs/knot_blcj.png");

  --page-bg:
    radial-gradient(circle at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.12) 100%),
    linear-gradient(140deg, #1f2833, #2a3440);

  --hover-glow: rgba(130, 170, 255, 0.55);
}

.article-author--melanie{
  --corner-tl: url("/static/site_imgs/knot_tlcp.png");
  --corner-tr: url("/static/site_imgs/knot_trcp.png");
  --corner-br: url("/static/site_imgs/knot_brcp.png");
  --corner-bl: url("/static/site_imgs/knot_blcp.png");

  --page-bg:
    radial-gradient(circle at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.12) 100%),
    linear-gradient(140deg, #2a1f33, #3a2a3f);

  --hover-glow: rgba(170, 130, 255, 0.55);
}

.article-author--dual{
  --page-bg:
    radial-gradient(circle at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.08) 100%),
    linear-gradient(140deg, #353046, #3f3947);
}

@media (max-width: 650px){
  .article-author--jesse{
    --corner-tl: url("/static/site_imgs/generated/knot_tlcj-320.png");
    --corner-tl: image-set(url("/static/site_imgs/generated/knot_tlcj-320.png") 2x, url("/static/site_imgs/generated/knot_tlcj-640.png") 4x, url("/static/site_imgs/knot_tlcj.png") 6x);
    --corner-tr: url("/static/site_imgs/generated/knot_trcj-320.png");
    --corner-tr: image-set(url("/static/site_imgs/generated/knot_trcj-320.png") 2x, url("/static/site_imgs/generated/knot_trcj-640.png") 4x, url("/static/site_imgs/knot_trcj.png") 6x);
    --corner-br: url("/static/site_imgs/generated/knot_brcj-320.png");
    --corner-br: image-set(url("/static/site_imgs/generated/knot_brcj-320.png") 2x, url("/static/site_imgs/generated/knot_brcj-640.png") 4x, url("/static/site_imgs/knot_brcj.png") 6x);
    --corner-bl: url("/static/site_imgs/generated/knot_blcj-320.png");
    --corner-bl: image-set(url("/static/site_imgs/generated/knot_blcj-320.png") 2x, url("/static/site_imgs/generated/knot_blcj-640.png") 4x, url("/static/site_imgs/knot_blcj.png") 6x);
  }

  .article-author--melanie{
    --corner-tl: url("/static/site_imgs/generated/knot_tlcp-320.png");
    --corner-tl: image-set(url("/static/site_imgs/generated/knot_tlcp-320.png") 2x, url("/static/site_imgs/generated/knot_tlcp-640.png") 4x, url("/static/site_imgs/knot_tlcp.png") 6x);
    --corner-tr: url("/static/site_imgs/generated/knot_trcp-320.png");
    --corner-tr: image-set(url("/static/site_imgs/generated/knot_trcp-320.png") 2x, url("/static/site_imgs/generated/knot_trcp-640.png") 4x, url("/static/site_imgs/knot_trcp.png") 6x);
    --corner-br: url("/static/site_imgs/generated/knot_brcp-320.png");
    --corner-br: image-set(url("/static/site_imgs/generated/knot_brcp-320.png") 2x, url("/static/site_imgs/generated/knot_brcp-640.png") 4x, url("/static/site_imgs/knot_brcp.png") 6x);
    --corner-bl: url("/static/site_imgs/generated/knot_blcp-320.png");
    --corner-bl: image-set(url("/static/site_imgs/generated/knot_blcp-320.png") 2x, url("/static/site_imgs/generated/knot_blcp-640.png") 4x, url("/static/site_imgs/knot_blcp.png") 6x);
  }
}

/* =========================================
   SOURCES
   ========================================= */

.sources{
  font-size: 0.9rem;
  opacity: 0.85;
}

.sources h3{
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.sources ul{
  margin-top: 0;
  padding-left: 1.2rem;
}

.sources li{
  margin-bottom: 0.2rem;
}

@media (min-width: 1920px){
  .sources{
    font-size: clamp(0.9rem, calc(16.2 / 1920 * 100vw), calc(0.9rem * var(--wide-scale)));
  }

  .sources h3{
    font-size: clamp(1rem, calc(18 / 1920 * 100vw), calc(1rem * var(--wide-scale)));
    margin-bottom: clamp(0.4rem, calc(7.2 / 1920 * 100vw), calc(0.4rem * var(--wide-scale)));
  }

  .sources ul{
    padding-left: clamp(1.2rem, calc(21.6 / 1920 * 100vw), calc(1.2rem * var(--wide-scale)));
  }

  .sources li{
    margin-bottom: clamp(0.2rem, calc(3.6 / 1920 * 100vw), calc(0.2rem * var(--wide-scale)));
  }
}

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

.article-page{
  padding-top: var(--article-page-top-pad);
}

/* =========================================
   TOP NAV
   ========================================= */

.top-links{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--top-links-gap);
  margin-top: 0;
  margin-bottom: calc(var(--content-pad) * -0.25);
}

.top-links__home{
  position: relative;
  display: inline-block;
  line-height: 0;
  text-decoration: none;
  width: var(--top-link-w);
  transform:
    translateX(var(--top-links-shift-x))
    translateY(var(--top-links-shift-y));
  transition: transform 160ms ease, filter 160ms ease;
  filter: var(--shadow-nav);
}

.top-links__home img,
.top-links__inc img{
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.top-links__home:hover{
  transform:
    translateX(var(--top-links-shift-x))
    translateY(var(--top-links-shift-y));
  filter:
    drop-shadow(0 0 10px var(--hover-glow))
    drop-shadow(0 0 22px var(--hover-glow));
}

.top-links__home:active{
  transform:
    translateX(var(--top-links-shift-x))
    translateY(var(--top-links-shift-y));
}

/* =========================================
   BOTTOM NAV
   ========================================= */

.article-bottom-nav{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: var(--article-bottom-nav-mt) auto var(--article-bottom-nav-mb);
  position: relative;
  top: 0;
}

.article-bottom-nav__altar{
  display: inline-block;
  line-height: 0;
  transform: translateY(var(--article-bottom-nav-altar-shift-y));
  filter: var(--shadow-altar);
  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    opacity 0.18s ease;
}

.article-bottom-nav__altar img{
  display: block;
  width: var(--article-bottom-nav-altar-w);
  height: auto;
}

.article-bottom-nav__altar:hover,
.article-bottom-nav__altar:focus-visible{
  filter:
    var(--shadow-altar)
    drop-shadow(0 0 10px var(--hover-glow))
    drop-shadow(0 0 20px var(--hover-glow));
}

.article-bottom-nav__altar:hover::after{
  box-shadow:
    inset 0 0 0 1px rgba(170,195,235,0.45),
    inset 0 0 24px rgba(170,195,235,0.18);
}

.article-bottom-nav__altar:active{
  transform: translateY(var(--article-bottom-nav-altar-shift-y));
}

/* =========================================
   ARTICLE HEAD
   ========================================= */

.article-head{
  display: block;
  width: min(100%, var(--article-content-w));
  margin: 0 auto var(--article-head-mb);
  text-align: center;
}

.article-head.no-hero::after{
  content: "";
  display: block;
  width: 80px;
  height: 1px;
  margin: 18px auto 0;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.35),
    transparent
  );
}

@media (min-width: 1920px){
  .article-head.no-hero::after{
    width: clamp(80px, calc(80 / 1920 * 100vw), calc(80px * var(--wide-scale)));
    margin-top: clamp(18px, calc(18 / 1920 * 100vw), calc(18px * var(--wide-scale)));
  }
}

.article-topic{
  margin-bottom: var(--article-topic-mb);
  font-family: "Cinzel", serif;
  font-size: var(--article-topic-size);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(190, 205, 230, 0.88);
  text-shadow: 0 0 10px rgba(0,0,0,0.22);
}

.article-head h1{
  display: block;
  width: 100%;
  text-align: center;
  margin: 0;
  font-family: "Cinzel", serif;
  font-size: var(--article-h1-size);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 0 14px rgba(0,0,0,0.28);
}

.article-head__subtitle{
  display: block;
  width: 100%;
  margin: 10px 0 0;
  text-align: center;
  color: rgba(220,228,242,0.9);
  font-family: "Cinzel", serif;
  font-size: clamp(18px, calc(22 / 1920 * 100vw), 22px);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-shadow: 0 0 12px rgba(0,0,0,0.25);
}

/* =========================================
   HERO
   ========================================= */

.article-hero{
  --article-hero-long-edge: var(--article-hero-w);

  width: min(100%, var(--article-hero-long-edge));
  margin: 0 auto var(--article-hero-mb);
  display: flex;
  justify-content: center;
}

.article-hero--sm{
  --article-hero-long-edge: var(--article-hero-w-sm);
}

.article-hero--md{
  --article-hero-long-edge: var(--article-hero-w-md);
}

.article-hero--lg{
  --article-hero-long-edge: var(--article-hero-w-lg);
}

.article-hero.is-portrait{
  width: min(
    100%,
    calc(var(--article-hero-long-edge) * var(--article-hero-aspect-ratio, 1))
  );
}

.article-hero img{
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 0;
  filter: var(--shadow-image-lg);
}

.article-hero.is-portrait img{
  width: 100%;
  height: auto;
}

.article-hero.is-landscape img{
  width: 100%;
  height: auto;
}

/* =========================================
   BODY
   ========================================= */

.article-body{
  display: flow-root;
  width: min(100%, var(--article-content-w));
  margin: 0 auto;
  font-size: var(--article-body-font-size);
  line-height: var(--article-body-line-height);
  color: rgba(245,244,240,0.94);
}

.article-body p{
  margin: 0 0 var(--article-paragraph-gap);
}

.article-body h2:not(.panel-glass__title),
.article-body h3:not(.panel-glass__title){
  text-align: center;
  font-family: "Cinzel", serif;
  font-weight: 500;
  margin: 64px 0 32px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.96);
  text-transform: uppercase;
  position: relative;
}

@media (min-width: 1920px){
  .article-body h2:not(.panel-glass__title),
  .article-body h3:not(.panel-glass__title){
    margin:
      clamp(64px, calc(64 / 1920 * 100vw), calc(64px * var(--wide-scale)))
      0
      clamp(32px, calc(32 / 1920 * 100vw), calc(32px * var(--wide-scale)));
  }
}

.article-body h2:not(.panel-glass__title){
  font-size: var(--article-h2-size);
}

.article-body h2:not(.panel-glass__title)::after{
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  margin: 14px auto 0;
  background: rgba(255,255,255,0.3);
}

@media (min-width: 1920px){
  .article-body h2:not(.panel-glass__title)::after{
    width: clamp(60px, calc(60 / 1920 * 100vw), calc(60px * var(--wide-scale)));
    margin-top: clamp(14px, calc(14 / 1920 * 100vw), calc(14px * var(--wide-scale)));
  }
}

.article-body h3:not(.panel-glass__title){
  font-size: var(--article-h3-size);
}

.article-body ul,
.article-body ol{
  margin: 0 0 var(--article-paragraph-gap) 1.4em;
  padding: 0;
}

.article-body li{
  margin-bottom: 8px;
}

@media (min-width: 1920px){
  .article-body li{
    margin-bottom: clamp(8px, calc(8 / 1920 * 100vw), calc(8px * var(--wide-scale)));
  }
}

.article-body a{
  color: rgba(190, 215, 255, 0.95);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-body strong{
  color: rgba(255,255,255,0.98);
}

.article-body em{
  color: rgba(230,235,245,0.96);
}

/* =========================================
   AUTHOR TAG
   ========================================= */

.article-author-tag{
  display: flex;
  justify-content: center;
  width: min(100%, var(--article-content-w));
  margin: var(--article-space-xl) auto 0;
}

.article-author-tag img{
  display: block;
  width: min(100%, clamp(180px, calc(273 / 1920 * 100vw), 273px));
  height: auto;
  filter: var(--shadow-image);
  user-select: none;
  -webkit-user-drag: none;
}

.article-published-date{
  display: block;
  width: min(100%, var(--article-content-w));
  margin: clamp(10px, calc(14 / 1920 * 100vw), 14px) auto 0;
  color: rgba(245,244,240,0.86);
  text-align: center;
  font-family: "Cinzel", serif;
  font-size: clamp(13px, calc(15 / 1920 * 100vw), 15px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.article-updated-date{
  display: block;
  width: min(100%, var(--article-content-w));
  margin: clamp(4px, calc(6 / 1920 * 100vw), 6px) auto 0;
  color: rgba(245,244,240,0.7);
  text-align: center;
  font-family: "Cinzel", serif;
  font-size: clamp(12px, calc(14 / 1920 * 100vw), 14px);
  font-weight: 500;
  letter-spacing: 0.07em;
  line-height: 1.4;
}

@media (min-width: 1920px){
  .article-author-tag img{
    width: min(100%, clamp(273px, calc(273 / 1920 * 100vw), calc(273px * var(--wide-scale))));
  }

  .article-published-date{
    margin-top: clamp(14px, calc(14 / 1920 * 100vw), calc(14px * var(--wide-scale)));
    font-size: clamp(15px, calc(15 / 1920 * 100vw), calc(15px * var(--wide-scale)));
  }

  .article-updated-date{
    margin-top: clamp(6px, calc(6 / 1920 * 100vw), calc(6px * var(--wide-scale)));
    font-size: clamp(14px, calc(14 / 1920 * 100vw), calc(14px * var(--wide-scale)));
  }
}

/* =========================================
   INLINE ARTICLE IMAGES
   ========================================= */

.article-body img{
  display: block;
  height: auto;
  max-width: 100%;
  margin: var(--article-inline-image-mt) auto var(--article-inline-image-mb);
  border-radius: var(--article-inline-image-radius);
  filter: var(--shadow-image);
}

.article-body img.article-img--body{
  width: 100%;
}

.article-body img.article-img--natural{
  width: auto;
}

.article-body img.article-img--float{
  width: 40%;
  margin-top: 0.8em;
  margin-bottom: 0.25em;
}

.article-body img.article-img--float-left{
  float: left;
  margin-right: var(--article-space-md);
  margin-left: 0;
}

.article-body img.article-img--float-right{
  float: right;
  margin-right: 0;
  margin-left: var(--article-space-md);
}

@media (max-width: 680px){
  .article-body img.article-img--float{
    float: none;
    width: min(100%, 420px);
    margin: var(--article-space-sm) auto var(--article-space-md);
  }
}

/* =========================================
   ARTICLE QUOTES
   ========================================= */

.article-body blockquote{
  position: relative;
  isolation: isolate;
  width: min(100%, 620px);
  margin: var(--article-space-lg) auto;
  padding: 50px clamp(24px, 6vw, 48px) 30px;
  overflow: hidden;
  border: 1px solid rgba(170,195,235,0.2);
  border-radius: 22px;
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(170,195,235,0.13),
      rgba(170,195,235,0) 58%
    ),
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.055),
      rgba(255,255,255,0.018) 52%,
      rgba(0,0,0,0.12)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.32),
    0 12px 30px rgba(0,0,0,0.18);
  color: rgba(242,241,237,0.96);
  text-align: center;
}

.article-body blockquote::before{
  content: "“";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(190,215,255,0.72);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 58px;
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 0 18px rgba(150,190,255,0.24);
}

.article-body blockquote > p{
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(17px, calc(20 / 1920 * 100vw), 20px);
  line-height: 1.7;
  text-wrap: pretty;
}

.article-body blockquote > p + p{
  margin-top: 14px;
}

.article-body blockquote .article-quote__source{
  display: block;
  margin-top: 18px;
  color: rgba(190,205,230,0.82);
  font-family: "Cinzel", serif;
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}

@media (min-width: 1920px){
  .article-body blockquote{
    width: min(100%, clamp(620px, calc(620 / 1920 * 100vw), calc(620px * var(--wide-scale))));
    padding:
      clamp(50px, calc(50 / 1920 * 100vw), calc(50px * var(--wide-scale)))
      clamp(48px, calc(48 / 1920 * 100vw), calc(48px * var(--wide-scale)))
      clamp(30px, calc(30 / 1920 * 100vw), calc(30px * var(--wide-scale)));
    border-radius: clamp(22px, calc(22 / 1920 * 100vw), calc(22px * var(--wide-scale)));
  }

  .article-body blockquote::before{
    top: clamp(10px, calc(10 / 1920 * 100vw), calc(10px * var(--wide-scale)));
    font-size: clamp(58px, calc(58 / 1920 * 100vw), calc(58px * var(--wide-scale)));
  }

  .article-body blockquote > p{
    font-size: clamp(20px, calc(20 / 1920 * 100vw), calc(20px * var(--wide-scale)));
  }

  .article-body blockquote > p + p{
    margin-top: clamp(14px, calc(14 / 1920 * 100vw), calc(14px * var(--wide-scale)));
  }

  .article-body blockquote .article-quote__source{
    margin-top: clamp(18px, calc(18 / 1920 * 100vw), calc(18px * var(--wide-scale)));
    font-size: clamp(12px, calc(12 / 1920 * 100vw), calc(12px * var(--wide-scale)));
  }
}

/* =========================================
   MOBILE NAV ADJUSTMENT
   ========================================= */

@media (max-width: 500px){
  :root{
    --top-links-shift-y: 34px;
  }

  .top-links{
    margin-bottom: 58px;
  }
}

/* =========================================
   REUSABLE IMAGE OVERLAY COMPONENT
   ========================================= */

.article-body .image-overlay{
  --overlay-max-w: 520px;
  --overlay-w: 100%;
  --overlay-shift-x: 0px;
  --overlay-shift-y: 0px;

  position: relative;
  display: block;
  width: min(100%, var(--overlay-max-w));
  margin: 0 auto 18px;
  line-height: 0;
  cursor: pointer;
}

@media (min-width: 1920px){
  .article-body .image-overlay{
    --overlay-max-w: clamp(520px, calc(520 / 1920 * 100vw), calc(520px * var(--wide-scale)));
    margin-bottom: clamp(18px, calc(18 / 1920 * 100vw), calc(18px * var(--wide-scale)));
  }
}

.article-body .image-overlay__base{
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  max-width: 100%;
  border-radius: 0;
  filter: var(--shadow-image);
  position: relative;
  z-index: 1;
}

.article-body .image-overlay__overlay{
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--overlay-w);
  height: auto;
  transform:
    translate(-50%, -50%)
    translateX(var(--overlay-shift-x))
    translateY(var(--overlay-shift-y));
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 2;

  /* reset inherited styles */
  margin: 0;
  max-width: none;
  border-radius: 0;
  filter: none;
}

/* desktop hover */
@media (hover: hover) and (pointer: fine){
  .article-body .image-overlay:hover .image-overlay__overlay{
    opacity: 1;
  }
}

/* mobile click/tap state */
.article-body .image-overlay.is-active .image-overlay__overlay{
  opacity: 1;
}

/* =========================================
   ARTICLE-SPECIFIC TUNING
   ========================================= */

.panel--moon-phases .image-overlay{
  width: min(100%, clamp(420px, 72vw, 680px));
  --overlay-w: 95.5%;
  --overlay-shift-y: -1px;
  --overlay-shift-x: 0px;
}

@media (min-width: 1920px){
  .panel--moon-phases .image-overlay{
    width: min(100%, clamp(680px, calc(680 / 1920 * 100vw), calc(680px * var(--wide-scale))));
  }
}

/* =========================================
   EARTH ORBIT PANEL
   ========================================= */

.panel--earth-orbit .image-overlay{
  width: clamp(420px, 72vw, 680px);
  max-width: 100%;
  --overlay-w: 100%;
  --overlay-shift-x: 0px;
  --overlay-shift-y: 0px;
}

@media (min-width: 1920px){
  .panel--earth-orbit .image-overlay{
    width: clamp(680px, calc(680 / 1920 * 100vw), calc(680px * var(--wide-scale)));
    max-width: 100%;
  }
}

.panel--earth-orbit .panel-glass__inner{
  text-align: center;
}

.panel--earth-orbit .panel-glass__list{
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.panel--earth-orbit .panel-glass__list strong{
  color: rgba(255,255,255,0.98);
  letter-spacing: 0.03em;
}

.panel--earth-orbit p{
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1920px){
  .panel--earth-orbit .panel-glass__list,
  .panel--earth-orbit p{
    max-width: clamp(620px, calc(620 / 1920 * 100vw), calc(620px * var(--wide-scale)));
  }
}

/* =========================================
   IMAGE GALLERY
   ========================================= */

.image-gallery,
.herb-gallery{
  display: grid;
  gap: 18px;
}

@media (min-width: 1920px){
  .image-gallery,
  .herb-gallery{
    gap: clamp(18px, calc(18 / 1920 * 100vw), calc(18px * var(--wide-scale)));
  }
}

.panel-glass__image-list,
.panel-glass__herb-list{
  list-style: none;
  margin: 0 0 var(--article-paragraph-gap);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px;
}

@media (min-width: 1920px){
  .panel-glass__image-list,
  .panel-glass__herb-list{
    gap:
      clamp(12px, calc(12 / 1920 * 100vw), calc(12px * var(--wide-scale)))
      clamp(28px, calc(28 / 1920 * 100vw), calc(28px * var(--wide-scale)));
  }
}

.panel-glass__image-item,
.panel-glass__herb-item{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

@media (min-width: 1920px){
  .panel-glass__image-item,
  .panel-glass__herb-item{
    gap: clamp(14px, calc(14 / 1920 * 100vw), calc(14px * var(--wide-scale)));
  }
}

.image-thumb,
.herb-thumb{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  flex: 0 0 auto;
  line-height: 0;
  border-radius: 10px;
  transition:
    transform 160ms ease,
    filter 160ms ease,
    opacity 160ms ease;
}

@media (min-width: 1920px){
  .image-thumb,
  .herb-thumb{
    border-radius: clamp(10px, calc(10 / 1920 * 100vw), calc(10px * var(--wide-scale)));
  }
}

.image-thumb img,
.herb-thumb img{
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 10px;
  margin: 0;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.18));
  transition:
    transform 160ms ease,
    filter 160ms ease;
}

@media (min-width: 1920px){
  .image-thumb img,
  .herb-thumb img{
    width: clamp(48px, calc(48 / 1920 * 100vw), calc(48px * var(--wide-scale)));
    height: clamp(48px, calc(48 / 1920 * 100vw), calc(48px * var(--wide-scale)));
    border-radius: clamp(10px, calc(10 / 1920 * 100vw), calc(10px * var(--wide-scale)));
  }
}

.image-thumb:hover img,
.image-thumb:focus-visible img,
.herb-thumb:hover img,
.herb-thumb:focus-visible img{
  transform: translateY(-1px);
  filter:
    drop-shadow(0 0 8px var(--hover-glow))
    drop-shadow(0 0 16px var(--hover-glow));
  outline: none;
}

.image-thumb.is-active img,
.herb-thumb.is-active img{
  transform: translateY(-1px);
  filter:
    drop-shadow(0 0 10px var(--hover-glow))
    drop-shadow(0 0 20px var(--hover-glow));
}

.image-name,
.herb-name{
  min-width: 0;
}

.image-preview,
.herb-preview{
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

@media (min-width: 1920px){
  .image-preview,
  .herb-preview{
    margin-top: clamp(6px, calc(6 / 1920 * 100vw), calc(6px * var(--wide-scale)));
  }
}

.image-preview__img,
.herb-preview__img{
  display: block;
  width: min(100%, 320px);
  height: auto;
  margin: 0;
  border-radius: 14px;
  touch-action: pan-y;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.22));
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

@media (min-width: 1920px){
  .image-preview__img,
  .herb-preview__img{
    width: min(100%, clamp(320px, calc(320 / 1920 * 100vw), calc(320px * var(--wide-scale))));
    border-radius: clamp(14px, calc(14 / 1920 * 100vw), calc(14px * var(--wide-scale)));
  }
}

@media (max-width: 640px){
  .panel-glass__image-list,
  .panel-glass__herb-list{
    grid-template-columns: 1fr;
  }

  .image-preview__img,
  .herb-preview__img{
    width: min(100%, 260px);
  }
}