:root{
  --page-bg: #7E83A8;
  --panel-w: min(92vw, 760px);     /* desktop cap */
  --panel-pad: clamp(16px, 3vmin, 28px);
  --panel-bg: rgb(185 188 207 / 85%);  /* your bluish gray with opacity */
  --panel-radius: 0px;
  --gutter-l: max(16px, env(safe-area-inset-left));
  --gutter-r: max(16px, env(safe-area-inset-right));
}

html, body { height: 100%; margin: 0; overflow-x: hidden; }

body{
  background: var(--page-bg);
  color:#111;
  font-family: "Uchen", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
}

/* page layout */
.stage{
  min-height: 100svh;
  display: grid;
  place-items: start center;
  align-content: start;                          /* keeps rows tight */
  row-gap: 8px;                                  /* gap between panels */
  padding: 8vmin var(--gutter-r) 6vmin var(--gutter-l);
  position: relative;
  z-index: 2;
}

/* the panel (textbox) */
.panel{
  box-sizing: border-box;
  width: min(var(--panel-w), 100%);
  max-width: calc(100% - (var(--gutter-l) + var(--gutter-r)));
  margin-inline: auto;
  padding: var(--panel-pad);

  background: var(--panel-bg);
  border-radius: var(--panel-radius);
  border: 1px solid rgb(0 0 0 / 15%);
  box-shadow: 0 10px 40px rgb(0 0 0 / 18%);
  color: #111;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  overflow-wrap: anywhere;
}

.panel h1{ margin: 0 0 .35em; font-size: clamp(22px, 3.2vmin, 32px); }
.panel p { margin: .75em 0; }
.panel a { color: #0c3e7e; }

/* optional: justify blog paragraphs */
.panel p.justify{
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* (Optional) the drifting letters layer you used */
.scramble{
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 1;
  background: radial-gradient(60% 52% at 50% 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,.10) 100%);
}
.scramble span{
  position:absolute; left: var(--x,50%); top: var(--y,50%);
  transform: translate(-50%,-50%) rotate(var(--rot,0deg));
  font-family: "Coral Pixels", ui-serif, Georgia, serif;
  font-weight: 700; font-size: 4rem; line-height: 1; color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
  animation: drift var(--dur,6s) ease-in-out infinite alternate;
  opacity:.96; will-change: transform;
  transition: font-size 400ms ease;
}

@keyframes drift{
  from{ transform: translate(calc(-50% - var(--dx,0px)), calc(-50% - var(--dy,0px))) rotate(var(--rot,0deg)); }
  to  { transform: translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px))) rotate(calc(var(--rot,0deg) + var(--drot,6deg))); }
}
@media (prefers-reduced-motion: reduce){
  .scramble span{ animation: none; }
  /* hide drifting letters on small/touch screens, this page only */
}
@media (max-width: 900px), (hover: none) and (pointer: coarse){
  .no-scramble-mobile .scramble{ display: none !important; }
}
.home-chip{
  /* sizing like your panels */
  box-sizing: border-box;
  justify-self: center;
  width: min(var(--panel-w), 100%);
  max-width: calc(100% - (var(--gutter-l) + var(--gutter-r)));
  margin: 0 auto;                 /* grid row-gap handles spacing */
  text-align: left;

  /* look */
  padding: .35rem .6rem;
  background: var(--panel-bg);    /* base color */
  border: 1px solid rgb(0 0 0 / 12%);
  box-shadow: 0 6px 24px rgb(0 0 0 / 14%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: var(--panel-radius);
  color: #0c3e7e;
  text-decoration: none;
  font-weight: 600;
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;  /* centers the text vertically */
}
.home-chip .chip-label{
  line-height: 2;      /* removes extra font leading */
}
 .home-chip .scribble{
  position: absolute;
  left: .6rem; right: .6rem;
  bottom: .35rem;
  width: 100%;                 /* ensure it has width */
  height: 15px;
  display: block;
  opacity: 0;                  /* show on hover, like before */
  transition: opacity 160ms ease;
  overflow: visible;
}

.home-chip .scribble path{
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* “wipe” uses the normalized 1000 units */
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 360ms ease-out;
}

/* hover reveals + wipes */
.home-chip:hover .scribble{ opacity: .85; }
.home-chip:hover .scribble path{ stroke-dashoffset: 0; }

/* reduced motion: no wipe, just show */
@media (prefers-reduced-motion: reduce){
  .home-chip .scribble{ opacity: .6; }
  .home-chip .scribble path{
    transition: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}
.home-chip .chip-label .ch{
  display: inline-block;
  will-change: transform;
  transition: transform 180ms ease;
}

/* slightly stronger/faster while interacting */
.home-chip.is-smashing .chip-label .ch{
  transition: transform 80ms linear;
}

/* motion safety */
@media (prefers-reduced-motion: reduce){
  .home-chip .chip-label .ch{ transition: none; }
}
.home-chip:focus-visible .chip-label .ch{
  transform: translateY(-1px);
}
.gallery-grid{
  list-style: none;
  padding: 0;
  margin: .75rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* ← force 3 equal cols */
  gap: 12px;
}
@media (max-width: 900px){ .gallery-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .gallery-grid{ grid-template-columns: 1fr; } }

/* CARD + VHS wobble scoped per card */
.series-card{
  display: grid;
  grid-template-rows: auto min-content;
  gap: 8px;
  text-decoration: none;
  padding: 8px;
  background: color-mix(in oklab, var(--panel-bg) 92%, white);
  border: 1px solid rgb(0 0 0 / 10%);
  box-shadow: 0 6px 20px rgb(0 0 0 / 12%);
  color: inherit;

  /* VHS tuning knobs (now valid custom properties) */
  --vhs-scanline-opac: .12;   /* darker horizontal lines */
  --vhs-sheen-opac:     .10;  /* top sheen */
  --vhs-vignette-opac:  .22;  /* edge darkening */
  --vhs-roll-speed:      .55s;/* scanline roll speed */
  --vhs-jitter-amp:      1.0px;/* horizontal shake amount */
  --vhs-jitter-tilt:     0.30deg;/* tiny skew */

  position: relative;
  overflow: hidden; /* keep overlay inside this card */
}

.series-card img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #d9dbe5;
  transition: transform 200ms ease, filter 200ms ease;
}

.series-card:hover img{
  transform: translateY(-3px);
  filter: brightness(.97) contrast(1.06) saturate(.96);
  animation: vhs-jitter 400ms steps(4) infinite;
}

@keyframes gallery-roll{
  to { background-position: 0 4px, 0 2px; }
}

@keyframes vhs-jitter{
  0%   { transform: translateY(-2px) translateX(calc(var(--vhs-jitter-amp) * -1)) skewX(var(--vhs-jitter-tilt)); }
  50%  { transform: translateY(-2px) translateX(calc(var(--vhs-jitter-amp) *  1)) skewX(calc(var(--vhs-jitter-tilt) * -1)); }
  100% { transform: translateY(-2px) translateX(calc(var(--vhs-jitter-amp) * -1)) skewX(var(--vhs-jitter-tilt)); }
}

/* title stays above overlays */
.series-title{ position: relative; z-index: 3; font-weight: 700; line-height: 1.2; }

/* the scanline overlay ONLY on the hovered card */
.series-card::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
  background:
    linear-gradient(180deg, rgba(255,255,255,var(--vhs-sheen-opac)), transparent 60%),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,var(--vhs-scanline-opac)) 0px,
      rgba(0,0,0,var(--vhs-scanline-opac)) 1px,
      transparent 2px,
      transparent 4px);
  background-position: 0 0, 0 0;
  background-size: 100% 100%, 100% 4px;
  z-index: 1; /* above image, below text */
}
.series-card:hover::after{
  opacity: 1;
  animation: gallery-roll var(--vhs-roll-speed) linear infinite;
}

