/* Branching Out Island Artisan Market
   v2 revamp 2026-10-07: light, square photos, Grand Central Market skeleton (header, section bars, vendor cards, splits).
   Free makers are their original Meet the Maker poster only; paying makers sit on top. */

/* ---------- Fonts ---------- */
/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage-grotesque-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader-latin-wght-italic.woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF;
}


/* ---------- Tokens ---------- */
:root {
  --paper: #FFFFFF;
  --ink: #1F1D1A;
  --muted: #5E594F;
  --line: #E3DDD1;
  --line-strong: #1F1D1A;
  --cream: #F6F2EA;
  --wood: #8A4A1C;        /* burl brown: primary buttons, links, kickers */
  --wood-deep: #6B3814;
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Newsreader', serif;
  --wrap: 1200px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 0.5em;
  letter-spacing: 0.005em;
}
h1, h2 { text-transform: uppercase; }
h1 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.3rem; font-weight: 750; line-height: 1.15; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
section { padding-block: clamp(48px, 6vw, 80px); }
a { color: var(--wood); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--wood); outline-offset: 2px; }
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 300;
  background: var(--ink); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  padding: 10px 18px; transition: top 0.2s;
}
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- Buttons: square, plain, like the reference ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.2;
  padding: 13px 24px;
  border: 1.5px solid var(--wood);
  border-radius: 0;
  background: var(--wood);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--solid-ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--solid-ink:hover { background: var(--wood); border-color: var(--wood); }
.btn--small { font-size: 0.9rem; padding: 9px 16px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.btn-row--center { justify-content: center; }

/* ---------- Header: slim, white, logo left, links right ---------- */
.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 120;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 10px;
  transition: padding 0.25s ease;
}
.brand { display: inline-flex; align-items: center; }
.brand img { height: 74px; width: auto; transition: height 0.25s ease; }
.site-header.shrunk .bar { padding-block: 6px; }
.site-header.shrunk .brand img { height: 52px; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--wood); }
.nav a[aria-current="page"] { border-bottom-color: var(--ink); }
.menu-btn {
  display: none;
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  padding: 9px 18px;
  cursor: pointer;
}

/* ---------- Section head bar (reference: title left, button right, hairlines) ---------- */
.sec-head { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-head__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-block: 22px;
}
.sec-head h2 { margin: 0; }
.sec-head .btn { flex: none; }
.sec-body { padding-block: clamp(32px, 4.4vw, 56px) clamp(56px, 7vw, 88px); }
.kicker {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wood);
  margin: 0 0 8px;
}
.big-h3 { font-size: clamp(1.7rem, 2.8vw, 2.25rem); font-weight: 800; text-transform: uppercase; line-height: 1.05; margin-bottom: 14px; }
.section-intro { max-width: 64ch; }
.center { text-align: center; }
.center-intro { margin-inline: auto; }
.more-row { margin-top: 36px; }
.muted-l, .muted-d { color: var(--muted); }

/* ---------- Home hero (2026-10-16, Levi's option B): the kiosk photo alone for 1 second,
   then the white card fades in slowly over its lower right. Reduced motion, keyboard focus and a
   repeat visit in the same session (site.js adds .hero--seen) show the card straight away. ---------- */
.hero { padding-block: 24px clamp(40px, 5vw, 64px); }
.tile { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; background: var(--cream); }
.hero__frame { position: relative; }
.hero__img { display: block; width: 100%; height: clamp(480px, 46vw, 620px); object-fit: cover; object-position: 50% 32%; background: var(--cream); }
.hero__card {
  position: absolute; right: 32px; bottom: 32px; max-width: 560px;
  background: #fff; padding: 30px 32px 26px;
  opacity: 0; animation: heroCardIn 2s ease-in-out 1s forwards;
}
@keyframes heroCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero--seen .hero__card, .hero__card:focus-within { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__card { animation: none; opacity: 1; } }
.hero__kicker {
  font-family: var(--font-display); font-weight: 700; font-size: 0.88rem;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--wood);
  margin: 0 0 14px; text-wrap: balance;
}
.hero__card h1 { font-size: clamp(2rem, 3.4vw, 2.8rem); margin: 0 0 16px; }
.hero__lead { font-size: 1.12rem; line-height: 1.55; margin-bottom: 18px; }
@media (max-width: 900px) {
  /* Phones and tablets (2026-10-16, Levi did not like the stacked phone version): the photo fills the
     screen under the header and the white card sits inside its bottom edge, like the desktop version.
     The lead sentence is left out here to keep the card short. */
  .hero { padding-top: 10px; }
  .hero__img { height: calc(100vh - 151px); height: calc(100svh - 151px); min-height: 480px; max-height: 780px; object-position: 38% 40%; }
  .hero__card { left: 12px; right: 12px; bottom: 12px; max-width: 560px; padding: 18px 16px 16px; }
  .hero__card h1 { font-size: 1.7rem; }
  .hero__card .hero__lead { display: none; }
}

