/* ==========================================================================
   Elliebells Pottery
   Palette sampled from Ellie's new garden studio:
     studio yellow  #efe5c6 — the buttery cream of the door and window frames (ground)
     studio green   #8fab9f — the sage cladding (story panel, rail, accents)
     dusky pink     #c98b8f — buttons and the follow-along band
   Deep green (#435b51) grounds the footer; deep rose (#8f4d55) carries text links.
   Type: Newsreader (display/serif) + Hanken Grotesk (sans)
   ========================================================================== */

:root{
  /* studio-yellow grounds */
  --paper:      #efe5c6;
  --paper-2:    #e7dbb5;
  --tile:       #f8f2de;

  /* deep green ink */
  --bark:       #24332d;   /* headings — 10.5:1 */
  --ink:        #33443d;   /* body */
  --muted:      #4d635a;   /* 5.1:1 */

  /* studio green (named "sage" so existing selectors keep working) */
  --sage:       #8fab9f;   /* the cladding — fills, rules, rail */
  --sage-deep:  #4d635a;   /* green text/icons on cream */
  --sage-cream: #dce8e1;   /* pale green text on the deep-green footer — 5.8:1 */

  /* dusky pink (named "glaze") */
  --glaze:      #c98b8f;
  --glaze-deep: #bd8084;
  --glaze-bright:#d9a9ab;
  --glaze-text: #8f4d55;   /* deep rose text on cream — 5.0:1 */
  --on-glaze:   #2a1d1e;   /* text on pink — 5.9:1 */

  /* studio-green story panel + deep-green footer */
  --studio:     #8fab9f;
  --studio-2:   #86a396;
  --panel:      #4f6a5f;
  --panel-2:    #435b51;
  /* dusky pink band (CTA) */
  --olive:      #d9a9ab;
  --olive-2:    #c98b8f;
  --cream:      #f6efd9;   /* light text on deep green */

  --line:       rgba(36,51,45,.16);
  --line-soft:  rgba(36,51,45,.09);
  --glow:       rgba(143,77,85,.22);

  --display:"Newsreader", Georgia, "Times New Roman", serif;
  --serif:  "Newsreader", Georgia, "Times New Roman", serif;
  --sans:   "Hanken Grotesk", -apple-system, "Segoe UI", system-ui, sans-serif;

  --wrap: 1200px;
  --section: clamp(4rem, 9vw, 8rem);
  --radius: 16px;
  --radius-lg: 24px;
  --ease: cubic-bezier(.22,.7,.24,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--sans); font-weight:400; color:var(--ink);
  background-color:var(--paper);
  background-image:radial-gradient(120% 80% at 50% -8%, #f5eed6 0%, #efe5c6 52%, #e7dbb5 100%);
  background-attachment:fixed; background-repeat:no-repeat;
  line-height:1.65; letter-spacing:.005em; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem);}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-weight:400;line-height:1.08;letter-spacing:-.01em;color:var(--bark);}
h1{font-family:var(--display);font-size:clamp(2.9rem,6.8vw,5.4rem);font-weight:400;}
h2{font-family:var(--display);font-size:clamp(2.1rem,4.6vw,3.5rem);font-weight:400;}
h3{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.45rem);font-weight:500;}
p{color:var(--ink);}

.eyebrow{display:inline-block;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--sage-deep);}
.eyebrow::before{content:"";display:inline-block;width:26px;height:1px;background:var(--sage);vertical-align:middle;margin-right:.7rem;opacity:.9;}
.lede{font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--muted);line-height:1.7;}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);font-size:.95rem;font-weight:700;padding:.95rem 1.7rem;border-radius:100px;cursor:pointer;border:1px solid transparent;transition:transform .5s var(--ease),background .4s var(--ease),color .4s,box-shadow .5s,border-color .4s;will-change:transform;}
.btn .arrow{transition:transform .5s var(--ease);}
.btn:hover .arrow{transform:translateX(5px);}
.btn--primary{background:linear-gradient(135deg,var(--glaze),var(--glaze-deep));color:var(--on-glaze);box-shadow:0 12px 30px -14px rgba(143,77,85,.6);}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 20px 44px -16px rgba(143,77,85,.7);background:linear-gradient(135deg,var(--glaze-deep),var(--glaze-deep));}
.btn--ghost{background:transparent;color:var(--bark);border-color:var(--line);}
.btn--ghost:hover{transform:translateY(-3px);border-color:var(--glaze-text);color:var(--glaze-text);background:rgba(143,77,85,.07);}

/* ==========================================================================
   NAV
   ========================================================================== */
.site-nav{position:sticky;top:0;z-index:100;transition:background .5s var(--ease),backdrop-filter .5s,border-color .5s;border-bottom:1px solid transparent;}
.site-nav.is-stuck{background:rgba(239,229,198,.8);backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);border-bottom-color:var(--line-soft);}
.site-nav__inner{max-width:var(--wrap);margin:0 auto;padding:1.15rem clamp(1.25rem,4vw,2.5rem);display:flex;align-items:center;gap:2rem;}
.site-nav__brand{display:flex;align-items:center;gap:.65rem;font-family:var(--display);font-weight:400;font-size:1.62rem;letter-spacing:.01em;color:var(--bark);margin-right:auto;}
.site-nav__logo-wrap{position:relative;display:inline-flex;flex:0 0 auto;}
.site-nav__logo{width:34px;height:34px;filter:brightness(0) saturate(100%) opacity(.82);transition:transform .6s var(--ease),filter .6s;animation:logo-breathe 6.5s ease-in-out infinite;}
.site-nav__brand:hover .site-nav__logo{transform:rotate(-12deg) scale(1.1);filter:brightness(0) opacity(.9) drop-shadow(0 0 8px rgba(143,77,85,.5));}
@keyframes logo-breathe{0%,100%{filter:brightness(0) opacity(.8);}50%{filter:brightness(0) opacity(.9) drop-shadow(0 0 6px rgba(143,77,85,.35));}}