/* vignette/darken at edges */
.series-card::before{
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%,
      transparent 55%,
      rgba(0,0,0,var(--vhs-vignette-opac)) 100%);
  opacity: 0;
  transition: opacity 160ms ease;
  z-index: 2; /* above scanlines, below title text */
}
.series-card:hover::before{ opacity: 1; }

/* Keep 3-up even on phones */
@media (max-width: 900px){
  .gallery-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .gallery-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .series-card{ padding: 6px; }          /* tighter frame */
  .series-title{ font-size: .82rem; }    /* smaller caption */
}
/* ==== GRID (no panel frame) ==== */
/* let the grid fill the wrapper (remove its own width/max-width) */
.art-grid{
  list-style: none;
  margin: 8px 0 0;     /* not auto 0 */
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;         /* fill the sizer */
  max-width: none;     /* <- important */
}
.art-grid li{ margin: 0; }
.art-grid .art{ display: block; text-decoration: none; }
.art-grid img{
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover; background: #d9dbe5;
  transition: transform .2s ease, filter .2s ease;
}
.art-grid .art:hover img{
  transform: translateY(-2px);
  filter: brightness(.98) contrast(1.04);
}

/* Keep 3-up even on phones, just tighter */
@media (max-width: 560px){
  .art-grid{ gap: 8px; }
}
/* =========================
   LIGHTBOX (cleaned)
   ========================= */

/* Overlay */
.lb{
  --lb-pad: clamp(8px, 3vmin, 16px);
  --lb-max-w: 1025px;           /* desktop wrap max width */
  --lb-meta-w: 320px;           /* desktop meta column width */
  --lb-arrow-offset: -56px;     /* how far arrows sit outside on desktop */

  position: fixed; inset: 0; z-index: 9999; display: none;
  background: color-mix(in oklab, black 62%, transparent);
  backdrop-filter: blur(2px);
}
.lb.is-open{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--lb-pad);
}

/* Card */
.lb__wrap{
  box-sizing: border-box;
  position: relative;           /* anchors close + arrows */
  overflow: visible;            /* allow outside arrows to show */
  display: grid;
  grid-template-columns: 1fr var(--lb-meta-w);
  gap: 0;
  max-width: min(var(--lb-max-w), 96vw);
  max-height: 90svh;
}

/* Image column */
.lb__imgwrap{
  /* default 'static' positioning is fine; keep clean */
  display: grid;
  place-items: center;
  background: #1112;
}
.lb__img{
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  background: #1111;
}

/* Meta column */
.lb__meta{
  box-sizing: border-box;
  padding: clamp(14px, 2.6vmin, 24px);
  background: var(--panel-bg, rgb(185 188 207 / 85%));
  border: 1px solid rgb(0 0 0 / 15%);
  border-left: none;
  box-shadow: 0 10px 40px rgb(0 0 0 / 18%);
  color: #111;
  overflow: auto;               /* scroll inside if long */
}
.lb__title{
  margin: 1 0 .5em;         /* less space below the title */
  line-height: 1.10;         /* optional: slightly tighter title */
}

.lb__meta-line{
  display: block;            /* ensure margins apply */
  margin: 1.4em 0 1.4em;      /* tiny gap above, bigger gap below */
  opacity: .85;              /* optional: subtle tone difference */
}

.lb__desc{
  margin: 14;                 /* keep description snug to the meta-line */
}
/* Close + arrows (base) */
.lb__close,
.lb__nav{
  position: absolute;
  z-index: 2;
  border: none;
  background: none;
  color: #fff;
  font: inherit;
  cursor: pointer;
  line-height: 1;
}

