/* ============================================================
   lauragao.com — design refresh layer
   Loaded after site.css; overrides the Squarespace York theme.
   Palette: paper #faf7f1 · ink #1a1a1a · terracotta #c65a35
   ============================================================ */

/* marker/handwriting font for polaroid captions (self-hosted, OFL) */
@font-face {
  font-family: "Covered By Your Grace";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/covered-by-your-grace.ttf") format("truetype");
}

:root {
  --lg-paper: #faf7f1;
  --lg-ink: #1a1a1a;
  --lg-accent: #c65a35;
  --lg-muted: #8a8479;
  --lg-hairline: rgba(26, 26, 26, 0.1);
  --lg-display: din-condensed-web, "Arial Narrow", sans-serif;
  --lg-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------
   1 · Header: legible over any artwork, solid once scrolled
   ------------------------------------------------------------ */
.site-title,
.site-tagline {
  color: var(--lg-ink) !important;
  text-shadow: none !important; /* header is always solid now — no glow needed */
}
.site-header .nav-toggle-label-icon line {
  stroke: var(--lg-ink);
}
.site-header .nav-toggle {
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.85));
}
/* header is ALWAYS the solid compact bar — never transparent, never
   resizes/hides on scroll (kills the York expand/hide-on-scroll behavior) */
.site-header {
  background: rgba(250, 247, 241, 0.97) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--lg-hairline);
  margin: 0 !important;
  padding: 14px 3vw !important;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}
/* overlay menu open: header sits on dark ground, invert to light */
body.nav-open .site-title,
body.nav-open .site-tagline {
  color: #fff !important;
  text-shadow: none;
}
body.nav-open .site-header {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.nav-open .nav-toggle-label-icon line {
  stroke: #fff;
}

/* ------------------------------------------------------------
   2 · Portfolio cards: retire the template blue, let art lead
   ------------------------------------------------------------ */
.sqs-block-image .design-layout-card .image-card-wrapper {
  background-color: var(--lg-paper);
}
.sqs-block-image figure.design-layout-card {
  border: 1px solid var(--lg-hairline);
  box-sizing: border-box;
}
body .sqs-block-image .design-layout-card .image-title p {
  color: var(--lg-ink) !important;
  font-family: var(--lg-display) !important;
  font-size: 38px !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  line-height: 1.05em !important;}
body .sqs-block-image .design-layout-card .image-subtitle p {
  color: #55504a !important;
  font-family: var(--lg-body) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.6em !important;}
body .sqs-block-image .design-layout-card .image-subtitle p strong {
  font-weight: 400; /* subtitles were force-bolded; calm them down */}
/* collage variant (black panels) joins the same family */
.sqs-block-image .design-layout-collage .image-card {
  background-color: var(--lg-paper);
}
body .sqs-block-image .design-layout-collage .image-title p {
  color: var(--lg-ink) !important;
  font-family: var(--lg-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;}
body .sqs-block-image .design-layout-collage .image-subtitle p {
  color: #55504a !important;
  font-size: 18px !important;
  line-height: 1.6em !important;}
.design-layout-collage .image-title a,
.sqs-block-image .design-layout-collage .image-subtitle a {
  color: var(--lg-ink);
}
/* poster titles (text over image) keep white but match the display face */
body .sqs-block-image .design-layout-poster .image-title p {
  font-family: var(--lg-display) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;}

/* ------------------------------------------------------------
   3 · Typography rhythm + link color system (no default blue)
   ------------------------------------------------------------ */
.sqs-html-content p {
  line-height: 1.65;
}
.sqs-html-content a,
.sqs-block-content a:not(.sqs-block-button-element):not(.image-button a) {
  color: var(--lg-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(198, 90, 53, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.sqs-html-content a:hover {
  text-decoration-color: var(--lg-accent);
}

/* ------------------------------------------------------------
   4 · Press mentions (“Hey Ma, I made it!”): editorial list,
       not a blogroll
   ------------------------------------------------------------ */
#block-yui_3_17_2_1_1539167340411_14231 p {
  color: var(--lg-muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 1.9em 0;
}
#block-yui_3_17_2_1_1539167340411_14231 p a {
  display: block;
  font-family: var(--lg-body);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
  color: var(--lg-ink);
  text-decoration: none;
  margin-bottom: 0.35em;
  transition: color 0.2s ease;
}
#block-yui_3_17_2_1_1539167340411_14231 p a:hover {
  color: var(--lg-accent);
}

/* ------------------------------------------------------------
   5 · Forms: quiet underline fields, no “(required)” shouting
   ------------------------------------------------------------ */
.sqs-block-form input[type="text"],
.sqs-block-form input[type="email"],
.sqs-block-form input[type="tel"],
.sqs-block-form textarea,
.sqs-block-form select {
  border: 0 !important;
  border-bottom: 1.5px solid #d9d2c6 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0.5em 0.1em !important;
  font-family: var(--lg-body) !important;
  transition: border-color 0.2s ease;
}
.sqs-block-form input:focus,
.sqs-block-form textarea:focus {
  border-bottom-color: var(--lg-ink) !important;
  outline: none;
}
.sqs-block-form .field-list .title,
.sqs-block-form label,
.sqs-block-form legend {
  font-family: var(--lg-body);
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lg-muted) !important;
}
/* the “(required)” chips (span only — .required also sits on field wrappers) */
.sqs-block-form span.description.required {
  display: none !important;
}
.sqs-block-form input[type="submit"],
.sqs-block-form button[type="submit"],
.sqs-block-form .button {
  background: var(--lg-ink) !important;
  color: #fff !important;
  border-radius: 999px;
  letter-spacing: 0.1em;
  transition: background 0.2s ease;
}
.sqs-block-form input[type="submit"]:hover,
.sqs-block-form button[type="submit"]:hover {
  background: var(--lg-accent) !important;
}

/* ------------------------------------------------------------
   6 · Micro-interactions (hover-capable, motion-tolerant only)
   ------------------------------------------------------------ */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sqs-block-image .sqs-image-shape-container-element img,
  .sqs-gallery-block-grid .thumb-image {
    transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1);
  }
  .sqs-block-image a:hover .sqs-image-shape-container-element img,
  .sqs-gallery-block-grid .slide a:hover .thumb-image {
    transform: scale(1.025);
  }
  .main-navigation--overlay a span,
  .index-navigation .collection-nav-item-span {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 0% 2px;
    background-position: 0 100%;
    transition: background-size 0.3s ease;
  }
  .main-navigation--overlay a:hover span,
  .index-navigation a:hover .collection-nav-item-span {
    background-size: 100% 2px;
  }
}
/* scroll reveal (class applied by lg-custom.js only) */
.lg-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.lg-reveal.lg-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .lg-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------------
   7 · Global footer
   ------------------------------------------------------------ */