.site-nav__wordmark{color:var(--bark);position:relative;}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .site-nav__wordmark{
    background-color:var(--bark);
    background-image:linear-gradient(100deg,var(--bark) 0%,var(--bark) 40%,var(--glaze-text) 49%,var(--glaze) 50%,var(--glaze-text) 51%,var(--bark) 60%,var(--bark) 100%);
    background-size:250% 100%;background-position:130% 0;background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    animation:wordmark-gleam 7s ease-in-out 1s infinite;
  }
}
@keyframes wordmark-gleam{0%{background-position:130% 0;}16%{background-position:-30% 0;}100%{background-position:-30% 0;}}
.site-nav__brand:hover .site-nav__wordmark{animation-duration:1.1s;animation-iteration-count:1;}

.spark{position:absolute;width:9px;height:9px;pointer-events:none;background:radial-gradient(circle at 50% 50%,#fff6e0 0%,var(--glaze-bright) 50%,transparent 72%);clip-path:polygon(50% 0%,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0% 50%,41% 41%);opacity:0;transform:scale(0);animation:twinkle 4.5s ease-in-out infinite;}
.spark--1{top:-5px;right:-6px;width:10px;height:10px;animation-delay:.4s;}
.spark--2{bottom:-3px;left:-7px;width:7px;height:7px;animation-delay:2.1s;}
.spark--3{top:10px;right:-10px;width:6px;height:6px;animation-delay:3.3s;}
.site-nav__brand:hover .spark{animation-duration:1.4s;}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(0) rotate(0);}8%{opacity:1;transform:scale(1) rotate(35deg);}22%{opacity:0;transform:scale(.2) rotate(60deg);}}

.site-nav__links{list-style:none;display:flex;gap:2rem;padding:0;}
.site-nav__links a{position:relative;font-family:var(--sans);font-weight:600;font-size:.92rem;color:var(--muted);padding:.3rem 0;transition:color .35s;}
.site-nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--glaze);transition:width .4s var(--ease);}
.site-nav__links a:hover,.site-nav__links a.is-active{color:var(--bark);}
.site-nav__links a:hover::after,.site-nav__links a.is-active::after{width:100%;}
.site-nav__cta{font-family:var(--sans);font-size:.88rem;font-weight:700;color:var(--on-glaze);background:linear-gradient(135deg,var(--glaze),var(--glaze-deep));padding:.65rem 1.3rem;border-radius:100px;transition:transform .5s var(--ease),box-shadow .5s;}
.site-nav__cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(143,77,85,.55);}
.site-nav__toggle{display:none;background:none;border:none;color:var(--bark);cursor:pointer;padding:.3rem;width:42px;height:42px;}
.site-nav__toggle svg{width:26px;height:26px;}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{padding:clamp(3rem,8vw,7rem) 0 clamp(3rem,6vw,5rem);position:relative;}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center;}
.hero__title{font-size:clamp(3.4rem,8.5vw,6.6rem);font-weight:400;line-height:1.0;letter-spacing:-.015em;margin:1.7rem 0 1.6rem;}
.hero__title .line-2{display:block;font-family:var(--serif);font-style:italic;font-weight:300;color:var(--glaze-text);font-size:clamp(2rem,5vw,3.9rem);margin-top:.35rem;}
.hero__lede{font-family:var(--serif);font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--muted);max-width:46ch;line-height:1.75;}
.hero__ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.4rem;}
.hero__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;background:var(--tile);border:1px solid var(--line);padding:clamp(10px,1.4vw,18px);box-shadow:0 34px 70px -34px rgba(36,51,45,.45);}
.hero__media img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--radius-lg) - 10px);transition:transform 1.4s var(--ease);}
.hero__media:hover img{transform:scale(1.04);}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section{padding:var(--section) 0;position:relative;}
.section--olive{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  color:var(--cream);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.section--olive h2,.section--olive h3{color:var(--cream);}
.section--olive .eyebrow{color:var(--sage-cream);}
.section--olive .eyebrow::before{background:var(--sage-cream);}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:clamp(2.5rem,5vw,4rem);flex-wrap:wrap;}
.section-head__title h2{margin-top:1.1rem;}
.section-head__link{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:600;color:var(--glaze-text);font-size:.92rem;white-space:nowrap;transition:gap .4s var(--ease),color .35s;}
.section-head__link svg{transition:transform .45s var(--ease);}
.section-head__link:hover{color:var(--bark);}
.section-head__link:hover svg{transform:translateX(5px);}

/* ==========================================================================
   PRODUCT GRID
   ========================================================================== */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(1.1rem,2vw,1.8rem);}