/* Close */
.lb__close{
  top: 10px; right: 12px;
  font-size: 30px;
  padding: 8px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
  color:#fff; transition: filter .18s ease; }

/* hover/focus: white → black (glyph only) */
.lb__close:hover,
.lb__close:focus-visible{
  filter: invert(1);
}

/* optional polish */
@media (prefers-reduced-motion: reduce){
  .lb__close{ transition:none; }
}

/* Arrows (desktop defaults) */
.lb__nav{
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgb(0 0 0 / 35%);
  backdrop-filter: blur(2px);
  box-shadow: 0 6px 18px rgb(0 0 0 / 30%);
  transition: background .15s ease, transform .15s ease;
  font-size: 28px;
}
.lb__nav--prev{ left: var(--lb-arrow-offset); }
.lb__nav--next{ right: var(--lb-arrow-offset); }
.lb__nav:hover{ background: rgb(0 0 0 / 48%); transform: translateY(-50%) scale(1.04); }
.lb__nav:active{ transform: translateY(-50%) scale(0.98); }

/* Controls wrapper: inert on desktop */
.lb__controls{ display: contents; }

/* Prevent page scroll while open */
.no-scroll{ overflow: hidden; }

/* =========================
   MOBILE ≤ 900px
   ========================= */
@media (max-width: 900px){
  /* Give the overlay breathing room for bottom buttons + iOS safe area */
  .lb{
    padding: 12px 12px calc(28px + env(safe-area-inset-bottom));
  }

  /* Stack: image row, meta row, controls row — tight, no gaps */
  .lb__wrap{
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 50svh) auto auto; /* img | meta | controls */
    gap: 0;
    max-width: min(700px, 96vw);
    max-height: 86svh;
  }

  .lb__imgwrap{
    position: relative;      /* arrows can target image area if needed */
    overflow: hidden;
  }
  .lb__img{
    max-height: 48svh;       /* keep space for meta + controls */
    max-width: 100%;
    width: auto; height: auto;
    display: block;
  }

  .lb__meta{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px;
    margin: 0;
    border-top: 1px solid rgb(0 0 0 / 15%);
    background: var(--panel-bg, rgba(200,205,220,.35));
    
  }

  /* Controls become a centered row below the text */
  .lb__controls{
    grid-column: 1;
    grid-row: 3;
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 8px 0 6px;
  }

  /* Arrows switch to inline buttons (not absolute) */
  .lb__nav{
    position: static;
    transform: none;
    width: 42px; height: 42px;
  }
  .lb__nav:hover,
  .lb__nav:active{ transform: none; }

  /* Close respects notches/toolbars */
  .lb__close{
    top: calc(10px + env(safe-area-inset-top));
    right: 12px;
  }

  /* Friendlier mobile title sizing */
  .lb__title{
    font-size: clamp(18px, 4.6vw, 26px);
    line-height: 1.2;
  }
}
/* Reset in case we previously used a pseudo-element arrow */
.lb__nav{ color:#fff; }
.lb__nav::after{ content: none; }

/* Smooth filter transition */
.lb__nav{
  transition: background .15s ease, transform .15s ease, filter .18s ease;
}

/* Entire button (bg + glyph) inverts on hover/focus */
.lb__nav:hover,
.lb__nav:focus-visible{
  filter: blur(.8px) contrast(1.75);
}

/* Pressed: keep it inverted, add a tiny brightness drop */
.lb__nav:active{
  filter: blur(.8px) contrast(1.75) brightness(.75);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .lb__nav{ transition: none; }
}
/* One knob to rule them all */
:root{
  --lb-btn-radius: 4px;   /* try 0 for sharp squares, 6–10px for soft squares */
}

/* desktop + mobile (both use .lb__nav) */
.lb__nav{
  border-radius: var(--lb-btn-radius) !important;  /* was 999px */
}
/* Tighten meta spacing with higher specificity */
.lb__meta .lb__title{
  margin: 0 0 .2em !important;     /* closer title → meta-line */
  line-height: 1.18;
}

.lb__meta .lb__meta-line{
  display: block;
  margin: 0 0 1.1em !important;    /* bigger gap to description */
  opacity: .85;
}

/* Ensure description doesn't add extra top margin */
.lb__meta .lb__desc{ margin: 0 !important; }
.lb__meta .lb__desc > p{ margin: 0 0 .75em; }
.lb__meta .lb__desc > p:first-child{ margin-top: 0 !important; }

/* Desktop only: push text down inside the meta panel */
@media (min-width: 901px){
  .lb__meta{
    padding-top: clamp(45px, 8vmin, 60px);
  }
  .lb__title{ margin-top: 1; }
}

/* Mobile only: keep compact, respect safe areas */
@media (max-width: 900px){
  .lb__meta{
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) 16px; /* T R B L */
    margin: 0;
  }
  .lb__title{ margin-top: 0; }  /* prevent extra bump on phones */
}

/* Prevent page scroll while open */
.no-scroll{ overflow: hidden; }
/* width-only wrapper: identical width/centering as .panel */
/* make the wrapper identical to .panel width/centering */
.panel-sizer{
  box-sizing: border-box;
  width: min(var(--panel-w), 100%);
  max-width: calc(100% - (var(--gutter-l) + var(--gutter-r)));
  margin-inline: auto;
  padding: 0;
}

/* ensure the grid fills the sizer */
.panel-sizer .art-grid{
  width: 100%;
  margin-top: 1px;        /* small gap under the intro panel */
}

/* Make meta a vertical stack; footer sits at the bottom */
.lb__meta{
  display: flex;
  flex-direction: column;
}

