/* Wreath Club — wreath-club.com
   Palette sampled from the logo pack: cream paper, sage linework, forest wordmark,
   gold berries. The site is the gallery wall — quiet and warm — because the
   wreaths themselves are loud. All colour on this page comes from the products. */

:root{
  --paper:#f2ead8;
  --paper-2:#eae0c9;
  --paper-3:#ded2b6;
  --sage:#7c8a5f;
  --forest:#1e4230;
  --forest-2:#2d5a42;
  --gold:#a98b54;
  --ink:#2a2e26;
  --ink-soft:#5c6152;
  --rule:#cfc3a4;
  --shadow:rgba(42,46,38,.14);
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
  --sans:"Helvetica Neue",Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --wrap:1180px;
  /* ── the announcement bar's breathing room.
     The space under the bar is not just this gap: the heading below carries its
     own padding, and the two stack. So the distance a reader actually sees,
     from the bottom border of the bar down to "The Collection", is
     --notice-gap + --gallery-top. The bar's top margin is calculated from both
     so the space above it matches the space below it exactly, and keeps
     matching if either value is ever changed. Nothing here depends on how tall
     the bar is, so a notice that wraps onto three lines stays centred between
     the season wheel and the heading just as a one-line notice does. */
  --notice-gap:30px;
  --gallery-top:46px;
  /* The words are not at the top of their box. "The Collection" is set at
     line-height 1.65, and a line box puts half of that leading above the cap
     height — 12px of empty space at desktop size, less on a phone, because the
     size is fluid. Measured to the heading's box the spacing was already even;
     measured to the words themselves the lower gap looked 7-9px bigger, which
     is the difference the eye actually sees. These two let the top margin be
     calculated from the same numbers rather than nudged by hand, so it stays
     right at every size the clamp produces. */
  --gallery-h2:clamp(1.7rem,4vw,2.3rem);
  --gallery-h2-line:1.65;
  /* Not (line-height - 1): the painted text is the font's ascent plus descent,
     which for Georgia is about 1.136em, not a full em. Using 1 here overshot by
     3px at desktop size — measured, not guessed. A fallback serif differs by a
     hair, which is a pixel at most. */
  --gallery-h2-cap:1.136;
  --gallery-h2-lead:calc(var(--gallery-h2) * (var(--gallery-h2-line) - var(--gallery-h2-cap)) / 2);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--forest)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ── botanical rule: the small divider from the logo, reused as a section mark */
.leafrule{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto;color:var(--sage)}
.leafrule:before,.leafrule:after{content:"";height:1px;width:min(90px,14vw);background:var(--rule)}
.leafrule svg{width:26px;height:26px;opacity:.85}

/* ── nav */
.nav{
  position:sticky;top:0;z-index:40;background:rgba(242,234,216,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);
}
.nav-in{display:flex;align-items:center;gap:22px;padding:14px 24px;max-width:var(--wrap);margin:0 auto}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--forest);flex:none}
.brand svg{width:34px;height:34px}
/* An uploaded top-bar mark sits exactly where the drawn one did. */
.brand .brand-pic{width:34px;height:34px;object-fit:contain;display:block}
.brand span{font-family:var(--serif);font-size:1.32rem;letter-spacing:.01em;line-height:1}
.nav-links{margin-left:auto;display:flex;gap:26px;align-items:center}
.nav-links a{
  text-decoration:none;color:var(--ink-soft);font-size:.83rem;
  text-transform:uppercase;letter-spacing:.13em;padding:4px 0;
  border-bottom:1px solid transparent;transition:.16s;
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--forest);border-bottom-color:var(--sage)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--rule);
  border-radius:3px;color:var(--forest);font-size:1.2rem;padding:5px 11px;cursor:pointer}
/* The bar's single row — brand, five links, Sign in, Cart — is wider than the
   screen at anything under about 940px, and nothing in it was allowed to wrap.
   So the Cart simply ran out past the right edge: past where the bar's own
   background and bottom border stop, which is a border that looks cut short and
   does not come around the button. Belt and braces at every width: */
.nav-in{flex-wrap:wrap;row-gap:10px}