/* ---------- Cards (reference vendor card: square photo, name, line, outlined button) ---------- */
.grid { display: grid; gap: 22px; align-items: stretch; }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.card__media { display: block; }
.card .sq { width: 100%; }
.card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1; }
.card--text { padding: 26px 24px; gap: 10px; align-items: flex-start; }
.card__name { font-size: 1.3rem; font-weight: 800; text-transform: uppercase; margin: 0; line-height: 1.1; }
.card__person { color: var(--muted); font-style: italic; margin: -2px 0 0; font-size: 1.02rem; }
.card__line { color: var(--ink); margin: 0; font-size: 1.04rem; }
.card .btn { margin-top: auto; }
.card__body .card__line + .btn { margin-top: 12px; }

/* Square photos everywhere (no circles, no rounded corners) */
.sq { aspect-ratio: 1; object-fit: cover; width: 100%; height: auto; background: var(--cream); }
.sq--empty {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 2px dashed rgba(138, 74, 28, 0.5);
  color: var(--muted);
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  padding: 12%;
}

/* ---------- Makers page ---------- */
.paid-list { display: grid; gap: 0; }
.paid-row {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: clamp(22px, 4vw, 48px);
  align-items: start;
  padding-block: 36px;
  border-bottom: 1px solid var(--line);
}
.paid-row:first-child { padding-top: 8px; }
.paid-row:last-child { border-bottom: none; }
.paid-row > a { display: block; }
.paid-row__body .card__name { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: 6px; }
.paid-row__body .card__person { margin-bottom: 14px; }
.paid-row__body .card__line { margin-bottom: 10px; }
.paid-row__bio { max-width: 68ch; }
.paid-row__bio p { margin-bottom: 0.8em; }

/* Free makers: the original poster, nothing else */
.poster-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.poster {
  display: block; width: 100%; padding: 0; margin: 0;
  border: 0; background: var(--cream); cursor: zoom-in;
}
.poster img { width: 100%; aspect-ratio: 1200 / 1553; object-fit: cover; }

/* ---------- Split blocks ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split--happening, .split--top { align-items: start; }
.photo, .frame-img { width: 100%; }
.photo-cap { max-width: 420px; justify-self: end; }
.four-up { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.happening__next { border-top: 1px solid var(--line); margin: 26px 0 22px; padding-top: 20px; }
.happening__next h3 { margin-bottom: 6px; }
.happening__next p:last-child { margin: 0; }
.loc-list { list-style: none; padding: 0; margin: 0 0 24px; }
.loc-list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.loc-list li:first-child { border-top: 1px solid var(--line); }
.loc-list strong { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; display: block; }

/* ---------- Bands, panels, inner page heads ---------- */
.band--cream { background: var(--cream); }
.page-head { padding-block: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--line); }
.page-head h1 { margin-bottom: 0.4em; }
.page-head .section-intro { font-size: 1.2rem; }
.page-head .section-intro p:last-child, .page-head p.section-intro { margin-bottom: 0; }
.page-head + section { padding-top: clamp(40px, 5vw, 64px); }
.panel {
  background: var(--cream);
  border: 1px solid var(--line);
  padding: clamp(22px, 3.4vw, 36px);
}
.panel--dark { background: var(--cream); }

/* ---------- Placeholders ---------- */
.placeholder {
  border: 2px dashed rgba(138, 74, 28, 0.5);
  background: rgba(138, 74, 28, 0.05);
  color: var(--muted);
  padding: 26px 22px;
  text-align: center;
  font-size: 1rem;
}
.placeholder strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--wood);
  margin-bottom: 6px;
  font-size: 1.05rem;
}
.placeholder--tight { margin-top: 14px; padding: 16px 18px; font-size: 0.95rem; text-align: left; }
.placeholder--square, .grid .placeholder:not(.placeholder--tight) { aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; }