/* Footer styles */
.lb__footer{
  margin-top: auto;                  /* pushes footer to the bottom */
  padding-top: 10px;
}

/* The link itself (same “smidgen larger” sizing) */
.lb__buy{
  font-size: 1.08em;
  line-height: 1.1;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

/* Mobile: keep the footer visible while the meta scrolls */
@media (max-width: 900px){
  .lb__meta{
    /* you already have overflow:auto on this; keep it */
    position: relative;
  }
  .lb__footer{
    position: sticky;
    bottom: 0;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
    /* subtle fade so it feels “anchored” */
    background: linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,.05) 100%);
  }
}

.lb__meta{ display:flex; flex-direction:column; }
.lb__footer{ margin-top:auto; padding-top:10px; }
.lb__buy{ font-size:1.08em; line-height:1.1; text-decoration:underline; overflow-wrap:anywhere; }

@media (max-width:900px){
  .lb__footer{
    position:sticky; bottom:0;
    padding:10px 0 calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, transparent 0%, transparent 40%, rgba(0,0,0,.05) 100%);
  }
}
/* --- LIGHTBOX FOOTER: anchor & style --- */
.lb__meta{
  display: flex;
  flex-direction: column;      /* enables margin-top:auto below */
}

.lb__footer{
  margin-top: auto;            /* push footer to the bottom */
  padding-top: 10px;
  display: block;              /* make sure it's not collapsing */
}

.lb__buy{
  font-size: 1.08em;
  line-height: 1.1;
  text-decoration: underline;
  overflow-wrap: anywhere;
  color: #0c3e7e;              /* readable link color on your panel */
}

/* Mobile: keep footer visible while meta scrolls */
@media (max-width: 900px){
  .lb__footer{
    position: sticky;
    bottom: 0;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(to bottom,
      transparent 0%,
      transparent 40%,
      rgba(0,0,0,.05) 100%);
  }
}

/* --- Tiny fixes (units) --- */
.lb__title{ margin: 1em 0 .5em; }  /* was: margin: 1 0 .5em; */
.lb__desc{  margin: 14px; }        /* was: margin: 14;         */
/* ——— Footer tweaks ——— */

/* 1) Make the footer link just a hair smaller */
.lb__buy{
  font-size: 1.00em;   /* was ~1.08em; try 1.00–1.04 to taste */
  line-height: 1.1;
}

/* 2) Nudge the footer up slightly on DESKTOP */
.lb__footer{
  margin-bottom: 30px;   /* adds a little space below the link */
  padding-top: 8px;     /* optional: slightly tighter above */
}

/* 3) Nudge it up on MOBILE too (sticky footer) */
@media (max-width: 900px){
  .lb__footer{
    bottom: 6px;                                   /* was 0 */
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  }
}
/* ================= MOBILE LIGHTBOX ================= */
@media (max-width: 900px){
  /* Card sizing + fixed rows (image stays same height across slides) */
  .lb{
    padding: 12px 12px calc(24px + env(safe-area-inset-bottom));
  }
  .lb__wrap{
    width: min(700px, 96vw);
    max-height: 88svh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows:
      56svh                /* image row: fixed height */
      minmax(0, 32svh);    /* meta row: scrolls if long */
    gap: 0;
    position: relative;
  }

  /* Image row */
  .lb__imgwrap{
    position: relative;            /* nav anchors to this */
    overflow: hidden;
    display: grid; place-items: center;
  }
  .lb__img{
    max-height: 56svh;             /* match the row height */
    max-width: 100%;
    width: auto; height: auto;
    display: block;
  }

  /* Meta row (scrolls internally, footer sticks) */
  .lb__meta{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px;
    background:
      linear-gradient(#0000, #0000 10px),
      var(--panel-bg, rgb(185 188 207 / 85%));
    background-clip: padding-box;
    display: flex; flex-direction: column;
  }
  .lb__title{ margin: 0 0 .4rem; font-size: clamp(20px, 5.6vw, 28px); line-height: 1.2; }
  .lb__meta-line{ margin: 0 0 .9rem; font-size: 1rem; line-height: 1.15; }

  .lb__footer{
    position: sticky; bottom: 8px;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
    margin-top: auto;
    background: linear-gradient(to bottom, transparent 0%, transparent 40%, rgba(0,0,0,.05) 100%);
  }
  .lb__buy{ font-size: 1.02em; line-height: 1.1; text-decoration: underline; overflow-wrap: anywhere; }

  /* Hide any bottom controls row (desktop-only feature) */
  .lb__controls{ display: none !important; }

  /* ===== Navigation: clean chevrons, no bars ===== */
  .lb__nav{
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%) !important;   /* never moves */
    width: 44px;                               /* big INVISIBLE tap zone */
    height: 64%;                               /* tall zone; still avoids the ✕ */
    display: grid; place-items: center;
    padding: 0;
    border: none;
    background: transparent;                   /* no tint over the image */
    color: #fff;
    font-size: 24px;                           /* chevron size */
    line-height: 1;
    opacity: .9;                               /* readable on most photos */
    text-shadow: 0 0 2px rgba(0,0,0,.55);      /* subtle contrast, no halo */
    box-shadow: none;
    filter: none; mix-blend-mode: normal;
    transition: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-y;
    z-index: 2;
  }
  .lb__nav--prev{ left: 6px; }
  .lb__nav--next{ right: 12px; }               /* pulled a bit from the ✕ */

  /* Expand the tap target a bit more without showing it */
  .lb__nav::before{
    content:"";
    position:absolute;
    inset:-6px;
  }

  /* Tap feedback: quick opacity lift—no movement, no color shift */
  .lb__nav:active{ opacity: 1; }

  /* Ensure the ✕ always sits on top */
  .lb__close{ z-index: 3; }
}
/* ========== MOBILE NAV: FORCE CHEVRONS (no bars, no invert) ========== */
@media (max-width: 900px){
  /* anchor on the image */
  .lb__imgwrap{ position: relative; overflow: hidden; }

  /* wipe out bar styling and force simple chevrons */
  .lb__nav{
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    /* visible part (just the glyph) */
    background: transparent !important;
    color: #fff !important;
    font-size: 24px !important;      /* chevron size */
    line-height: 1 !important;
    text-shadow: 0 0 2px rgba(0,0,0,.55) !important;

    /* kill anything that makes them look like bars */
    width: 44px !important;          /* invisible tap zone */
    height: 64% !important;          /* tall zone but no visual bg */
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    opacity: .9 !important;
    transition: none !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-y;
    z-index: 2;
  }
  .lb__nav--prev{ left: 6px !important; }
  .lb__nav--next{ right: 12px !important; }

  /* make the tap target bigger without showing anything */
  .lb__nav::before{
    content: "" !important;
    position: absolute !important;
    inset: -6px !important;
    background: transparent !important;   /* ensure no tint sneaks in */
  }

  /* tiny tap feedback only (no movement) */
  .lb__nav:active{
    opacity: 1 !important;
    background: transparent !important;
    transform: translateY(-50%) !important;
  }

  /* neutralize any hover/active styles that try to invert/tint */
  .lb__nav:hover,
  .lb__nav:focus,
  .lb__nav:focus-visible{
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    transform: translateY(-50%) !important;
  }

  /* if a bottom controls row still exists, hide it on mobile */
  .lb__controls{ display: none !important; }

  /* keep the close button above the nav zones */
  .lb__close{ z-index: 3 !important; }
}
/* Default (desktop): keep your current look */
.lb__nav-icon{ display:none; }       /* hide SVGs on desktop */
.lb__nav-text{ display:inline; }     /* keep the text arrows */