.product{position:relative;display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;background:var(--tile);border:1px solid var(--line);box-shadow:0 20px 40px -30px rgba(36,51,45,.4);transition:transform .6s var(--ease),box-shadow .6s,border-color .6s;isolation:isolate;}
.product:hover{transform:translateY(-8px);box-shadow:0 34px 60px -30px rgba(36,51,45,.5),0 0 0 1px var(--glow);border-color:rgba(143,77,85,.35);}
.product__media{position:absolute;inset:0;overflow:hidden;}
.product__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease);}
.product:hover .product__media img{transform:scale(1.07);}
.product__media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,30,26,0) 42%,rgba(20,30,26,.30) 66%,rgba(18,26,22,.90) 100%);}
.product__badge{position:absolute;top:.9rem;left:.9rem;z-index:4;font-family:var(--sans);font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);background:var(--sage-deep);padding:.35rem .7rem;border-radius:100px;}
.product__badge--sold{background:rgba(239,229,198,.85);color:var(--bark);}
.product__info{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:1.2rem 1.25rem;display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem;}
.product__text{min-width:0;}
.product__category{display:block;font-family:var(--sans);font-weight:700;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-cream);margin-bottom:.3rem;}
.product__name{font-family:var(--serif);font-weight:500;font-size:1.1rem;color:var(--cream);line-height:1.2;}
.product__price{display:none;}
.product__cta{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:3.1rem;height:3.1rem;padding:0 .85rem;border-radius:100px;font-family:var(--sans);font-size:.85rem;font-weight:700;white-space:nowrap;color:var(--on-glaze);background:linear-gradient(135deg,var(--glaze),var(--glaze-deep));box-shadow:0 8px 22px -10px rgba(143,77,85,.7);transition:transform .5s var(--ease),background .4s;}
.product:hover .product__cta{transform:scale(1.06);background:linear-gradient(135deg,var(--glaze-deep),var(--glaze-deep));}
.product__cta--sold{background:rgba(239,229,198,.16);color:var(--cream);box-shadow:none;backdrop-filter:blur(4px);}
a.product .product__cta{min-width:2.6rem;height:2.6rem;padding:0;}

/* ---------- tabs ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:clamp(2rem,4vw,3rem);}
.tab{font-family:var(--sans);font-weight:600;font-size:.88rem;color:var(--ink);background:rgba(36,51,45,.05);border:1px solid var(--line);padding:.6rem 1.15rem;border-radius:100px;cursor:pointer;transition:all .4s var(--ease);}
.tab:hover{color:var(--bark);border-color:var(--glaze);}
.tab.is-active{color:var(--on-glaze);background:linear-gradient(135deg,var(--glaze),var(--glaze-deep));border-color:transparent;}

/* ==========================================================================
   STORY (lives on the olive panel)
   ========================================================================== */
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;}
.story__media{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;background:var(--tile);padding:clamp(10px,1.2vw,16px);box-shadow:0 40px 70px -34px rgba(0,0,0,.5);}
.story__media img{width:100%;height:100%;object-fit:cover;border-radius:10px;transition:transform 1.4s var(--ease);}
.story__media:hover img{transform:scale(1.04);}
.story__body h2{margin:1.1rem 0 1.4rem;}
.story__body p{color:var(--sage-cream);margin-bottom:1.1rem;max-width:52ch;}
.story__body p:last-of-type{margin-bottom:0;}
.section--olive .btn--ghost{border-color:rgba(239,229,198,.3);color:var(--cream);}
.section--olive .btn--ghost:hover{border-color:var(--sage-cream);color:var(--sage-cream);background:rgba(239,229,198,.08);}
.story__sig{font-family:var(--display);font-size:2rem;color:var(--bark);}
.story__sig small{display:block;font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-deep);margin-top:.5rem;}
/* when the signature sits on the dark olive panel, flip it back to light */
.section--olive .story__sig{color:var(--cream);}
.section--olive .story__sig small{color:var(--sage-cream);}

/* ==========================================================================
   FIND ME cards
   ========================================================================== */
.find-me{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(1rem,2vw,1.6rem);}
.find-card{padding:2.2rem 2rem;border-radius:var(--radius);background:var(--tile);border:1px solid var(--line);box-shadow:0 18px 40px -32px rgba(36,51,45,.35);transition:transform .6s var(--ease),border-color .5s,box-shadow .5s;}
.find-card:hover{transform:translateY(-6px);border-color:rgba(143,77,85,.35);box-shadow:0 28px 54px -32px rgba(36,51,45,.45);}
.find-card__icon{width:34px;height:34px;color:var(--sage);margin-bottom:1.2rem;}
.find-card h3{margin-bottom:.7rem;}
.find-card p{color:var(--muted);font-size:.98rem;margin-bottom:1.3rem;}
.find-card__link{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--sans);font-weight:600;color:var(--glaze-text);font-size:.9rem;transition:gap .4s var(--ease),color .35s;}
.find-card__link svg{transition:transform .45s var(--ease);}
.find-card:hover .find-card__link{color:var(--bark);}
.find-card:hover .find-card__link svg{transform:translateX(4px);}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band{padding:clamp(2rem,5vw,4rem) 0 var(--section);}
.cta-band__inner{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line-soft);background:linear-gradient(135deg,var(--olive),var(--olive-2));color:var(--cream);}
.cta-band__inner--with-media{display:grid;grid-template-columns:.85fr 1.15fr;align-items:stretch;}
.cta-band__media{overflow:hidden;min-height:260px;}
.cta-band__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ease);}
.cta-band__inner:hover .cta-band__media img{transform:scale(1.06);}
.cta-band__copy{padding:clamp(2.2rem,5vw,4rem);}
.cta-band__copy h2{color:var(--cream);}
.cta-band__copy .eyebrow{color:var(--cream);}
.cta-band__copy .eyebrow::before{background:var(--cream);}
.cta-band__copy p{color:var(--on-glaze);max-width:46ch;margin-top:1rem;}

