/* ============================================================
   Dhaaneea - one-pager
   ------------------------------------------------------------
   Palette read off the supplied logo: a single warm brown on
   cream, no second accent colour. Values were sampled from a
   screenshot, not a colour-managed source file, so they still
   need checking against the brand's own spec.
   Swap the values below and the whole page re-skins; nothing
   else references a raw colour.
   ============================================================ */
:root{
  --ivory:      #FBF8F3;  /* page ground - warm off-white */
  --tint:       #F1EAE0;  /* alternating band - the logo's cream backdrop */
  --ink:        #2A2320;  /* body text, near-black warm brown */
  --ink-soft:   #6E5B4E;  /* secondary text */
  --accent:     #4A342B;  /* logo brown - buttons, links */
  --accent-dk:  #35251E;  /* accent hover */
  --line:       #E0D6C8;  /* hairlines and borders */
  --wa:         #25D366;  /* WhatsApp brand green - do not restyle */

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --section-y: clamp(3.5rem, 8vw, 7rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:clamp(1rem,.4vw + .95rem,1.0625rem);
  line-height:1.7;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}

h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15;margin:0 0 .5em;letter-spacing:.005em}
h1{font-size:clamp(2.5rem,6.5vw,4.5rem)}
h2{font-size:clamp(1.85rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.15rem,1.6vw,1.35rem);margin-bottom:.35em}
p{margin:0 0 1.1em}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.section{padding-block:var(--section-y)}
.section-tint{background:var(--tint)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:.75rem 1.25rem;z-index:200}
.skip-link:focus{left:0}

.eyebrow{
  font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:400;margin-bottom:1rem;
}
.lede,.section-lede{font-size:clamp(1.05rem,1.2vw,1.25rem);color:var(--ink-soft);max-width:56ch}
.section-head{max-width:62ch;margin-bottom:clamp(2rem,4vw,3.25rem)}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--accent);--btn-fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--btn-bg);color:var(--btn-fg);
  padding:.85rem 1.9rem;border:1px solid var(--btn-bg);border-radius:2px;
  font-size:.8125rem;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;font-weight:400;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.btn:hover{--btn-bg:var(--accent-dk);transform:translateY(-1px)}
.btn-ghost{--btn-bg:transparent;--btn-fg:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{--btn-bg:var(--ink);--btn-fg:var(--ivory);border-color:var(--ink)}
.btn-sm{padding:.6rem 1.2rem;font-size:.7rem}
.btn-lg{padding:1rem 2.4rem}
.btn-block{width:100%;margin-top:.9rem}

:where(a,button,summary,details):focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(251,248,243,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;gap:1.5rem;padding-block:.85rem}
.logo{text-decoration:none;margin-right:auto;display:flex}
/* The final mark is solid and drops the "ACCESSORIES" line, so DHAANEEA is
   now 20% of the lockup height rather than 9%. It stays legible far smaller
   than the outlined version did, which is why the header is back to 56px. */
.logo-mark{height:56px;width:auto}
.nav{display:flex;gap:1.75rem}
.nav a{
  text-decoration:none;font-size:.8125rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);transition:color .2s;
}
.nav a:hover{color:var(--accent)}

.nav-toggle{
  display:none;flex-direction:column;gap:4px;background:none;border:0;
  padding:.5rem;cursor:pointer;
}
.nav-toggle span{width:22px;height:1px;background:var(--ink)}
.mobile-nav{display:none;flex-direction:column;padding:0 1.25rem 1.25rem;border-bottom:1px solid var(--line)}
.mobile-nav a{
  padding:.85rem 0;text-decoration:none;border-bottom:1px solid var(--line);
  font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;
}

/* ---------- hero ----------
   Split layout: the product photography is 3:4 portrait, so a full-bleed
   banner would crop it to a letterbox. A half-width image column keeps the
   whole frame and puts the tagline above the fold. */