/* ---------- Maker page ---------- */
.page-head--maker { border-bottom: none; padding-bottom: clamp(36px, 5vw, 56px); }
.crumb { font-family: var(--font-display); font-weight: 600; margin-bottom: 22px; }
.crumb a { text-decoration: none; }
.maker-hero { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); align-items: center; }
.maker-hero__person { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--muted); margin: -4px 0 16px; }
.maker-bio { max-width: 72ch; }
.maker-bio p:last-child { margin-bottom: 0; }
.maker-links { gap: 10px; }
.maker-section-nav { position: sticky; top: 64px; z-index: 20; padding: 0; background: var(--cream); border-block: 1px solid var(--line); }
.maker-section-nav .wrap { display: flex; flex-wrap: wrap; gap: 8px 28px; padding-block: 14px; }
.maker-section-nav a { font-family: var(--font-display); font-size: 1rem; font-weight: 700; text-decoration: none; padding: 4px 0; }
.maker-section-nav a:hover, .maker-section-nav a:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.maker-section { scroll-margin-top: 155px; }
.maker-section--cream { background: var(--cream); border-block: 1px solid var(--line); }
.maker-gallery { align-items: start; }
.maker-work { margin: 0; min-width: 0; }
.maker-work button { display: block; width: 100%; padding: 0; border: 1px solid var(--line); background: var(--cream); cursor: zoom-in; }
.maker-work img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; padding: 12px; }
.maker-work figcaption { padding-top: 14px; font-family: var(--font-display); font-size: 1rem; line-height: 1.5; font-weight: 600; }
.about-diana { padding-top: 0; padding-bottom: 0; }
.about-diana__photo { width: 100%; max-height: 470px; object-fit: contain; object-position: left; }
@media (max-width: 640px) {
  .maker-section-nav { top: 56px; }
  .maker-section-nav .wrap { gap: 4px 22px; padding-block: 12px; }
  .maker-section { scroll-margin-top: 155px; }
}

/* ---------- Story timeline ---------- */
.timeline { display: flex; flex-direction: column; gap: clamp(44px, 6vw, 72px); }
.timeline__row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: start;
}
.timeline__row:nth-child(even) .timeline__poster { order: 2; }
.timeline__poster button { display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; }
.timeline__poster img { width: 100%; }
.timeline__year {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wood);
  margin: 0 0 8px;
}
.timeline__text h3 { margin-bottom: 8px; font-size: 1.5rem; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(20, 19, 17, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(94vw, 900px); max-height: 92vh; width: auto; height: auto; }
.lightbox__close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: #fff;
  color: var(--ink);
  border: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  padding: 10px 18px;
  cursor: pointer;
}

/* ---------- Wholesale products ---------- */
.product { background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; }
.product img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.product__body { padding: 16px 18px 20px; }
.product__name { font-family: var(--font-display); font-weight: 750; font-size: 1.08rem; margin: 0 0 2px; }
.product__maker { color: var(--muted); font-style: italic; margin: 0 0 8px; font-size: 0.98rem; }
.product__price { font-family: var(--font-display); font-weight: 750; color: var(--wood); margin: 0; font-size: 1.1rem; }
.service-lines { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.service-lines li { padding: 16px 0 16px 30px; border-bottom: 1px solid var(--line); position: relative; font-size: 1.14rem; }
.service-lines li::before { content: ''; position: absolute; left: 4px; top: 25px; width: 10px; height: 10px; background: var(--wood); }
.service-lines strong { font-family: var(--font-display); font-weight: 700; }
.price-slot {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--wood);
  border: 2px dashed rgba(138, 74, 28, 0.5);
  padding: 6px 14px;
  margin: 4px 0;
}
.grid--spaced { margin: 28px 0; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; }
.form__row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.field label { display: block; font-family: var(--font-display); font-weight: 650; font-size: 0.98rem; margin-bottom: 6px; }
.field label small { font-weight: 500; color: var(--muted); font-family: var(--font-body); }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid #9C968A;
  border-radius: 0;
  padding: 12px 14px;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); outline: 3px solid rgba(138, 74, 28, 0.3); outline-offset: 1px; }