.lg-footer {
  border-top: 1px solid var(--lg-hairline);
  background: var(--lg-paper);
  text-align: center;
  padding: 72px 6vw 56px;
  font-family: var(--lg-body);
}
.lg-footer-cta {
  font-family: var(--lg-display);
  font-size: 34px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--lg-ink);
  margin: 0 0 10px;
}
.lg-footer-email {
  margin: 0 0 28px;
}
.lg-footer-email a {
  color: var(--lg-accent);
  font-size: 16px;
  text-decoration: none;
  border-bottom: 1px solid rgba(198, 90, 53, 0.35);
  padding-bottom: 1px;
  transition: border-color 0.2s ease;
}
.lg-footer-email a:hover {
  border-color: var(--lg-accent);
}
.lg-footer-links {
  margin: 0 0 26px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lg-footer-links a {
  color: var(--lg-ink);
  text-decoration: none;
  margin: 0 13px;
  transition: color 0.2s ease;
}
.lg-footer-links a:hover {
  color: var(--lg-accent);
}
.lg-footer-copy {
  color: var(--lg-muted);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  margin: 0;
}

/* ------------------------------------------------------------
   8 · Details: focus states, external-link marker, loading tint,
       mobile trims
   ------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid var(--lg-accent) !important;
  outline-offset: 3px;
  border-radius: 2px;
}
/* External-link ↗ marker in the footer only — the overlay menu's
   "Buy Prints" link stays clean (no arrow). */
.lg-footer-links a[href^="http"]:not([href*="lauragao.com"])::after {
  content: " \2197";
  font-size: 0.8em;
  opacity: 0.65;
}
.sqs-gallery-block-grid .thumb-image,
.sqs-gallery-design-strip .thumb-image {
  background-color: #f3eee5;
}

@media screen and (max-width: 640px) {
  /* keep artwork banners from being cropped to slivers */
  .banner-thumbnail-wrapper {
    max-height: 46vh;
    overflow: hidden;
  }
  .lg-footer-cta {
    font-size: 27px;
  }
  .site-tagline {
    display: none; /* tagline unreadably tiny + collides with art on phones */
  }
}

/* old per-page "Let's work together" endings — superseded by the global footer */
#block-60bdb3e0078eda5f29405869,
#block-yui_3_17_2_1_1727380346942_16288,
#block-yui_3_17_2_1_1623057581901_5056,
#block-yui_3_17_2_1_1727380398427_5242,
#block-yui_3_17_2_1_1727380398427_7912,
#block-yui_3_17_2_1_1623139365167_5754,
#block-60bdb3f41e6ada72edc9cfca,
#block-yui_3_17_2_1_1727380429618_8400,
#block-yui_3_17_2_1_1623135961133_6908 {
  display: none !important;
}

/* trailing spacers before the global footer */
#block-yui_3_17_2_1_1727380398427_6232,
#block-yui_3_17_2_1_1727380429618_6121 {
  display: none !important;
}

/* old Squarespace "Want to get updates…" newsletter blocks —
   superseded by the "A doodle in your inbox" signup in the footer */
.sqs-block-newsletter { display: none !important; }

/* footer: drop the "Let's make something together." CTA + email line
   (kept the doodle lane, newsletter, links, copyright) */
.lg-footer-cta,
.lg-footer-email { display: none !important; }

/* ------------------------------------------------------------
   9 · Gallery thumbnail strips: scrollable + draggable
   (replaces the template's dead hover-panning)
   ------------------------------------------------------------ */
.sqs-gallery-thumbnails {
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(26, 26, 26, 0.28) transparent;
  cursor: grab;
  padding-bottom: 8px;
}
.sqs-gallery-thumbnails.lg-dragging { cursor: grabbing; }
.sqs-gallery-thumbnails::-webkit-scrollbar { height: 7px; }
.sqs-gallery-thumbnails::-webkit-scrollbar-thumb { background: rgba(26, 26, 26, 0.24); border-radius: 999px; }
.sqs-gallery-thumbnails::-webkit-scrollbar-thumb:hover { background: rgba(26, 26, 26, 0.4); }
.sqs-gallery-thumbnails::-webkit-scrollbar-track { background: transparent; }
.sqs-gallery-thumbnails .sqs-wrapper { position: static !important; }

/* dim inactive thumbs, highlight the active one */
.sqs-gallery-thumbnails .sqs-wrapper > * {
  opacity: 0.72;
  transition: opacity 0.2s ease, outline-color 0.2s ease;
  outline: 3px solid transparent;
  outline-offset: -3px;
}
.sqs-gallery-thumbnails .sqs-wrapper > *:hover { opacity: 1; }
.sqs-gallery-thumbnails .sqs-wrapper > .sqs-active-slide {
  opacity: 1;
  outline-color: var(--lg-accent);
}

/* ------------------------------------------------------------
   10 · Image fade-up on load (blur-up-lite)
   Hooks Squarespace's own `.loaded` class (added by each img's
   inline onload). lg-custom.js adds `.loaded` to already-cached
   images + a 3s safety net so nothing can get stuck invisible.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .sqs-block-image .sqs-image-shape-container-element img,
  .sqs-gallery-block-grid .thumb-image,
  .sqs-gallery-design-strip .thumb-image {
    opacity: 0;
    transform: translateY(8px) scale(1.008);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
  }
  .sqs-block-image .sqs-image-shape-container-element img.loaded,
  .sqs-gallery-block-grid .thumb-image.loaded,
  .sqs-gallery-design-strip .thumb-image.loaded {
    opacity: 1;
    transform: none;
  }
}
/* placeholder tint so the reserved box reads as intentional, not broken */
.sqs-block-image .image-block-wrapper,
.sqs-block-image .sqs-image-shape-container-element {
  background-color: #f3eee5;
}

/* ------------------------------------------------------------
   11 · Prev / next project nav (injected by lg-custom.js)
   ------------------------------------------------------------ */