@media(max-width:1199px){
  .nav-toggle{display:none}
  /* 6px vertical instead of 8px: the ≡ it replaces was 4px shorter, and without
     this the whole page below the bar shifts down by those 4px. */
  .nav-in .cart-btn{margin:0;padding:6px 12px}
  .nav-in .acct-btn{margin:0 10px 0 auto}
.acct-btn.in{background:var(--gold,#a98b54);color:#1e4230}
  /* The links used to be a dropdown behind a ≡ that is not drawn, so under
     760px there were no links at all and no way to reach any. They sit on their
     own line under the brand instead: always there, never off the edge, and the
     same five a wide screen gets. */
  .nav-links{
    display:flex;position:static;order:9;flex:1 0 100%;
    margin-left:0;justify-content:center;flex-wrap:wrap;
    gap:6px 20px;padding:2px 0 0;background:none;border-bottom:0;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:3px 0;width:auto;border-bottom:1px solid transparent;
    font-size:.74rem;letter-spacing:.1em;white-space:nowrap}
}

/* On a narrow phone the brand, Sign in and Cart together are a few pixels wider
   than the screen, and the Cart was taking a whole line to itself under Sign in.
   Buying those pixels back is cheaper than spending a line: tighter gaps, less
   padding on the buttons, a slightly smaller shop name. The icon is left at
   whatever the size dial says — that is a deliberate setting, not slack. */
@media(max-width:560px){
  .nav-in{gap:10px;padding:10px 14px}
  .brand{gap:8px}
  .brand span{font-size:1.08rem}
  .nav-in .cart-btn{padding:5px 9px;letter-spacing:.09em;gap:6px}
  .nav-in .acct-btn{margin:0 4px 0 auto}
  .nav-links{gap:5px 14px;padding-top:0}
  .nav-links a{font-size:.68rem;letter-spacing:.08em}
}

/* Smaller again for the narrowest phones. On a 320px screen with the icon dial
   turned up the row genuinely cannot hold everything, so the Cart wraps — and
   justify-content puts it on the right, under Sign in, where it reads as
   deliberate rather than stranded on the left. On the line above, the auto
   margin absorbs the free space, so this does nothing there. */
@media(max-width:400px){
  .nav-in{gap:8px;padding:9px 12px;justify-content:flex-end}
  .brand{margin-right:auto}
  .brand span{font-size:.96rem}
  .nav-in .cart-btn{padding:5px 8px;letter-spacing:.07em}
}

/* ── hero */
.hero{padding:64px 0 52px;text-align:center;position:relative;overflow:hidden}
.hero-mark{width:min(230px,52vw);margin:0 auto 8px}
.hero-mark img{width:100%;height:auto}
.hero h1{
  font-family:var(--serif);font-weight:400;color:var(--forest);
  font-size:clamp(2.5rem,7vw,4.4rem);line-height:1.02;margin:0 0 18px;letter-spacing:-.015em;
}
.hero h1 em{display:block;font-style:italic;color:var(--sage)}
.hero p.lede{
  max-width:34rem;margin:0 auto 30px;color:var(--ink-soft);font-size:1.1rem;
}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.btn{
  font-family:var(--sans);font-size:.82rem;text-transform:uppercase;letter-spacing:.13em;
  padding:14px 28px;border-radius:2px;text-decoration:none;cursor:pointer;
  border:1px solid var(--forest);background:var(--forest);color:var(--paper);
  transition:.16s;display:inline-block;
}
.btn:hover{background:var(--forest-2);border-color:var(--forest-2)}
.btn.ghost{background:transparent;color:var(--forest)}
.btn.ghost:hover{background:var(--forest);color:var(--paper)}

/* ── season band: the signature element.
   The collection genuinely spans the year, and a wreath is the thing that marks
   the season on a door — so the filter IS the organising idea, not decoration. */
.seasons{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--paper-2);position:sticky;top:var(--navh,63px);z-index:30}
/* The strip used to be capped at the page width and scrolled sideways with the
   scrollbar hidden. With six occasions that was invisible; with nine it cut
   Easter and Halloween off past the right edge and left no way to reach them —
   a hidden scrollbar is fine on a phone, where a finger scrolls, and a dead end
   on a desktop, where nothing does. There is also a wide empty band either side
   of the cap doing nothing.

   So: on a wide screen it uses the room it has and wraps onto a second line
   rather than clipping. On a narrow one it stays a single scrolling row, which
   is the right gesture there, and the scrollbar is left visible. */
.seasons-in{display:flex;gap:0;max-width:var(--wrap);margin:0 auto}
@media (min-width:861px){
  .seasons-in{max-width:min(100% - 24px, 1560px);flex-wrap:wrap;
    justify-content:center;overflow-x:visible}
  /* Wrapped rows need their own separator, or the second line floats loose. */
  .seasons-in .season{border-top:1px solid transparent}
}
@media (max-width:860px){
  .seasons-in{overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:thin;-webkit-overflow-scrolling:touch}
}
.season{
  flex:1 0 auto;min-width:132px;background:none;border:0;cursor:pointer;
  padding:15px 20px 13px;font-family:var(--sans);color:var(--ink-soft);
  border-right:1px solid var(--rule);border-bottom:3px solid transparent;
  transition:.16s;text-align:center;
}
.season:first-child{border-left:1px solid var(--rule)}
.season b{display:block;font-weight:500;font-size:.9rem;letter-spacing:.03em;color:inherit}
.season i{font-style:normal;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);opacity:.85}
.season:hover{background:var(--paper-3);color:var(--forest)}
.season[aria-pressed="true"]{background:var(--paper);border-bottom-color:var(--sage);color:var(--forest)}
.season[aria-pressed="true"] b{font-weight:600}

/* ── gallery */
.gallery-head{padding:var(--gallery-top) 0 10px;text-align:center}
.gallery-head h2{font-family:var(--serif);font-weight:400;color:var(--forest);
  font-size:var(--gallery-h2);line-height:var(--gallery-h2-line);margin:0 0 8px}
.gallery-head p{color:var(--ink-soft);margin:0 0 24px;font-size:.98rem}
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:26px;padding:14px 0 70px;
}
.card{
  background:var(--paper-2);border:1px solid var(--rule);border-radius:2px;
  overflow:hidden;cursor:zoom-in;position:relative;
  transition:transform .22s ease,box-shadow .22s ease;
}
.card:hover,.card:focus-visible{transform:translateY(-3px);box-shadow:0 14px 34px -14px var(--shadow);outline:none}
.card:focus-visible{outline:2px solid var(--sage);outline-offset:2px}
.card img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:var(--paper-3)}
.card .cap{padding:13px 15px 15px;border-top:1px solid var(--rule);background:var(--paper)}
.card .cap b{display:block;font-family:var(--serif);font-size:1.02rem;font-weight:400;
  color:var(--forest);line-height:1.3}
.card .cap i{font-style:normal;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--gold)}
.card.hide{display:none}
/* Sold stamp. Laid over the photo rather than replacing it — the wreath is still
   worth looking at, and a customer seeing what has gone is how the next order
   starts. Deliberately translucent so the image reads through it. */