.field textarea { min-height: 130px; resize: vertical; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.mt-0 { margin-top: 0; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.14rem;
  cursor: pointer;
  padding: 16px 34px 16px 0;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 14px; font-size: 1.3rem; color: var(--wood); }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { padding: 0 0 16px; margin: 0; max-width: 68ch; }

/* ---------- Visit ---------- */
.map-wrap { margin-top: 30px; }
.map-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.hours { list-style: none; padding: 0; margin: 12px 0; }
.hours li { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--line); max-width: 440px; }
.hours li span:first-child { font-family: var(--font-display); font-weight: 600; }

/* ---------- Footer (light) ---------- */
.site-footer { background: var(--cream); border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 72px) 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 0.9fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.footer-brand img { height: 92px; width: auto; margin-bottom: 14px; }
.site-footer h2 { font-size: 1rem; font-weight: 800; letter-spacing: 0.06em; margin-bottom: 12px; }
.site-footer p, .site-footer li { color: var(--muted); font-size: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { color: var(--wood); text-decoration: underline; }
.footer-base {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.95rem;
}
.footer-base p { margin: 0; }
.footer-base .credit a { color: var(--muted); text-decoration: underline; }

/* ---------- Phone bottom bar ---------- */
.call-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 130;
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.call-bar ul { display: flex; list-style: none; margin: 0; padding: 0; }
.call-bar li { flex: 1; }
.call-bar a {
  display: block;
  text-align: center;
  padding: 13px 6px;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 0.98rem;
  color: var(--ink);
  text-decoration: none;
  border-left: 1px solid var(--line);
}
.call-bar li:first-child a { border-left: none; background: var(--wood); color: #fff; }

[lang="fr"] { quotes: '\00AB' '\00BB'; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .poster-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
  .menu-btn { display: inline-block; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--line);
    padding: 4px 24px 14px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--line); }
  .nav a[aria-current="page"] { border-bottom-color: var(--line); color: var(--wood); }
  html:not(.js) .nav { position: static; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 20px; padding: 0 0 12px; border: none; }
  html:not(.js) .site-header .bar { flex-wrap: wrap; }
  html:not(.js) .menu-btn { display: none; }
  .call-bar { display: block; }
  body { padding-bottom: 52px; }
  .split { grid-template-columns: 1fr; }
  .photo-cap { justify-self: start; }
  .timeline__row { grid-template-columns: 1fr; }
  .timeline__row:nth-child(even) .timeline__poster { order: 0; }
  .timeline__poster { max-width: 460px; }
  .form__row { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .paid-row { grid-template-columns: 220px minmax(0, 1fr); }
  .maker-hero { grid-template-columns: 260px minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .grid--featured { grid-template-columns: 1fr; }
  .poster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .footer-grid { grid-template-columns: 1fr; }
  .brand img { height: 56px; }
  .site-header.shrunk .brand img { height: 44px; }
  .hero__kicker { font-size: 0.78rem; letter-spacing: 0.02em; }
  .hero__card .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero__card .btn { text-align: center; padding-inline: 6px; font-size: 0.88rem; white-space: nowrap; }
  .sec-head__bar { padding-block: 18px; }
  .sec-head .btn { font-size: 0.88rem; padding: 12px 14px; }
  .paid-row { grid-template-columns: 1fr; padding-block: 28px; }
  .paid-row .sq, .paid-row > a { max-width: 360px; }
  .maker-hero { grid-template-columns: 1fr; }
  .maker-hero__photo { max-width: 320px; }
  .wrap { padding-inline: 16px; }
}

/* Full-photo portraits and a centred, accessible featured-maker rail. */
.sq--uncropped { object-fit: contain; padding: 10px; }
.paid-row { scroll-margin-top: 100px; }
.maker-carousel { min-width: 0; }
.maker-rail {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  position: relative;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--wood) var(--cream);
  padding-block: 2px 16px;
}
.maker-rail .card {
  flex: 0 0 calc((100% - 44px) / 3);
  min-width: 0;
  scroll-snap-align: center;
  transition: border-color 0.3s ease;
}
.maker-rail .card.is-featured { border-color: var(--wood); }
.maker-rail .sq { height: auto; aspect-ratio: 1; }
.carousel-controls { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.carousel-controls button { min-width: 48px; min-height: 44px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 900px) {
  .maker-rail .card { flex-basis: calc((100% - 22px) / 2); }
}
@media (max-width: 640px) {
  .maker-rail .card { flex-basis: calc(100% - 36px); }
}
@media (prefers-reduced-motion: reduce) {
  .maker-rail { scroll-behavior: auto; }
  .maker-rail .card { transition: none; }
}

/* Makers page: Read more on long bios (2026-10-12) */
.paid-row__bio details.more summary { cursor: pointer; list-style: none; display: inline-block; font-family: var(--font-display); font-weight: 600; color: var(--wood); border-bottom: 1px solid currentColor; margin-bottom: 0.8em; }
.paid-row__bio details.more summary::-webkit-details-marker { display: none; }
.paid-row__bio details.more[open] summary { display: none; }

/* ---------- 2026-10-16: $50 mini pages and the maker badge ---------- */
.btn--big { font-size: 1.12rem; padding: 17px 30px; }
.mini-cta { margin-top: 34px; }
.h2-small { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.badge-sec { border-top: 1px solid var(--line); }
.badge-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(22px, 4vw, 48px); align-items: center; }
.badge-img { width: 100%; }
.badge-code { width: 100%; font: 0.95rem/1.45 var(--font-body); color: var(--ink); background: #fff; border: 1.5px solid #9C968A; padding: 10px 12px; resize: none; }
@media (max-width: 760px) { .badge-grid { grid-template-columns: 1fr; } .badge-img { max-width: 380px; } }

/* ---------- 2026-10-16: maker page round ---------- */
/* Instagram and Facebook as icons */
.btn--icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; }
.btn--small.btn--icon { width: 42px; height: 42px; }
.btn--icon .icon { display: block; width: 21px; height: 21px; }
/* Instagram and Facebook buttons (2026-10-16, Levi): a flat, rounded brown tile with a white mark,
   after the Symmetrics Health buttons but without the offset block; turns ink on hover. */
.btn.btn--icon {
  background: var(--wood); border-color: var(--wood); color: #fff;
  border-radius: 6px;
  transition: background-color 300ms ease, border-color 300ms ease;
}
.btn.btn--icon:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Sticky in-page nav: About, Products (dropdown), Visit */
.maker-section-nav .wrap { align-items: center; }
.msn-products { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.msn-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; margin: -4px 0; border: 0; background: transparent; color: var(--wood); cursor: pointer; }
.msn-toggle:hover { color: var(--ink); }
.msn-toggle .icon { transition: transform 0.18s ease; }
.msn-products.open .msn-toggle .icon { transform: rotate(180deg); }
.msn-list { display: none; position: absolute; top: calc(100% + 10px); left: 0; z-index: 40; min-width: 240px; max-width: calc(100vw - 32px); margin: 0; padding: 6px 0; list-style: none; background: var(--paper); border: 1px solid var(--line-strong); box-shadow: 0 10px 24px rgba(31, 29, 26, 0.14); }
.msn-products.open .msn-list { display: block; }
.msn-products.open::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.msn-list a { display: block; padding: 10px 16px; font-family: var(--font-display); font-weight: 650; font-size: 0.98rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.msn-list a:hover, .msn-list a:focus-visible { background: var(--cream); color: var(--wood); text-decoration: none; outline-offset: -3px; }

/* About with the photo stack beside it */
.maker-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.stack { position: relative; width: 100%; max-width: 470px; aspect-ratio: 1; justify-self: center; }
.stack-photo { position: absolute; left: 8%; top: 8%; width: 84%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 18px; box-shadow: 0 12px 30px rgba(31, 29, 26, 0.18); background: var(--cream); opacity: 0; visibility: hidden; transform: var(--pose); }
.pose-0 { --pose: rotate(1.2deg); }
.pose-1 { --pose: translate(-3%, -3%) rotate(-4deg); }
.pose-2 { --pose: translate(2%, -4%) rotate(3deg); }
.stack-photo.is-front { opacity: 1; visibility: visible; z-index: 3; }
.stack-photo.is-back1 { opacity: 1; visibility: visible; z-index: 2; }
.stack-photo.is-back2 { opacity: 1; visibility: visible; z-index: 1; }
.stack-photo.is-entering { animation: stackArrive 0.65s cubic-bezier(0.22, 0.8, 0.3, 1) both; }
@keyframes stackArrive { from { opacity: 0; transform: translateY(70px) var(--pose) scale(0.96); } to { opacity: 1; transform: var(--pose); } }
html:not(.js) .stack-photo:first-child { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .stack-photo.is-entering { animation: none; } }
@media (max-width: 900px) {
  .maker-about { grid-template-columns: 1fr; }
  .stack { max-width: 420px; margin-top: 8px; }
}

/* My work: one section per product type, jump buttons on top */
.work-jump { margin: 4px 0 8px; }
.work-group { padding-block: clamp(30px, 4vw, 44px) 0; scroll-margin-top: 150px; }
.work-group__title { font-size: clamp(1.35rem, 2.2vw, 1.7rem); text-transform: uppercase; margin-bottom: 18px; }
.work-shops { margin-top: 40px; }

/* QR code */
.qr-sec { border-top: 1px solid var(--line); }
.qr-grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(22px, 4vw, 48px); align-items: center; }
.qr-img { width: 100%; max-width: 260px; border: 1px solid var(--line); }
@media (max-width: 640px) { .qr-grid { grid-template-columns: 1fr; } .qr-img { max-width: 220px; } }
/* Wholesale: closer sections (2026-10-16) */
.sec-tight-bottom { padding-bottom: clamp(8px, 1.5vw, 16px); }
.sec-tight-top { padding-top: clamp(20px, 2.5vw, 32px); }
/* Our story: photo beside the long block of text (2026-10-16) */
.story-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.story-split .section-intro { max-width: none; }
.story-photo { align-self: start; }
@media (max-width: 900px) { .story-split { grid-template-columns: 1fr; } .story-photo { position: static; max-width: 560px; } }
/* Maker photo grids: two across on phones so long galleries stay scannable (2026-10-16) */
@media (max-width: 640px) {
  .grid--3.maker-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .maker-work img { padding: 6px; }
  .maker-work figcaption { font-size: 0.9rem; line-height: 1.35; padding-top: 8px; }
}

/* ---------- 2026-10-19 (Tasha Misener's review): site search, Makers filter, wholesale for businesses ---------- */
[hidden] { display: none !important; }
.brand { margin-right: auto; }
.site-header .bar { justify-content: flex-start; }
/* Search button in the header */
.search-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 8px 14px;
  background: transparent; border: 1.5px solid var(--ink); color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.2; cursor: pointer;
}
.search-btn:hover { background: var(--ink); color: #fff; }
.search-btn .icon { display: block; width: 19px; height: 19px; flex: none; }
@media (max-width: 1100px) {
  .search-btn { padding: 8px 11px; }
  .search-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
/* Search panel */
html.search-open, html.search-open body { overflow: hidden; }
.search {
  position: fixed; inset: 0; z-index: 450; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(20, 19, 17, 0.55); padding: clamp(16px, 9vh, 96px) 16px 24px;
}
.search__box { max-width: 760px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line-strong); }
.search__form { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--line); }
.search__form:focus-within { box-shadow: inset 0 -3px 0 var(--wood); }
.search__form > .icon { flex: none; width: 22px; height: 22px; color: var(--muted); }
.search__form input {
  flex: 1; min-width: 0; padding: 8px 2px; border: 0; background: transparent;
  font-family: var(--font-body); font-size: 1.2rem; color: var(--ink);
}
.search__form input:focus { outline: none; }
.search__close {
  flex: none; padding: 8px 14px; background: transparent; border: 1.5px solid var(--ink); color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; cursor: pointer;
}
.search__close:hover { background: var(--ink); color: #fff; }
.search__status { margin: 0; padding: 12px 18px; color: var(--muted); font-size: 1rem; }
.search__results { list-style: none; margin: 0; padding: 0 0 6px; }
.search-hit { display: grid; gap: 2px; padding: 12px 18px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.search-hit:hover, .search-hit:focus-visible { background: var(--cream); color: var(--ink); outline-offset: -3px; }
.search-hit__kind { font-family: var(--font-display); font-weight: 650; font-size: 0.85rem; color: var(--wood); }
.search-hit__title { font-family: var(--font-display); font-weight: 750; font-size: 1.1rem; line-height: 1.25; }
.search-hit__text { color: var(--muted); font-size: 1rem; line-height: 1.45; }
.search mark { background: rgba(138, 74, 28, 0.16); color: inherit; padding: 0 1px; }
@media (max-width: 640px) {
  .search { padding: 0; background: var(--paper); }
  .search__box { min-height: 100%; border: 0; }
  .search__form { position: sticky; top: 0; z-index: 1; background: var(--paper); padding: 10px 12px; }
  .search-hit, .search__status { padding-inline: 14px; }
}
/* Makers page: search box and category buttons */
.page-head + .maker-tools { padding-block: clamp(24px, 3vw, 36px); }
.maker-tools { border-bottom: 1px solid var(--line); }
.maker-tools__search { max-width: 520px; margin-bottom: 16px; }
.maker-tools__search label { display: block; font-family: var(--font-display); font-weight: 650; font-size: 0.98rem; margin-bottom: 6px; }
.maker-tools__search input {
  width: 100%; padding: 12px 14px; background: #fff; border: 1.5px solid #9C968A; border-radius: 0;
  font-family: var(--font-body); font-size: 1.08rem; color: var(--ink);
}
.maker-tools__search input:focus { border-color: var(--ink); outline: 3px solid rgba(138, 74, 28, 0.3); outline-offset: 1px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 12px; background: #fff; border: 1.5px solid var(--line-strong); color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; line-height: 1.2; cursor: pointer;
}
.chip:hover { border-color: var(--wood); color: var(--wood); }
.chip__n { color: var(--muted); font-weight: 500; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip[aria-pressed="true"] .chip__n { color: #fff; opacity: 0.8; }
.maker-count { margin: 14px 0 0; color: var(--muted); font-size: 1rem; }
.maker-empty { padding-block: 40px 64px; }
.poster { scroll-margin-top: 110px; }
.poster:target { outline: 4px solid var(--wood); outline-offset: 4px; }
@media (max-width: 640px) {
  .chips { gap: 6px; }
  .chip { font-size: 0.86rem; padding: 7px 10px; }
}
/* Footer line: "selling" starts the second line */
.footer-tagline span { display: block; }
/* Wholesale, laid out for businesses */
.ws-head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.ws-quote { background: var(--cream); border: 1px solid var(--line); padding: clamp(20px, 3vw, 30px); }
.ws-quote h2 { font-size: clamp(1.35rem, 2vw, 1.65rem); margin-bottom: 10px; }
.ws-quote p { font-size: 1.05rem; }
.ws-quote .btn { margin-bottom: 14px; }
.ws-quote p.ws-quote__alt { margin: 0; font-size: 1rem; color: var(--muted); overflow-wrap: anywhere; }
.ws-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 48px); border-top: 1px solid var(--line); margin-top: 8px; }
.ws-who > div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.ws-who h3 { font-size: 1.12rem; margin: 0 0 4px; }
.ws-who p { margin: 0; font-size: 1.04rem; }
.ws-paths .card--text { gap: 6px; }
.ws-paths h3, .ws-custom h3 { margin: 0; }
.ws-paths p, .ws-custom p { margin: 0; }
.ws-paths .btn-row { margin-top: auto; padding-top: 12px; }
.ws-paths .btn { margin-top: 0; }
.ws-anchor { scroll-margin-top: 90px; }
.price-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 48px); border-top: 1px solid var(--line); }
.price-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.price-row img { width: 72px; height: 72px; object-fit: cover; background: #fff; }
.price-row__name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.04rem; line-height: 1.2; }
.price-row__maker { margin: 2px 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.35; }
.price-row__price { margin: 0; max-width: 9em; text-align: right; font-family: var(--font-display); font-weight: 750; font-size: 1rem; line-height: 1.25; color: var(--wood); }
.ws-note { margin: 16px 0 0; }
.ws-custom { margin-top: 8px; }
.ws-custom .card--text { gap: 6px; }
.ws-custom__cta { margin-top: 24px; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field legend { padding: 0; font-family: var(--font-display); font-weight: 650; font-size: 0.98rem; margin-bottom: 8px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.choice-row label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 1.05rem; cursor: pointer; }
.choice-row input[type="radio"] { width: 20px; height: 20px; margin: 0; padding: 0; accent-color: var(--wood); }
@media (max-width: 900px) {
  .ws-head { grid-template-columns: 1fr; }
  .price-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ws-who { grid-template-columns: 1fr; }
  .price-row { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 12px; }
  .price-row img { width: 60px; height: 60px; }
}
/* no browser clear button (its blue cross is off-brand; Close and Show all makers do that job) */
.search__form input::-webkit-search-cancel-button, .maker-tools__search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ---------- 2026-10-20 (Diana's notes): kiosk credit, home wholesale section ---------- */
.kiosk-credit { margin: 8px 0 0; font-size: 0.92rem; line-height: 1.4; color: var(--muted); }
.kiosk-credit a { color: var(--wood); }
.hero .kiosk-credit { text-align: right; }
.split--ws { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.split--ws .big-h3 { margin-top: 24px; }
.ws-who h4 { font-size: 1.12rem; margin: 0 0 4px; }
.ws-more { margin-top: 20px; }
@media (max-width: 900px) {
  .split--ws { grid-template-columns: 1fr; }
  .hero .kiosk-credit { text-align: left; }
}
/* 2026-10-20, Diana (Messenger): season labels before each address in the home page's market list */
.loc-label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; color: var(--wood); margin-bottom: 2px; }
/* 2026-10-20: a maker's product section with no photos yet */
.work-group__soon { margin: 0; padding: 22px 24px; border: 1px dashed var(--line); background: var(--paper); color: var(--muted); }
/* 2026-10-20: a single About photo sits still and straight (no stack animation) */
.about-photo { margin: 0; width: 100%; max-width: 420px; justify-self: center; }
.about-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 18px; box-shadow: 0 12px 30px rgba(31, 29, 26, 0.18); }

/* 2026-10-21: workshop section on a maker page (Joy Designs). Levi: poster bigger and pinned while the words
   and photos scroll past, like the BRX page (sticky column at desktop width, normal flow on phones) */
.maker-feature { padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); }
.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.feature-poster-wrap { position: sticky; top: 150px; }
.feature-poster { display: block; width: 100%; max-width: min(560px, calc((100vh - 190px) * 0.7725)); margin-inline: auto; padding: 0; border: 0; background: none; cursor: zoom-in; }
.feature-poster img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 14px 34px rgba(31, 29, 26, 0.2); }
.feature-facts .h2-small { margin: 0 0 10px; }
.feature-list { margin: 0 0 24px; padding-left: 1.2em; }
.feature-list li { margin-bottom: 6px; }
.feature-facts .btn-row { margin-top: 14px; }
.feature-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-photos__title { margin-top: clamp(36px, 5vw, 56px); }
.work-note { margin: 32px 0 0; max-width: 62ch; }
@media (max-width: 900px) {
  .feature-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .feature-text { display: contents; }
  .feature-text > h2 { order: 0; }
  .feature-lead { order: 1; }
  .feature-poster-wrap { order: 2; position: static; margin: 8px 0 32px; }
  .feature-facts { order: 3; }
  .feature-photos-block { order: 4; }
  .feature-poster { max-width: 460px; }
}
/* 2026-10-21: four links (Workshops, About, Products, Contact) stay on one line at phone width */
@media (max-width: 480px) { .maker-section-nav .wrap { column-gap: 16px; } }
@media (max-width: 389px) { .maker-section-nav .wrap { column-gap: 11px; } .maker-section-nav a { font-size: 0.95rem; } }