.lg-pager {
  display: flex;
  align-items: stretch;
  gap: 1px;
  max-width: 1100px;
  margin: 64px auto 0;
  border-top: 1px solid var(--lg-hairline);
  border-bottom: 1px solid var(--lg-hairline);
  background: var(--lg-hairline);
  font-family: var(--lg-body);
}
.lg-pager a,
.lg-pager span.lg-pager-mid {
  flex: 1 1 0;
  background: var(--lg-paper);
  padding: 22px 20px;
  text-decoration: none;
  color: var(--lg-ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.lg-pager a:hover { background: #f3eee5; }
.lg-pager a.lg-pager-next { text-align: right; align-items: flex-end; }
.lg-pager-mid {
  flex: 0 1 auto;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.lg-pager .lg-kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lg-muted);
}
.lg-pager .lg-pager-title {
  font-family: var(--lg-display);
  font-size: 21px;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.lg-pager a:hover .lg-pager-title { color: var(--lg-accent); }
.lg-pager-mid a {
  padding: 0;
  color: var(--lg-muted);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lg-pager-mid a:hover { color: var(--lg-accent); background: transparent; }
@media screen and (max-width: 640px) {
  .lg-pager .lg-pager-mid { display: none; }
  .lg-pager .lg-pager-title { font-size: 17px; }
  .lg-pager a { padding: 16px 14px; }
}

/* ------------------------------------------------------------
   12 · Newsletter capture in the footer (demo — needs backend)
   ------------------------------------------------------------ */
.lg-news {
  max-width: 430px;
  margin: 0 auto 30px;
  padding: 22px 24px 24px;
  border: 1px solid var(--lg-hairline);
  border-radius: 14px;
  background: #fff;
}
.lg-news-title {
  font-family: var(--lg-display);
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--lg-ink);
  margin: 0 0 4px;
}
.lg-news-sub {
  font-size: 13px;
  color: var(--lg-muted);
  line-height: 1.5;
  margin: 0 0 14px;
}
.lg-news-form { display: flex; gap: 8px; }
.lg-news-form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-bottom: 1.5px solid #d9d2c6;
  background: transparent;
  padding: 0.45em 0.2em;
  font-family: var(--lg-body);
  font-size: 15px;
  transition: border-color 0.2s ease;
}
.lg-news-form input[type="email"]:focus {
  outline: none;
  border-bottom-color: var(--lg-ink);
}
.lg-news-form button {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  background: var(--lg-ink);
  color: #fff;
  border-radius: 999px;
  padding: 0.55em 1.15em;
  font-family: var(--lg-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.2s ease;
}
.lg-news-form button:hover { background: var(--lg-accent); }
.lg-news-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--lg-muted);
  min-height: 1.2em;
}
.lg-news.lg-news-done .lg-news-form { display: none; }

/* ------------------------------------------------------------
   13 · Wandering doodle creatures (lg-doodles.js)
   ------------------------------------------------------------ */
.lg-lane {
  position: relative;
  height: 40px;
  pointer-events: none; /* creatures opt back in individually */
}
/* header lane: mounted INSIDE .site-header, right half, clear of the
   nav toggle. Only shown once the header is opaque (body.lg-scrolled). */
.site-header .lg-lane-top {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 46px;
  left: auto;
  width: min(220px, 28%);   /* a band hugging the right edge — right half, clear of the left-side title/toggle and the tagline tail */
  height: auto;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease;
}
body.nav-open .site-header .lg-lane-top { opacity: 0; }
/* on narrower screens the tagline reaches into the right side — don't crowd it */
@media (max-width: 899px) {
  .site-header .lg-lane-top { display: none; }
}
.lg-lane-foot {
  height: 48px;
  margin: 0 auto 22px;
  max-width: 900px;
  overflow: visible;
}
.lg-lane-static { text-align: center; }
.lg-doodle {
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  will-change: transform;
  line-height: 0;
}
.site-header .lg-doodle { bottom: 9px; }
.lg-lane-top .lg-doodle { pointer-events: none; }
/* header doodles are clickable (→ doodle playground) — the lane itself
   stays pointer-transparent so the rest of the header still works */
.lg-lane-top .lg-doodle-link { pointer-events: auto; cursor: pointer; }
.lg-doodle-link {
  pointer-events: auto;
  cursor: pointer;
}
.lg-doodle svg { display: block; transition: transform 0.15s ease; }
.lg-doodle-link:hover svg { transform: translateY(-2px) scale(1.12) !important; }
.lg-doodle-link:focus-visible {
  outline: 2px solid var(--lg-accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.lg-lane-static .lg-doodle { position: static; display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  .lg-doodle svg { transition: none; }
}

/* ------------------------------------------------------------
   14 · Accolades / pull-quote strip (Messy Roots)
   ------------------------------------------------------------ */
.lg-accolades {
  background: var(--lg-paper);
  border-top: 1px solid var(--lg-hairline);
  border-bottom: 1px solid var(--lg-hairline);
  padding: 52px 24px 56px;
  margin: 20px 0;
  font-family: var(--lg-body);
  text-align: center;
}
.lg-accolades-kicker {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lg-muted);
  margin: 0 0 8px;
}
.lg-accolades-stat {
  font-family: var(--lg-display);
  font-size: clamp(23px, 4vw, 33px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--lg-ink);
  margin: 0 0 34px;
  line-height: 1.1;
}
.lg-accolades-stat b { color: var(--lg-accent); font-weight: inherit; }
.lg-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto;
}
.lg-quote {
  text-align: left;
  margin: 0;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--lg-hairline);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lg-quote p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--lg-ink); }
.lg-quote .lg-star { color: var(--lg-accent); font-weight: 700; }
.lg-quote cite {
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lg-muted);
}

/* ------------------------------------------------------------
   15 · "Request it at your library" button (book pages)
   ------------------------------------------------------------ */