.card{position:relative;container-type:inline-size}
.card .stamp{position:absolute;top:0;left:0;right:0;aspect-ratio:3/4;
display:grid;place-items:center;pointer-events:none}
.card .stamp span{border:5px solid #d0201b;color:#d0201b;font-family:var(--sans);
font-weight:800;font-size:clamp(22px,19cqw,60px);letter-spacing:.04em;padding:.1em .28em;
border-width:.11em;border-radius:.14em;transform:rotate(-11deg);opacity:.8;
background:rgba(255,255,255,.16);text-shadow:0 1px 0 rgba(255,255,255,.5)}
.card.sold img{filter:saturate(.85)}
.card.sold .price{color:var(--soft)}
.empty{grid-column:1/-1;text-align:center;color:var(--ink-soft);padding:50px 0}

/* ── story */
.story{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.story-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:70px 24px;
  max-width:var(--wrap);margin:0 auto}
@media(max-width:820px){.story-in{grid-template-columns:1fr;gap:34px;padding:52px 24px}}
.story h2{font-family:var(--serif);font-weight:400;color:var(--forest);
  font-size:clamp(1.8rem,4vw,2.5rem);margin:0 0 18px;line-height:1.15}
.story p{color:var(--ink-soft);margin:0 0 16px}
.story-img{border:1px solid var(--rule);background:var(--paper);padding:14px;border-radius:2px}
.story-img img{border-radius:1px;width:100%;height:auto}

/* ── contact */
.contact{padding:74px 0 84px;text-align:center}
.contact h2{font-family:var(--serif);font-weight:400;color:var(--forest);
  font-size:clamp(1.8rem,4vw,2.5rem);margin:0 0 14px}
.contact p{color:var(--ink-soft);max-width:36rem;margin:0 auto 26px}
.contact-lines{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;margin-top:30px;
  font-size:.95rem}
.contact-lines div{min-width:170px}
.contact-lines span{display:block;font-size:.67rem;text-transform:uppercase;letter-spacing:.15em;
  color:var(--gold);margin-bottom:5px}
.contact-lines a{color:var(--forest);text-decoration:none;border-bottom:1px solid var(--rule)}
.contact-lines a:hover{border-bottom-color:var(--sage)}

/* ── footer */
.footer{background:var(--forest);color:var(--paper-3);padding:44px 0 34px}
.footer-in{display:flex;gap:26px;align-items:center;flex-wrap:wrap;max-width:var(--wrap);
  margin:0 auto;padding:0 24px}
.footer svg{width:38px;height:38px;color:var(--paper-2);opacity:.75}
.footer .fname{font-family:var(--serif);font-size:1.2rem;color:var(--paper)}
.footer .fmeta{margin-left:auto;font-size:.78rem;opacity:.72;text-align:right}
.footer a{color:var(--paper-2)}

/* ── lightbox */
.lb{position:fixed;inset:0;background:rgba(26,30,24,.94);z-index:80;display:none;
  align-items:center;justify-content:center;padding:28px}
.lb.open{display:flex}
.lb figure{margin:0;max-width:min(940px,92vw);max-height:92vh;display:flex;
  flex-direction:column;gap:12px}
