/* New-site overrides — loaded after all ported Squarespace CSS. */

/* "calluna" came from Squarespace's Typekit license, which doesn't leave the
   platform. Alegreya (SIL OFL, self-hosted) is the closest free match and
   stands in under the same family name. For pixel-perfect Calluna, create a
   free Adobe Fonts kit for amysuto.com and swap these blocks for its <link>. */
/* font-display: optional (not swap) so the browser never swaps fonts mid-view —
   the cause of the flash. Combined with the <link rel="preload"> tags in
   layout.tsx, the real fonts are fetched at high priority before first paint,
   so they render correctly from the start with no fallback flash. */
@font-face {
  font-family: 'calluna';
  src: url('/fonts/Alegreya-400-normal.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'calluna';
  src: url('/fonts/Alegreya-400-italic.woff2') format('woff2');
  font-weight: 300 500;
  font-style: italic;
  font-display: optional;
}
@font-face {
  font-family: 'calluna';
  src: url('/fonts/Alegreya-700-normal.woff2') format('woff2');
  font-weight: 600 800;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'calluna';
  src: url('/fonts/Alegreya-700-italic.woff2') format('woff2');
  font-weight: 600 800;
  font-style: italic;
  font-display: optional;
}

/* Poppins (headings/UI) and Forum — previously loaded from Google Fonts with
   display=swap, which flashed a fallback then swapped. Now self-hosted to match
   the rest of the site (and drop the external request, helping load time). */
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/Poppins-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/Poppins-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: optional;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/Poppins-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/Poppins-500-italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: optional;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/Poppins-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/Poppins-700-italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: optional;
}
@font-face {
  font-family: 'Forum';
  src: url('/fonts/Forum-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

/* Moderat (headings + nav) is defined in the ported custom.css with no
   font-display, so it blocked/swapped and flashed. Redefine here (this file
   loads after custom.css, so these win) with font-display:optional, and preload
   Moderat-Light in layout.tsx — the big page headings use it. */
@font-face {
  font-family: 'Moderat-Light';
  src: url('/fonts/Moderat-Light.woff') format('woff');
  font-display: optional;
}
@font-face {
  font-family: 'Moderat-Regular';
  src: url('/fonts/Moderat-Regular.woff') format('woff');
  font-display: optional;
}

/* Burger lines — Squarespace injects this as an inline style on the live
   site; without it the bun divs render as solid squares. */
.header-burger-btn .top-bun,
.header-burger-btn .patty,
.header-burger-btn .bottom-bun {
  height: 1px;
  width: 28px;
}

/* Header is rendered without Squarespace's JS controller; keep it in flow. */
#header {
  position: relative;
}

/* Scraped images: keep them responsive even without Squarespace's loader. */
.sqs-block-image img,
.blog-item-content img {
  max-width: 100%;
  height: auto;
}

/* Image-link blocks (e.g. WORK WITH ME / JOB BOARD / PODCASTS cards) and
   gallery-section items start at opacity:0 awaiting Squarespace's scroll-in
   animation — show them outright. */
.sqs-block-image .sqs-block-image-link,
.sqs-block-image [data-animation-role='image'],
.sqs-block-image .image-block-wrapper,
.sqs-block-image .image-card,
.gallery-grid-item-wrapper,
.gallery-grid-item,
.gallery-masonry-item,
.gallery-strips-item {
  opacity: 1 !important;
}

/* Squarespace's JS normally reveals images by adding .loaded — the scraper
   bakes that class in, and this is the safety net for anything it missed
   (summary blocks, galleries, slideshow thumbs default to opacity:0). */
.sqs-block-summary-v2 .summary-thumbnail-container img,
.sqs-block[data-definition-name='website.components.summary'] .img-wrapper img,
.sqs-gallery-block-grid img,
.gallery-slideshow-thumbnails-thumb img,
.gallery-lightbox-item-img {
  opacity: 1 !important;
}

/* Summary thumbnails: Squarespace JS sizes these as a 3:2 padding box with a
   cover image (inline styles). Recreate that sizing in CSS. */
.sqs-block-summary-v2 .summary-thumbnail.img-wrapper {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 66.6667%;
}
.sqs-block-summary-v2 .summary-thumbnail.img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Summary carousels: a real slideshow — 3 cards in view, swipe/scroll-snap,
   arrows wired by sqs-shims.js. */
.sqs-block-summary-v2 .sqs-gallery-design-carousel .summary-item-list {
  display: flex !important;
  gap: 36px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-left: 0 !important;
  transform: none !important;
  padding-bottom: 4px;
}
.sqs-block-summary-v2 .sqs-gallery-design-carousel .summary-item-list::-webkit-scrollbar {
  display: none;
}
.sqs-block-summary-v2 .sqs-gallery-design-carousel .summary-item {
  flex: 0 0 calc((100% - 72px) / 3);
  scroll-snap-align: start;
  width: auto !important;
  padding: 0 !important;
  position: static !important;
}
.sqs-block-summary-v2 .sqs-gallery-design-carousel .summary-thumbnail-outer-container {
  width: 100% !important;
  float: none !important;
  margin-bottom: 14px;
}
/* Full-width text under each card (otherwise it squeezes into a half-width
   column and wraps awkwardly). */
.sqs-block-summary-v2 .sqs-gallery-design-carousel .summary-content {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}
@media (max-width: 767px) {
  .sqs-block-summary-v2 .sqs-gallery-design-carousel .summary-item {
    flex-basis: calc(100% - 24px);
  }
}

/* Carousel arrows: Squarespace's own pager spans carry stubborn absolute
   positioning, so the shim hides them and injects these instead. */
.sqs-block-summary-v2 .summary-block-header {
  position: relative;
  min-height: 44px;
}
.sqs-block-summary-v2 .summary-carousel-pager {
  display: none !important;
}
/* Summary excerpts (TRENDING / ON THE BLOG cards): Squarespace declares
   -webkit-line-clamp but not the -webkit-box display it needs, so text clipped
   mid-line with no ellipsis. Clamp cleanly at 4 lines. */
.sqs-block-summary-v2 .summary-excerpt {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible;
}
/* Cap the <p> (it carries the real font metrics — the wrapper is font-size:0)
   at exactly four whole line-heights, with -webkit-line-clamp painting the
   ellipsis, so the cut never lands mid-line. */
.sqs-block-summary-v2 .summary-excerpt p {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  height: auto !important;
  /* 4 lines + a sliver of line 5's leading so line-4 descenders aren't shaved */
  max-height: calc(4.2 * 1lh) !important;
  margin: 0;
}
.sqs-block-summary-v2 .summary-excerpt p:nth-of-type(n + 2) {
  display: none !important;
}

.as-carousel-arrows {
  position: absolute;
  right: 0;
  bottom: 6px;
  display: flex;
  gap: 12px;
}
.as-carousel-arrows button {
  width: 36px;
  height: 36px;
  border: 1px solid hsl(29.28, 49.8%, 50.78%);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: background-color 0.25s ease;
}
.as-carousel-arrows button:hover {
  background-color: hsla(29.28, 49.8%, 50.78%, 0.12);
}
.as-carousel-arrows button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 1.5px solid hsl(29.28, 49.8%, 50.78%);
  border-right: 1.5px solid hsl(29.28, 49.8%, 50.78%);
}
.as-carousel-arrows .as-prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}
.as-carousel-arrows .as-next::before {
  transform: translate(-70%, -50%) rotate(45deg);
}