.lg-libbtn-wrap { text-align: center; margin: 12px 0 2px; }
.lg-libbtn {
  display: inline-block;
  padding: 0.7em 1.5em;
  border: 1.5px solid var(--lg-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--lg-ink) !important;
  font-family: var(--lg-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.lg-libbtn:hover { background: var(--lg-ink); color: #fff !important; }
.lg-libbtn-note {
  margin: 7px 0 0;
  font-size: 12px;
  color: var(--lg-muted);
  letter-spacing: 0.02em;
}

/* Buy dropdown (primary) + library button group (injected on book pages) */
.lg-book-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin: 10px 0 6px;
}
.lg-buy { position: relative; }
.lg-buy-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  border: 1.5px solid var(--lg-accent);
  border-radius: 999px;
  padding: 0.72em 1.7em;
  background: var(--lg-accent);
  color: #fff;
  font-family: var(--lg-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lg-buy-btn:hover { background: var(--lg-ink); border-color: var(--lg-ink); }
.lg-buy-caret { font-size: 0.8em; transition: transform 0.2s ease; }
.lg-buy.lg-buy-open .lg-buy-caret { transform: rotate(180deg); }
.lg-buy-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 210px;
  background: #fff;
  border: 1px solid var(--lg-hairline);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  padding: 6px;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.lg-buy.lg-buy-open .lg-buy-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.lg-buy-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--lg-ink) !important;
  font-family: var(--lg-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
.lg-buy-menu a:hover { background: #f3eee5; color: var(--lg-accent) !important; }

/* ------------------------------------------------------------
   16 · Slider galleries — the Squarespace slideshow JS never runs in
        the static mirror (slides stay hidden behind a black stage).
        Render the slides as a scrollable filmstrip instead.
   ------------------------------------------------------------ */
.sqs-gallery-block-slider { height: auto !important; background: transparent !important; }
/* the broken slideshow is swapped (lg-custom.js) for taped "review clippings" */
.lg-notes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  padding: 20px 0 10px;
}
.lg-note {
  position: relative;
  max-width: min(600px, 92%);
  background: #fff;
  padding: 11px;
  box-shadow: 0 8px 22px rgba(26, 26, 26, 0.14);
}
.lg-note img { display: block; width: 100%; height: auto; }
/* washi tape strip across the top of each clipping */
.lg-tape {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 104px;
  height: 27px;
  transform: translateX(-50%) rotate(-2.5deg);
  background: rgba(210, 190, 148, 0.5);
  border-left: 1px dashed rgba(255, 255, 255, 0.5);
  border-right: 1px dashed rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.lg-note:nth-child(even) .lg-tape { transform: translateX(-50%) rotate(3deg); left: 46%; }
.lg-note:nth-child(3n) .lg-tape { left: 56%; transform: translateX(-50%) rotate(-4deg); }

/* ------------------------------------------------------------
   17 · Grid galleries — Squarespace's grid JS half-runs in the
        mirror (stamps imgs with width:0 inline styles, never sizes
        the float slides) so images scrunch/overlap. lg-custom.js
        swaps each .sqs-gallery for this clean CSS grid: square
        cells, images contained + centered, like the live site.
   ------------------------------------------------------------ */
.lg-grid {
  display: grid;
  grid-template-columns: repeat(var(--lg-cols, 3), 1fr);
  gap: 20px;
}
/* Tableau charts rebuilt as static images */
.lg-tableau-img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(26, 26, 26, 0.08);
  border-radius: 4px;
}
.tableauPlaceholder a { display: block; }

/* stacked comic pages: full-width panels, read top-to-bottom */
.lg-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.lg-stack img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.lg-grid-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  min-width: 0;
}
.lg-grid-cell img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media screen and (max-width: 900px) {
  .lg-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 640px) {
  .lg-grid { grid-template-columns: 1fr; }
  .lg-grid-cell { aspect-ratio: auto; }
}

/* ------------------------------------------------------------
   18 · Slideshow-carousel safety clamp — clicking a thumbnail whose
        full-size image hasn't been stamped with inline sizing yet
        renders it at natural size, overshooting the carousel and
        overlapping the content below. Clamp slides to the gallery
        box; correct Squarespace sizing always fits within it, so
        this only bites in the broken case.
   ------------------------------------------------------------ */
.sqs-gallery-block-slideshow .sqs-gallery { overflow: hidden; }
.sqs-gallery-block-slideshow .sqs-gallery .slide img {
  max-width: 100% !important;
  max-height: 100% !important;
}

/* ------------------------------------------------------------
   19 · Author-quote band (messyroots) — the taped clippings sit
        right above the starred-reviews strip, scattered like a
        pinboard over the countryside spread art.
   ------------------------------------------------------------ */
.lg-notes-band {
  background: url('/assets/images/a840789e-8-9-2C-no-text.jpg') center / cover no-repeat;
  padding: 76px 5vw 96px;
  margin-top: 26px;
}
.lg-notes-band .lg-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px 36px;
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;
}
.lg-notes-band .lg-note { max-width: 460px; width: 100%; }
.lg-notes-band .lg-note:nth-child(odd) { justify-self: start; }
.lg-notes-band .lg-note:nth-child(even) { justify-self: end; margin-top: 96px; }
.lg-notes-band .lg-note:nth-child(3) { margin-top: -30px; margin-left: 7%; }
.lg-notes-band .lg-note:nth-child(4) { margin-top: 34px; margin-right: 5%; }
.lg-notes-band .lg-note:nth-child(5) { margin-top: -18px; margin-left: -2%; }
.lg-notes-band .lg-note:nth-child(6) { margin-top: 80px; margin-right: -1%; }
@media screen and (max-width: 760px) {
  .lg-notes-band { padding: 44px 5vw 54px; }
  .lg-notes-band .lg-notes { grid-template-columns: 1fr; gap: 30px; }
  .lg-notes-band .lg-note {
    justify-self: center !important;
    margin: 0 !important;
    max-width: min(600px, 100%);
  }
}

/* ------------------------------------------------------------
   20 · Lightbox for the rebuilt grid galleries (lg-custom.js
        openLightbox) — click a sample page to view it full-size.
   ------------------------------------------------------------ */
.lg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(20, 17, 14, 0.88);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease;
  cursor: zoom-out;
}
.lg-lightbox.lg-lightbox-open { opacity: 1; visibility: visible; }
.lg-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  background: #fff;
}
.lg-lightbox-close {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.lg-lightbox-close:hover { background: rgba(255, 255, 255, 0.25); }
/* the grid cells now zoom instead of navigating */
.lg-grid-cell { cursor: zoom-in; }

/* ------------------------------------------------------------
   21 · Forms: drop the redundant "Name" group label above the
        First/Last Name fields (per Laura).
   ------------------------------------------------------------ */
.sqs-block-form fieldset legend { display: none; }

/* ------------------------------------------------------------
   22 · Accolades grid (messyroots) — rebuilt from the flat image
        as text + sliced logos (lg-custom.js injectAwards). The bg
        matches the source image's yellow so crops blend in.
   ------------------------------------------------------------ */
.lg-awards {
  background: #f7cf69;
  width: 100vw;
  margin: 26px calc(50% - 50vw);
  padding: 48px 6vw 56px;
}
.lg-awards-title {
  margin: 0 0 40px;
  text-align: center;
  font-family: var(--lg-display);
  font-size: 36px;
  letter-spacing: 0.32em;
  text-indent: 0.32em; /* optically recenter the tracked-out caps */
  text-transform: uppercase;
  color: #221e18;
}
.lg-awards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 44px 28px;
  max-width: 1160px;
  margin: 0 auto;
}
.lg-award {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.lg-award p {
  margin: 0;
  font-family: var(--lg-body);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.75;
  color: #221e18;
}
.lg-award img {
  margin-top: auto;
  height: 96px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
@media screen and (max-width: 900px) {
  .lg-awards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 540px) {
  .lg-awards-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   23 · Book CTA buttons: equal heights (Buy now was shorter than
        the library button).
   ------------------------------------------------------------ */
.lg-buy-btn,
.lg-libbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 47px;
  padding: 0 1.7em;
  line-height: 1;
}

/* ------------------------------------------------------------
   24 · Quotes band goes full-bleed (same height — the art just
        crops wider).
   ------------------------------------------------------------ */
.lg-notes-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ------------------------------------------------------------
   25 · Guide polaroids — guide images taped up like polaroids,
        with the guide button on the white caption strip.
   ------------------------------------------------------------ */
.lg-polaroid {
  position: relative;
  max-width: 430px;
  margin: 22px auto 30px;
  background: #fff;
  padding: 13px 13px 0;
  box-shadow: 0 12px 30px rgba(26, 26, 26, 0.17);
}
.lg-polaroid-l { transform: rotate(-1.8deg); }
.lg-polaroid-r { transform: rotate(1.5deg); }
.lg-polaroid img { display: block; width: 100%; height: auto; }
.lg-polaroid-caption { padding: 17px 10px 19px; text-align: center; }
.lg-polaroid-caption a.sqs-block-button-element {
  display: inline-block;
  background: var(--lg-accent);
  color: #fff !important;
  border-radius: 999px;
  padding: 0.7em 1.5em;
  font-family: var(--lg-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background 0.2s ease;
}
.lg-polaroid-caption a.sqs-block-button-element:hover { background: var(--lg-ink); }

/* ------------------------------------------------------------
   26 · Footer newsletter: wider card with the social/email/resume
        links as icons inside it; the old text-link row goes away.
   ------------------------------------------------------------ */
.lg-news { max-width: 660px; }
.lg-news-icons {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--lg-hairline);
}
.lg-news-icons a {
  display: inline-flex;
  color: var(--lg-muted);
  transition: color 0.2s ease, transform 0.2s ease;
}
.lg-news-icons a:hover { color: var(--lg-accent); transform: translateY(-2px); }
.lg-news-icons svg { width: 22px; height: 22px; }
.lg-footer-links { display: none !important; }

/* full-bleed sections: padding must live INSIDE the 100vw, or the right
   edge overflows the viewport by the padding amount */
.lg-awards,
.lg-notes-band { box-sizing: border-box; }

/* ------------------------------------------------------------
   27 · No page-banner strip: York shows the collection's index
        image as a band under the header after in-site navigation.
        Laura wants it gone on every page.
   ------------------------------------------------------------ */
.page-banner-wrapper { display: none !important; }

/* ------------------------------------------------------------
   28 · Pager restyle — comic-sticker cards (white, ink outline,
        terracotta offset shadow) instead of the tan boxes.
   ------------------------------------------------------------ */
.lg-pager {
  background: transparent;
  border-top: 0;
  border-bottom: 0;
  gap: 14px;
  padding: 0 14px;
}
.lg-pager a,
.lg-pager span.lg-pager-mid {
  background: #fff;
  border: 1.5px solid var(--lg-ink);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--lg-accent);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.lg-pager a:hover {
  background: var(--lg-accent);
  color: #fff;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--lg-ink);
}
.lg-pager a:hover .lg-kicker { color: rgba(255, 255, 255, 0.85); }

/* ------------------------------------------------------------
   29 · Rebuilt carousel (lg-custom.js setupCarousels)
   ------------------------------------------------------------ */
.lg-carousel {
  position: relative;
  max-width: 1100px;
  margin: 8px auto;
  outline: none;
}
.lg-carousel-viewport {
  overflow: hidden;
  border: 1.5px solid var(--lg-ink);
  border-radius: 16px;
  background: #fff;
  touch-action: pan-y;
}
.lg-carousel-track {
  display: flex;
  transition: transform 0.35s cubic-bezier(0.25, 0.7, 0.3, 1);
}
.lg-carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  height: min(62vh, 540px);
  padding: 18px;
  box-sizing: border-box;
}
.lg-carousel-slide img.lg-carousel-img {
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  cursor: zoom-in;
}
.lg-carousel-slide figcaption {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  font-family: var(--lg-body);
  font-size: 12.5px;
  color: var(--lg-muted);
  background: rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  padding: 3px 12px;
  white-space: nowrap;
  max-width: 88%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lg-carousel-video {
  position: relative;
  border: 0;
  padding: 0;
  background: #111;
  cursor: pointer;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
}
.lg-carousel-video img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.92;
}
.lg-carousel-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(26, 26, 26, 0.78);
  color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 5px;
  transition: transform 0.2s ease, background 0.2s ease;
}
.lg-carousel-video:hover .lg-carousel-play {
  background: var(--lg-accent);
  transform: translate(-50%, -50%) scale(1.08);
}
.lg-carousel-frame {
  width: 100%;
  height: 100%;
  border: 0;
}
.lg-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--lg-ink);
  background: #fff;
  color: var(--lg-ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px;
  box-shadow: 2px 2px 0 var(--lg-accent);
  transition: background 0.18s ease, color 0.18s ease;
}
.lg-carousel-btn:hover { background: var(--lg-accent); color: #fff; }
.lg-carousel-prev { left: -14px; }
.lg-carousel-next { right: -14px; }
.lg-carousel-count {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 5;
  font-family: var(--lg-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--lg-ink);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--lg-hairline);
  border-radius: 999px;
  padding: 3px 11px;
}
.lg-carousel-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
}
.lg-carousel-thumbs button {
  position: relative;
  flex: 0 0 auto;
  width: 74px;
  height: 52px;
  padding: 0;
  border: 1.5px solid var(--lg-hairline);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  opacity: 0.66;
  transition: opacity 0.18s ease, border-color 0.18s ease;
}
.lg-carousel-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lg-carousel-thumbs button:hover { opacity: 1; }
.lg-carousel-thumbs .lg-carousel-thumb-on {
  opacity: 1;
  border-color: var(--lg-accent);
  box-shadow: 0 0 0 1.5px var(--lg-accent);
}
.lg-carousel-thumb-play {
  position: absolute;
  right: 4px;
  bottom: 3px;
  font-size: 9px;
  color: #fff;
  background: rgba(26, 26, 26, 0.75);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 1px;
}
@media screen and (max-width: 700px) {
  .lg-carousel-slide { height: 56vw; }
  .lg-carousel-prev { left: 6px; }
  .lg-carousel-next { right: 6px; }
}