/* on the olive band the plum button would sink — flip it to alabaster */
.cta-band__copy .btn--primary{background:var(--cream);color:var(--bark);box-shadow:0 12px 30px -14px rgba(18,26,22,.55);}
.cta-band__copy .btn--primary:hover{background:#ffffff;color:var(--glaze-text);box-shadow:0 20px 44px -16px rgba(18,26,22,.6);}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;}
.contact__email{display:inline-flex;align-items:center;gap:.8rem;margin-top:1.4rem;font-family:var(--display);font-size:clamp(1.55rem,3.8vw,2.7rem);line-height:1.15;color:var(--glaze-text);overflow-wrap:anywhere;border-bottom:1px solid rgba(143,77,85,.35);padding-bottom:.35rem;transition:color .35s,border-color .35s;}
.contact__email:hover{color:var(--bark);border-color:var(--glaze);}
.contact__email svg{flex:0 0 auto;width:.8em;height:.8em;transition:transform .45s var(--ease);}
.contact__email:hover svg{transform:translate(4px,-4px);}
.contact__note{margin-top:1.4rem;color:var(--muted);max-width:48ch;}
.contact__copy{margin-top:1.4rem;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:600;font-size:.88rem;color:var(--sage-deep);background:none;border:1px solid var(--line);border-radius:100px;padding:.55rem 1.1rem;cursor:pointer;transition:border-color .35s,color .35s;}
.contact__copy:hover{border-color:var(--sage);color:var(--bark);}
.contact__inline{color:var(--glaze-text);border-bottom:1px solid rgba(143,77,85,.35);}
.contact__inline:hover{color:var(--bark);}
.contact__topics{list-style:none;padding:0;display:grid;gap:1rem;}
.contact__topics li{padding:1.4rem 1.5rem;background:var(--tile);border:1px solid var(--line);border-radius:var(--radius);}
.contact__topics h3{font-size:1.15rem;margin-bottom:.35rem;}
.contact__topics p{color:var(--muted);font-size:.96rem;}
.contact__topics a{color:var(--glaze-text);font-weight:600;font-family:var(--sans);font-size:.9rem;display:inline-block;margin-top:.6rem;border-bottom:1px solid rgba(143,77,85,.35);}
.contact__topics a:hover{color:var(--bark);}

/* ==========================================================================
   PAGE HEADER (interior)
   ========================================================================== */
.page-head{padding:clamp(3rem,7vw,6rem) 0 clamp(1rem,3vw,2.5rem);}
.page-head__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,4rem);align-items:end;}
.page-head__intro{padding-bottom:.6rem;}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-portrait{max-width:440px;margin:0 auto;}
.about-portrait__media{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:2/3;background:var(--tile);padding:clamp(10px,1.4vw,16px);box-shadow:0 40px 80px -34px rgba(36,51,45,.4);}
.about-portrait__media img{width:100%;height:100%;object-fit:cover;object-position:center 18%;border-radius:10px;}
.about-pull{max-width:22ch;margin:clamp(3rem,6vw,5rem) auto;font-family:var(--display);font-style:italic;font-size:clamp(1.8rem,4vw,3rem);line-height:1.2;text-align:center;color:var(--glaze-text);}
.about-text{max-width:62ch;margin:0 auto;}
.about-text p{color:var(--ink);margin-bottom:1.3rem;}
.about-text h3{margin:2.6rem 0 .9rem;color:var(--bark);}
.about-text a{color:var(--glaze-text);border-bottom:1px solid rgba(143,77,85,.4);transition:color .3s;}
.about-text a:hover{color:var(--bark);}
.about-text strong{color:var(--bark);}
.about-text ul{color:var(--ink);}

/* ==========================================================================
   VIDEO GRID
   ========================================================================== */
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(1.4rem,3vw,2.4rem);}
.video-card{cursor:pointer;}
.video-card__frame{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;border:1px solid var(--line);box-shadow:0 20px 40px -30px rgba(36,51,45,.4);transition:transform .6s var(--ease),box-shadow .6s;}
.video-card:hover .video-card__frame{transform:translateY(-6px);box-shadow:0 34px 60px -30px rgba(36,51,45,.5),0 0 0 1px var(--glow);}
.video-card__frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease);}
.video-card:hover .video-card__frame img{transform:scale(1.07);}
.video-card__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,30,26,.1),rgba(18,26,22,.55));}
.video-card__duration{position:absolute;bottom:.9rem;right:.9rem;z-index:2;font-family:var(--sans);font-size:.75rem;color:var(--cream);background:rgba(18,26,22,.6);backdrop-filter:blur(6px);padding:.25rem .6rem;border-radius:100px;}
.video-card__play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;}
.video-card__play-icon{width:62px;height:62px;border-radius:50%;background:rgba(239,229,198,.16);backdrop-filter:blur(8px);border:1px solid rgba(239,229,198,.35);display:grid;place-items:center;color:var(--cream);transform:scale(.9);opacity:.85;transition:transform .5s var(--ease),background .4s,opacity .4s;}
.video-card:hover .video-card__play-icon{transform:scale(1);opacity:1;background:linear-gradient(135deg,var(--glaze),var(--glaze-deep));color:var(--on-glaze);border-color:transparent;}
.video-card__meta{font-family:var(--sans);font-weight:700;margin:1rem 0 .4rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-deep);}
.video-card__title{font-size:1.15rem;margin-bottom:.5rem;}
.video-card__excerpt{color:var(--muted);font-size:.95rem;}