/* Carousel excerpts are clamped on the live site; list excerpts are not. */
.sqs-block-summary-v2 .sqs-gallery-design-carousel .summary-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.sqs-block-summary-v2 .sqs-gallery-design-carousel .summary-excerpt p {
  margin: 0;
}

/* Autogrid summaries (e.g. "On the Blog"): live site packs items 2 per row
   with 2:3 portrait thumbnails beside the text. */
.sqs-block-summary-v2 .summary-item-list:has(.sqs-gallery-design-autogrid-slide) {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.sqs-block-summary-v2 .sqs-gallery-design-autogrid-slide {
  width: auto !important;
  position: static !important;
}
.sqs-block-summary-v2 .sqs-gallery-design-autogrid-slide .summary-thumbnail.img-wrapper {
  /* was 150% (tall 2:3 portrait) — Amy wants compact cards, so crop to 3:2
     landscape like the Trending thumbnails */
  padding-bottom: 66%;
}
@media (max-width: 767px) {
  .sqs-block-summary-v2 .summary-item-list:has(.sqs-gallery-design-autogrid-slide) {
    grid-template-columns: 1fr;
  }
}

/* Instagram block: Squarespace JS builds a thumbnail strip; recreate it as a
   square grid (video tiles need their player JS — hide them). */
.sqs-block-instagram .sqs-gallery {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  height: auto !important;
}
.sqs-block-instagram .slide {
  position: relative !important;
  width: auto !important;
  aspect-ratio: 1;
  overflow: hidden;
  float: none !important;
}
.sqs-block-instagram .slide img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
/* Video slides: their player needs Squarespace JS, but each slide carries a
   poster image — show that as the tile. */
.sqs-block-instagram .slide .sqs-video-wrapper {
  position: absolute;
  inset: 0;
}
.sqs-block-instagram .slide .sqs-video-overlay {
  opacity: 1 !important;
}
@media (max-width: 767px) {
  .sqs-block-instagram .sqs-gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* Stacked-design galleries (sidebar IG feed) hide every slide until
   Squarespace JS rotates them — show them as tiles instead. */
.sqs-gallery-design-stacked .slide,
.sqs-gallery-design-stacked img {
  opacity: 1 !important;
  visibility: visible !important;
  position: static !important;
}
img.thumb-image {
  visibility: visible !important;
}
/* Fluid-engine image blocks: Squarespace's loader leaves imgs visibility:
   hidden until its JS runs — show them. */
.sqs-image-shape-container-element img,
.fluid-image-container img {
  visibility: visible !important;
}

/* Fluid-engine image LAYOUT: the .fe-block grid item is sized correctly by the
   captured grid CSS, but the wrapper chain inside it (.fluid-image-component-
   root → animation-wrapper → container → content-mode elements) gets its
   height:100% and the absolute <img> its inset:0/object-fit from Squarespace's
   JS-loaded imageFluid component stylesheet, which isn't present here. Without
   it the wrappers collapse to 1px and the image renders at 0×0 (the "missing
   photos"). Rebuild that layout: stretch the chain to fill the grid block and
   make the image cover/contain it. Scoped with :has() so text blocks sharing
   the fluid-engine grid keep their natural height. */
.fe-block:has(.fluid-image-component-root),
.fe-block:has(.fluid-image-component-root) > .sqs-block,
.fe-block:has(.fluid-image-component-root) > .sqs-block > .sqs-block-content,
.fe-block .fluid-image-component-root,
.fe-block .fluid-image-animation-wrapper,
.fe-block .fluid-image-container,
.fe-block .fluid-image-container .js-content-mode-element-wrapper,
.fe-block .fluid-image-container .js-content-mode-element,
.fe-block .fluid-image-container .sqs-block-image-link {
  height: 100% !important;
  width: 100% !important;
  position: relative;
}
.fe-block .fluid-image-container img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
/* data-stretch="true" blocks fill (cover); "fit" blocks (logos, banners)
   contain. Squarespace sets these via --image-component-object-fit, which its
   missing JS never populates — so derive it from the content-mode class. */
.fe-block .content-fill { --image-component-object-fit: cover; }
.fe-block .content-fit  { --image-component-object-fit: contain; }

/* Gallery sections (e.g. the work-with-me portfolio): masonry/grid placement
   normally comes from Squarespace JS — render as a tidy responsive grid. */
section.gallery-section .gallery.gallery-section-wrapper {
  height: auto !important;
  width: min(88vw, 1500px);
  margin: 0 auto;
}
section.gallery-section .gallery-grid-wrapper {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  height: auto !important;
}
section.gallery-section .gallery-grid-item {
  position: static !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
}
section.gallery-section .gallery-grid-item figure,
section.gallery-section .gallery-grid-item [class*='image-wrapper'] {
  position: relative !important;
  height: auto !important;
}
section.gallery-section .gallery-grid-item img {
  position: static !important;
  display: block;
  width: 100% !important;
  height: auto !important;
  object-fit: contain;
  border-radius: 2px;
}
section.gallery-section .gallery-grid-item {
  align-self: start;
}
section.gallery-section .gallery-grid-item .gallery-caption {
  position: static !important;
  margin-top: 10px;
}
@media (max-width: 767px) {
  section.gallery-section .gallery-grid-wrapper {
    grid-template-columns: 1fr;
  }
}

/* "Featured In" logo gallery (section 639a258d3af9f53febe1a270): override the
   generic grid above and render it as a single-row scrolling logo strip, the
   way it behaves on the live site. The sqs-shims.js marquee builder adds the
   .as-marquee class and a duplicated .as-marquee__track; the -50% loop is
   seamless because the track holds exactly two copies of the logo set. Scoped
   by section id (high specificity) so the portfolio gallery stays a grid. */
section.gallery-section[data-section-id="639a258d3af9f53febe1a270"] .gallery.gallery-section-wrapper {
  width: 100%;
  max-width: 100%;
}
section.gallery-section[data-section-id="639a258d3af9f53febe1a270"] .gallery-grid-wrapper.as-marquee {
  display: flex !important;
  grid-template-columns: none !important;
  overflow: hidden;
  width: 100%;
  height: auto !important;
  gap: 0;
  /* fade the logos in/out at the edges */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
section.gallery-section[data-section-id="639a258d3af9f53febe1a270"] .as-marquee__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  animation: as-logo-marquee 60s linear infinite;
}
section.gallery-section[data-section-id="639a258d3af9f53febe1a270"] .as-marquee:hover .as-marquee__track {
  animation-play-state: paused;
}
section.gallery-section[data-section-id="639a258d3af9f53febe1a270"] .gallery-grid-item {
  position: static !important;
  flex: 0 0 auto;
  width: auto !important;
  height: 64px !important;
  /* trailing margin (not gap) keeps the two copies identical → seamless -50% */
  margin: 0 72px 0 0 !important;
  transform: none !important;
  align-self: center;
}
section.gallery-section[data-section-id="639a258d3af9f53febe1a270"] .gallery-grid-item-wrapper,
section.gallery-section[data-section-id="639a258d3af9f53febe1a270"] .gallery-grid-item figure {
  height: 100% !important;
}
section.gallery-section[data-section-id="639a258d3af9f53febe1a270"] .gallery-grid-item img {
  position: static !important;
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain;
  border-radius: 0;
}
@keyframes as-logo-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  section.gallery-section[data-section-id="639a258d3af9f53febe1a270"] .as-marquee__track {
    animation: none;
  }
}

/* Work-with-me hero: custom.css pins this section's fluid grid to min-height
   100vh, so on tall windows the rows stretch and big dead voids open between
   the heading, the intro copy, and the Contact button. Size it to content
   instead (this file loads after custom.css, so this wins). */
section[data-section-id="639a258d3af9f53febe1a266"] .fluid-engine {
  min-height: 0 !important;
}
/* The heading now says "Substack Consultant, …" and wraps to three lines,
   overflowing its fixed grid rows into the intro line. Give the intro (the
   block with the bullet list) and the Contact button two more rows of air. */
@media (min-width: 768px) {
  section[data-section-id="639a258d3af9f53febe1a266"] .fe-block:has(ul) {
    grid-row: 11 / 23 !important;
  }
  section[data-section-id="639a258d3af9f53febe1a266"] .fe-block:has(.sqs-block-button-element) {
    grid-row: 24 / 26 !important;
  }
}
section[data-section-id="639a258d3af9f53febe1a266"] > .content-wrapper {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* Marquee blocks (e.g. the "Contact" header on work-with-me): the scrolling
   SVG never paints without Squarespace's JS. Hide it and show the block's
   hidden plain-text measure copy as a static centered heading instead. */
.Marquee .Marquee-display > :not(.Marquee-measure) {
  display: none !important;
}
.Marquee .Marquee-measure {
  visibility: visible !important;
  position: static !important;
  width: 100%;
  display: flex;
  justify-content: center;
}
.Marquee .Marquee-measure .Marquee-item {
  visibility: visible !important;
}
/* work-with-me contact section: the photo fills the right half, so center the
   static "Contact" header over the form column instead of the full width */
section[data-section-id="646569240d9ad369b69c1978"] .Marquee .Marquee-measure {
  width: 50%;
}
/* Marquee-only bands (podcast/portfolio pages' "LET'S WORK TOGETHER" etc.):
   their viewport-scaled grid rows leave a big dead gap around the static
   heading — hug the content. :only-child keeps sections that mix a marquee
   with other blocks (like work-with-me's contact section) untouched. */
@media (min-width: 768px) {
  .fluid-engine:has(> .fe-block:only-child .Marquee) {
    grid-template-rows: repeat(2, minmax(36px, auto)) !important;
    min-height: 0 !important;
  }
  /* the Marquee itself carries a fixed calc() height — hug the static heading */
  .fluid-engine:has(> .fe-block:only-child .Marquee) .Marquee,
  .fluid-engine:has(> .fe-block:only-child .Marquee) .Marquee-display {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* Testimonial banner slideshow ("Kind Words From Happy Clients"): Squarespace
   leaves the .slides container at opacity:0 until its JS fades it in, hiding
   every quote. sqs-shims.js reveals it and marks the active slide; here we show
   only that one (all slides share grid cell 1/1, so they'd otherwise overlap). */
.user-items-list-banner-slideshow.as-slideshow-ready .slides {
  opacity: 1 !important;
}
.user-items-list-banner-slideshow.as-slideshow-ready .slides .slide.list-item {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease;
}
.user-items-list-banner-slideshow.as-slideshow-ready .slides .slide.list-item.as-slide-active {
  opacity: 1;
  visibility: visible;
  /* Squarespace parks slides at translateX(-9999px) until its JS slides them
     in — without this the active quote is "visible" but painted offscreen */
  transform: none !important;
}
/* In the narrow sidebar, show the latest post full-width (matches the live
   site's stacked slideshow, which shows one slide at a time). */
.sidebar .sqs-block-instagram .sqs-gallery {
  grid-template-columns: 1fr !important;
}
.sidebar .sqs-block-instagram .slide:nth-child(n + 2) {
  display: none !important;
}

/* Form blocks are built by Squarespace JS; until forms get a real backend at
   cutover, the shim injects a contact CTA into the empty shell instead. */
.sqs-block-form .sqs-form-fallback-cta {
  display: inline-block;
  margin-top: 1em;
}

/* Blog sidebar plugin: let the post column shrink beside the fixed-width
   sidebar (flex items otherwise refuse to go below their image widths). */
body.has-sidebar .maincontent > .contentwrapper {
  min-width: 0;
  flex: 1 1 0% !important;
}

/* Blog sidebar plugin: stack below the post on small screens
   (plugin config: breakpoint 768px, positionOnMobile bottom). */
@media (max-width: 768px) {
  body.has-sidebar .maincontent {
    flex-direction: column !important;
  }
  body.has-sidebar .maincontent .sidebar {
    width: auto;
    max-width: 340px;
    margin: 30px auto 0 !important;
    order: 99;
  }
}

/* ---------- "My Books" bookshelf (homepage) ---------- */
.as-bookshelf-section .content-wrapper .content {
  width: min(82.5vw, 1340px) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.as-bookshelf {
  padding: 0 0 2vw;
}
/* Pull the bookshelf up toward the "as featured in" logos — the section's
   default content-wrapper padding plus the old 4vw left a ~130px hole. */
.as-bookshelf-section .content-wrapper {
  padding-top: 12px !important;
}
.as-bookshelf-head {
  position: relative;
  text-align: center;
  margin-bottom: 56px;
}
/* Was a small AbramoScript line that read as cramped/illegible — replaced with
   a clean, letter-spaced uppercase eyebrow (legible, matches the brand's other
   section labels). */
.as-bookshelf-script {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: hsl(29.28, 49.8%, 50.78%);
  margin-bottom: 14px;
}
.as-bookshelf-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 38px);
  letter-spacing: 0.32em;
  color: #3e3e3e;
  margin: 0 0 20px;
}
.as-bookshelf-rule {
  width: 60px;
  margin: 0 auto;
  border-top: 2px solid hsl(29.28, 49.8%, 50.78%);
}
.as-shelf-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
}
/* Four flat book covers standing side by side, bottoms aligned. Each cover
   keeps its natural portrait aspect (height-capped, width auto) and casts a
   small contact shadow onto the ledge below, so they read as standing books
   rather than photo tiles. */
.as-book-cover-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* hug the cover so the NEW badge can pin to the cover's actual corner */
  width: fit-content;
  margin: 0 auto;
  height: 310px;
  z-index: 1;
}
.as-book-cover {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  border-radius: 2px 3px 3px 2px;
  box-shadow:
    -1px 0 0 rgba(255, 255, 255, 0.25) inset,
    0 14px 18px -12px rgba(40, 32, 22, 0.55);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}
.as-book-cover-wrap:hover .as-book-cover {
  transform: translateY(-10px);
  box-shadow:
    -1px 0 0 rgba(255, 255, 255, 0.25) inset,
    0 24px 26px -14px rgba(40, 32, 22, 0.45);
}
/* The shelf ledge — flush with the row of covers (no overhang past the grid,
   which read as "cut off"): a wooden top surface the books stand on plus a
   slimmer front edge, with the covers' own shadows landing on it. */
.as-shelf-row::before {
  content: '';
  position: absolute;
  top: 310px;
  left: 0;
  right: 0;
  height: 9px;
  background: linear-gradient(180deg, #d9bd93 0%, #c3a072 55%, #b08a5c 100%);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  z-index: 0;
}
.as-shelf-row::after {
  content: '';
  position: absolute;
  top: 319px;
  left: 6px;
  right: 6px;
  height: 5px;
  background: linear-gradient(180deg, #96754b 0%, #82633c 100%);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 14px 18px -10px rgba(62, 62, 62, 0.35);
  z-index: 0;
}
.as-book-badge {
  /* top-left corner of the cover (was centered, covering the title art) */
  position: absolute;
  top: -11px;
  left: -10px;
  white-space: nowrap;
  z-index: 2;
  background: #f8f7f1;
  border: 1px solid hsl(29.28, 49.8%, 50.78%);
  color: hsl(29.28, 49.8%, 50.78%);
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  padding: 5px 12px;
  border-radius: 300px;
}
/* Make each unit a full-height flex column and push the button to the bottom,
   so all four "Get the Book" buttons land on the same horizontal line even
   though the hooks/notes have different lengths. */
.as-book-unit {
  display: flex;
  flex-direction: column;
}
.as-book-info {
  text-align: center;
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.as-book-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(29.28, 49.8%, 50.78%);
  margin: 0 0 12px;
  min-height: 2.6em;
}
.as-book-hook {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.55;
  color: #3e3e3e;
  margin: 0 0 10px;
}
.as-book-note {
  font-family: 'calluna', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: #5a5a55;
  margin: 0 0 22px;
}
.as-book-btn {
  display: inline-block;
  margin-top: auto;
  align-self: center;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(29.28, 49.8%, 50.78%);
  border: 1px solid hsl(29.28, 49.8%, 50.78%);
  border-radius: 300px;
  padding: 14px 30px;
  transition: background-color 0.25s ease;
}
.as-book-btn:hover {
  background-color: hsla(29.28, 49.8%, 50.78%, 0.12);
}
@media (max-width: 991px) {
  .as-shelf-row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 56px;
  }
  .as-shelf-row::before,
  .as-shelf-row::after {
    display: none;
  }
  .as-book-cover-wrap {
    height: 280px;
  }
}
@media (max-width: 600px) {
  .as-shelf-row {
    grid-template-columns: 1fr;
  }
  .as-book-name {
    min-height: 0;
  }
}

/* ---------- Desktop overlay menu (checkbox burger) ---------- */
/* Open state: one continuous cream panel nestled at the top of the screen.
   The .menu element's own background is a mauve that must never show — force
   the cream everywhere. Top padding pushes the content (and the column
   divider, which starts at the content's top) just below the close X, the
   panel sizes to its content, and short windows scroll. */
.nav2 #hamburger:checked ~ .menu {
  top: 0 !important;
  height: auto !important;
  max-height: 100dvh;
  box-sizing: border-box;
  padding-top: 68px !important;
  overflow-y: auto !important;
  background-color: rgb(247, 246, 241) !important;
}
.nav2 .checkburger {
  z-index: 1600;
}

/* ---------- Blog sidebar: WFMP book block + newsletter footer ---------- */
.as-sb-book-block .sqs-block-content {
  text-align: center;
}
.as-sb-cover-link {
  display: block;
  width: min(100%, 300px);
  margin: 0 auto;
}
.as-sb-cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 14px 22px -14px rgba(62, 62, 62, 0.5);
  transition: transform 0.3s ease;
}
.as-sb-cover-link:hover .as-sb-cover {
  transform: translateY(-5px);
}
.as-sb-book-hook {
  font-family: 'calluna', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: #5a5a55;
  text-align: center;
  margin: 16px auto 6px;
  max-width: 320px;
}
.as-sb-newsletters {
  margin-top: 10px;
}
.as-sb-nl {
  display: block;
  text-align: center;
  margin: 0 0 22px;
}
.as-sb-nl-label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #3e3e3e;
  margin-bottom: 6px;
}
.as-sb-nl-label a {
  color: hsl(29.28, 49.8%, 50.78%);
  text-decoration: none;
}
.as-sb-nl-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 10px 18px -10px rgba(62, 62, 62, 0.4);
  margin: 0 0 10px;
  background: #e8e6dd;
  transition: transform 0.3s ease;
}
.as-sb-nl-post:hover .as-sb-nl-thumb {
  transform: translateY(-4px);
}
.as-sb-nl-post {
  display: block;
  font-family: 'calluna', serif;
  font-size: 16.5px;
  line-height: 1.5;
  color: #3e3e3e;
  text-decoration: underline;
  text-decoration-color: hsla(29.28, 49.8%, 50.78%, 0.6);
  text-underline-offset: 3px;
  margin-bottom: 4px;
}
.as-sb-nl-date {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: hsl(29.28, 49.8%, 50.78%);
}