/* ------------------------------------------------------------
   30 · Book pages: description + buttons vertically centered
        against the cover image.
   ------------------------------------------------------------ */
.lg-book-row { display: flex; align-items: center; }
.lg-book-row > .col { float: none; }
@media screen and (max-width: 768px) {
  .lg-book-row { display: block; }
}

/* ------------------------------------------------------------
   31 · Polaroid v2: inked photo edge, heading on the caption
        strip, smaller button.
   ------------------------------------------------------------ */
.lg-polaroid img { border: 2px solid var(--lg-ink); box-sizing: border-box; }
.lg-polaroid-note {
  margin: 2px 4px 10px;
  font-family: var(--lg-display);
  font-size: 19px;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--lg-ink);
}
.lg-polaroid-caption { padding: 15px 12px 18px; }
.lg-polaroid-caption a.sqs-block-button-element {
  font-size: 11px;
  padding: 0.55em 1.25em;
}

/* the mid cell's inner link must not inherit the card look (double box) */
.lg-pager .lg-pager-mid a {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
  color: inherit;
  text-decoration: none;
}
.lg-pager .lg-pager-mid a:hover { color: var(--lg-accent); }

/* Squarespace lazily (re)creates its thumbnail strip after our carousel
   rebuild — keep every sqs gallery leftover hidden inside rebuilt blocks */
