/* auramagx.com — values measured from the live Squarespace site at 1459px inner
   width. Light: white ground, black halyard-display Light 200. Header is 125px and
   fixed: centred wordmark at y=16, centred nav at y=83, cart at the right.

   FONT: served from the Adobe Fonts web project 'torres-sites' (kit yli5skq),
   wired in via tools/build.py -> FONT_LINK. Adobe web projects have no domain
   allowlist, so this works on localhost, previews and production alike. The kit
   ships Light as weight 200 and Bold as 700; the exact live 300 faces are
   declared just below. */

/* The public kit provides Halyard Display Light as weight 200. Squarespace's own
   font loader serves the same family's Book face at 300, which is what the live
   typography actually resolves to. Keep the owner-provided kit for the family and
   its bold faces, and declare the two 300 files Squarespace itself uses so line
   breaks and wordmark/nav metrics are identical rather than merely similar. */
@font-face {
  font-family: "halyard-display";
  src: url("https://use.typekit.net/af/81b223/00000000000000007761c7e4/31/l?subset_id=2&fvd=n3&v=3") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "halyard-display";
  src: url("https://use.typekit.net/af/1ce449/00000000000000007761c7e5/31/l?subset_id=2&fvd=i3&v=3") format("woff2");
  font-style: italic;
  font-weight: 300;
  font-display: swap;
}

:root {
  --ink: #000;
  --bg: #fff;
  --inset: 3vw;
  --header-h: 124.046875px;
  --measure: 671px;
  --sans: halyard-display, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: #fff;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
html, body, h1, h2, h3, p, figure, figcaption, ul, li { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  isolation: isolate;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
strong, b { font-weight: 700; }
em, i { font-style: italic; }

/* ---------- header ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--bg);
  z-index: 100;
}

.site-title {
  position: absolute;
  top: 14.828125px; left: 0; right: 0;
  text-align: center;
  font-size: calc(16px + 0.6vw);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.28;
  text-decoration: none;
}

.site-nav {
  position: absolute;
  top: 82.625px; left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 1.5vw;
}

.site-nav a {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-decoration: none;
  padding: 1.6px 0;
}

.site-nav a[aria-current="page"] { box-shadow: inset 0 -1px currentColor; }

.site-menu, .menu-overlay { display: none; }

.cart {
  position: absolute;
  top: 49.515625px;
  right: 4vw;
  display: flex;
  align-items: center;
  gap: 4.65625px;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-decoration: none;
}
.cart svg { width: 25px; height: 25px; fill: currentColor; }

/* ---------- layout ---------- */

main { padding: var(--header-h) var(--inset) 0; }

.measure {
  max-width: var(--measure);
  margin: 0 auto;
  padding-top: 72px;
  padding-bottom: 140px;
}
.measure p { margin: 0 0 24px; line-height: 1.4; }
.measure--centre { text-align: center; }
.measure p.h { font-weight: 700; }
.measure p.gap { margin-top: 55px; }
.measure a { text-decoration: underline; text-underline-offset: 2px; }

.hero { padding-top: 24px; padding-bottom: 96px; }

.embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- grids ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 24px;
  padding-bottom: 96px;
}
.portfolio-grid {
  gap: 10px 21px;
  padding: 95.04px 4vw;
}
.portfolio-grid .tile img { aspect-ratio: 2.4; }
.portfolio-grid .tile figcaption {
  font-size: calc(16px + 0.6vw);
  line-height: 1.25;
}
main:has(.portfolio-grid) {
  padding: var(--header-h) 0 96.72px;
  background: #000;
  color: #fff;
}
body:has(.portfolio-grid) .site-header {
  background: #000;
  color: #fff;
}

.tile { position: relative; display: block; text-decoration: none; overflow: hidden; }
.tile img { width: 100%; aspect-ratio: 661 / 275; object-fit: cover; }
.tile figcaption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  font-size: 16px;
  letter-spacing: 0.05em;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.tile:hover figcaption, .tile:focus-visible figcaption { opacity: 1; }

.grid--gallery { gap: 30px; }
.grid--gallery .tile { overflow: visible; }
.grid--gallery .tile img { aspect-ratio: 3 / 2; }
.grid--gallery .tile figcaption {
  position: static;
  display: block;
  margin-top: 15px;
  padding: 0;
  text-align: left;
  color: inherit;
  background: none;
  opacity: 1;
}

/* Classic 7.1 gallery sections used by the stock portfolio children. */
.gallery-rebuild { width: 100%; }
main:has(.gallery-rebuild) { padding: 0; }
.gallery-rebuild--first { padding-top: var(--header-h); }
.gallery-rebuild--padded { padding: 4vw; }
.gallery-rebuild--first.gallery-rebuild--padded {
  padding-top: calc(var(--header-h) + 4vw);
}
.gallery-rebuild--masonry.gallery-rebuild--padded {
  padding-bottom: calc(4vw + 1.25px);
}
.gallery-rebuild-grid {
  display: grid;
  grid-template-columns: repeat(var(--gallery-columns), minmax(0, 1fr));
  gap: var(--gallery-gap);
}
.gallery-rebuild-grid figure {
  position: relative;
  box-sizing: content-box;
  height: 1px;
  padding-bottom: var(--gallery-aspect);
  overflow: hidden;
}
.gallery-rebuild-grid img,
.gallery-rebuild-masonry img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-rebuild-grid img { position: absolute; inset: 0; }
.gallery-rebuild-masonry {
  display: flex;
  gap: var(--gallery-gap);
}
.gallery-rebuild-column {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--gallery-gap);
}
.gallery-rebuild-column figure { width: 100%; overflow: hidden; }