/* ---------- soft panel ---------- */
.panel{padding:clamp(2rem,4vw,3rem) clamp(1.8rem,3vw,2.75rem);background:var(--tile);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 18px 40px -34px rgba(36,51,45,.3);}
.panel h3{margin-top:1rem;}
.panel p{color:var(--ink);margin-top:1.1rem;}
.panel p a{color:var(--glaze-text);border-bottom:1px solid rgba(143,77,85,.4);}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-foot{border-top:1px solid var(--line-soft);background:linear-gradient(180deg,var(--panel),var(--panel-2));color:var(--sage-cream);padding:clamp(3rem,6vw,5rem) 0 2.5rem;}
.site-foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem;}
.site-foot__brand-wrap{display:flex;align-items:center;gap:1rem;}
.site-foot__brand{font-family:var(--display);font-size:1.6rem;line-height:1.05;color:var(--cream);}
.site-foot__logo{width:42px;height:42px;filter:brightness(0) invert(1) opacity(.85);}
.site-foot__tag{font-family:var(--sans);margin-top:1.2rem;color:var(--sage-cream);opacity:.85;font-size:.9rem;line-height:1.6;max-width:34ch;}
.site-foot h4{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-cream);margin-bottom:1.1rem;}
.site-foot ul{list-style:none;padding:0;display:grid;gap:.6rem;}
.site-foot ul a{font-family:var(--sans);color:var(--cream);opacity:.82;font-size:.92rem;transition:opacity .3s,color .3s;}
.site-foot ul a:hover{opacity:1;color:var(--sage-cream);}
.site-foot__bottom{font-family:var(--sans);margin-top:3rem;padding-top:1.6rem;border-top:1px solid rgba(239,229,198,.14);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:var(--sage-cream);opacity:.75;}
.site-foot__bottom a{color:var(--sage-cream);transition:opacity .3s;}
.site-foot__bottom a:hover{color:var(--cream);}

/* ==========================================================================
   MOTION
   ========================================================================== */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);}
.reveal.is-in{opacity:1;transform:none;}
.stagger>*{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);}
.stagger.is-in>*,.stagger>.is-in{opacity:1;transform:none;}
.stagger.is-in>*:nth-child(1){transition-delay:.05s;}
.stagger.is-in>*:nth-child(2){transition-delay:.13s;}
.stagger.is-in>*:nth-child(3){transition-delay:.21s;}
.stagger.is-in>*:nth-child(4){transition-delay:.29s;}
.stagger.is-in>*:nth-child(5){transition-delay:.37s;}
.stagger.is-in>*:nth-child(6){transition-delay:.45s;}
.stagger.is-in>*:nth-child(7){transition-delay:.53s;}
.stagger.is-in>*:nth-child(8){transition-delay:.61s;}
.rise{opacity:0;transform:translateY(34px);animation:rise 1.1s var(--ease-out) forwards;}
.rise-1{animation-delay:.15s;}.rise-2{animation-delay:.35s;}
@keyframes rise{to{opacity:1;transform:none;}}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
  .reveal,.stagger>*,.rise{opacity:1 !important;transform:none !important;}
  .site-nav__wordmark{-webkit-text-fill-color:var(--bark);color:var(--bark);background:none;}
  .spark{display:none;}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .hero__grid,.story,.cta-band__inner--with-media,.page-head__inner,.contact{grid-template-columns:1fr;}
  .hero__media,.story__media{max-width:460px;}
  .cta-band__media{min-height:220px;aspect-ratio:16/10;}
  .site-foot__grid{grid-template-columns:1fr 1fr;gap:2rem;}
}
@media (max-width:720px){
  .site-nav__links{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:0 clamp(1.25rem,4vw,2.5rem);background:rgba(239,229,198,.97);backdrop-filter:blur(16px);max-height:0;overflow:hidden;transition:max-height .5s var(--ease),padding .5s;border-bottom:1px solid var(--line-soft);}
  .site-nav__links.is-open{max-height:420px;padding:1rem clamp(1.25rem,4vw,2.5rem) 1.5rem;}
  .site-nav__links li{padding:.7rem 0;border-bottom:1px solid var(--line-soft);}
  .site-nav__toggle{display:block;order:3;}
  .site-nav__cta{display:none;}
  .site-nav__inner{gap:1rem;}
  .section-head{flex-direction:column;align-items:flex-start;}
  .site-foot__grid{grid-template-columns:1fr;}
  .site-foot__bottom{flex-direction:column;}
}

/* ==========================================================================
   HERO — "step inside" tag over the portrait
   ========================================================================== */
.hero__media{position:relative;}
.hero__tag{position:absolute;left:calc(clamp(10px,1.4vw,18px) + 1rem);bottom:calc(clamp(10px,1.4vw,18px) + 1rem);z-index:2;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-size:.82rem;font-weight:700;color:var(--bark);background:var(--tile);padding:.6rem 1rem;border-radius:100px;box-shadow:0 10px 26px -12px rgba(0,0,0,.35);transition:transform .5s var(--ease),box-shadow .5s;}
.hero__tag svg{transition:transform .45s var(--ease);}
.hero__tag:hover{transform:translateY(-2px);box-shadow:0 16px 32px -14px rgba(0,0,0,.4);}
.hero__tag:hover svg{transform:translateX(4px);}