/* ---------- Markdown-block accordions (About page sections) ---------- */
.as-md-accordion {
  width: 100%;
  border-bottom: 1px solid hsla(29.28, 49.8%, 50.78%, 0.4);
}
.as-md-acc-title {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 4px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3e3e3e;
}
/* sideways triangle that rotates open — same motion as the site's accordions */
.as-md-acc-title::before {
  content: '';
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 7px solid hsl(29.28, 49.8%, 50.78%);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: transform 0.2s ease;
}
.as-md-accordion.is-open .as-md-acc-title::before {
  transform: rotate(90deg);
}
.as-md-acc-body {
  display: none;
  padding: 0 4px 8px 23px;
}
.as-md-accordion.is-open .as-md-acc-body {
  display: block;
}
/* the phantom space the hidden markdown titles used to occupy */
body:not(.sqs-edit-mode) .sqs-block-markdown {
  display: none !important;
}
/* condense the accordion bodies: the moved blocks keep Squarespace's default
   17px paddings, which read as big paragraph gaps inside an accordion */
.as-md-acc-body .sqs-block {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* ---------- Blog post: inline prev/next + "Keep Reading" ---------- */
.as-inline-pagination {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  /* .contentwrapper is a centered flex column — stretch to the full column */
  width: 100%;
  align-self: stretch;
  margin: 44px 0 8px;
  padding: 22px 0;
  border-top: 1px solid hsla(29.28, 49.8%, 50.78%, 0.45);
  border-bottom: 1px solid hsla(29.28, 49.8%, 50.78%, 0.45);
}
.as-inline-pagination .item-pagination-link {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 46%;
  text-decoration: none;
}
.as-inline-pagination .item-pagination-link--next {
  margin-left: auto;
  text-align: right;
}
.as-inline-pagination .item-pagination-prev-next {
  display: block !important; /* Squarespace hides the Previous/Next label */
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(29.28, 49.8%, 50.78%);
  margin-bottom: 4px;
}
.as-inline-pagination .item-pagination-title {
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.45;
  color: #3e3e3e;
  margin: 0;
  white-space: normal;
}
.as-inline-pagination .item-pagination-icon {
  flex: 0 0 auto;
  width: 10px;
}
.as-inline-pagination svg {
  stroke: hsl(29.28, 49.8%, 50.78%);
  width: 9px;
  height: 16px;
}
.as-keep-reading {
  width: 100%;
  align-self: stretch;
  margin: 34px 0 10px;
}
.as-kr-heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 21px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #3e3e3e;
  margin: 0 0 12px;
}
.as-kr-rule {
  border-top: 1px solid hsl(29.28, 49.8%, 50.78%);
  margin-bottom: 26px;
}
.as-kr-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.as-kr-card {
  display: block;
  text-decoration: none;
  transition: transform 0.3s ease;
}
.as-kr-card:hover {
  transform: translateY(-6px);
}
.as-kr-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 10px 18px -10px rgba(62, 62, 62, 0.4);
  margin-bottom: 14px;
  background: #e8e6dd;
}
.as-kr-thumb--empty {
  background: linear-gradient(135deg, #ece9df, #ddd9cb);
}
.as-kr-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.5;
  color: #3e3e3e;
  margin: 0 0 8px;
}
.as-kr-excerpt {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  max-height: calc(3.2 * 1lh);
  font-family: 'calluna', serif;
  font-size: 15px;
  line-height: 1.55;
  color: #5a5a55;
  margin: 0 0 10px;
}
.as-kr-more {
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsl(29.28, 49.8%, 50.78%);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 767px) {
  .as-kr-cards {
    grid-template-columns: 1fr;
  }
  .as-inline-pagination {
    flex-direction: column;
  }
  .as-inline-pagination .item-pagination-link {
    max-width: 100%;
  }
  .as-inline-pagination .item-pagination-link--next {
    margin-left: 0;
    justify-content: flex-end;
  }
}