/* classic blog-basic-grid collections */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 70px 50px;
  padding: 4vw;
}
.blog-card-image {
  display: block;
  margin: -2.13px -3.19px 0;
  text-decoration: none;
}
.blog-card-image img { width: 100%; aspect-ratio: 1.4965; object-fit: cover; }
.blog-card-text {
  margin-top: 27.87px;
  padding-top: 15px;
  padding-bottom: 1px;
  text-align: center;
}
.blog-card-text--untitled { padding-top: 30px; }
.blog-card-text h2 {
  margin: 0 0 30px;
  font-size: calc(16px + 0.6vw);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.25;
}
.blog-card-text h2.passthrough { height: 31.8px; }
.blog-card-text h2.passthrough a::after { content: " →"; }
.blog-card-text h2 a, .blog-card-text .more { text-decoration: none; }
.blog-card-text p {
  margin: 0;
  font-size: 14.272px;
  line-height: 19.9808px;
  letter-spacing: 0.05em;
}
.blog-card-text .more {
  display: inline-block;
  padding-top: 15px;
  font-size: 14.272px;
  line-height: 19.9808px;
  letter-spacing: 0.05em;
}

.post-list { width: 100%; margin: 0; padding: 4vw; }
.post-list article { padding-bottom: 120px; }
.post-list article + article { margin-top: 0; }
.post-list-image {
  position: relative;
  display: block;
  box-sizing: content-box;
  height: 1px;
  padding-bottom: 56.25%;
  text-decoration: none;
}
.post-list-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-list-text { max-width: none; margin: 40px 0 0; text-align: center; }
.post-list .meta { margin: 0 0 30px; font-size: 16px; line-height: 19.2px; }
.post-list h2 {
  margin: 0 0 30px;
  font-size: calc(16px + 1.8vw);
  line-height: 1.25;
  font-weight: 300;
  letter-spacing: 0.02em;
}
.post-list h2 a, .post-list .more { text-decoration: none; }
.post-list p { margin: 0; line-height: 22.4px; }
.post-list .more {
  display: block;
  height: 53.406px;
  padding-top: 30px;
  line-height: 22.4px;
}

/* ---------- article / gallery item ---------- */

.article { max-width: var(--measure); margin: 0 auto; padding-top: 72px; padding-bottom: 140px; }
.article h1 { font-size: calc(16px + 0.6vw); font-weight: 300; letter-spacing: 0.02em; margin-bottom: 24px; }
.article .meta { font-size: 14px; opacity: 0.6; margin-bottom: 32px; }
.article p { margin: 0 0 22px; line-height: 1.62; }