/* ==========================================================================
   THE STUDIO (build page)
   ========================================================================== */
.section--tint{background:var(--paper-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}

/* before / after */
.before-after{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,2rem);}
.before-after__item{margin:0;}
.before-after__media{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;background:var(--tile);border:1px solid var(--line);padding:clamp(8px,1vw,14px);box-shadow:0 30px 60px -36px rgba(0,0,0,.4);}
.before-after__media img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--radius-lg) - 10px);}
.before-after__item figcaption{display:flex;align-items:center;gap:.7rem;margin-top:1rem;font-family:var(--serif);font-size:1.1rem;color:var(--bark);}
.before-after__label{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:.35rem .75rem;border-radius:100px;border:1px solid var(--line);color:var(--muted);}
.before-after__label--after{background:var(--glaze);border-color:transparent;color:var(--on-glaze);}

/* build log — alternating timeline with a centre rail */
.build-log{list-style:none;padding:0;position:relative;display:grid;gap:clamp(3rem,7vw,5.5rem);}
.build-log::before,.build-log::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:4px;margin-left:-2px;border-radius:4px;}
.build-log::before{background:var(--line);}
.build-log::after{background:var(--glaze);}
.build-step{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,8vw,6rem);align-items:center;}
.build-step::before{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--paper-2);border:2px solid var(--glaze);z-index:1;}
.build-step:nth-child(even) .build-step__media{order:2;}
.build-step:nth-child(even) .build-step__text{text-align:right;justify-self:end;}
.build-step__media{border-radius:var(--radius);overflow:hidden;background:var(--tile);border:1px solid var(--line);padding:clamp(6px,.8vw,10px);box-shadow:0 24px 50px -34px rgba(0,0,0,.45);}
.build-step__media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--radius) - 6px);}
.build-step__media--pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(6px,.8vw,10px);}
.build-step__media--pair img{aspect-ratio:3/4;}
.build-step__text{max-width:40ch;}
.build-step__num{display:block;font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(2.6rem,5vw,3.8rem);line-height:1;color:var(--glaze-text);margin-bottom:.7rem;}
.build-step__text h3{font-size:clamp(1.35rem,2.2vw,1.7rem);margin-bottom:.6rem;}
.build-step__text p{color:var(--muted);}

/* rail fills as you scroll through the build: JS sets --fill (0–1) on scroll.
   Default is full, so without JS / with reduced motion the line simply shows complete. */
.build-log{--fill:1;}
/* Height, not a scaled transform: a GPU layer as tall as the whole timeline exceeds
   iPhone Safari's layer size limit and stops being drawn mid-scroll. A 4px strip whose
   height changes is cheap to paint and nothing else moves. */
.build-log::after{bottom:auto;height:calc(var(--fill) * 100%);transform:none;}

/* inside gallery */
.studio-gallery{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(.8rem,1.6vw,1.4rem);}
.studio-gallery__item{margin:0;}
.studio-gallery__item img{width:100%;height:clamp(300px,40vw,560px);object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);box-shadow:0 24px 50px -36px rgba(0,0,0,.45);}
.studio-gallery__item figcaption{margin-top:.8rem;font-family:var(--sans);font-size:.88rem;color:var(--muted);}

@media (max-width:900px){
  .build-log::before,.build-log::after{left:11px;}
  .build-step{grid-template-columns:1fr;gap:1.4rem;padding-left:2.6rem;}
  .build-step::before{left:11px;top:.4rem;}
  .build-step:nth-child(even) .build-step__media{order:0;}
  .build-step:nth-child(even) .build-step__text{text-align:left;justify-self:start;}
  .studio-gallery{grid-template-columns:1fr;}
  .studio-gallery__item--wide{grid-column:1 / -1;}
  .studio-gallery__item img{height:auto;aspect-ratio:3/4;}
  .studio-gallery__item--wide img{aspect-ratio:4/3;}
}
@media (max-width:600px){
  .before-after{grid-template-columns:1fr;}
}

/* ==========================================================================
   WIDE HERO — landscape photo (or video) bleeding off the right edge,
   fading into the page colour behind the copy
   ========================================================================== */