/* Mobile only: swap to SVG chevrons with thin outline */
@media (max-width: 900px){
  .lb__nav-text{ display:none; }     /* hide the text glyphs */
  .lb__nav-icon{ display:block; width:25px; height:25px; }

  .lb__nav-icon .outline{
    fill:none; stroke: rgba(0,0,0,.55);
    stroke-width:5; stroke-linecap:round; stroke-linejoin:round;
  }
  .lb__nav-icon .glyph{
    fill:none; stroke:#fff;
    stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
    paint-order: stroke fill; /* white on top */
  }
}
/* ===== Mobile: chevron tap micro-animation + outlined X ===== */
@media (max-width: 900px){
  /* animate only the SVG, not the button (no layout jank) */
  .lb__nav-icon{
    transition: transform 120ms ease, opacity 120ms ease;
    will-change: transform;
  }

  /* slight squeeze + nudge on tap */
  .lb__nav:active .lb__nav-icon{
    opacity: .95;
    transform: scale(.92);
  }
  /* directional nudge so it “leans” into the tap */
  .lb__nav--prev:active .lb__nav-icon{ transform: translateX(-1px) scale(.92); }
  .lb__nav--next:active .lb__nav-icon{ transform: translateX( 1px) scale(.92); }

  /* keep it snappy if finger stays down */
  .lb__nav:focus-visible .lb__nav-icon{ transform: scale(.96); }

  /* outlined X to match the chevrons’ look */
  .lb__close{
    color: #fff;
    text-shadow: 0 0 2px rgba(0,0,0,.55);   /* soft halo for contrast */
    -webkit-text-stroke: 2px rgba(0,0,0,.55); /* thin dark outline on iOS */
    line-height: 1;
    transition: transform 120ms ease, opacity 120ms ease;
  }
  .lb__close:active{
    transform: scale(.94);
    opacity: .95;
  }
}
/* Desktop: keep your text X; hide the SVG */
.lb__close-text{ display:inline; }
.lb__close-icon{ display:none; }

/* Mobile: swap to SVG X with thin outline */
@media (max-width: 900px){
  .lb__close-text{ display:none; }
  .lb__close-icon{
    display:block;
    width: 25px; height: 25px;
  }
  .lb__close-icon .outline{
    fill:none;
    stroke: rgba(0,0,0,.65);   /* subtle dark outline */
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .lb__close-icon .glyph{
    fill:none;
    stroke: #fff;              /* crisp white inside */
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    paint-order: stroke fill;  /* ensure white renders on top */
  }

  /* remove any text-based outline rules that could affect it */
  .lb__close{
    -webkit-text-stroke: 0 !important;
    -webkit-text-fill-color: initial !important;
    text-shadow: none !important;
  }

  /* tiny tap feedback (match chevrons) */
  .lb__close:active .lb__close-icon{ transform: scale(.94); opacity:.95; transition: transform 120ms ease, opacity 120ms ease; }
}
/* === Mobile: footer sits below the description (no overlay) === */
@media (max-width: 900px){
  .lb__meta{
    display: flex;
    flex-direction: column;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px 14px;   /* bottom pad so last line isn’t cramped */
  }

  .lb__desc{
    margin: 0 0 12px;          /* space above footer */
  }

  /* Footer becomes normal flow content on mobile */
  .lb__footer{
    position: static;          /* override sticky */
    bottom: auto;
    margin-top: auto;          /* still pushes to bottom when content is short */
    padding: 10px 0 6px;
    background: none;          /* remove the gradient so it doesn't cover text */
    /* optional subtle divider: */
    /* border-top: 1px solid rgba(0,0,0,.12); */
  }
}
/* ==== Mobile: full-height scroll rail (no ::after) ==== */
@media (max-width: 900px){
  .lb__meta{
    position: relative;
    scrollbar-gutter: stable;
  }

  /* Style the native scrollbar when it appears */
  .lb__meta::-webkit-scrollbar{ width: 6px; }
  .lb__meta::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.28);
    border-radius: 3px;
  }
  .lb__meta::-webkit-scrollbar-track{ background: transparent; }

  /* Always-on cue when content overflows: full-height inset rail */
  .lb__meta.is-scrollable{
    box-shadow: inset -3px 0 0 rgba(0,0,0,.22);  /* thickness: 3px */
  }

  /* If you still have the old ::after rail anywhere, neutralize it */
  .lb__meta.is-scrollable::after{ content:none !important; }
}