[data-lg-carousel] .sqs-gallery-thumbnails,
[data-lg-carousel] .sqs-gallery-controls,
[data-lg-carousel] .sqs-gallery-meta-container,
[data-lg-carousel-host] .sqs-gallery-thumbnails,
[data-lg-carousel-host] .sqs-gallery-controls,
[data-lg-carousel-host] .sqs-gallery-meta-container { display: none !important; }

/* ------------------------------------------------------------
   32 · Carousel host: kill the old slideshow stage's grey wash
   ------------------------------------------------------------ */
[data-lg-carousel] { background: transparent !important; }

/* ------------------------------------------------------------
   33 · Story cards ("The Wuhan I Know" etc.): comic-sticker look
        instead of the tan/cream panel — white, ink outline,
        terracotta offset shadow (matches the pager cards).
   ------------------------------------------------------------ */
.sqs-block-image .design-layout-card .image-card-wrapper,
.sqs-block-image .design-layout-collage .image-card {
  background-color: #fff;
}
.sqs-block-image figure.design-layout-card,
.sqs-block-image figure.design-layout-collage {
  border: 1.5px solid var(--lg-ink);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--lg-accent);
}

/* ------------------------------------------------------------
   34 · Taped story tiles (lg-custom.js tapeStoryTiles): clickable
        comic/story covers get the washi-tape clipping treatment,
        same family as the author quotes.
   ------------------------------------------------------------ */
figure.lg-taped {
  position: relative;
  background: #fff;
  padding: 10px;
  box-shadow: 0 8px 22px rgba(26, 26, 26, 0.14);
}
figure.lg-taped .lg-tape { z-index: 6; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  figure.lg-taped { transition: transform 0.3s cubic-bezier(0.2, 0.6, 0.2, 1); }
  figure.lg-taped:hover { transform: rotate(0deg) !important; }
}

/* header doodles were unclickable: .site-branding spans the full header
   above the lane (z 1100) — lift the lane; it's pointer-events:none so
   the title/tagline/menu stay clickable through it, only the doodle
   buttons capture the mouse */
.site-header .lg-lane-top { z-index: 3000; }

/* ------------------------------------------------------------
   35 · Taped tiles v2: polaroid captions in sharpie handwriting
        (titles moved off the artwork by tapeStoryTiles).
   ------------------------------------------------------------ */
figure.lg-taped { padding: 10px 10px 4px; }
.lg-taped .lg-taped-cap {
  display: block;
  padding: 10px 6px 8px;
  text-align: center;
}
.lg-taped .lg-taped-cap .image-title-wrapper,
.lg-taped .lg-taped-cap .image-subtitle-wrapper,
.lg-taped .lg-taped-cap .image-title,
.lg-taped .lg-taped-cap .image-subtitle {
  position: static !important;
  transform: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  text-align: center !important;
}
.lg-taped .lg-taped-cap .image-title p {
  font-family: "Covered By Your Grace", "Marker Felt", "Comic Sans MS", cursive !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--lg-ink) !important;
  text-shadow: none !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
.lg-taped .lg-taped-cap .image-subtitle p {
  font-family: "Covered By Your Grace", "Marker Felt", "Comic Sans MS", cursive !important;
  font-size: 16.5px !important;
  color: var(--lg-muted) !important;
  text-shadow: none !important;
  margin: 3px 0 0 !important;
  line-height: 1.35 !important;
}
/* no more dark overlay wash on the art */
.lg-taped .image-overlay { display: none !important; }

/* black outline around the photo (#1) + uniform square crop (#3) — the
   taped tiles were sized to each image's aspect ratio, so they came out
   uneven; force a 1:1 box and cover-crop so every polaroid matches. */
figure.lg-taped .sqs-image-shape-container-element {
  aspect-ratio: 1 / 1 !important;
  padding-bottom: 0 !important;
  height: auto !important;
  border: 2px solid var(--lg-ink);
  box-sizing: border-box;
  overflow: hidden;
}
figure.lg-taped .sqs-image-shape-container-element img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ------------------------------------------------------------
   36 · Clickable card boxes with a pixel-shift hover
   ------------------------------------------------------------ */
figure.lg-clickcard { cursor: pointer; }
@media (hover: hover) {
  figure.lg-clickcard { transition: transform 0.09s steps(2, end), box-shadow 0.09s steps(2, end); }
  figure.lg-clickcard:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 var(--lg-accent);
  }
  figure.lg-taped a { outline: none; }
}

/* ------------------------------------------------------------
   37 · Kirby praise band + strip (injectKirbyPraise)
   ------------------------------------------------------------ */
.lg-kirby-band {
  background-image: url('/assets/images/f0bf368f-216-217-2.jpeg');
}
.lg-note-text {
  background: #fff;
  padding: 24px 28px 20px;
  max-width: 470px;
  width: 100%;
}
.lg-note-text blockquote {
  margin: 0;
  font-family: var(--lg-body);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--lg-ink);
}
.lg-note-text cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lg-muted);
}
.lg-note-text .lg-star { color: var(--lg-accent); }
.lg-kirby-accolades { padding-bottom: 26px; }

/* ------------------------------------------------------------
   38 · Hey press list: two columns instead of one endless one
   ------------------------------------------------------------ */