.hero--wide{position:relative;display:flex;align-items:center;min-height:min(88vh,800px);padding:clamp(3rem,6vw,5rem) 0;overflow:hidden;background:transparent;}
.hero-wide__media{position:absolute;top:0;bottom:0;right:0;left:34%;overflow:hidden;}
.hero-wide__media img,.hero-wide__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 35%;}
.hero-wide__media img{animation:hero-settle 2.4s var(--ease-out) both;}
@keyframes hero-settle{from{transform:scale(1.06);}to{transform:none;}}
.hero-wide__media video{transition:opacity .9s var(--ease);}
.hero-wide__media video.is-done{opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility 0s .9s;}
.hero-wide__media::after{content:none;}
.hero-wide__media{-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 8%,#000 42%);mask-image:linear-gradient(90deg,transparent 0%,transparent 8%,#000 42%);}
.hero-wide__inner{position:relative;z-index:1;width:100%;}
.hero--wide .hero__copy{max-width:min(34rem,44%);}
.hero--wide .hero__tag{left:auto;right:clamp(1.25rem,4vw,2.5rem);bottom:clamp(1.5rem,4vw,2.5rem);}
.hero__motion-toggle{position:absolute;right:clamp(1.25rem,4vw,2.5rem);top:clamp(1.25rem,3vw,2rem);z-index:2;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:none;cursor:pointer;color:var(--bark);background:var(--tile);box-shadow:0 8px 20px -10px rgba(0,0,0,.35);}
.hero__motion-toggle[hidden]{display:none;}
.hero__motion-toggle .icon-play{display:none;}
.hero__motion-toggle.is-paused .icon-play{display:block;}
.hero__motion-toggle.is-paused .icon-pause{display:none;}
@media (max-width:900px){
  .hero--wide{flex-direction:column;align-items:stretch;min-height:0;padding:0 0 clamp(2.5rem,8vw,4rem);}
  .hero-wide__media{position:relative;left:0;aspect-ratio:4/3;width:100%;}
  .hero-wide__media{-webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 28%);mask-image:linear-gradient(0deg,transparent 0%,#000 28%);}
  .hero--wide .hero__copy{max-width:none;margin-top:-1.5rem;}
  .hero--wide .hero__tag{bottom:auto;top:1rem;right:1rem;font-size:.76rem;}
  .hero__motion-toggle{top:1rem;bottom:auto;left:1rem;right:auto;}
}

/* ==========================================================================
   STUDIO COLOURS — overrides
   The story panel is the literal studio green, so its text flips to dark ink;
   the follow-along band is dusky pink, also with dark ink.
   ========================================================================== */
.section--olive{background:linear-gradient(180deg,var(--studio),var(--studio-2));}
.section--olive h2,.section--olive h3,.section--olive .story__sig{color:var(--bark);}
.section--olive .eyebrow,.section--olive .story__sig small{color:var(--bark);}
.section--olive .eyebrow::before{background:var(--bark);}
.section--olive .story__body p{color:var(--bark);}
.section--olive .btn--ghost{border-color:rgba(36,51,45,.35);color:var(--bark);}
.section--olive .btn--ghost:hover{border-color:var(--bark);color:var(--bark);background:rgba(36,51,45,.07);}
.section--olive .story__media{background:var(--tile);}
.cta-band__copy h2,.cta-band__copy .eyebrow{color:var(--bark);}
.cta-band__copy .eyebrow::before{background:var(--bark);}
.cta-band__copy p{color:var(--on-glaze);}
.cta-band__copy .btn--primary{background:var(--panel-2);color:var(--cream);}
.cta-band__copy .btn--primary:hover{background:var(--bark);color:var(--cream);}
.build-log::after{background:#7d9c8f;}
.build-step::before{border-color:#7d9c8f;}
.find-card__icon{color:var(--sage-deep);}
.before-after__label--after{background:var(--studio);color:var(--bark);}

/* studio page uses the wide hero with a smaller page-level title */
.hero__title--page{font-size:clamp(2.6rem,5.2vw,4.4rem);line-height:1.04;}
#build{scroll-margin-top:5rem;}

/* ==========================================================================
   MARKETS
   ========================================================================== */
.hero--markets .hero-wide__media img{object-position:30% 40%;}
.market-types{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.8rem);}
.market-type{background:var(--tile);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 18px 40px -32px rgba(0,0,0,.35);transition:transform .6s var(--ease),box-shadow .6s;}
.market-type:hover{transform:translateY(-6px);box-shadow:0 28px 54px -32px rgba(0,0,0,.45);}
.market-type__media{aspect-ratio:4/3;overflow:hidden;}
.market-type__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease);}
.market-type:hover .market-type__media img{transform:scale(1.05);}
.market-type__body{padding:1.6rem 1.6rem 1.9rem;}
.market-type__body h3{margin-bottom:.55rem;}
.market-type__body p{color:var(--muted);font-size:.98rem;}
.stall-gallery{columns:2;column-gap:clamp(1rem,2vw,1.6rem);}
.stall-gallery figure{margin:0 0 clamp(1rem,2vw,1.6rem);break-inside:avoid;}
.stall-gallery img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line);box-shadow:0 24px 50px -36px rgba(0,0,0,.45);}
.stall-gallery figcaption{margin-top:.7rem;font-family:var(--sans);font-size:.88rem;color:var(--muted);}
@media (max-width:900px){.market-types{grid-template-columns:1fr;max-width:520px;}}
@media (max-width:600px){.stall-gallery{columns:1;}}

/* ==========================================================================
   PIECE CARDS — photo on top, name below (suits Ellie's white/wood shots)
   ========================================================================== */