.hero{
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;min-height:min(86vh,780px);
}
.hero-copy{
  padding:clamp(2rem,5vw,4rem) clamp(1.25rem,4vw,4rem);
  /* +4rem over half the wrap so the two CTAs stay on one line */
  justify-self:end;width:min(100%,calc(var(--wrap) / 2 + 4rem));
}
/* smaller than the global h1 scale - it lives in a half-width column now,
   and must hold "Rooted in Craft." on one line */
.hero-copy h1{margin-bottom:.4em;font-size:clamp(2.4rem,4vw,3.5rem)}
.hero-copy .lede{max-width:38ch}
.hero-actions{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:2rem}
.hero-img{width:100%;height:100%;max-height:min(86vh,780px);object-fit:cover}

/* ---------- trust strip ---------- */
.strip{border-block:1px solid var(--line);background:var(--tint)}
.strip-inner{
  display:grid;grid-template-columns:repeat(3,1fr);
  text-align:center;padding-block:1.75rem;gap:1rem;
}
.strip-inner div{display:flex;flex-direction:column;gap:.15rem}
.strip strong{
  font-family:var(--serif);font-size:1.2rem;font-weight:500;
  font-variant-numeric:lining-nums;
}
.strip span{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- two column ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.two-col-narrow{align-items:start}
.col-text p:last-child{margin-bottom:0}
/* founder story: no portrait to pair it with, so it holds reading measure.
   Heading and signature centre; the prose itself stays ranged left. */
.story-solo{max-width:60ch;margin-inline:auto}
.story-solo .eyebrow,.story-solo h2,.story-solo .signature{text-align:center}
/* centred, so an orphaned last word shows badly */
.story-solo h2{text-wrap:balance;margin-bottom:.7em}
.story-solo p:last-child{margin-bottom:0}
.signature{font-family:var(--serif);font-size:1.15rem;color:var(--ink-soft);margin-top:1.5rem}

/* ---------- craft ---------- */
.craft-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.craft-card img{margin-bottom:1.1rem}
.craft-card img{aspect-ratio:3/4;object-fit:cover;width:100%}
.craft-card p{font-size:.9375rem;color:var(--ink-soft);margin:0}

/* ---------- products ----------
   3 across, not 4: five products fill 3+2 rather than stranding one alone,
   and the photography earns the extra width. */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.product{display:flex;flex-direction:column}

/* Four shots per style, so the card image is a scroll-snap strip rather than
   a single photo. Same approach as the reviews track: it swipes, scrolls and
   takes arrow keys on its own. main.js keeps the dots in step and rotates the
   strip while the card is on screen; it stops for good once a visitor takes
   over, and never starts under prefers-reduced-motion. */
.product-media{position:relative;margin-bottom:.75rem}
/* a whisper of shade at the foot of the photograph, so the dots read the same
   on a pale sole shot as on a dark one without a chip or a bar to sit in */
.product-media::after{
  content:"";position:absolute;top:auto;right:0;bottom:0;left:0;height:30%;pointer-events:none;
  background:linear-gradient(to top,rgba(42,35,32,.3),rgba(42,35,32,0));
}
.product-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  background:var(--tint);
}
.product-track::-webkit-scrollbar{display:none}
/* scrollable region with tabindex, so it needs its own ring */
.product-track:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.product-track img{
  aspect-ratio:3/4;object-fit:cover;width:100%;
  background:var(--tint);scroll-snap-align:start;
}

/* the dots are anchors, not buttons, so a click still moves the strip with
   JS off; main.js only cancels the page jump the anchor would otherwise make.
   They sit on the photograph rather than under it: a row of its own left the
   card looking assembled out of parts. Cream on the shade above carries them
   over any of the five styles. */
.product-dots{
  position:absolute;top:auto;right:0;bottom:.45rem;left:0;z-index:1;
  display:flex;justify-content:center;margin:0;
}
.product-dots a{
  display:grid;place-items:center;
  width:1.5rem;height:1.5rem;   /* the dot is 7px; the tap target is not */
}
.product-dots a::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:rgba(251,248,243,.5);box-shadow:0 1px 2px rgba(42,35,32,.45);
  transition:background .2s ease,transform .2s ease;
}
.product-dots a:hover::before{background:var(--ivory)}
/* fill and size both change, so the current shot is clear at a glance */
.product-dots a[aria-current="true"]::before{background:var(--ivory);transform:scale(1.25)}