@media screen and (min-width: 900px) {
  #block-yui_3_17_2_1_1539167340411_14231 .sqs-html-content {
    column-count: 2;
    column-gap: 44px;
  }
  #block-yui_3_17_2_1_1539167340411_14231 p {
    break-inside: avoid;
    margin-top: 0;
  }
}

/* ------------------------------------------------------------
   39 · Recruiting guide TOC
   ------------------------------------------------------------ */
.lg-toc {
  max-width: 680px;
  margin: 8px auto 34px;
  padding: 20px 26px 22px;
  background: #fff;
  border: 1.5px solid var(--lg-ink);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--lg-accent);
}
.lg-toc-title {
  margin: 0 0 10px;
  font-family: var(--lg-display);
  font-size: 21px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lg-ink);
}
.lg-toc ol { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 34px; }
.lg-toc li { margin: 0 0 6px; break-inside: avoid; font-family: var(--lg-body); font-size: 14.5px; }
.lg-toc a { color: var(--lg-ink); text-decoration: none; }
.lg-toc a:hover { color: var(--lg-accent); text-decoration: underline; }
@media screen and (max-width: 640px) { .lg-toc ol { columns: 1; } }

/* ------------------------------------------------------------
   40 · One primary button style (UX #9): every Squarespace pill
        becomes the terracotta pill; secondary stays the outline.
   ------------------------------------------------------------ */
a.sqs-block-button-element {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 47px;
  padding: 0 1.7em !important;
  background: var(--lg-accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
  border: 0 !important;
  font-family: var(--lg-body) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background 0.18s ease;
}
a.sqs-block-button-element:hover { background: var(--lg-ink) !important; }
/* polaroid caption buttons stay compact */
.lg-polaroid-caption a.sqs-block-button-element {
  min-height: 34px;
  font-size: 11px !important;
  padding: 0 1.3em !important;
}

/* sharpie captions: outgun site.css + our own §2 poster title rules
   (they carry higher specificity), and kill the link underline that
   leaks onto caption text inside the tile anchor */
body .sqs-block-image .lg-taped .lg-taped-cap .image-title p,
body .sqs-block-image .lg-taped .lg-taped-cap .image-title p * {
  font-family: "Covered By Your Grace", "Marker Felt", "Comic Sans MS", cursive !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--lg-ink) !important;
  text-decoration: none !important;
}
body .sqs-block-image .lg-taped .lg-taped-cap .image-subtitle p,
body .sqs-block-image .lg-taped .lg-taped-cap .image-subtitle p * {
  font-family: "Covered By Your Grace", "Marker Felt", "Comic Sans MS", cursive !important;
  font-size: 16.5px !important;
  font-weight: 400 !important;
  color: var(--lg-muted) !important;
  text-decoration: none !important;
  text-transform: none !important;
}
.lg-taped a, .lg-taped a * { text-decoration: none !important; }

/* The three commission tiles at the top of Comics & Stories are plain
   Squarespace image blocks with native captions (Open Sans, 12px) rather
   than the custom taped polaroids — so their credit line read in a
   different, smaller font. Match them to the sharpie caption treatment.
   Scoped to the comics collection so article photo credits on other
   pages keep the quiet body font. */
body.collection-5d1c57f8b9f400000145e3ca .image-caption p,
body.collection-5d1c57f8b9f400000145e3ca .image-caption p * {
  font-family: "Covered By Your Grace", "Marker Felt", "Comic Sans MS", cursive !important;
  font-size: 25px !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--lg-ink) !important;
  line-height: 1.2 !important;
}

/* ------------------------------------------------------------
   41 · Editorial tiles = newspaper clippings: yellowed newsprint,
        double rule, serif headline, byline italic, a masthead
        kicker — the tape stays.
   ------------------------------------------------------------ */
figure.lg-newsclip {
  background:
    repeating-linear-gradient(0deg, rgba(26, 26, 26, 0.022) 0 1px, transparent 1px 3px),
    #f6f2e4;
}
figure.lg-newsclip img { filter: saturate(0.82) contrast(1.03) sepia(0.08); }
.lg-newsclip .lg-taped-cap {
  border-top: 3px double rgba(26, 26, 26, 0.6);
  margin: 12px 4px 2px;
  padding: 9px 2px 8px;
}
.lg-newsclip .lg-taped-cap::before {
  content: 'The Gao Gazette · Editorial';
  display: block;
  margin-bottom: 5px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 9.5px;
  font-variant: small-caps;
  letter-spacing: 0.22em;
  color: rgba(26, 26, 26, 0.55);
}
body .sqs-block-image .lg-newsclip .lg-taped-cap .image-title p,
body .sqs-block-image .lg-newsclip .lg-taped-cap .image-title p * {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-weight: 700 !important;
  font-size: 21px !important;
  letter-spacing: -0.005em !important;
  line-height: 1.18 !important;
  color: #17140f !important;
  text-transform: none !important;
}
body .sqs-block-image .lg-newsclip .lg-taped-cap .image-subtitle p,
body .sqs-block-image .lg-newsclip .lg-taped-cap .image-subtitle p * {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-style: italic !important;
  font-size: 12.5px !important;
  color: rgba(26, 26, 26, 0.62) !important;
}

/* ------------------------------------------------------------
   42 · Kirby accolades grid — night-sky variant of §22: navy bg
        to match the book, logos on white chips so they read.
   ------------------------------------------------------------ */