.blog-item-page { padding: 4vw 0 7vw; }
.blog-item-inner {
  width: 46vw;
  margin: 0 auto;
}
.blog-byline {
  margin: 0 0 32px;
  line-height: 19.2px;
}
.blog-byline a { text-decoration: none; }
.blog-item-page h1 {
  margin: 0;
  font-size: calc(16px + 1.8vw);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.25;
}
.blog-item-copy {
  margin-top: 50px;
  letter-spacing: 0.05em;
}
.blog-item-copy:empty { margin-top: 0; }
.blog-item-copy p { margin: 0 0 16px; line-height: 22.4px; }
.blog-item-copy p:last-of-type { margin-bottom: 0; }
.blog-item-copy img {
  width: 100%;
  height: auto;
  margin: 34px 0 17px;
}
.blog-item-copy:has(img) { display: flow-root; }
.author-profile {
  height: 101.984px;
  margin-top: 43.2px;
  padding-top: 16px;
}
.author-profile--empty { margin-top: 82px; }
.author-avatar {
  display: flex;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgb(82, 43, 183);
  color: #fff;
  font-size: 25px;
  line-height: 1;
}
.author-profile .author-name {
  display: block;
  margin-top: 16px;
  font-size: 14.272px;
  line-height: 19.9808px;
}

.blog-pagination {
  display: flex;
  justify-content: space-between;
  padding: 3vw 4vw;
}
.blog-pagination > a,
.blog-pagination > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 25px;
  text-decoration: none;
}
.blog-pagination > a:last-child { margin-left: auto; text-align: right; }
.blog-pagination .t {
  font-size: calc(16px + 0.6vw);
  line-height: 1;
}
.blog-pagination svg { width: 18px; height: 32px; flex: 0 0 18px; }
.blog-pagination svg polyline { stroke: currentColor; fill: none; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.stack { display: grid; row-gap: 10px; padding-bottom: 120px; }
.stack img { width: 100%; height: auto; }

.item-nav {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 3vw 4vw;
}
.item-nav a {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 25px;
  text-decoration: none;
}
.item-nav a:last-child { margin-left: auto; text-align: right; }
.item-nav .spacer { visibility: hidden; }
.item-nav .t {
  font-size: calc(16px + 0.6vw);
  line-height: 1;
}
.item-nav svg { width: 18px; height: 32px; flex: 0 0 18px; }
.item-nav svg polyline { stroke: currentColor; fill: none; }

/* ---------- shop ----------
   Feature-flagged: SHOP_ENABLED in tools/build.py. When off, product pages stay
   reachable (so no indexed URL 404s) but nothing is purchasable — no cart, no
   add-to-cart, no size picker. Turning it on needs a Stripe or Shopify hookup;
   Printful stays wired to whichever of those you point it at. */

main:has(.shop-grid) { padding: var(--header-h) 0 0; }
.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2vw;
  min-height: 907.28px;
  padding: 30px 4vw 28px;
}
.shop-toolbar { padding: 18px 4vw 0; }
.shop-toolbar h1 {
  font-size: calc(16px + 0.84vw);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.215;
}
.product-card { text-decoration: none; }
.product-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 21.58px;
}
.product-card-image img { width: 100%; height: 100%; object-fit: cover; }
.product-card .name {
  display: block;
  font-size: calc(16px + 0.36vw);
  letter-spacing: 0.02em;
  line-height: 1.25;
}
.product-card .price {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.2;
  opacity: 1;
}