/* Adjust selectors to match your grid: .art-grid or .gallery-grid */
.art-grid .art-card.go-back-card,
.gallery-grid .series-card.go-back-card{
  /* nothing special—let it size like the other cards */
}

/* make the tile square and center the label */
.go-back-tile{
  grid-template-rows: 1fr;           /* no caption row */
  place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 0;                  /* square corners */
  padding: 0;                        /* feels more like your image tiles */
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

/* the “surface” that receives the VHS hover treatment */
.go-back-tile .card-face{
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--panel-bg, #fff) 72%, transparent);
  backdrop-filter: blur(2px);
  z-index: 0;
  transition: transform 200ms ease, filter 200ms ease;
}

/* reuse the series-card hover animation, but target .card-face instead of img */
.series-card:hover .card-face{
  transform: translateY(-3px);
  filter: brightness(.97) contrast(1.06) saturate(.96);
  animation: vhs-jitter 400ms steps(4) infinite;
}

/* label styling (uses your site font by inheriting) */
.go-back__label{
  position: relative;
  z-index: 3;          /* above ::after/::before overlays */
  font-weight: 700;
  line-height: 1.1;
  font-size: clamp(16px, 1.2vw + 12px, 20px);
  font-family: inherit; /* your Google font */
  user-select: none;
  pointer-events: none;
}

/* let your existing .series-card::after / ::before overlays apply as-is */


/* default: keep the tile in markup but hidden */
.go-back-card { display: none; }

/* show only on desktops/laptops (fine pointer, hover capable) */
@media (hover:hover) and (pointer:fine) {
  .go-back-card { display: block; }
  /* optional: start slightly muted so it doesn’t compete with art */
  .go-back-tile { filter: grayscale(.2) opacity(.95); }
  .go-back-tile:is(:hover,:focus-visible){ filter: none; }
}
/* Panels stack with your site’s look */
.panel-sizer .lit-panel{ margin-block: 18px; }

/* Two-column layout: title/kicker left, links right */
.lit-panel{
  display: grid;
  grid-template-columns: 1.1fr 2fr;  /* left | right */
  gap: 14px 22px;
}

/* Allow grid children to actually shrink (CRITICAL for long lines) */
.lit-panel > * { min-width: 0; }

.lit-head{ margin: 0 0 6px 0; }
.lit-title{
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
  font-size: clamp(22px, 1.3vw + 16px, 30px);
}
.lit-kicker{ margin: 4px 0 0; opacity: .7; font-size: .88em; }

/* Poem links grid — NO BULLETS */
.lit-toc{
  list-style: none;       /* remove bullets */
  padding-left: 0;        /* remove default ul indent */
  margin: 0;
  display: grid;
  gap: 6px 14px;
  /* Wider columns but still responsive; measured in characters (ch) */
  grid-template-columns: repeat(auto-fit, minmax(min(28ch, 100%), 1fr));
}

/* Each list item may also shrink */
.lit-toc > li { min-width: 0; }

/* Link styling (smaller, tighter, single line with ellipsis when needed) */
.lit-toc a{
  display: block;           /* needed for ellipsis */
  font-size: 0.92rem;
  line-height: 1.18;
  letter-spacing: .01em;
  text-decoration: none;
  color: inherit;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, filter .15s ease;
}
.lit-toc a:hover,
.lit-toc a:focus-visible{
  border-bottom-color: currentColor;
  filter: contrast(1.04);
}

/* Responsive: stack left/right on narrow screens */
@media (max-width: 800px){
  .lit-panel{ grid-template-columns: 1fr; }
  /* let long titles wrap on mobile if you prefer */
  .lit-toc a{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* POEM PAGE OVERRIDES -------------------------------------------------- */
/* Use either .poem-page on <body> or .poem on the section (both supported) */

/* 2-col layout: meta | poem; let children shrink */
.poem-page .lit-panel,
.lit-panel.poem{
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px 24px;
}
.poem-page .lit-panel > *,
.lit-panel.poem > *{ min-width: 0; }

/* Right column = poem body (preferred markup) */
.poem-page .poem-body,
.lit-panel.poem .poem-body{
  /* ↓ make poem text smaller so long line fits */
  font-size: 0.92rem;       /* try 0.9rem if you need even more room */
  line-height: 1.5;
  letter-spacing: .005em;
}

/* If you kept the UL/LI/P structure, style that as the poem instead */
.poem-page .lit-toc,
.lit-panel.poem .lit-toc{
  /* no grid, no bullets, no borders/shadows = no “box” */
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.poem-page .lit-toc > li,
.lit-panel.poem .lit-toc > li{ min-width: 0; margin: 0; padding: 0; }
.poem-page .lit-toc p,
.lit-panel.poem .lit-toc p{
  margin: 0;
  font-size: 0.92rem;       /* keep in sync with .poem-body above */
  line-height: 1.5;
  letter-spacing: .005em;
}

/* Give the poem a bit more width on desktop if needed */
@media (min-width: 900px){
  .poem-page .lit-panel,
  .lit-panel.poem{
    grid-template-columns: 220px 1fr; /* narrower meta, wider poem */
  }
}

/* Keep existing left-side styles */
.poem-page .lit-title,
.lit-panel.poem .lit-title{
  font-weight: 700;
  line-height: 1.15;
  font-size: clamp(22px, 1.3vw + 16px, 30px);
}
.poem-page .lit-kicker,
.lit-panel.poem .lit-kicker{ margin: 4px 0 0; opacity: .7; font-size: .88em; }

/* IMPORTANT: neutralize link/TOC hover rules that were for the index page */
.poem-page .lit-toc a,
.lit-panel.poem .lit-toc a{
  all: unset;               /* kill link-specific sizing/underline if any */
}
.poem-body p { margin-block: 1em; }
/* MOBILE LAYOUT FOR SINGLE-POEM PAGES */
@media (max-width: 720px){
  /* 1 column stack instead of left|right */
  .poem-page .lit-panel,
  .lit-panel.poem{
    grid-template-columns: 1fr;
    gap: 10px 0;
  }

  /* make sure grid items occupy full width in reading order */
  .poem-page .lit-head,
  .lit-panel.poem .lit-head{
    grid-column: 1;
    grid-row: 1;
  }
  /* poem body below the meta */
  .poem-page .poem-body,
  .lit-panel.poem .poem-body,
  .poem-page .lit-toc,
  .lit-panel.poem .lit-toc{
    grid-column: 1;
    grid-row: 2;
  }

  /* readable poem type on mobile */
  .poem-page .poem-body,
  .lit-panel.poem .poem-body,
  .poem-page .lit-toc p,
  .lit-panel.poem .lit-toc p{
    font-size: clamp(16px, 3.8vw, 18px);
    line-height: 1.55;
    letter-spacing: .003em;
    white-space: normal;
    overflow-wrap: anywhere;   /* prevents 3-letter lines if something long appears */
  }

  /* tighten meta so it doesn't hog space */
  .poem-page .lit-kicker,
  .lit-panel.poem .lit-kicker{
    font-size: .9em;
    line-height: 1.35;
    margin: 2px 0 0;
  }
}
@media (max-width: 720px){
  .poem-page .lit-kicker br:first-child { display:none; } /* optional tiny cleanup */
}
/* SUPERBLOOM INDEX — mobile stacking & readable type */
@media (max-width: 720px){
  /* 1 column instead of title/meta left | list right */
  .superbloom-page .lit-panel{
    grid-template-columns: 1fr;
    gap: 10px 0;
  }

  /* reading order: title/meta first, list second */
  .superbloom-page .lit-head{
    grid-column: 1;
    grid-row: 1;
  }
  .superbloom-page .lit-toc{
    grid-column: 1;
    grid-row: 2;
  }

  /* comfy sizes on mobile */
  .superbloom-page .lit-title{
    font-size: clamp(22px, 5.2vw, 28px);
    margin-bottom: 2px;
  }
  .superbloom-page .lit-kicker{
    font-size: .95em;
    line-height: 1.35;
    margin: 2px 0 8px;
  }

  /* poem links: bigger, allow wrapping, no ellipsis */
  .superbloom-page .lit-toc{
    grid-template-columns: 1fr;   /* single column list on phones */
    gap: 8px;
  }
  .superbloom-page .lit-toc > li{ min-width: 0; }
  .superbloom-page .lit-toc a{
    display: block;
    font-size: clamp(16px, 3.8vw, 18px);
    line-height: 1.4;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}
@media (max-width: 720px){
  .poem-page .poem-body,
  .lit-panel.poem .poem-body,
  .poem-page .lit-toc p,
  .lit-panel.poem .lit-toc p{
    font-size: clamp(16px, 3.6vw, 18px);
    line-height: 1.55;
    letter-spacing: 0;               /* or try -0.005em if you like it tighter */
  }

  /* reduce panel padding if it’s stealing width */
  .panel{ padding-inline: 12px; }     /* adjust to your theme */
}
@supports (text-wrap: pretty){
  .poem-page .poem-body{ text-wrap: pretty; }
}
@supports (text-wrap: balance){
  .poem-page .poem-body h1,
  .poem-page .poem-body h2{ text-wrap: balance; } /* for titles in body */
}
/* mobile hanging indent for wrapped lines */
@media (max-width: 720px){
  .poem-body .line{
    display: block;
    padding-left: 1.25em;   /* indent width */
    text-indent: -1.25em;   /* hang the first visual line */
    line-height: 1.55;
  }
  /* stanza breaks (empty lines) */
  .poem-body .line.blank{
    padding: 0;
    text-indent: 0;
    height: .6em;           /* space between stanzas */
  }
}
/* default = DESKTOP (and larger) --------------------------------------- */
.poem-body .line{
  display: block;           /* each span is its own line */
  line-height: 1.5;
  padding: 0;
  text-indent: 0;           /* no hanging indent on desktop */
}
.poem-body .line.blank{
  display: block;           /* stanza break */
  height: 1em;            /* space between stanzas */
  padding: 0;
}

/* MOBILE ONLY: apply the hanging indent ------------------------------- */
@media (max-width: 720px){
  .poem-body .line{
    padding-left: 1.25em;   /* indent width */
    text-indent: -1.25em;   /* hang the first visual line */
  }
  .poem-body .line.blank{
    height: 0.7em;          /* a touch more room if you like */
  }
}
/* shift the whole line right without adding vertical gap */
.poem-body .indent{
  display: block;        /* behaves like its own line */
  margin: 0;             /* no extra space above/below */
  padding-left: 40px;    /* indent amount */
  text-indent: 0;        /* ensure no extra first-line indent */
}
.poem-body .indent{
  display:block; margin:0; text-indent:0;
  --indent-step: 2.5ch;
  --level: 1;                                      /* default */
  padding-left: calc(var(--indent-step) * var(--level));
}
.poem-body .indent[data-level]{ --level: attr(data-level number); }
/* hairline separators on ALL viewports */
/* BASE: list layout (keep whatever you already have) */
.lit-toc{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* ========= LIT.TOC — unified separator with dotted hover overlay ========= */
.lit-toc{
  --hairline-h: 1px;
  --hairline-base-a: 12%;
  --hairline-dark-a: 32%;
  --dot-size: 2px;          /* dot diameter */
  --dot-step: 8px;          /* scroll distance per cycle */
  --march-speed: 14s;       /* larger = slower */
}

/* Row container */
.lit-toc li{
  position: relative;
  padding-block: 8px;
  min-width: 0;
}

/* UNDERLAY: base hairline (always visible) */
.lit-toc li::before{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:var(--hairline-h);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(0 0 0 / var(--hairline-base-a)) 15%,
    rgb(0 0 0 / var(--hairline-base-a)) 85%,
    transparent 100%
  );
  transform-origin:center bottom;
  transition: background-color .15s ease, transform .15s ease, opacity .15s ease;
  z-index: 0; /* explicitly under the dots */
}

/* OVERLAY: dotted line (hidden until hover/focus) */
.lit-toc li::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:var(--hairline-h);
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle closest-side, currentColor 98%, transparent 100%)
    0 50% / var(--dot-size) var(--hairline-h) repeat-x;
  transform:translateZ(0);
  will-change: background-position;
  z-index: 1; /* on top of the base hairline */
}

/* Hover/focus: strengthen hairline + animate dots */
@media (hover:hover){
  .lit-toc li:hover::before,
  .lit-toc li:focus-within::before{
    background: rgb(0 0 0 / var(--hairline-dark-a));
    transform: scaleY(1.6);
  }
  .lit-toc li:hover::after,
  .lit-toc li:focus-within::after{
    opacity:1;
    animation: dotted-march var(--march-speed) linear infinite;
  }
}

/* Reduced motion: show dots without movement */
@media (prefers-reduced-motion: reduce){
  .lit-toc li:hover::after,
  .lit-toc li:focus-within::after{
    animation:none;
    opacity:1;
  }
}

@keyframes dotted-march{
  from { background-position: 0 50%; }
  to   { background-position: var(--dot-step) 50%; }
}

/* Links: no underline; subtle text cue remains */
.lit-toc a{
  display:block;
  text-decoration:none;
  color:inherit;           /* makes dots use the row’s text color */
  border-bottom:0;
  transition: filter .15s ease;
}
.lit-toc a:hover,
.lit-toc a:focus-visible{
  filter: contrast(1.06);
}

/* ======================= Mobile layout (unchanged) ======================= */
@media (max-width: 720px){
  .lit-toc{ grid-template-columns: 1fr; }

  .lit-panel.poem{
    grid-template-columns: 1fr;
    gap: 10px 0;
  }
  .lit-panel.poem > *{ min-width: 0; }
  .lit-panel.poem .lit-head{ display: contents; }
  .lit-panel.poem .lit-title{ order: 1; margin-bottom: 2px; }
  .lit-panel.poem .poem-body,
  .lit-panel.poem .lit-toc{ order: 2; }
  .lit-panel.poem .lit-kicker{ order: 3; margin-top: 8px; }

  .lit-panel.poem .lit-kicker:first-of-type{
    border-top: 1px solid rgb(0 0 0 / 14%);
    padding-top: 8px;
    margin-top: 8px;
  }
}

/* Optional: force dots on for testing (remove after verifying) */
/* .lit-toc li::after{ opacity:1; } */
/* Base target */
.lit-toc a{
  display:block;
  text-decoration:none;
  color:inherit;
  transition: color .18s ease, filter .18s ease, letter-spacing .18s ease, transform .18s ease;
}
/*Two-tone wash (subtle color shift using CSS vars) */
:root{
  --toc-accent: #6f749e; /* set to your brand accent */
}
.tfx-wash{ transition: color .18s ease; }
.tfx-wash:hover,
.tfx-wash:focus-visible{
  color: var(--toc-accent);
}
/* Compact vertical rhythm for the TOC */
.lit-toc{
  /* if your list is a grid, kill any row gap */
  gap: 0;              /* or: row-gap: 0; */
  --toc-row-pad: 6px;  /* was 8px */
  --toc-line-h: 1.25;  /* gently tighter line height */
}

.lit-toc li{
  padding-block: var(--toc-row-pad);
}

.lit-toc a{
  line-height: var(--toc-line-h);
}

/* keep mobile roomy if you like */
@media (max-width: 720px){
  .lit-toc{
    --toc-row-pad: 7px;
    --toc-line-h: 1.3;
  }
}
/* Let titles wrap normally and fill the row */
.lit-toc li { min-width: 0; }                /* ensures wrapping in grid/flex */
.lit-toc a{
  display:block;
  width:100%;
  min-width:0;
  white-space: normal;                        /* was nowrap */
  overflow: visible;                          /* was hidden */
  text-overflow: clip;                        /* was ellipsis */
  text-indent: 0;
  padding-left: 0;
  word-break: normal;                         /* or: break-word for super-long tokens */
  overflow-wrap: anywhere;                    /* helps on long unbroken strings */
  hyphens: auto;                              /* nicer breaks on multi-syllable words */
  line-height: 1.25;                          /* slightly tighter if desired */
}