.lg-kirby-awards { background: #2e2c48; }
.lg-kirby-awards .lg-awards-title { color: #ffe9c9; }
.lg-kirby-awards .lg-award p { color: #f3ecdd; }
.lg-award-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  background: #fdfaf3;
  border-radius: 14px;
  padding: 16px 20px;
  min-height: 104px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.lg-award-chip img {
  max-height: 72px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0;
}
/* ------------------------------------------------------------
   43 · Pager polish: keep the cards inside the white section
        (they were straddling the footer boundary), and give the
        middle "All …" link the same display-type voice as the
        prev/next titles.
   ------------------------------------------------------------ */
.lg-pager { margin: 64px auto 60px; }
.lg-pager .lg-pager-mid a {
  font-family: var(--lg-display);
  font-size: 21px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--lg-ink);
}
.lg-pager .lg-pager-mid a:hover { color: var(--lg-accent); }

/* ------------------------------------------------------------
   44 · Overlay menu redesign: solid paper sheet, ink type,
        terracotta active page, quieter second group for the fun
        links. (Was: translucent black over the page, white list,
        invisible header title.)
   ------------------------------------------------------------ */
.overlay-nav-wrapper {
  background: #faf7f1 !important;
  box-sizing: border-box !important;
  padding-top: 116px !important; /* clear the fixed header (title + close X) */
  padding-bottom: 24px !important;
  z-index: 2000 !important; /* sit above the page content wrapper (z 100) */
}
/* While the menu is open, page content behind must not swallow the clicks
   (a nested stacking context let page images paint over + intercept the nav
   links). Disable pointer events on the content wrapper, then re-enable them
   on the overlay itself — clicks now pass through the inert page content and
   land on the menu links below it. */
body.nav-open .content-outer-wrapper,
body.nav-open .mercury-transition-wrapper {
  pointer-events: none !important;
}
body.nav-open .overlay-nav-wrapper,
body.nav-open .overlay-nav-wrapper * {
  pointer-events: auto !important;
}
body.nav-open .site-title,
body.nav-open .site-tagline { color: var(--lg-ink) !important; }
body.nav-open .nav-toggle-label-icon line { stroke: var(--lg-ink) !important; }
/* two-row menu: items flow left-to-right into two balanced rows,
   long titles wrap within their cell (was a two-column stack) */
.main-navigation--overlay {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;   /* center each row, incl. the last */
  align-content: center !important;
  align-items: center !important;
  /* Fixed gap + fixed item width so exactly 4 fit per row at any
     desktop width — the layout stays 2 rows (4 + 4) with the columns
     of both rows aligned, each row centered on the X-axis. */
  column-gap: 24px;
  row-gap: 5vh;
  width: 100%;
  max-width: 936px;
  margin: 0 auto !important;
}
.main-navigation--overlay .nav-item {
  margin: 0 !important;
  flex: 0 0 210px;             /* fixed column width → deterministic 4 per row */
  min-width: 0 !important;
  max-width: 210px !important;  /* wide enough for Kirby to wrap to 2 lines */
  text-align: center !important;
}
.main-navigation--overlay .nav-item a { display: inline-block !important; max-width: 100% !important; }
.main-navigation--overlay .nav-item a span {
  display: inline-block !important;
  max-width: 100% !important;
  white-space: normal !important;   /* wrap long titles instead of overflowing */
  overflow-wrap: break-word;
  line-height: 1.2 !important;
}
@media screen and (max-width: 720px) {
  .main-navigation--overlay {
    max-width: 420px;
    column-gap: 6vw;
    row-gap: 2.2vh;
  }
  .main-navigation--overlay .nav-item {
    flex: 0 0 42%;
    max-width: 42% !important;
  }
}
.main-navigation--overlay .nav-item a,
.main-navigation--overlay .nav-item a span {
  color: var(--lg-ink) !important;
  text-shadow: none !important;
}
.main-navigation--overlay .nav-item a span {
  font-size: clamp(21px, 3.2vh, 30px) !important;
  letter-spacing: 0.03em;
}
.main-navigation--overlay .nav-item a:hover span { color: var(--lg-accent) !important; }
/* current page: terracotta with a marker underline */
.main-navigation--overlay .nav-item.active a span,
.main-navigation--overlay .nav-item--active a span,
.main-navigation--overlay a[aria-current] span {
  color: var(--lg-accent) !important;
  box-shadow: inset 0 -3px 0 var(--lg-accent);
}
/* second group: prints / playground / bakery map — smaller, muted.
   (York marks nearly every item .external, so we key on data-lg-fun) */
/* secondary links now match the rest — same size, same ink colour */
.main-navigation--overlay .nav-item[data-lg-fun] a span {
  font-size: clamp(21px, 3.2vh, 30px) !important;
  color: var(--lg-ink) !important;
}
.main-navigation--overlay .nav-item[data-lg-fun] a:hover span { color: var(--lg-accent) !important; }
/* (divider removed — the fun links now sit at the foot of column 2) */

/* Kirby awards: all 4 cells on ONE row */
.lg-kirby-awards .lg-awards-grid {
  grid-template-columns: repeat(4, 1fr);
  max-width: 1250px;
  gap: 34px 22px;
}
.lg-kirby-awards .lg-award-chip { min-height: 92px; padding: 14px 16px; }
.lg-kirby-awards .lg-award-chip img { max-height: 60px; }
@media screen and (max-width: 720px) {
  .lg-kirby-awards .lg-awards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 420px) {
  .lg-kirby-awards .lg-awards-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   46 · Kirby cover: smaller so it doesn't dwarf the description
   ------------------------------------------------------------ */
.lg-kirby-cover { text-align: center; }
/* Cap the wrapper (not just the inner container): the container's
   padding-bottom aspect ratio resolves against the WRAPPER's width,
   so shrinking only the container leaves it too tall and object-fit:
   cover crops the art. */
.lg-kirby-cover img,
.lg-kirby-cover .sqs-image-shape-container-element,
.lg-kirby-cover .image-block-wrapper {
  max-width: 380px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* drop the tan matte the image block paints behind the cover art */
.lg-kirby-cover .sqs-image-shape-container-element,
.lg-kirby-cover .image-block-wrapper {
  background: transparent !important;
}

/* ------------------------------------------------------------
   47 · Softer drop shadows on all polaroids / taped clippings
        (were heavy; per Laura, dial them back)
   ------------------------------------------------------------ */
.lg-note { box-shadow: 0 4px 12px rgba(26, 26, 26, 0.08) !important; }
.lg-polaroid { box-shadow: 0 5px 15px rgba(26, 26, 26, 0.10) !important; }
figure.lg-taped { box-shadow: 0 4px 12px rgba(26, 26, 26, 0.08) !important; }

/* ------------------------------------------------------------
   45 · Taped tiles: make the polaroid self-sufficient so it never
        double-heights. Squarespace's poster layout reserves the
        image aspect ratio via padding-bottom + an absolutely-
        positioned img — but that only holds if the sqs ImageLoader
        JS runs. In the mirror it often doesn't (esp. after Mercury
        nav), leaving the img at natural size ON TOP of the reserved
        space → a tall empty white gap under each picture. Force the
        image to a normal static block and drop the reservation.
   ------------------------------------------------------------ */
.lg-taped .sqs-image-shape-container-element,
.lg-taped .image-block-wrapper {
  padding-bottom: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}
.lg-taped .sqs-image-shape-container-element img,
.lg-taped img.thumb-image,
.lg-taped .sqs-image-shape-container-element .thumb-image {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  object-fit: contain !important;
}
.lg-taped .sqs-block-image-figure.intrinsic,
.lg-taped.intrinsic { padding-bottom: 4px !important; height: auto !important; }