main:has(.product) { padding: calc(var(--header-h) + 3vw) 4vw 0; }
.product-nav {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 22.4px;
  font-size: 16px;
  line-height: 1.4;
}
.product-nav a { text-decoration: none; }
.product {
  display: flex;
  gap: 3vw;
  padding: 22px 0 3vw;
}
.product-gallery {
  display: flex;
  flex: 0 0 50%;
  gap: 10px;
  min-width: 0;
}
.product-thumbs {
  display: flex;
  flex: 0 0 50px;
  flex-direction: column;
  gap: 14px;
}
.product-thumbs button {
  width: 50px;
  height: 66.66px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.product-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-feature {
  flex: 1 1 auto;
  min-width: 0;
  aspect-ratio: 3 / 4;
}
.product-feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-info {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 11px;
}
.product-info h1 {
  margin: 0;
  font-size: calc(16px + 0.84vw);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.25;
}
.product-info .price {
  margin: 0 0 5px;
  padding-bottom: 11px;
  font-size: calc(16px + 0.36vw);
  line-height: 1.25;
}
.product-description p {
  margin: 0 0 16px;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
.product-description p:last-child { margin-bottom: 0; }
.variant-label { display: block; margin: 28px 0 8px; }
.variant-select {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}
.product-info button {
  width: 100%;
  min-height: 52px;
  margin-top: 20px;
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: 0.05em;
}
.product-info button:disabled, .variant-select:disabled { opacity: 0.65; }
.product-info .note {
  margin-top: 0; padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  font-size: 14px; line-height: 1.5; opacity: 0.75;
}
/* Deliberately loud, and deliberately not styled like the rest of the page: this
   only appears when the storefront is wired to Stripe TEST links, and it exists to
   make that impossible to miss before launch. */
.product-info .shop-test-banner {
  margin: 18px 0 0; padding: 10px 12px;
  border: 1px solid #B00020; color: #B00020;
  font-size: 13px; line-height: 1.45; letter-spacing: 0.01em;
}
.product-info .shop-test-banner strong { letter-spacing: 0.08em; }
main:has(.product--no-gallery) { min-height: 1138.03125px; }
body:has(.fe--theme-black) .site-header,
body:has(.fe--theme-dark) .site-header {
  color: #fff;
  background: #000;
}
/* Only rendered inside <noscript>, so scriptless visitors still get a way to buy
   rather than a button that silently does nothing. */
.shop-noscript { margin: 18px 0 0; padding: 0; list-style: none; }
.shop-noscript li { margin-bottom: 8px; }
.shop-noscript a { display: block; padding: 12px; border: 1px solid currentColor; text-decoration: none; }

/* ---------- responsive ---------- */

@media (max-width: 767px) {
  :root {
    --inset: 6vw;
    --header-h: calc(36.98125px + 12vw);
    --measure: 100%;
  }
  .site-header {
    height: var(--header-h);
    padding: 0 var(--inset);
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    transform: translateZ(0);
  }
  .site-title {
    position: static;
    z-index: 1;
    width: auto;
    font-size: 16px;
    line-height: 1.25;
    text-align: left;
  }
  .site-nav { display: none; }
  .cart {
    position: static;
    z-index: 1;
    margin-left: auto;
    margin-right: 20.328125px;
  }
  .site-menu {
    display: block;
    position: relative;
    width: 47px;
    height: 37px;
    margin: 0;
    padding: 1px 6px;
    border: 0;
    background: transparent;
    color: var(--ink);
    appearance: none;
  }
  .burger-box {
    position: relative;
    display: flex;
    width: 35px;
    height: 35px;
  }
  .burger-line {
    position: absolute;
    left: 0;
    width: 35px;
    height: 1px;
    background: #777;
    transform-origin: center;
    transition:
      transform 0.25s cubic-bezier(0.2, 0.6, 0.3, 1),
      width 0.25s cubic-bezier(0.2, 0.6, 0.3, 1);
  }
  .burger-line--top { top: 7.5px; }
  .burger-line--middle {
    top: 17px;
    right: 0;
    left: auto;
    width: 17.5px;
  }
  .burger-line--bottom { top: 26.5px; }
  .menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .menu-overlay nav {
    display: flex;
    width: 100%;
    height: calc(100% - var(--header-h));
    margin-top: var(--header-h);
    flex-direction: column;
    justify-content: center;
    transform: translateY(20px);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .menu-overlay a {
    display: flex;
    width: 100%;
    height: 40.9375px;
    padding-left: 9vw;
    align-items: center;
    font-size: 33.15px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.96px;
    text-decoration: none;
    opacity: 1;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  html.menu-open,
  html.menu-open body {
    overflow: hidden;
    background: #fff;
  }
  html.menu-open .menu-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  html.menu-open .menu-overlay nav { transform: translateY(0); }
  html.menu-open .burger-line { background: #000; }
  html.menu-open .burger-line--top {
    top: 17px;
    width: 28px;
    transform: translateX(3.5px) rotate(-135deg);
  }
  html.menu-open .burger-line--middle { width: 0; }
  html.menu-open .burger-line--bottom {
    top: 17px;
    width: 28px;
    transform: translateX(3.5px) rotate(135deg);
  }
  .grid, .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .measure, .article { padding-top: 40px; }
  .site-footer, .social-row { transform: translateZ(0); }

  main:has(.shop-grid) { padding: var(--header-h) 0 0; }
  .shop-toolbar { padding: 16.859375px 6vw 0; }
  .shop-toolbar h1 {
    font-size: 23.0896px;
    line-height: 1.215;
  }
  .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    min-height: 0;
    padding: 30px 6vw 28px;
  }
  .product-card-image { margin-bottom: 4.270625px; }
  .product-card .name {
    font-size: 19.0384px;
    line-height: 1.25;
  }

  main:has(.product) {
    padding: calc(var(--header-h) + 24px) 6vw 0;
  }
  main:has(.product--no-gallery) { min-height: 0; }
  .product-nav { display: none; }
  .product {
    flex-direction: column;
    gap: 22px;
    padding: 0 0 16.734375px;
  }
  .product--no-gallery { padding-bottom: 0; }
  .product-gallery {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 3 / 4;
  }
  .product-thumbs { display: none; }
  .product-feature,
  .product-gallery > .empty {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
  .product-info { width: 100%; }
  .product-info h1 {
    font-size: 23.0896px;
    line-height: 1.25;
  }
  .product-info .price {
    font-size: 19.0384px;
    line-height: 1.25;
  }
  .product-info .note {
    order: 2;
  }
  .product:not(.product--no-gallery) .product-info .note {
    min-height: 143.40625px;
  }
  .product-description {
    order: 3;
    margin-top: 5px;
  }
}

/* ---------- footer ----------
   Live @1486: "Aura Magazine 2025." right-aligned, block x 1036 w 334. */

.site-footer { margin-top: auto; padding: 1.44px 7.864583333vw 0; }
.site-footer p {
  width: 22.48vw;
  margin-left: auto;
  text-align: right;
  line-height: 22.4px;
}

/* ---------- fluid engine ----------
   Faithful reproduction of Squarespace's per-page grid. Blocks carry the exact
   grid-area parsed from the original page, so positions are reproduced rather
   than approximated. Track structure matches theirs, including the trick of
   shrinking the gutter track by the gap so the gap doesn't push content inward:

     minmax(gutter - gap, 1fr)  repeat(24, minmax(0, cell-max))  minmax(gutter - gap, 1fr)

   At 1486 with gap 11 this yields cell = 46.42 and content starting at 59.44,
   so grid-area 1/10/9/18 resolves to x 519 w 448 in the captured geometry. */

.fe {
  --fe-gutter: 4vw;
  --fe-gap: 11px;
  --fe-mobile-gap: 11px;
  --fe-cell-max: calc((1500px - var(--fe-gap) * 23) / 24);
  --fe-container: min(1500px, calc(100vw - var(--fe-gutter) * 2));
  --fe-row: calc(var(--fe-container) * 0.0215);
  display: grid;
  grid-template-columns:
    minmax(calc(var(--fe-gutter) - var(--fe-gap)), 1fr)
    repeat(24, minmax(0, var(--fe-cell-max)))
    minmax(calc(var(--fe-gutter) - var(--fe-gap)), 1fr);
  column-gap: var(--fe-gap);
  row-gap: var(--fe-gap);
  grid-auto-rows: minmax(var(--fe-row), auto);
  /* a section reserves its full declared row count even where blocks don't reach,
     which is what creates the vertical rhythm between sections on the live site */
  grid-template-rows: repeat(var(--fe-rows, 1), minmax(var(--fe-row), auto));
  padding: var(--fe-pad-top, var(--fe-pad)) 0 var(--fe-pad-bottom, var(--fe-pad));
  align-content: center;
}

/* the first section additionally clears the fixed header: live puts its grid at
   y=225 = 125 (header) + 98 (section padding) + 2 */


.fe--nogap { --fe-gap: 0px; }
.fe--inset {
  width: calc(100% - var(--fe-gutter) * 2);
  margin: 4vw var(--fe-gutter);
  --fe-container: min(1500px, calc(100vw - var(--fe-gutter) * 4));
}
.fe--background {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.fe-b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: var(--fe-v, flex-start);
  position: relative;
}
.fe-b p { margin: 0 0 16px; line-height: 22.4px; }
.fe-b .sqsrte-small {
  font-size: calc(16px - 0.12vw);
  line-height: 1.4;
}
.fe-b .sqsrte-large {
  font-size: calc(16px + 0.12vw);
  line-height: 1.4;
}
/* live: h4 21.3496px = calc(16px + 0.36vw), weight 300, 0.02em, lh 1.235, mb 32 */
.fe-b h1, .fe-b h2, .fe-b h3, .fe-b h4 {
  font-size: calc(16px + 0.36vw);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.235;
  margin: 0 0 32px;
}
.fe-b h1 { font-size: calc(16px + 0.72vw); }
.fe-b h2 { font-size: calc(16px + 0.54vw); }
.fe-b p:last-child { margin-bottom: 0; }
/* alignment classes apply to headings too, not just paragraphs */
.fe-b .c { text-align: center; }
.fe-b .r { text-align: right; }
.fe-b strong { font-weight: 700; }
.fe-image {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fe-image > .fe-image { position: static; width: 100%; height: 100%; }
.fe-image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
body[data-path="/shorts"] .fe-b > .fe-image img {
  width: auto;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: 682.65625 / 383.6875;
  object-fit: cover;
}
.fe-b .embed { width: 100%; }
.fe-b--summary {
  gap: 0;
  align-items: flex-end;
}
.fe-b--summary > a {
  display: block;
  flex: 0 0 auto;
  position: relative;
  inset: auto;
  width: var(--fe-list-image-size, 50%);
  height: 0;
  padding-bottom: calc(var(--fe-list-height-pct, 33.333%) - var(--fe-list-height-sub, 0px));
  margin-bottom: 34px;
  overflow: hidden;
}
.fe-b--summary > a > .fe-image {
  position: absolute;
  inset: auto auto auto 20px;
  top: 50%;
  width: calc(100% - 20px);
  height: auto;
  aspect-ratio: 16 / 9;
  transform: translateY(-50%);
}
.fe-b--summary img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  display: block;
  object-fit: cover;
}
.fe--theme-black,
.fe--theme-dark {
  color: #fff;
  background: #000;
}
.vertical-line {
  width: 1px;
  height: 100%;
  min-height: 100%;
  align-self: center;
  background: currentColor;
}
.fe-social { align-self: center; line-height: 0; }
.fe-social svg { width: 16px; height: 16px; fill: currentColor; }
.fe-button {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 28px;
  border: 1px solid currentColor;
  text-decoration: none;
}
.fe-product-image {
  display: block;
  width: 100%;
  aspect-ratio: 1.5;
  overflow: hidden;
  text-decoration: none;
}
.fe-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fe-product-title {
  margin-top: 16px !important;
  margin-bottom: 4.234px !important;
  font-size: calc(16px + 0.36vw) !important;
  line-height: 1.4 !important;
}
.fe-product-title a { text-decoration: none; }
.fe-product-price {
  margin: 0 !important;
  font-size: calc(16px + 0.12vw);
  line-height: 1.4 !important;
}

/* Fluid sections own the fixed-header clearance and their full-width grid. */
main:has(.fe) { padding: 0; }
main:has(.blog-item-page) { padding-left: 0; padding-right: 0; }
main:has(.blog-grid) { padding-left: 0; padding-right: 0; }

@media (max-width: 767px) {
  .fe {
    --fe-mobile-gutter: 6vw;
    --fe-mobile-cell-max: calc((1500px - var(--fe-mobile-gap) * 7) / 8);
    grid-template-columns:
      minmax(calc(var(--fe-mobile-gutter) - var(--fe-mobile-gap)), 1fr)
      repeat(8, minmax(0, var(--fe-mobile-cell-max)))
      minmax(calc(var(--fe-mobile-gutter) - var(--fe-mobile-gap)), 1fr);
    grid-template-rows: repeat(var(--fe-mobile-rows, 1), minmax(24px, auto));
    grid-auto-rows: minmax(24px, auto);
    column-gap: var(--fe-mobile-gap);
    row-gap: var(--fe-mobile-gap);
  }
  .fe-b {
    grid-area: var(--fe-mobile-area) !important;
    justify-content: var(--fe-v-mobile, var(--fe-v, flex-start));
    margin: 0;
    padding: 0;
  }
  body[data-path="/shorts"] .fe-b > .fe-image img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 682.65625 / 383.6875;
    object-fit: contain;
  }
}

/* ---------- social row ----------
   Live: 16px TikTok / Instagram / YouTube marks, 26px apart, aligned right
   below the footer block. */

.social-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 17.06px 7.864583333vw 13.91px;
}
.social-row a { display: inline-block; line-height: 0; }
.social-row svg { width: 16px; height: 16px; fill: currentColor; }

@media (max-width: 767px) {
  .site-footer {
    padding: 0.844px 6vw 0;
  }
  .site-footer p {
    position: relative;
    z-index: 1;
    width: 100%;
    line-height: 22.4px;
  }
  .social-row {
    padding: 12.59375px 6vw 8.84375px;
  }
}

/* ---------- section vertical rhythm ----------
   Squarespace's fixed presets are vmax-based: at the 1486px audit viewport they
   resolve to 49.038 / 98.076 / 147.114px. Custom values are captured per
   section and emitted by build.py as calc(customSectionHeight * 0.1vmax).
   The first section also clears the fixed header — 126.57px on this site. */

.fe--h-small  { --fe-pad: 3.3vmax; min-height: 33vh; }
.fe--h-medium { --fe-pad: 6.6vmax; min-height: 66vh; }
.fe--h-large  { --fe-pad: 9.9vmax; min-height: 99vh; }
.fe--h-custom {
  --fe-pad-top: var(--fe-custom-pad-top, 0px);
  --fe-pad-bottom: var(--fe-custom-pad-bottom, 0px);
}

main > .fe:first-of-type,
main > *:first-child.fe {
  --fe-pad-top: calc(var(--header-h) + var(--fe-pad));
}

main > .fe--h-custom:first-of-type,
main > *:first-child.fe--h-custom {
  --fe-pad-top: calc(var(--header-h) + var(--fe-custom-pad-top, 0px));
}

main > .fe--inset:last-child { padding-bottom: var(--fe-gutter); }

/* Keep the measured mobile custom values later in the cascade than the shared
   desktop rhythm rules above. */
@media (max-width: 767px) {
  .fe--h-custom {
    --fe-pad-top: var(--fe-mobile-custom-pad-top, 0px);
    --fe-pad-bottom: var(--fe-mobile-custom-pad-bottom, 0px);
  }
  main > .fe--h-custom:first-of-type,
  main > *:first-child.fe--h-custom {
    --fe-pad-top: calc(var(--header-h) + var(--fe-mobile-custom-pad-top, 0px));
  }
  .fe-b h4 {
    font-size: 19.0384px;
  }
  .fe-b .sqsrte-large {
    font-size: 17.0128px;
  }
  .fe-product-title {
    margin-bottom: 3.80768px !important;
    font-size: 19.0384px !important;
  }
  .fe-product-price {
    font-size: 17.0128px;
  }
}

/* hero video: poster shows beneath; the player stays invisible until Vimeo
   reports playback, then fades in — no black boot frame */
.embed--hero iframe { opacity: 0; transition: opacity 0.5s ease; }
.embed--hero iframe.playing { opacity: 1; }