.lb img{max-height:78vh;width:auto;margin:0 auto;border-radius:2px;
  box-shadow:0 30px 70px -20px #000}
.lb figcaption{text-align:center;color:var(--paper-2);font-family:var(--serif);font-size:1.12rem}
.lb figcaption i{display:block;font-style:normal;font-family:var(--sans);font-size:.68rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-top:4px}
.lb button{position:absolute;background:rgba(244,239,227,.1);border:1px solid rgba(244,239,227,.28);
  color:var(--paper);width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:1.3rem;
  line-height:1;transition:.15s}
.lb button:hover{background:rgba(244,239,227,.22)}
.lb .close{top:22px;right:22px}
.lb .prev{left:22px;top:50%;transform:translateY(-50%)}
.lb .next{right:22px;top:50%;transform:translateY(-50%)}
@media(max-width:620px){.lb .prev{left:8px}.lb .next{right:8px}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ── price + order on each card */
.cap-buy{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}
.price{font-family:var(--serif);font-size:1.12rem;color:var(--ink)}
.mini{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.13em;text-decoration:none;
  color:var(--forest);border:1px solid var(--sage);border-radius:2px;padding:6px 13px;
  transition:.15s;white-space:nowrap;
}
.mini:hover{background:var(--forest);border-color:var(--forest);color:var(--paper)}

/* ── the club */
.club{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:70px 0 78px}
.club-head{text-align:center;max-width:40rem;margin:0 auto 40px}
.club-head h2{font-family:var(--serif);font-weight:400;color:var(--forest);
  font-size:clamp(1.9rem,4.4vw,2.7rem);margin:0 0 12px}
.club-head p{color:var(--ink-soft);margin:0 0 22px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:22px;
  align-items:stretch;
  /* every row the same height as well as every card in a row — otherwise a
     fourth plan that wraps onto its own line comes out shorter than the three
     above it */
  grid-auto-rows:1fr}
.plan{
  background:var(--paper);border:1px solid var(--rule);border-radius:2px;padding:30px 26px 26px;
  display:flex;flex-direction:column;gap:12px;position:relative;
}
.plan.featured{border-color:var(--sage);box-shadow:0 12px 34px -18px var(--shadow)}
.ribbon{
  position:absolute;top:-1px;right:18px;background:var(--sage);color:var(--paper);
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;border-radius:0 0 2px 2px;
}
.plan h3{font-family:var(--serif);font-weight:400;color:var(--forest);font-size:1.42rem;margin:0}
.plan-price{font-family:var(--serif);font-size:2.5rem;color:var(--ink);line-height:1}
.plan-price span{font-family:var(--sans);font-size:.8rem;color:var(--ink-soft);letter-spacing:.03em}
.plan-count{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold)}
.plan ul{list-style:none;margin:6px 0 auto;padding:0;display:flex;flex-direction:column;gap:9px}

/* The card keeps whatever height the original plans give it. Only a plan with
   more description lines than those is capped, and only its list scrolls —
   the name, price, tag and button never move. Five lines is the cap because the
   plans this shop launched with have four, and the fifth is headroom. */
.plan ul:has(> li:nth-child(6)){
  max-height:calc(5 * 1.45rem + 4 * 9px);
  overflow-y:auto;padding-right:6px;
  scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
.plan ul:has(> li:nth-child(6))::-webkit-scrollbar{width:6px}
.plan ul:has(> li:nth-child(6))::-webkit-scrollbar-thumb{background:var(--rule);border-radius:3px}
.plan ul:has(> li:nth-child(6))::-webkit-scrollbar-track{background:transparent}
.plan li{flex:0 0 auto}
.plan li{position:relative;padding-left:22px;color:var(--ink-soft);font-size:.94rem}
.plan li:before{content:"";position:absolute;left:0;top:.55em;width:11px;height:5px;
  border-left:1.5px solid var(--sage);border-bottom:1.5px solid var(--sage);
  transform:rotate(-45deg)}
.plan .btn{margin-top:18px;text-align:center;flex:0 0 auto}
.club-foot{text-align:center;color:var(--ink-soft);font-size:.94rem;max-width:38rem;
  margin:34px auto 0}

/* sticky nav (63px) + season band (~62px) would otherwise sit on top of a
   section heading when you jump to it from the menu */
#gallery,#club,#story,#contact{scroll-margin-top:calc(var(--navh,63px) + 69px)}

/* ── founder */
.eyebrow{font-size:.66rem;text-transform:uppercase;letter-spacing:.18em;
  color:var(--gold);margin:0 0 10px}
.story-img.founder{position:relative;padding:14px 14px 0}
.story-img.founder img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.story-img figcaption{font-family:var(--serif);font-size:.94rem;color:var(--ink-soft);
  text-align:center;padding:12px 0 14px}
.story .note{border-left:2px solid var(--gold);padding:10px 0 10px 15px;
  background:rgba(169,139,84,.07);font-size:.86rem;color:var(--ink-soft);font-style:italic}
@media(max-width:820px){.story-in .story-img.founder{order:-1;max-width:420px;margin:0 auto}}

/* ═══ cart ═══════════════════════════════════════════════════════════ */
.cart-btn{
  background:transparent;border:1px solid var(--sage);border-radius:2px;
  color:var(--forest);font-family:var(--sans);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.13em;padding:8px 14px;cursor:pointer;display:flex;align-items:center;
  gap:8px;transition:.15s;white-space:nowrap;
}
.cart-btn:hover{background:var(--forest);border-color:var(--forest);color:var(--paper)}
.cart-count{
  background:var(--paper-3);color:var(--ink-soft);border-radius:20px;min-width:20px;
  height:20px;display:grid;place-items:center;font-size:.7rem;letter-spacing:0;padding:0 6px;
}
.cart-count.on{background:var(--reg,var(--gold));color:#fff}
.cart-btn:hover .cart-count{background:var(--paper);color:var(--forest)}
/* superseded: the cart is no longer stacked inside the dropdown menu.
   Its mobile placement is set in the nav media query above. */

/* The Add button carries its own solid white, rather than letting the card
   show through it. Transparent read fine on tan paper and badly on everything
   else — a dark page, a photograph behind the caption band, a cut-out sitting
   on the paper. A button that is hard to find is a button that is not pressed.
   Its own :hover is needed because this rule sits after .mini:hover and would
   otherwise win the tie and keep the fill from ever appearing. */
.mini.add{cursor:pointer;font-family:var(--sans);background:#fff;color:var(--forest)}
.mini.add:hover,.mini.add:focus-visible{background:var(--forest);border-color:var(--forest);color:#fff}
.lb-add{margin:6px auto 0;display:block}
.lb-add.hidden{display:none}

/* backdrop + drawer */
.drawer-bg{position:fixed;inset:0;background:rgba(26,30,24,.5);backdrop-filter:blur(2px);
  z-index:60;opacity:0;pointer-events:none;transition:opacity .22s}
.drawer-bg.open{opacity:1;pointer-events:auto}
.drawer{
  /* top:0/bottom:0 pins the panel to the LAYOUT viewport, which on a phone
     includes the strip hidden behind the collapsing address bar — so the panel
     was taller than the screen and had to be scrolled to reach the button.
     100dvh is the height actually visible right now, and it re-measures as the
     bar shows and hides. vh first as the fallback for anything older. */
  position:fixed;top:0;right:0;height:100vh;height:100dvh;
  max-height:100vh;max-height:100dvh;width:min(430px,100vw);background:var(--paper);
  border-left:1px solid var(--rule);z-index:70;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  box-shadow:-20px 0 50px -25px rgba(42,46,38,.5);
}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;padding:20px 22px;border-bottom:1px solid var(--rule)}
.drawer-head h2{margin:0;font-family:var(--serif);font-weight:400;color:var(--forest);font-size:1.4rem}
.drawer-close{margin-left:auto;background:none;border:0;font-size:1.2rem;color:var(--ink-soft);
  cursor:pointer;padding:4px 8px;border-radius:2px}
.drawer-close:hover{color:var(--forest);background:var(--paper-2)}
.drawer-body{flex:1;overflow-y:auto;padding:20px 22px}
.drawer-body.hidden,.drawer-foot.hidden,.hidden{display:none!important}

/* lines */
.line{display:grid;grid-template-columns:64px 1fr auto;gap:13px;padding:14px 0;
  border-bottom:1px solid var(--rule)}
.line img{width:64px;height:80px;object-fit:cover;border-radius:2px;background:var(--paper-3)}
.line-mid b{display:block;font-family:var(--serif);font-weight:400;color:var(--forest);
  font-size:1rem;line-height:1.3}
.line-mid i{font-style:normal;font-size:.63rem;text-transform:uppercase;letter-spacing:.13em;
  color:var(--gold)}
.line-price{font-family:var(--serif);color:var(--ink);white-space:nowrap}
.qty{display:flex;align-items:center;gap:7px;margin-top:8px}
.qty .q{width:24px;height:24px;border:1px solid var(--rule);background:var(--paper);
  color:var(--forest);border-radius:2px;cursor:pointer;line-height:1;font-size:.9rem}
.qty .q:hover{background:var(--forest);color:var(--paper);border-color:var(--forest)}
.qty span{min-width:16px;text-align:center;font-size:.9rem}
.qty .rm{margin-left:6px;background:none;border:0;color:var(--ink-soft);font-size:.68rem;
  text-transform:uppercase;letter-spacing:.11em;cursor:pointer;padding:0}
.qty .rm:hover{color:var(--forest);text-decoration:underline}
.cart-empty{text-align:center;padding:44px 0;color:var(--ink-soft)}
.cart-empty.hidden{display:none}

/* shipping form */
.step-mark{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-family:var(--serif);
  color:var(--forest);font-size:1.15rem}
.step-mark span{width:24px;height:24px;border:1px solid var(--sage);color:var(--sage);
  border-radius:50%;display:grid;place-items:center;font-family:var(--sans);font-size:.7rem;flex:none}
.drawer fieldset{border:1px solid var(--rule);border-radius:2px;padding:16px;margin:0;
  display:flex;flex-direction:column;gap:10px;background:var(--paper-2)}
.drawer legend{font-size:.63rem;text-transform:uppercase;letter-spacing:.15em;
  color:var(--gold);padding:0 7px}
.drawer input,.drawer textarea{width:100%;background:var(--paper);color:var(--ink);
  border:1px solid var(--rule);border-radius:2px;padding:11px 12px;font-family:inherit;
  font-size:.95rem}
.drawer textarea{min-height:70px;resize:vertical}
.drawer input:focus,.drawer textarea:focus{outline:2px solid var(--sage);outline-offset:1px;
  border-color:transparent}
.drawer .row{display:grid;grid-template-columns:2fr 1fr;gap:10px}
.form-err{color:#a3312a;font-size:.87rem;margin:12px 0 0;min-height:1.2em}

/* footer / totals */
.drawer-foot{border-top:1px solid var(--rule);padding:18px 22px 20px;background:var(--paper-2)}
.sum{display:flex;justify-content:space-between;font-size:.92rem;color:var(--ink-soft);
  padding:3px 0}
.sum b{color:var(--ink);font-weight:400}
.sum.total{border-top:1px solid var(--rule);margin-top:8px;padding-top:11px;
  font-family:var(--serif);font-size:1.15rem;color:var(--ink)}
.sum.total b{font-size:1.25rem}
.drawer-foot .btn{width:100%;margin-top:14px;text-align:center}
.drawer-foot .btn:disabled{opacity:.4;cursor:not-allowed}
.drawer-foot .btn.back{margin-top:8px}
.foot-note{font-size:.76rem;color:var(--ink-soft);text-align:center;margin:11px 0 0;line-height:1.5}

/* done */
.done-mark{width:52px;height:52px;border-radius:50%;background:var(--forest);color:var(--paper);
  display:grid;place-items:center;font-size:1.5rem;margin:22px auto 16px}
#stepDone{text-align:center}
#stepDone h3{font-family:var(--serif);font-weight:400;color:var(--forest);font-size:1.5rem;margin:0 0 10px}
#stepDone p{color:var(--ink-soft);margin:0 0 22px}

/* toast */
#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);background:var(--forest);
  color:var(--paper);padding:12px 22px;border-radius:2px;font-size:.88rem;z-index:90;
  opacity:0;pointer-events:none;transition:.22s;box-shadow:0 12px 30px -12px rgba(0,0,0,.5)}
#toast.on{opacity:1;transform:translate(-50%,0)}

.tax-note{font-size:.72rem;color:var(--ink-soft);margin:6px 0 0;text-align:right;font-style:italic}

/* club line in the cart */
.plan-line{grid-template-columns:64px 1fr auto}
.line-badge{width:64px;height:80px;border:1px solid var(--sage);border-radius:2px;
  display:grid;place-items:center;font-size:.58rem;letter-spacing:.16em;color:var(--sage);
  background:var(--paper-2)}
.plan-line .line-price span{font-family:var(--sans);font-size:.68rem;color:var(--ink-soft)}

/* ── discount code, in the last step before payment */
.coupon-box{border:1px solid var(--rule);border-radius:2px;padding:12px 14px 14px;margin-bottom:14px}
.coupon-box legend{font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;
color:var(--gold);padding:0 6px}
.coupon-row{display:flex;gap:8px}
.coupon-row input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--rule);
border-radius:2px;font-family:inherit;font-size:.95rem;text-transform:uppercase;
letter-spacing:.06em;background:var(--paper)}
.coupon-row input:focus{outline:0;border-color:var(--sage);background:#fff}
.coupon-row .btn{flex:0 0 auto;padding:10px 18px;font-size:.68rem}
.coupon-msg{margin:9px 0 0;font-size:.84rem;min-height:1.2em;color:var(--soft)}
.coupon-msg.ok{color:#2f7d4f}
.coupon-msg.bad{color:#a3312a}
.sum.discount b{color:#2f7d4f}
.sum.hidden{display:none}

/* ── on sale: what it was, struck through, and what it is now, in red */
.card .price s.was,.lb figcaption s.was{text-decoration:none;position:relative;
color:var(--soft);margin-right:.45em}
.card .price s.was::after,.lb figcaption s.was::after{content:"";position:absolute;
left:-.06em;right:-.06em;top:50%;height:1px;background:#c0201b;transform:rotate(-6deg)}
.card .price .now,.lb figcaption .now{color:#c0201b}

/* ── announcement bar, above the collection */
.notice{background:var(--forest);color:var(--paper);text-align:center;
font-family:var(--serif);font-size:clamp(1rem,2.4vw,1.2rem);letter-spacing:.01em;
padding:14px 22px;border-radius:2px;
margin:calc(var(--notice-gap) + var(--gallery-top) + var(--gallery-h2-lead))
       0 var(--notice-gap);
box-shadow:0 10px 26px -20px var(--shadow)}
/* Narrow, and short. A phone in landscape has very little height to spend, so
   the gap tightens there too — changing the one value keeps both ends equal
   without touching the heading, which must look the same with no bar at all. */
@media (max-width:600px){:root{--notice-gap:22px}.notice{padding:12px 16px}}
@media (max-height:620px){:root{--notice-gap:16px}}

/* ── announcement bar colours, picked on the Announcements page.
   Every pastel carries its own ink: they are far too pale for the
   light text the forest green uses, and would be unreadable with it.
   Generated from BANNER_COLOURS in skus_server.py — edit there. */
.notice.c-spring{background:#eef3e7;color:#2a2e26;box-shadow:none;border:1px solid #cddcc0}
.notice.c-summer{background:#fbf3df;color:#2a2e26;box-shadow:none;border:1px solid #e8d9ae}
.notice.c-fall{background:#f7ece2;color:#2a2e26;box-shadow:none;border:1px solid #e3cbb4}
.notice.c-winter{background:#e9eef3;color:#2a2e26;box-shadow:none;border:1px solid #c5d3e0}
.notice.c-rose{background:#f7e9e7;color:#2a2e26;box-shadow:none;border:1px solid #e3c4bf}
.notice.c-sage{background:#e8f0ea;color:#2a2e26;box-shadow:none;border:1px solid #c6d9cc}
.notice.c-mint{background:#e7f2ee;color:#2a2e26;box-shadow:none;border:1px solid #c3ded3}
.notice.c-sky{background:#e6eff4;color:#2a2e26;box-shadow:none;border:1px solid #bfd6e2}
.notice.c-lilac{background:#efeaf4;color:#2a2e26;box-shadow:none;border:1px solid #d5cade}
.notice.c-lavender{background:#eceef4;color:#2a2e26;box-shadow:none;border:1px solid #cdd2e0}
.notice.c-blush{background:#f9ebef;color:#2a2e26;box-shadow:none;border:1px solid #e6c8d1}
.notice.c-peach{background:#fbeee4;color:#2a2e26;box-shadow:none;border:1px solid #eed3b9}
.notice.c-butter{background:#fbf7e6;color:#2a2e26;box-shadow:none;border:1px solid #ecdfb4}
.notice.c-clay{background:#f4ece6;color:#2a2e26;box-shadow:none;border:1px solid #ddc9b8}
.notice.c-stone{background:#f0eee9;color:#2a2e26;box-shadow:none;border:1px solid #d8d3c8}


/* a membership on sale, same treatment as a wreath */
.plan-price s.was{text-decoration:none;position:relative;color:var(--soft);
margin-right:.3em;font-size:.72em}
.plan-price s.was::after{content:"";position:absolute;left:-.06em;right:-.06em;top:50%;
height:1px;background:#c0201b;transform:rotate(-6deg)}
.plan-price .now{color:#c0201b}

/* ── the buy row: price on the left, Add on the right, and the middle for the
   sale price and the Top Picks mark. Nothing sits over the photograph — the
   picture is the thing being sold. */
.card .cap-buy{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.card .cap-buy .price{justify-self:start}
.card .cap-buy .mid{justify-self:center;display:flex;align-items:center;gap:7px;
white-space:nowrap}
.card .cap-buy .add{justify-self:end}
.card .cap-buy .pick{background:var(--gold);color:var(--paper);font-size:.55rem;
letter-spacing:.14em;text-transform:uppercase;padding:3px 7px;border-radius:2px}
.card.picked{border-color:var(--gold)}

/* ── choose your own occasions
   A closed dropdown inside a narrow side panel. The list scrolls inside itself
   so fifty occasions cost the same vertical space as five, and the drawer never
   grows past the screen. */
#chooseBox.hidden{display:none}
#chooseBox{margin-bottom:14px}
.choose{margin-bottom:12px}
.chooselab{margin:0 0 6px;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--gold)}
.choose.done .chooselab{color:var(--sage)}
.occbtn{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
background:var(--paper);border:1px solid var(--rule);border-radius:2px;
padding:11px 12px;cursor:pointer;font-family:inherit;font-size:.92rem;color:var(--ink)}
.occbtn:hover{border-color:var(--sage)}
.choose.done .occbtn{border-color:var(--sage)}
.occsum{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.occcaret{flex:0 0 auto;color:var(--ink-soft);font-size:.8rem}
.occbtn[aria-expanded="true"] .occcaret{transform:rotate(180deg)}
.occmenu{border:1px solid var(--sage);border-top:0;border-radius:0 0 2px 2px;
background:#fff}
.occmenu[hidden]{display:none}
.occlist{max-height:190px;overflow-y:auto;padding:4px;
scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
.occlist::-webkit-scrollbar{width:6px}
.occlist::-webkit-scrollbar-thumb{background:var(--rule);border-radius:3px}
.occlist label{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:2px;
font-size:.9rem;cursor:pointer;line-height:1.3}
.occlist label:hover{background:var(--paper)}
/* The form-wide input rule sets width:100%. With flex-basis:auto that makes a
   checkbox claim the whole row and squeeze its own label to nothing — the box
   was there, the occasion name was 0px wide. Say the width out loud. */
.occlist input{flex:0 0 auto;width:auto;min-width:0;margin:0;cursor:pointer}
.occlist span{flex:1;min-width:0}
.occfoot{display:flex;align-items:center;gap:10px;padding:8px 10px;
border-top:1px solid var(--rule);background:var(--paper)}
.occcount{font-size:.74rem;color:var(--ink-soft)}
.occdone{margin-left:auto;background:var(--forest);color:var(--paper);border:0;
border-radius:2px;padding:7px 16px;cursor:pointer;font-size:.62rem;letter-spacing:.12em;
text-transform:uppercase;font-family:inherit}
.occdone[disabled]{opacity:.45;cursor:default}

/* ── the drawer on a short screen ────────────────────────────────────────────
   Everything here is scoped inside .drawer and gated on viewport HEIGHT, so a
   tall phone keeps the roomier spacing and nothing outside the cart is touched.
   On a 667px screen the checkout footer alone was 389px — more than half the
   screen spent on a summary — which is what pushed the form into a scroll. */
/* applies at every size: it is a fixed-height panel everywhere */
.drawer-head{padding-top:10px;padding-bottom:10px}
.drawer-head h2{font-size:1.3rem}

.drawer-body{padding-top:12px;padding-bottom:12px}
.drawer-body .step-mark{margin:0 0 10px}
.drawer-body fieldset{margin-bottom:7px;padding:6px 9px}
.drawer-body textarea{height:40px;min-height:40px}
.drawer-body .ship-note{font-size:.68rem;line-height:1.3;margin:4px 0 0}

.drawer-foot{padding-top:8px;padding-bottom:10px}
.drawer-foot .sum{margin:1px 0;font-size:.82rem}
.drawer-foot .sum.total{margin-top:6px;padding-top:8px}
.drawer-foot .tax-note{font-size:.66rem;line-height:1.25;margin:4px 0 6px}
.drawer-foot .foot-note{font-size:.66rem;line-height:1.25;margin:5px 0 0}
.drawer-foot .btn{padding:9px 16px}
.drawer-foot .btn.back{margin-top:6px}

.choose{margin-bottom:8px}
.chooselab{margin:0 0 5px}

/* Quiet, but findable. Somebody looking to cancel should not have to
   email and wait — and a shop that hides the exit earns a chargeback
   instead of a cancellation. */
.fcancel{display:inline-block;margin-top:6px;opacity:.75;font-size:.82rem}
.fcancel:hover{opacity:1}

/* a wreath the bundle already paid for */
.inbundle{display:inline-block;font-size:.62rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--sage);border:1px solid var(--rule);
border-radius:2px;padding:1px 6px;white-space:nowrap}

/* ── the drawer on a Fold ────────────────────────────────────────────────────
   MEASURED, not guessed. Niles read these off his Galaxy Fold 5:

       inner screen, portrait    690 x 654   (ratio 1.05, nearly square)
       inner screen, landscape   829 x 516   (ratio 1.61)

   Both are SHORT. A Fold is wide for a phone and the browser chrome takes the
   rest, so even held upright it has about the height of a laptop window turned
   sideways. That is the whole point: the usual "portrait means tall" assumption
   is wrong on this device.

   I first gated this at max-height:480px, from dimensions I invented rather
   than measured. Neither of the numbers above is under 480, so the rule never
   fired on his phone and did nothing at all. 720 covers both with room to
   spare, and still clears an ordinary phone in portrait (844) and any normal
   desktop window, so nothing else is touched.

   The problem it solves: the footer is a fixed 301px of summary and buttons.
   Comfortable on a tall screen; on a 516px one it was 83% of the display,
   leaving about 24px for the form. The space comes out of the summary, never
   out of the form. Everything here is inside .drawer — the cart and checkout
   panel only, nothing else on the page. */
@media (max-height:720px){
  .drawer-head{padding-top:6px;padding-bottom:6px}
  .drawer-head h2{font-size:1.05rem}
  .drawer-body{padding-top:8px;padding-bottom:8px}
  .drawer-body .step-mark{margin:0 0 6px;font-size:.9rem}
  .drawer-body fieldset{margin-bottom:5px;padding:4px 8px}
  .drawer-body textarea{height:34px;min-height:34px}
  /* the two lines of reassurance are worth their space in portrait and are
     the first thing to go when there is none */
  .drawer-body .ship-note,.drawer-foot .foot-note,.drawer-foot .tax-note{display:none}
  .drawer-foot{padding-top:4px;padding-bottom:5px}
  /* The summary rows pair up two to a line. On a wide short screen the space
     is horizontal, so spending four lines on four short figures is the one
     obvious waste left. The total still gets a line of its own — it is the
     number anyone actually reads before paying. */
  .drawer-foot > .sum{grid-column:auto;margin:0;font-size:.7rem;line-height:1.35}
  .drawer-foot > .sum.total{grid-column:1 / -1;margin-top:2px;padding-top:4px;font-size:.84rem}
  .drawer-foot .btn{padding:5px 12px;font-size:.62rem}
  /* Continue and Back share one row rather than stacking. A second row of
     button is 40px this orientation cannot spare, and side by side is how a
     wide short screen wants to read anyway. The grid keeps them equal width
     and collapses cleanly to one when Back is hidden on the cart step. */
  .drawer-foot{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:stretch}
  .drawer-foot .btn{margin:4px 0 0}
  .drawer-foot .btn.back{margin:4px 0 0}
  .drawer-foot .btn.back.hidden{display:none}
  .drawer-foot .btn:only-of-type{grid-column:1 / -1}
}

/* An example is shown, not sold. The photograph is left completely
   alone — no stamp, no dimming — because being looked at is the whole
   point. Only the word under it says so. */
.card.example .price{color:var(--gold);font-style:italic}


/* ── the note form, at the foot of the shop.
   It replaced a mailto: link. That link opened whatever mail program the
   visitor had, asked them to compose the message themselves, and on a phone
   with no mail account set up did nothing whatsoever. */
.notesend{max-width:640px;margin:18px auto 0;text-align:left}
.note-row{display:flex;gap:14px;flex-wrap:wrap}
.note-row label{flex:1 1 220px}
.notesend label{display:block;margin:0 0 12px;font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft)}
.notesend .opt{text-transform:none;letter-spacing:0;opacity:.6;font-size:.72rem}
.notesend input,.notesend textarea{display:block;width:100%;margin-top:5px;
  font-family:var(--sans);font-size:.95rem;text-transform:none;letter-spacing:0;
  color:var(--ink);background:var(--paper);border:1px solid var(--rule);
  border-radius:2px;padding:11px 12px}
.notesend textarea{resize:vertical;min-height:120px;font-family:var(--sans)}
.notesend input:focus,.notesend textarea:focus{outline:0;border-color:var(--sage);
  background:#fff}
.notesend input.bad,.notesend textarea.bad{border-color:#c0201b;background:#fbeceb}
/* The honeypot. Not display:none — some bots skip anything hidden that way,
   and a screen reader is told to ignore it by aria-hidden on the wrapper. */
.notesend .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:2px}
.note-state{font-size:.96rem;font-weight:600;color:var(--ink-soft)}
.note-state.ok{color:#2f7d4f}
.note-state.bad{color:#c0201b}
.note-fine{margin:12px 0 0;font-size:.76rem;color:var(--ink-soft);opacity:.85}
@media(max-width:600px){.note-row{gap:0}.note-row label{flex:1 1 100%}}


/* ── "when do the rest of these ship" — asked only when it is a real question */
.shipwhen{margin:4px 0 10px;padding:10px 12px;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:2px}
.shipwhen.hidden{display:none}
.shipwhen label{display:block;font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.shipwhen select{width:100%;font-family:var(--sans);font-size:.9rem;padding:8px 9px;
  border:1px solid var(--rule);border-radius:2px;background:#fff;color:var(--ink)}
.shipwhen select:focus{outline:0;border-color:var(--sage)}
.shipwhen-note{margin:6px 0 0;font-size:.76rem;color:var(--ink-soft);line-height:1.45}

/* gift + notify (module round 1) */
.gift-box .gift-tick{display:flex;gap:.5rem;align-items:center;font-weight:600;cursor:pointer}
.gift-box #giftFields{margin-top:.6rem;display:grid;gap:.6rem}
.mini.notify{white-space:nowrap}
/* the member button is a link styled as the cart button; no underline, ever */
nav a.acct-btn,nav a.acct-btn:hover,nav a.acct-btn:focus,.nav a.acct-btn,a.acct-btn{text-decoration:none}


/* ── sets, collections, merch (2.1.0) ─────────────────────────────────── */
.card{position:relative}
.optnav{position:absolute;right:10px;top:10px;display:flex;gap:6px;z-index:2}
.optarrow{width:34px;height:34px;border-radius:50%;border:1px solid var(--rule,#cfc3a4);
  background:rgba(242,234,216,.92);color:var(--forest,#1e4230);font-size:1.25rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 3px}
.optarrow:hover{background:#fff}
.setnote{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold,#a98b54);font-style:normal;margin-top:2px}
.comingsoon{grid-column:1/-1;text-align:center;padding:70px 20px;font-family:Georgia,serif;
  font-size:clamp(2.6rem,9vw,5rem);font-weight:700;color:#c0261c;letter-spacing:.04em;
  text-transform:uppercase}
#merch .gallery-head h2{margin-bottom:0}

/* The optional line under the shop logo. Set from Settings → Logos; absent
   entirely when switched off, so it costs nothing when unused. */
.hero-caption{
  margin:14px auto 0;max-width:44ch;text-align:center;
  font-family:var(--serif);font-size:1.02rem;line-height:1.5;color:var(--ink-soft);
}
@media(max-width:600px){.hero-caption{font-size:.95rem;padding:0 10px}}