/* main.js adds this trigger; see the lightbox section for why it is not markup */
.product-zoom{
  position:absolute;top:.55rem;right:.55rem;z-index:1;
  width:2.25rem;height:2.25rem;border-radius:50%;padding:0;
  border:1px solid rgba(42,35,32,.1);background:rgba(251,248,243,.86);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--accent);display:grid;place-items:center;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.product-zoom svg{
  width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.product:hover .product-zoom,.product-zoom:hover{
  background:var(--accent);color:var(--ivory);border-color:var(--accent);
}
.product-body{display:flex;flex-direction:column;flex:1}
.product-meta{font-size:.85rem;color:var(--ink-soft);margin:0 0 .5rem}
.product-sizes{
  font-size:.75rem;letter-spacing:.08em;color:var(--ink-soft);
  margin:.4rem 0 0;font-variant-numeric:lining-nums;
}
/* lining figures - Cormorant defaults to oldstyle, which makes prices hard to scan */
.product-price{
  font-family:var(--serif);font-size:1.25rem;margin:0;
  font-variant-numeric:lining-nums tabular-nums;
}
/* struck MRP stays quiet - the brief rules out anything that reads as discount-led */
.product-price s{
  font-size:.95rem;color:var(--ink-soft);
  text-decoration-thickness:1px;margin-left:.35rem;
}
.product-body .btn-block{margin-top:1.1rem}

/* ---------- size table ---------- */
.size-table{width:100%;border-collapse:collapse;background:var(--ivory);border:1px solid var(--line)}
.size-table th,.size-table td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--line);font-size:.9375rem}
.size-table th{
  font-weight:400;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);
}
.size-table tbody tr:last-child td{border-bottom:0}
.table-note{font-size:.8125rem;color:var(--ink-soft);margin-top:1rem}

/* ---------- reviews carousel ---------- */
/* Six quotes now, so the row scrolls instead of wrapping to a ragged second
   line. scroll-snap does the paging; the arrows in main.js are an enhancement
   on top of a track that already swipes and takes arrow keys. */
.reviews-head{
  max-width:none;display:flex;align-items:flex-end;
  justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.reviews-head-copy{max-width:62ch}
/* the head is bottom-aligned, so the h2 cannot keep its .5em tail */
.reviews-head h2{margin-bottom:0}

.carousel-nav{display:flex;gap:.5rem}
/* display:flex above would otherwise beat the hidden attribute main.js sets */
.carousel-nav[hidden]{display:none}
.carousel-btn{
  width:2.75rem;height:2.75rem;border-radius:50%;padding:0;
  border:1px solid var(--line);background:transparent;color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease,opacity .2s ease;
}
.carousel-btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:var(--ivory)}
.carousel-btn:disabled{opacity:.32;cursor:default}
.carousel-btn svg{
  width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}

.review-track{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2*var(--gap))/3);
  gap:var(--gap);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.review-track::-webkit-scrollbar{display:none}
/* scrollable region with tabindex, so it needs its own ring - the shared
   :focus-visible rule only covers a,button,summary,details */
.review-track:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.review{
  margin:0;padding:2rem;background:var(--tint);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:1.5rem;scroll-snap-align:start;
}
.review::before{
  content:"\201C";font-family:var(--serif);font-size:3.25rem;line-height:.55;
  color:var(--accent);opacity:.32;
}
/* The real quotes run from six words to fifty. Cards stay equal height, and
   the short ones centre in their share of the space so the row does not read
   as half-empty. */
.review p{
  font-family:var(--serif);font-size:1.125rem;line-height:1.6;
  flex:1;display:flex;flex-direction:column;justify-content:center;
}
.review cite{
  font-style:normal;font-size:.75rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);
}