.product{aspect-ratio:auto;display:flex;flex-direction:column;background:var(--tile);}
.product__media{position:relative;inset:auto;aspect-ratio:1/1;background:#fff;}
.product__media::after{display:none;}
.product__info{position:static;padding:1rem 1.1rem 1.15rem;align-items:center;flex:1;}
.product__category{color:var(--sage-deep);}
.product__name{color:var(--bark);}
.product__badge{background:var(--panel-2);color:var(--cream);}
.product-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
@media (max-width:520px){.product-grid{grid-template-columns:1fr 1fr;gap:.8rem;}.product__info{padding:.75rem .8rem .9rem;gap:.5rem;}.product__name{font-size:.98rem;}.product__cta{min-width:2.6rem;height:2.6rem;padding:0 .7rem;font-size:.8rem;}}

/* thin studio-green rule closing the wide hero (home, studio, markets) */
.hero--wide{border-bottom:0;}

/* markets hero: keep the soft bottom fade — the stall table edge isn't level */
@media (min-width:901px){
  .hero--markets .hero-wide__media{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent calc(16vw - 70px),rgba(0,0,0,.05) calc(16vw - 40px),rgba(0,0,0,.16) calc(16vw - 10px),rgba(0,0,0,.34) calc(16vw + 20px),rgba(0,0,0,.55) calc(16vw + 50px),rgba(0,0,0,.75) calc(16vw + 80px),rgba(0,0,0,.9) calc(16vw + 110px),#000 calc(16vw + 145px)),linear-gradient(0deg,transparent 0%,#000 22%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,transparent calc(16vw - 70px),rgba(0,0,0,.05) calc(16vw - 40px),rgba(0,0,0,.16) calc(16vw - 10px),rgba(0,0,0,.34) calc(16vw + 20px),rgba(0,0,0,.55) calc(16vw + 50px),rgba(0,0,0,.75) calc(16vw + 80px),rgba(0,0,0,.9) calc(16vw + 110px),#000 calc(16vw + 145px)),linear-gradient(0deg,transparent 0%,#000 22%);
    mask-composite:intersect;
  }
}

/* keep small text links at a comfortable tap size (WCAG 2.2 target size) */
.find-card__link,.section-head__link{padding:.35rem 0;}

/* visible keyboard focus everywhere (mouse clicks don't trigger it) */
:focus-visible{outline:2px solid var(--bark);outline-offset:3px;border-radius:4px;}
.btn:focus-visible,.site-nav__cta:focus-visible,.product__cta:focus-visible,.tab:focus-visible,.hero__tag:focus-visible{outline-offset:4px;border-radius:100px;}
.site-foot :focus-visible{outline-color:var(--cream);}

/* If the script never runs (blocked, failed, very old browser), show everything.
   Content only starts hidden once the inline head script has confirmed JS is on. */
html:not(.js) .reveal,html:not(.js) .stagger>*{opacity:1;transform:none;transition:none;}

/* <picture> wrappers (WebP + JPEG fallback) must not affect layout */
picture{display:block;width:100%;height:100%;}

/* ==========================================================================
   FRAMED PHOTOS — Safari-safe
   Safari/WebKit resolves height:100% inside a padded aspect-ratio box against
   the whole box (padding included), so the photo overflowed and hid the bottom
   of the frame on iPhone. Instead, the photo is pinned inside the frame at the
   frame width ("mat") from every edge — no percentage heights involved.
   ========================================================================== */
.hero__media{--mat:clamp(10px,1.4vw,18px);}
.story__media{--mat:clamp(10px,1.2vw,16px);}
.about-portrait__media{--mat:clamp(10px,1.4vw,16px);}
.before-after__media{--mat:clamp(8px,1vw,14px);}
.hero__media,.story__media,.about-portrait__media,.before-after__media{position:relative;padding:0;}
:is(.hero__media,.story__media,.about-portrait__media,.before-after__media)>:is(picture,img){position:absolute;inset:var(--mat);width:auto;height:auto;}
:is(.hero__media,.story__media,.about-portrait__media,.before-after__media)>picture>img{width:100%;height:100%;}

/* ==========================================================================
   NEXT FAIR — markets feature + homepage banner (hidden by JS after the date)
   ========================================================================== */
.next-fair-section{padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(1rem,3vw,2rem);}
.next-fair{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;max-width:900px;margin:0 auto;background:var(--tile);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.6rem,4vw,2.8rem);box-shadow:0 24px 50px -36px rgba(36,51,45,.4);}
.next-fair__date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(96px,14vw,132px);aspect-ratio:1/1.1;border-radius:20px;background:var(--glaze);color:var(--on-glaze);line-height:1;box-shadow:0 14px 30px -18px rgba(143,77,85,.6);}
.next-fair__dow,.next-fair__mon{font-family:var(--sans);font-weight:700;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;}
.next-fair__day{font-family:var(--display);font-size:clamp(3rem,6vw,4rem);margin:.15em 0 .1em;}
.next-fair__title{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:.8rem 0 1rem;}
.next-fair__facts{list-style:none;padding:0;display:grid;gap:.45rem;color:var(--ink);margin-bottom:1.6rem;}
.next-fair__facts li:last-child{color:var(--muted);}
.fair-banner{display:flex;align-items:center;justify-content:center;gap:.8rem;flex-wrap:wrap;padding:.7rem 1.25rem;background:var(--sage);color:var(--bark);font-family:var(--sans);font-size:.92rem;text-align:center;transition:background .3s;}
.fair-banner:hover{background:#9cb5aa;}
.fair-banner__tag{font-weight:700;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;background:var(--bark);color:var(--cream);padding:.3rem .6rem;border-radius:100px;}
.fair-banner svg{flex:0 0 auto;transition:transform .35s var(--ease);}
.fair-banner:hover svg{transform:translateX(4px);}
@media (max-width:600px){.next-fair{grid-template-columns:1fr;justify-items:start}.fair-banner{font-size:.84rem;gap:.5rem;flex-wrap:nowrap;padding:.65rem 1rem}.fair-banner__more{display:none}}