/* ---------- "On My Substacks" feeds (homepage) ---------- */
.as-sub-feed {
  margin-bottom: 64px;
}
.as-sub-feed:last-child {
  margin-bottom: 0;
}
.as-sub-feed-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}
.as-sub-feed-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3e3e3e;
  margin: 0 0 8px;
}
.as-sub-feed-name a {
  color: hsl(29.28, 49.8%, 50.78%);
  text-decoration: none;
}
.as-sub-feed-tagline {
  font-family: 'calluna', serif;
  font-style: italic;
  font-size: 16px;
  color: #5a5a55;
  margin: 0;
}
.as-sub-subscribe {
  flex-shrink: 0;
}
.as-sub-cards {
  display: grid;
  /* minmax(0,1fr), not 1fr: a long unbreakable word in one title (e.g. a
     "40+ EELLOGO…" jobs post) otherwise stretches its column and makes that
     card render huge while the rest shrink */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
}
.as-sub-card {
  display: block;
  text-decoration: none;
  transition: transform 0.3s ease;
}
.as-sub-card:hover {
  transform: translateY(-6px);
}
.as-sub-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 10px 18px -10px rgba(62, 62, 62, 0.4);
  margin-bottom: 12px;
  background: #e8e6dd;
}
.as-sub-thumb--empty {
  background: linear-gradient(135deg, #ece9df, #ddd9cb);
  position: relative;
}
.as-sub-thumb--empty::after {
  content: '🎙️';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  opacity: 0.75;
}
.as-sub-card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere; /* break marathon words instead of widening the card */
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: #3e3e3e;
}
.as-sub-card-date {
  display: block;
  margin-top: 7px;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: hsl(29.28, 49.8%, 50.78%);
}
@media (max-width: 991px) {
  .as-sub-cards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .as-sub-cards::-webkit-scrollbar {
    display: none;
  }
  .as-sub-card {
    flex: 0 0 46%;
    scroll-snap-align: start;
  }
  .as-sub-feed-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Work-with-me: three-card services section ---------- */
.as-svc-section .content {
  width: min(86vw, 1240px) !important;
  margin: 0 auto !important;
  padding: 36px 0 44px !important;
  text-align: center;
}
.as-svc-heading {
  font-family: 'Moderat-Light', 'Poppins', sans-serif;
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3e3e3e;
  margin: 0 auto 44px;
  max-width: 900px;
}
.as-svc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: center;
}
.as-svc-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 16px 26px -16px rgba(62, 62, 62, 0.45);
  margin-bottom: 22px;
  transition: transform 0.3s ease;
}
.as-svc-card a:hover .as-svc-img {
  transform: translateY(-6px);
}
.as-svc-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 19px;
  color: #3e3e3e;
  margin: 0 0 10px;
}
.as-svc-blurb {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: #4a4a45;
  margin: 0 0 20px;
}
@media (max-width: 860px) {
  .as-svc-cards {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .as-svc-img {
    aspect-ratio: 4 / 3;
  }
}

/* ---------- "Let Me Be Your Ghost" homepage promo ---------- */
.as-lmbyg {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 52px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}
.as-lmbyg-cover-link {
  display: block;
}
.as-lmbyg-cover {
  display: block;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  border-radius: 3px;
  box-shadow: 0 22px 34px -20px rgba(40, 32, 22, 0.55);
  transition: transform 0.3s ease;
}
.as-lmbyg-cover-link:hover .as-lmbyg-cover {
  transform: translateY(-6px) rotate(-0.5deg);
}
.as-lmbyg-text {
  text-align: left;
}
.as-lmbyg-hook {
  font-family: 'calluna', serif;
  font-size: 18.5px;
  line-height: 1.65;
  color: #3e3e3e;
  margin: 0 0 16px;
}
.as-lmbyg-sub {
  font-family: 'calluna', serif;
  font-size: 16.5px;
  line-height: 1.65;
  color: #4a4a45;
  margin: 0 0 24px;
}
.as-lmbyg-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
@media (max-width: 860px) {
  .as-lmbyg {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .as-lmbyg-text {
    text-align: center;
  }
  .as-lmbyg-ctas {
    justify-content: center;
  }
}

/* ---------- Substack Consulting page ---------- */
.as-consult-hero--split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  text-align: left;
  max-width: 1180px;
  margin: 0 auto;
}
.as-consult-hero--split .as-consult-hero-text {
  text-align: left;
}
.as-consult-hero-img {
  display: block;
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 18px 30px -18px rgba(62, 62, 62, 0.5);
}
.as-consult-cta {
  margin-top: 22px;
}
.as-consult-proof {
  margin: 40px auto 8px;
  max-width: 760px;
  text-align: center;
}
.as-consult-proof img {
  display: block;
  width: 100%;
  border: 1px solid hsla(29.28, 49.8%, 50.78%, 0.35);
  border-radius: 4px;
  box-shadow: 0 14px 24px -16px rgba(62, 62, 62, 0.4);
}
.as-consult-proof figcaption {
  font-family: 'calluna', serif;
  font-style: italic;
  font-size: 15.5px;
  color: #5a5a55;
  margin-top: 12px;
}
.as-consult-band {
  position: relative;
  margin: 44px 0 10px;
}
.as-consult-band img {
  display: block;
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 16px 26px -16px rgba(62, 62, 62, 0.45);
}
.as-consult-band .as-consult-cta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  background: #f8f7f1;
}
.as-consult-band .as-consult-cta:hover {
  background: #f1ede2;
}
@media (max-width: 860px) {
  .as-consult-hero--split {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .as-consult-hero--split .as-consult-hero-text {
    text-align: center;
  }
  .as-consult-hero-img {
    max-height: 380px;
  }
}
.as-consult {
  font-family: 'Poppins', sans-serif;
  color: #3e3e3e;
}
.as-consult-hero {
  text-align: center;
  padding: 9vh 6vw 6vh;
}
.as-consult-script {
  display: block;
  font-family: 'AbramoScript', cursive;
  font-size: clamp(30px, 3.2vw, 48px);
  color: hsl(29.28, 49.8%, 50.78%);
  margin-bottom: 10px;
}
.as-consult h1 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(26px, 3vw, 42px) !important;
  letter-spacing: 0.28em !important;
  color: #3e3e3e !important;
  margin: 0 0 26px;
}
.as-consult-lede {
  font-family: 'calluna', serif;
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.75;
  max-width: 760px;
  margin: 0 auto;
}
.as-consult-inner {
  width: min(82.5vw, 1060px);
  margin: 0 auto;
  padding-bottom: 10vh;
}
.as-consult h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 72px 0 10px;
}
.as-consult-rule {
  border-top: 1px solid hsl(29.28, 49.8%, 50.78%);
  margin-bottom: 34px;
}
.as-consult-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.as-consult-card h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsl(29.28, 49.8%, 50.78%);
  margin: 0 0 10px;
}
.as-consult-card p,
.as-consult p.as-body {
  font-family: 'calluna', serif;
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 14px;
}
.as-consult-steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.as-consult-step {
  position: relative;
  padding-top: 54px;
}
.as-consult-step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 1px solid hsl(29.28, 49.8%, 50.78%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'calluna', serif;
  font-size: 19px;
  color: hsl(29.28, 49.8%, 50.78%);
}
.as-consult details {
  border-bottom: 1px solid hsla(29.28, 49.8%, 50.78%, 0.35);
  padding: 18px 0;
}
.as-consult summary {
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  letter-spacing: 0.06em;
  list-style: none;
}
.as-consult summary::after {
  content: '+';
  float: right;
  color: hsl(29.28, 49.8%, 50.78%);
}
.as-consult details[open] summary::after {
  content: '–';
}
.as-consult details p {
  font-family: 'calluna', serif;
  font-size: 16.5px;
  line-height: 1.7;
  margin: 12px 0 0;
}
/* form */
.as-consult-form {
  display: grid;
  gap: 18px;
  max-width: 680px;
  margin: 0 auto;
}
.as-consult-form label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}
.as-consult-form input,
.as-consult-form textarea {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid hsla(29.28, 49.8%, 50.78%, 0.55);
  border-radius: 4px;
  padding: 14px 16px;
  font-family: 'calluna', serif;
  font-size: 17px;
  color: #3e3e3e;
}
.as-consult-form input:focus,
.as-consult-form textarea:focus {
  outline: none;
  border-color: hsl(29.28, 49.8%, 50.78%);
}
.as-consult-form button {
  justify-self: center;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(29.28, 49.8%, 50.78%);
  background: transparent;
  border: 1px solid hsl(29.28, 49.8%, 50.78%);
  border-radius: 300px;
  padding: 16px 42px;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.as-consult-form button:hover {
  background-color: hsla(29.28, 49.8%, 50.78%, 0.12);
}
.as-consult-form button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.as-consult-success {
  text-align: center;
  font-family: 'calluna', serif;
  font-size: 19px;
  line-height: 1.7;
  padding: 40px 20px;
  border: 1px solid hsl(29.28, 49.8%, 50.78%);
  border-radius: 6px;
}
.as-consult-error {
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: #a05252;
}
/* Contact page: the form floats over the hero video — give it a soft card. */
.as-contact-form-wrap {
  background: rgba(248, 247, 241, 0.88);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid hsla(29.28, 49.8%, 50.78%, 0.35);
  border-radius: 8px;
  padding: 30px 26px;
}
.as-contact-form-wrap .as-consult-form label {
  font-family: 'Poppins', sans-serif;
}
@media (max-width: 860px) {
  .as-consult-cols,
  .as-consult-steps {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

/* Loading veil — Amy's spinning GIF on cream, fading out after a beat.
   Ported verbatim from the live site's injected CSS (body:after overlay,
   pointer-events none so it never blocks clicks). */
body:after {
  content: '';
  display: block;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  z-index: 999999999999;
  background-color: #f8f7f1;
  background-image: url(/images/Amy-Loading-Gif-Square.gif);
  background-position: center;
  background-size: 380px;
  background-repeat: no-repeat;
  animation: 1s ease-out 1s 1 fadeOut;
  animation-fill-mode: forwards;
  pointer-events: none;
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Embeds (YouTube etc.) — fluid width. */
.sqs-block-embed iframe,
.blog-item-content iframe {
  max-width: 100%;
}
.sqs-block-embed iframe[src*='youtube'],
.blog-item-content iframe[src*='youtube'] {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

/* Accordion shim (Squarespace JS normally drives these). */
.accordion-item__dropdown {
  display: none;
}
.accordion-item.is-open .accordion-item__dropdown {
  display: block;
}
.accordion-item__click-target {
  cursor: pointer;
}

/* Mobile footer: the copyright line ran edge-to-edge — give it breathing room
   (it's already text-align:center via its inline style). */
@media (max-width: 767px) {
  #footer-sections .sqs-block-code .sqs-block-content {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ---------- 404 page ---------- */
.as-404 {
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 6vw;
}
.as-404-code {
  font-family: 'AbramoScript', cursive;
  font-size: clamp(64px, 9vw, 120px);
  color: hsl(29.28, 49.8%, 50.78%);
  line-height: 1;
}
.as-404-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: 0.08em;
  color: #3e3e3e;
  margin: 18px 0 10px;
}
.as-404-body {
  font-family: 'calluna', serif;
  font-size: 17px;
  color: #5a5a55;
  margin: 0 0 28px;
}
.as-404-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Demoted decorative h1s (lib/headingsHtml.ts renders them as h2.as-h1 so each
   page has exactly one h1). The theme sizes h1 and h2 with identical calc()
   rules driven by --heading-N-size-value — pointing the h2 variable at the h1
   value makes the demoted heading render pixel-identical at every viewport. */
h2.as-h1 {
  --heading-2-size-value: var(--heading-1-size-value);
}
/* custom.css colors the desktop-menu heading via ".menu h1" — re-point it at
   the demoted tag */
.menu h2.as-h1 {
  color: #5c6452;
}

/* ---------- Homepage compaction ----------
   The scraped homepage carries a lot of baked-in Squarespace whitespace
   (section min-heights + the default 17px top/bottom padding on every block),
   which makes it very scroll-heavy. Scoped to the homepage collection, drop the
   excess section min-height and tighten the per-block vertical rhythm so the
   page is meaningfully shorter without restyling individual sections. */
#collection-60ca119325df40479bfad980 section.page-section {
  min-height: 0 !important;
}
#collection-60ca119325df40479bfad980 .sqs-block {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}
#collection-60ca119325df40479bfad980 .sqs-block-spacer .sqs-block-content {
  height: 18px !important;
  min-height: 0 !important;
}
/* "You Are What You Create" banner: the compaction above collapsed it to its
   image's natural ~310px, which read as too squat — restore it to roughly its
   original presence (was 515px on Squarespace). The image covers the area. */
#collection-60ca119325df40479bfad980 section[data-section-id="60ca5a4b300717522fb82f8c"] {
  min-height: 530px !important;
}
#collection-60ca119325df40479bfad980
  section[data-section-id="60ca5a4b300717522fb82f8c"]
  img {
  height: 530px !important;
  width: 100% !important;
  object-fit: cover;
}
/* Nav-links row: the social icons (TikTok/IG/Twitter) sat right under — nearly
   overlapping — the "BLOG | MY BOOKS | WORK WITH ME" line, made tighter by the
   block-padding compaction above. Give them clear breathing room. */
#collection-60ca119325df40479bfad980
  section[data-section-id="60d5e652fb82751a15793dae"]
  .sqs-block-socialaccountlinks {
  margin-top: 28px !important;
}
/* Top hero: trim the oversized space between the menu and the "FROM THE DESK OF"
   bar. The section ships with 100px top padding + ~47px content-wrapper padding;
   reduce both (the decorative vertical-line column keeps its own height). */
#collection-60ca119325df40479bfad980
  section[data-section-id="60d5e652fb82751a15793dae"] {
  padding-top: 36px !important;
}
#collection-60ca119325df40479bfad980
  section[data-section-id="60d5e652fb82751a15793dae"]
  .content-wrapper {
  padding-top: 20px !important;
}