/* ---------- care + faq ---------- */
.care-list{list-style:none;padding:0;margin:0}
/* the indent is set for the hyphen marker below; an em dash would need ~1.75rem */
.care-list li{padding:.85rem 0 .85rem 1.05rem;border-bottom:1px solid var(--line);position:relative}
.care-list li::before{content:"-";position:absolute;left:0;color:var(--accent)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  padding:1.1rem 0;cursor:pointer;list-style:none;
  font-size:1rem;font-weight:400;display:flex;justify-content:space-between;gap:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 1.2rem;color:var(--ink-soft);font-size:.9375rem}

/* ---------- contact ---------- */
.section-contact{background:var(--ink);color:var(--ivory);text-align:center}
.section-contact .eyebrow,.section-contact .section-lede{color:rgba(251,248,243,.7)}
.contact-inner{max-width:44rem;margin-inline:auto}
.contact-inner .section-lede{margin-inline:auto}
.contact-actions{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
/* the brand brown sits too close to the dark ground, so the CTA inverts here */
.section-contact .btn{--btn-bg:var(--ivory);--btn-fg:var(--ink)}
.section-contact .btn:hover{--btn-bg:#fff;--btn-fg:var(--accent)}
.section-contact .btn-ghost{--btn-bg:transparent;--btn-fg:var(--ivory);border-color:rgba(251,248,243,.45)}
.section-contact .btn-ghost:hover{--btn-bg:transparent;--btn-fg:var(--ivory);border-color:var(--ivory)}

/* ---------- footer ---------- */
.site-footer{background:var(--tint);border-top:1px solid var(--line);padding-top:clamp(2.5rem,5vw,4rem)}
.footer-inner{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.footer-logo{margin:0 0 .75rem;height:72px;width:auto}
.footer-tag{font-family:var(--serif);font-size:1.05rem;color:var(--ink-soft);margin:0}
.footer-nav,.footer-contact{display:flex;flex-direction:column;gap:.6rem}
.footer-nav a,.footer-contact a{text-decoration:none;font-size:.875rem;color:var(--ink-soft);transition:color .2s}
.footer-nav a:hover,.footer-contact a:hover{color:var(--accent)}
.footer-legal{border-top:1px solid var(--line);margin-top:2.5rem;padding-block:1.5rem}
.footer-legal p{margin:0;font-size:.8125rem;color:var(--ink-soft)}

/* ---------- floating WhatsApp ---------- */
.wa-float{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:120;
  width:56px;height:56px;border-radius:50%;
  background:var(--wa);color:#fff;
  display:grid;place-items:center;
  box-shadow:0 6px 22px rgba(0,0,0,.22);
  transition:transform .2s ease;
}
.wa-float:hover{transform:scale(1.06)}
.wa-float svg{width:30px;height:30px}

/* ---------- product lightbox ----------
   main.js builds this out of the card's own photographs at the moment it
   opens, so there is no second copy of them in the markup and nothing is
   fetched for a gallery nobody opens. A modal dialog puts it in the top
   layer, above the sticky header and the floating WhatsApp button, without
   a z-index anywhere. The greys are --ink and --ivory carrying an alpha,
   spelled out because rgba() cannot read a hex custom property. */
.lightbox{
  position:fixed;z-index:300;top:0;right:0;bottom:0;left:0;width:100%;height:100%;
  max-width:100%;max-height:100%;margin:0;padding:clamp(.85rem,2vw,1.5rem);
  border:0;overflow:hidden;background:rgba(42,35,32,.97);color:var(--ivory);
}
.lightbox::backdrop{background:rgba(42,35,32,.97)}
/* Both states are written out rather than left to the browser's own dialog
   stylesheet, and the box is placed by hand rather than by the top layer.
   Where either is missing the gallery landed in the page flow instead of
   over it, which is what put the photographs on top of one another. */
.lightbox:not([open]){display:none}
.lightbox[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:.85rem}
/* the page-wide focus ring is accent brown, which vanishes on this ground */
.lightbox :focus-visible{outline:2px solid var(--ivory);outline-offset:3px}

.lightbox-head{display:flex;align-items:center;gap:1rem}
.lightbox-title{font-family:var(--serif);font-size:1.35rem;margin:0 auto 0 0}
.lightbox-count{
  margin:0;font-size:.72rem;letter-spacing:.16em;color:rgba(251,248,243,.66);
  font-variant-numeric:lining-nums tabular-nums;
}

.lightbox-stage{position:relative;min-height:0}
/* Pinned rather than given height:100%. A percentage limit only resolves
   against a height already settled, and with height:100% the chain stayed
   open and a 900x1200 photograph rendered full size, its foot below the
   fold. overflow-y is spelled out because visible beside an overflow-x of
   auto quietly becomes a second scrollbar. */
.lightbox-track{
  position:absolute;top:0;right:0;bottom:0;left:0;
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.lightbox-track::-webkit-scrollbar{display:none}
.lightbox-slide{position:relative;min-width:0;scroll-snap-align:start}
/* pinned on all four sides with margin:auto centres it, and the box hugs the photograph, so a
   click in the space around it still lands on the ground and closes */
.lightbox-slide img{
  position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
}

.lightbox-btn{
  width:2.75rem;height:2.75rem;border-radius:50%;padding:0;
  border:1px solid rgba(251,248,243,.3);background:transparent;color:var(--ivory);
  display:grid;place-items:center;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.lightbox-btn:hover{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.lightbox-btn svg{
  width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
/* the arrows sit over the photograph so it keeps the full height of the stage.
   z-index because the track is positioned too and comes between them in the
   markup, which would otherwise leave the previous arrow underneath it */
.lightbox-prev,.lightbox-next{
  position:absolute;top:50%;transform:translateY(-50%);z-index:1;
  background:rgba(42,35,32,.6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.lightbox-prev{left:.25rem}
.lightbox-next{right:.25rem}

.lightbox-thumbs{display:flex;justify-content:center;gap:.5rem}
.lightbox-thumb{
  width:3rem;padding:0;border:0;background:none;cursor:pointer;
  opacity:.45;transition:opacity .2s ease;
}
.lightbox-thumb img{aspect-ratio:3/4;object-fit:cover;width:100%;border-radius:2px}
.lightbox-thumb:hover{opacity:.8}
.lightbox-thumb[aria-current="true"]{opacity:1}
.lightbox-thumb[aria-current="true"] img{box-shadow:0 0 0 1px var(--ivory)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .craft-grid,.product-grid{grid-template-columns:repeat(2,1fr)}
  .product-grid{--gap:1.25rem}
  .review-track{grid-auto-columns:calc((100% - var(--gap))/2)}
  .footer-inner{grid-template-columns:1fr 1fr}
}
/* nav collapses earlier than the rest of the layout - five links plus a
   button crowd the header well before the grids need to reflow */
@media (max-width:900px){
  .nav,.header-inner .btn-sm{display:none}
  .nav-toggle{display:flex}
  .mobile-nav[hidden]{display:none}
  .mobile-nav:not([hidden]){display:flex}
}

@media (max-width:760px){
  .logo-mark{height:48px}
  .header-inner{padding-block:.6rem}
  .footer-logo{height:60px}
  .two-col{grid-template-columns:1fr}
  /* a sliver of the next card showing is what says "this scrolls" */
  .review-track{grid-auto-columns:86%}
  /* three items, so 2-up would strand an orphan in the left cell */
  .strip-inner{grid-template-columns:1fr;gap:1.25rem;padding-block:1.5rem}
  /* stack: copy first so the tagline is the first thing read, image below */
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-copy{justify-self:stretch;width:auto;padding-bottom:0}
  .hero-copy .lede{max-width:none}
  .hero-img{max-height:none;aspect-ratio:1/1;margin-top:2rem}
  .footer-inner{grid-template-columns:1fr;gap:2rem}
  /* keep the thumb clear of the floating button */
  .site-footer{padding-bottom:5rem}
  /* a swipe does this on a touch screen, and the arrows crowd the photograph */
  .lightbox-prev,.lightbox-next{display:none}
  .lightbox-title{font-size:1.15rem}
}
@media (max-width:480px){
  .craft-grid,.product-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}