/* divine dibs — shared styles (home + product template)
   Ported 1:1 from the Claude Design prototype (project/Divine Dibs.dc.html,
   project/Product.dc.html). Values that repeat identically across every
   product bubble / detail row are factored into classes below; anything
   unique to one piece (aspect ratio, blob radius, rotation, grid position,
   scroll speed) stays inline on that element, same as the source. */

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#7ba19f}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-family:'Newsreader',Georgia,serif}
a{color:inherit;text-decoration:none}
::selection{background:#aed277;color:#17251b}

@keyframes mote{0%{transform:translate3d(0,20px,0);opacity:0}18%{opacity:.75}100%{transform:translate3d(74px,-230px,0);opacity:0}}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

.page-root{position:relative;min-height:100vh;background:#7ba19f;font-family:'Newsreader',Georgia,serif}

/* fixed planes */
.bg-layer{position:fixed;inset:0;z-index:0;overflow:hidden}
.bg-vignette{position:absolute;inset:0;background:radial-gradient(130% 78% at 50% 12%,rgba(255,255,250,.16) 0%,rgba(255,255,248,.02) 46%,rgba(58,84,52,.14) 100%)}
.life-layer{position:fixed;inset:0;pointer-events:none}
.life-layer--back{z-index:1}
.life-layer--front{z-index:6}

/* nav / brand */
.top-bar{display:flex;justify-content:space-between;align-items:baseline;gap:24px;border-bottom:1px solid #121210;padding-bottom:13px}
.brand-line{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase}
.top-nav{display:flex;gap:clamp(18px,2.4vw,34px);font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase}
.top-nav a:hover,.brand-line a:hover{color:#5f7d3c}

/* wordmark + measured i-dots */
.wordmark{margin:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.03em}
.wordmark--hero{font-size:clamp(58px,13.2vw,246px);line-height:.82}
.wordmark--footer{font-size:clamp(30px,3.4vw,52px);line-height:.9}
.glyph{position:relative;display:inline-block}
/* Not a placeholder: these are the Instrument Serif dot's real measurements,
   the same numbers dots.js arrives at when it can measure the face itself.
   They are the default so a browser that cannot measure still puts the dots
   on their stems — iOS Safari will hand a canvas the fallback serif rather
   than the webfont, and the old default (half a glyph across, flush with the
   top of the line box) left the dots small and adrift above the letters.
   The drop from the top of the line box follows the line-height, so the
   footer's wordmark needs its own. */
.dot{position:absolute;left:.0623em;top:.0873em;width:.1091em;height:.1091em;border-radius:50%}
.wordmark--footer .dot{top:.1273em}
.dot--ink{background:#121210}
.dot--accent{background:#aed277}

.ipa{font-family:'IBM Plex Mono',monospace;font-size:clamp(14px,1.4vw,20px);letter-spacing:.03em;color:#4c4a42;white-space:nowrap;line-height:1.2}

.rule{height:1px;background:#121210}
.rule--soft{height:1px;background:#c9c6bb;margin-top:-7px}

/* hero senses */
.senses{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:clamp(24px,3.4vw,60px);max-width:78ch;padding-top:clamp(6px,.9vw,14px)}
.sense{display:flex;gap:14px}
.sense-num{font-family:'IBM Plex Mono',monospace;font-size:12px;padding-top:7px;color:#8b877c}
.sense-text{margin:0;font-size:clamp(17px,1.36vw,22px);line-height:1.36;font-weight:300;text-wrap:pretty}
.sense-text em{color:#4c4a42}

.origin-block{display:flex;flex-direction:column;gap:clamp(26px,3.6vw,54px);border-top:1px solid #d3d0c5;padding-top:15px}
.origin-line{margin:0;max-width:58ch;font-size:clamp(14px,1.05vw,16.5px);line-height:1.5;font-weight:300;color:#4c4a42;text-wrap:pretty}
.origin-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8b877c}
/* The three lines that introduce the garden: heading, body, kicker.

   It takes the full width of the origin block and centres inside it rather
   than shrinking to its own content and relying on align-self — the block
   turns into a row on narrow screens, where align-self would centre it
   vertically and let the text drift off to one side. This stays centred at
   every width. The top margin is set against the origin block's own gap so
   the blob stands well clear of the definition and reads as its own piece of
   text rather than a continuation of it. */
.garden-intro{display:flex;flex-direction:column;width:100%;align-items:center;text-align:center;
  gap:clamp(10px,1.1vw,16px);
  margin:calc(var(--blob-gap) - clamp(26px,3.6vw,54px)) 0 0}
/* The cue lettering exactly as the design file set it: mono, 11px, wide caps,
   with a 12px gap to the arrow, which takes the same styling. */
.garden-intro-heading{margin:0;display:flex;align-items:center;gap:12px;
  font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:#121210;line-height:1.2}
/* The display line of the block. */
.garden-intro-body{margin:clamp(16px,1.8vw,30px) 0 0;
  font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(24px,2.88vw,46px);line-height:1.06;letter-spacing:-.016em;color:#1b2a18;
  max-width:26ch;text-wrap:balance}
/* The season line: the eyebrow it has always been, set well below the
   sentence and close above the torn edge. */
.garden-intro-kicker{margin-top:calc(var(--kicker-gap) - clamp(10px,1.1vw,16px));
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:#38512c;text-shadow:0 1px 12px rgba(252,251,240,.9)}
.arrow{display:inline-block;animation:nudge 2.6s ease-in-out infinite}

/* The four gaps below are measured in vh, not vw, because what they have to
   achieve is a viewport-height promise: the torn edge — and with it a strip of
   the moving background — has to be in view when the page opens, without
   scrolling. The type stays vw-driven; only the air between it breathes with
   the window. */
.hero{position:relative;z-index:4;
  --hero-gap:clamp(18px,2.6vh,52px);      /* between the hero's own three parts */
  --blob-gap:clamp(40px,5.9vh,104px);     /* definition ↓ to the garden intro   */
  --kicker-gap:clamp(48px,6.4vh,96px);    /* sentence ↓ to the season line      */
  --kicker-below:clamp(18px,2.4vh,40px);  /* season line ↓ to the torn edge     */
  min-height:62vh;display:flex;flex-direction:column;justify-content:space-between;
  gap:var(--hero-gap);
  padding:clamp(16px,1.8vw,28px) clamp(24px,4vw,64px) var(--kicker-below);
  background:#faf9f4;color:#121210}

/* torn paper edges — do not regenerate by hand, copy the polygon */
.torn-bottom{clip-path:polygon(0 0,100% 0,100.00% calc(100% - 7.1px),97.83% calc(100% - 8.4px),95.65% calc(100% - 9.7px),93.48% calc(100% - 6.8px),91.30% calc(100% - 8.1px),89.13% calc(100% - 8.6px),86.96% calc(100% - 7.5px),84.78% calc(100% - 7.6px),82.61% calc(100% - 8.7px),80.43% calc(100% - 8.9px),78.26% calc(100% - 9.3px),76.09% calc(100% - 3.9px),73.91% calc(100% - 5.2px),71.74% calc(100% - 5.4px),69.57% calc(100% - 5.9px),67.39% calc(100% - 3.2px),65.22% calc(100% - 2.2px),63.04% calc(100% - 2.0px),60.87% calc(100% - 9.2px),58.70% calc(100% - 3.3px),56.52% calc(100% - 2.2px),54.35% calc(100% - 5.0px),52.17% calc(100% - 8.4px),50.00% calc(100% - 8.9px),47.83% calc(100% - 8.3px),45.65% calc(100% - 8.0px),43.48% calc(100% - 9.5px),41.30% calc(100% - 9.8px),39.13% calc(100% - 9.8px),36.96% calc(100% - 10.1px),34.78% calc(100% - 3.9px),32.61% calc(100% - 10.0px),30.43% calc(100% - 3.0px),28.26% calc(100% - 2.2px),26.09% calc(100% - 9.0px),23.91% calc(100% - 3.4px),21.74% calc(100% - 6.7px),19.57% calc(100% - 10.7px),17.39% calc(100% - 10.3px),15.22% calc(100% - 3.5px),13.04% calc(100% - 8.7px),10.87% calc(100% - 9.8px),8.70% calc(100% - 6.2px),6.52% calc(100% - 7.1px),4.35% calc(100% - 4.2px),2.17% calc(100% - 3.8px),0.00% calc(100% - 8.2px))}
.torn-top{clip-path:polygon(0.00% 6.9px,2.17% 9.6px,4.35% 2.1px,6.52% 4.1px,8.70% 5.4px,10.87% 10.2px,13.04% 4.0px,15.22% 2.9px,17.39% 3.7px,19.57% 10.2px,21.74% 5.2px,23.91% 5.5px,26.09% 7.2px,28.26% 10.8px,30.43% 5.0px,32.61% 10.1px,34.78% 7.6px,36.96% 9.0px,39.13% 10.9px,41.30% 5.3px,43.48% 9.4px,45.65% 9.5px,47.83% 9.8px,50.00% 7.5px,52.17% 8.7px,54.35% 8.0px,56.52% 9.0px,58.70% 8.2px,60.87% 10.4px,63.04% 6.4px,65.22% 9.6px,67.39% 9.2px,69.57% 3.3px,71.74% 9.0px,73.91% 4.1px,76.09% 7.7px,78.26% 10.9px,80.43% 3.3px,82.61% 10.8px,84.78% 8.0px,86.96% 9.1px,89.13% 6.8px,91.30% 5.1px,93.48% 4.9px,95.65% 8.8px,97.83% 3.5px,100.00% 2.5px,100% 100%,0 100%)}

/* collection grid */
/* --heading-space stands in for the headline block that used to sit between
   the torn edge and the first bubbles. It has moved into the hero, and this
   holds the garden exactly where it was: measured against the old layout, the
   first bubble lands within a pixel or two of its former position at every
   width from 720 to 1920. */
.collection{position:relative;z-index:5;--heading-space:clamp(223px,calc(58px + 19vw),401px);
  margin-top:-13vh;
  padding:calc(max(0px,13vh - clamp(98px,8.6vw,166px)) + var(--heading-space)) clamp(20px,3.4vw,64px) clamp(80px,10vw,180px)}

/* --col/--span/--row (and --m* mobile counterparts) are set per figure inline;
   the class just wires them into the grid so one grid works at both sizes */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(10px,1.4vw,26px);row-gap:clamp(104px,11vw,224px)}
.item{margin:0;will-change:transform;grid-column:var(--col) / span var(--span);grid-row:var(--row)}
.item-tilt{transform:rotate(var(--rot,0deg)) translateY(var(--ty,0px))}

/* the glass bubble — five stacked layers over the photo */
.bubble{display:block;position:relative;width:100%;background:#f6f4ea;overflow:hidden;transition:transform .4s ease}
.bubble:hover{transform:scale(1.022)}
/* Every layer carries the blob shape itself rather than relying on the
   bubble's overflow to cut it. Safari on iOS drops that rounded clip for
   layers that blend or filter, which left the opal sheet showing as a
   translucent rectangle around the bubble. */
.bubble-photo{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.bubble-shade,.bubble-rim,.bubble-opal{position:absolute;inset:0;border-radius:inherit}
.bubble-shade{box-shadow:inset -18px -22px 44px rgba(12,32,22,.4),inset 14px 16px 34px rgba(255,255,255,.28),inset 0 0 7px rgba(120,250,240,.62),inset 0 0 14px rgba(255,150,225,.42),inset 0 0 22px rgba(255,220,140,.28),inset 0 0 32px rgba(150,190,255,.2)}
.bubble-rim{mix-blend-mode:screen;opacity:.8;background:conic-gradient(from 205deg,#79f2ff,#a98cff 13%,#ff8ed8 27%,#ffd07a 41%,#b9f68b 55%,#6ff0da 69%,#8fa9ff 84%,#79f2ff 100%);-webkit-mask:radial-gradient(closest-side,rgba(0,0,0,0) 80%,rgba(0,0,0,.5) 90%,#000 97%,#000 100%);mask:radial-gradient(closest-side,rgba(0,0,0,0) 80%,rgba(0,0,0,.5) 90%,#000 97%,#000 100%)}
.bubble-opal{mix-blend-mode:overlay;opacity:.3;background:linear-gradient(128deg,rgba(190,255,245,.6) 0%,rgba(150,255,235,.45) 22%,rgba(255,185,235,.4) 45%,rgba(255,240,170,.36) 66%,rgba(160,210,255,.6) 100%)}
.bubble-spec{position:absolute;border-radius:50%}
.bubble-spec--a{left:10%;top:8%;width:40%;height:28%;background:radial-gradient(58% 58% at 42% 36%,rgba(255,255,255,.78),rgba(255,255,255,0) 72%);filter:blur(4px)}
.bubble-spec--b{right:12%;bottom:11%;width:22%;height:13%;background:radial-gradient(60% 60% at 50% 50%,rgba(255,255,255,.45),rgba(255,255,255,0) 72%);filter:blur(5px)}

.caption{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin-top:14px;padding:0 4%}
.caption--tight{margin-top:13px}
.caption-name{font-size:15.5px;color:#22301c;text-shadow:0 1px 10px rgba(252,251,240,.92)}
.caption-name--note{font-family:'Newsreader',serif;font-style:italic}
.caption-price{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em;color:#4a6338;text-shadow:0 1px 10px rgba(252,251,240,.92);white-space:nowrap}
.caption-note{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#4a6338;text-shadow:0 1px 10px rgba(252,251,240,.92);white-space:nowrap}

.closing{display:flex;justify-content:center;padding-top:clamp(90px,12vw,220px)}
.closing p{margin:0;max-width:20ch;text-align:center;font-family:'Instrument Serif',Georgia,serif;font-size:clamp(26px,3.6vw,58px);line-height:1.06;color:#faf9f4;text-shadow:0 2px 22px rgba(24,40,22,.55)}

.mote{position:absolute;border-radius:50%;animation-name:mote;animation-timing-function:linear;animation-iteration-count:infinite}

/* footer */
.site-footer{position:relative;z-index:5;background:#faf9f4;color:#121210;padding:clamp(64px,8vw,120px) clamp(24px,4vw,64px) clamp(30px,3vw,44px)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(28px,4vw,72px);align-items:start}
.footer-brand{display:flex;flex-direction:column;gap:12px}
.footer-tagline{font-family:'Newsreader',serif;font-style:italic;font-size:clamp(15px,1.2vw,18px);line-height:1.42;color:#4c4a42;max-width:30ch;text-wrap:pretty}
.footer-col{display:flex;flex-direction:column;gap:9px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.05em}
.footer-col-title{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8b877c;margin-bottom:5px}
.footer-col a:hover{color:#5f7d3c}
.footer-newsletter-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8b877c}
.footer-newsletter{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid #121210;padding-bottom:9px}
.footer-newsletter-email{font-family:'Newsreader',serif;font-style:italic;font-size:16px;color:#8b877c}
.footer-send{margin-left:auto;white-space:nowrap;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(46px,6vw,88px);border-top:1px solid #ddd9cd;padding-top:14px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#8b877c}

/* product page */
.product-hero{position:relative;z-index:2;min-height:94vh;display:flex;flex-direction:column;gap:clamp(26px,4vw,64px);padding:clamp(24px,2.6vw,40px) clamp(24px,4vw,64px) clamp(40px,6vw,92px)}
.product-topbar{display:flex;justify-content:space-between;align-items:baseline;gap:24px;background:rgba(250,249,244,.9);border-bottom:1px solid #121210;padding:11px clamp(14px,1.6vw,22px) 10px;margin:0 clamp(-14px,-1.6vw,-22px);color:#121210}
.product-topbar a{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase}
.product-topbar a:hover{color:#aed277}
.product-nav{display:flex;gap:clamp(18px,2.4vw,34px);font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase}
.product-nav a:hover{color:#aed277}
.product-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,2.4vw,34px)}
.product-meta-row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;width:100%;max-width:clamp(320px,64vw,1020px);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#121210;will-change:transform}
.product-meta-row span{background:rgba(250,249,244,.9);padding:6px 11px;white-space:nowrap}
/* --shape-ratio and --shape-radius are set by product.js from the garden slot
   the visitor clicked; the fallbacks are this page's own designed blob, so a
   piece reached any other way looks exactly as it always has.

   The width is held to whatever keeps the photo about 680px tall — the height
   the designed 1.5 blob has at its widest — so a tall slot shape does not turn
   the photograph into a column. */
.product-photo-figure{margin:0;width:100%;
  max-width:min(clamp(320px,64vw,1020px),calc(var(--shape-ratio,1.5) * 680px));
  will-change:transform}
.product-photo-tilt{transform:rotate(-1.4deg)}
.product-photo-frame{position:relative;width:100%;aspect-ratio:var(--shape-ratio,1.5);
  background:#f6f4ea;border-radius:var(--shape-radius,62% 38% 45% 55% / 52% 60% 40% 48%);
  overflow:hidden;filter:drop-shadow(0 30px 44px rgba(12,24,12,.5))}
/* Filled at cover — the least magnification that still fills the blob — and
   panned by --pan-x/--pan-y when the photograph is a different shape from it. */
.product-photo{width:100%;height:100%;object-fit:cover;display:block;
  object-position:var(--pan-x,50%) var(--pan-y,50%);transition:object-position .18s ease-out}
.product-photo-frame--pannable{cursor:move}
.product-photo-hint{display:block;margin-top:12px;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#22301c;
  text-shadow:0 1px 10px rgba(252,251,240,.92)}

@media (prefers-reduced-motion:reduce){
  .product-photo{transition:none}
}
/* ---- the photograph, full size -------------------------------------------
   The blob is a crop, and on a touch screen there is no hover to slide it
   with, so the whole photograph has to be reachable some other way. Tapping
   it opens this: the full frame, uncropped, over everything else. */
.lightbox{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  /* Solid: a translucent scrim left the nav and the meta row ghosting through
     behind the picture, which is the one thing meant to be looked at. */
  background:#0b100a;opacity:0;transition:opacity .22s ease;
  /* keeps the picture clear of a phone's rounded corners and home bar */
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right))
          max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.lightbox--open{opacity:1}
/* Fills the overlay rather than shrink-wrapping the fitted picture: the
   magnified photograph has to be able to grow into the whole screen, and a
   holder the size of the small version would clip it back down to nothing. */
.lightbox-media{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  overflow:hidden;touch-action:none}
/* Contain, not cover: the point of the view is that nothing is cut off. */
.lightbox-photo{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;
  transform:scale(var(--zoom,1)) translate(var(--zx,0px),var(--zy,0px));
  transform-origin:center;transition:transform .24s ease;cursor:zoom-in;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.lightbox-photo--zoomed{cursor:grab;transition:none}
.lightbox video.lightbox-photo{cursor:default}
.lightbox-close{position:absolute;top:max(12px,env(safe-area-inset-top));
  right:max(12px,env(safe-area-inset-right));z-index:2;
  background:rgba(250,249,244,.92);color:#121210;border:0;cursor:pointer;
  padding:10px 15px;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase}
.lightbox-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:46px;height:46px;border:0;cursor:pointer;background:rgba(250,249,244,.92);
  color:#121210;font-size:19px;line-height:1;border-radius:50%}
.lightbox-arrow--prev{left:max(10px,env(safe-area-inset-left))}
.lightbox-arrow--next{right:max(10px,env(safe-area-inset-right))}
.lightbox-hint{position:absolute;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));
  text-align:center;pointer-events:none;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(250,249,244,.82)}
/* The blob itself, once it is known to open something. */
.product-photo-frame--openable{cursor:zoom-in}
@media (prefers-reduced-motion:reduce){
  .lightbox,.lightbox-photo{transition:none}
}

.product-gallery-thumbs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.product-gallery-thumb{position:relative;width:56px;height:56px;flex:none;border-radius:50%;overflow:hidden;padding:0;border:2px solid transparent;background:#f6f4ea;cursor:pointer;transition:border-color .2s ease}
.product-gallery-thumb:hover{border-color:#d3d0c5}
.product-gallery-thumb--active{border-color:#aed277}
.product-gallery-thumb img,.product-gallery-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.product-gallery-thumb-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(18,18,16,.3);color:#faf9f4;font-size:13px;pointer-events:none}
.product-scroll-cue{display:flex;align-items:center;gap:12px;background:rgba(250,249,244,.9);padding:7px 14px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#121210}

.details{position:relative;z-index:5;background:#faf9f4;color:#121210;padding:clamp(56px,7vw,108px) clamp(24px,4vw,64px) clamp(30px,3vw,44px)}
.details-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,44px);row-gap:clamp(40px,5vw,80px)}
.details-left{grid-column:1 / span 7;display:flex;flex-direction:column;gap:clamp(14px,1.6vw,24px)}
.details-left--full{grid-column:1 / span 12}
.details-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#8b877c}
.details-title{margin:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(40px,5.8vw,104px);line-height:.9;letter-spacing:-.022em}
.details-mood{margin:0;font-family:'Newsreader',serif;font-style:italic;font-size:clamp(17px,1.6vw,25px);line-height:1.34;color:#4c4a42;max-width:34ch;text-wrap:pretty}
.details-rule{height:1px;background:#121210;margin-top:clamp(4px,1vw,12px)}
.details-body{margin:0;font-size:clamp(16px,1.24vw,20px);line-height:1.5;font-weight:300;max-width:60ch;text-wrap:pretty}
.details-making{display:flex;flex-direction:column;gap:10px;margin-top:clamp(14px,2vw,30px);border-top:1px solid #d3d0c5;padding-top:clamp(14px,1.8vw,26px)}
.details-making-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#8b877c}
.details-making p{margin:0;font-size:clamp(15px,1.14vw,18px);line-height:1.55;font-weight:300;color:#3c3a33;max-width:62ch;text-wrap:pretty}
.details-note-line{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#4a6338}

.details-right{grid-column:9 / span 4;display:flex;flex-direction:column;gap:clamp(16px,1.8vw,26px)}
.price-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1px solid #121210;padding-bottom:12px}
.price{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(34px,3.6vw,56px);line-height:.9}
.price-note{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8b877c}
.buy-btn{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#121210;color:#faf9f4;padding:18px 20px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;transition:background .2s ease}
.buy-btn:hover{background:#3a5a34;color:#faf9f4}
.one-of-one{font-family:'Newsreader',serif;font-style:italic;font-size:15px;color:#4c4a42}

/* checkout */
.checkout-label{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#8b877c;margin-bottom:5px}
[data-role="checkout"] .field{margin-bottom:13px}
[data-role="checkout"] input,[data-role="checkout"] textarea{width:100%;font:inherit;font-size:15px;
  font-weight:300;padding:10px 12px;background:#fff;color:#121210;border:1px solid #d3d0c5;border-radius:0}
[data-role="checkout"] textarea{resize:vertical;line-height:1.45}
[data-role="checkout"] input:focus,[data-role="checkout"] textarea:focus{outline:2px solid #aed277;
  outline-offset:-2px;border-color:#aed277}
.pay-buttons{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.pay-buttons .buy-btn{width:100%;border:0;cursor:pointer;font-family:'IBM Plex Mono',monospace}
.pay-buttons .buy-btn:disabled{cursor:default}
.checkout-status{margin:12px 0 0;font-size:15px;line-height:1.45;font-weight:300;color:#4c4a42}
.sold-out{margin:0;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:#8a2b1e;border:1px solid #c08a80;padding:14px;text-align:center}
.detail-rows{display:flex;flex-direction:column;margin-top:clamp(8px,1.2vw,18px)}
.detail-row{display:flex;flex-direction:column;gap:4px;border-top:1px solid #d3d0c5;padding:12px 0}
.detail-row:last-child{border-bottom:1px solid #d3d0c5}
.detail-row-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8b877c}
.detail-row-value{font-size:15.5px;font-weight:300}

.details-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(46px,6vw,88px);border-top:1px solid #ddd9cd;padding-top:14px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#8b877c}
.details-bottom a:hover{color:#121210}

/* ===================================================================
   Mobile — home page (ported from Divine Dibs Mobile.dc.html)
   One page, one URL: the grid below reuses the desktop DOM and just
   points grid-column/row/tilt at the --m* values set per figure, so
   there's nothing to keep in sync between two files. Meta/mono text
   moves to Archivo Narrow on this breakpoint only, per the client's
   request (kept off the product page, which has no mobile design).
   =================================================================== */
@media (max-width:720px){
  .top-bar{flex-wrap:wrap;gap:10px 18px}
  .brand-line,.top-nav,.ipa,.sense-num,.origin-label,
  .garden-intro-heading,.garden-intro-kicker,.caption-price,.caption-note,
  .footer-col,.footer-col-title,.footer-newsletter-label,.footer-send,.footer-bottom{
    font-family:'Archivo Narrow','Helvetica Neue',sans-serif
  }

  .hero{--hero-gap:clamp(20px,2.8vh,40px);--blob-gap:clamp(40px,5.6vh,72px);
    --kicker-gap:clamp(40px,5.4vh,64px);--kicker-below:clamp(16px,2.2vh,32px);
    padding:clamp(18px,2.6vw,40px) clamp(16px,4vw,64px) var(--kicker-below)}
  .wordmark--hero{font-size:clamp(52px,17vw,140px)}
  .ipa{font-size:clamp(17px,1.7vw,24px)}

  .origin-block{flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between}

  .collection{padding-left:clamp(16px,4vw,28px);padding-right:clamp(16px,4vw,28px);
    --heading-space:165px}

  /* scattered one-per-row grid: --m* values set per figure in the markup */
  .grid{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:8px;row-gap:clamp(60px,16vw,104px)}
  .item{grid-column:var(--mcol) / span var(--mspan);grid-row:var(--mrow)}
  .item-tilt{transform:rotate(var(--mrot,0deg)) translateY(var(--mty,0px))}
}

/* ===================================================================
   Mobile — product page (no client-designed mobile variant exists;
   this is baseline responsive hygiene so pages reached from the
   mobile garden don't land on an unusably narrow split layout)
   =================================================================== */
@media (max-width:720px){
  .product-topbar{flex-wrap:wrap;gap:8px 16px}
  .details-grid{display:flex;flex-direction:column}
  .details-left,.details-left--full{grid-column:auto}
  .details-right{grid-column:auto}
}

[hidden]{display:none !important}