/* Joy Designs: Shannon requested a playful font and a smaller portrait. */
@font-face { font-family: 'Fredoka'; src: url('fonts/fredoka-latin-wght-normal.woff2') format('woff2'); font-style: normal; font-weight: 300 700; font-display: swap; }
.joy-designs-page { --font-body: 'Bricolage Grotesque', sans-serif; --font-display: 'Fredoka', sans-serif; }
.joy-designs-page .maker-hero { grid-template-columns: 240px minmax(0, 1fr); }
.joy-designs-page .maker-hero__photo { width: 240px; max-width: 100%; }
.joy-designs-page .maker-hero h1 { font-weight: 500; }
.work-group__description { max-width: 75ch; margin: 0 0 24px; }
@media (max-width: 640px) { .joy-designs-page .maker-hero { grid-template-columns: 1fr; } .joy-designs-page .maker-hero__photo { width: 220px; } }

/* Present the whole original portrait within its poster, without the poster frame. */
.joy-designs-page .joy-portrait-crop { position: relative; aspect-ratio: 410 / 552; overflow: hidden; padding: 0; border: 0; background: transparent; }
.joy-designs-page .joy-portrait-crop img { position: absolute; width: 292.682927%; max-width: none; height: auto; left: -174.634146%; top: -48.913043%; }

.joy-designs-page img.maker-hero__photo { aspect-ratio: 3 / 4; object-fit: contain; padding: 0; background: transparent; }