/* ============================================================================
   restyle.css - the 2026 editorial pass (added 2026-10-17)

   Loaded AFTER bundle.min.css in home.html's <head>, so it wins on equal
   specificity. It is deliberately a SEPARATE FILE rather than edits inside
   bundle.min.css: that bundle is minified and shared by every page, and this
   way the whole restyle is reverted by deleting one <link> tag.

   Scope:
     1. design tokens  - type + the section rhythm. Colours are UNCHANGED.
     2. the shell      - nav and footer, which every page inherits via
                         block.html -> home.html.
     3. .r-*           - the new homepage components only.

   The palette is the live one: --accent #b3541e, --surface #fdfaf7. The owner
   asked to keep the colours and change the layout.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. tokens */
/* ⚠️ The FONT variables are NOT on :root, on purpose. The builder's own
   stylesheet reads var(--heading-font) / var(--default-font), so redefining
   them globally restyled step 1-3 even though every rule below is scoped with
   body:not(.builder-page) - measured as a 22% pixel difference on /handwritten.
   Custom properties inherit, so declaring them on the body reaches every page
   EXCEPT the builder, which is exactly the scope we want. */
body:not(.builder-page){
  /* Fraunces + Inter were ALREADY being loaded in <head>; the variables simply
     still pointed at Abel/Roboto. This is a swap, not a new dependency. */
  --heading-font: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --default-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
:root{

  --r-ink:#241c17;
  --r-ink-soft:#5d5048;
  --r-rule:#e7ddd3;
  --r-paper:#ffffff;
  /* our OWN cream. Do not use --surface-color: the bundle declares it five
     times and the winning value is #ffffff, so tints silently go white. */
  --r-surface:#f7efe4;
  /* own the accent too. The bundle declares --accent-color twice and one of
     them is an ALIAS to --lbp-accent, which is itself redefined inside
     .footer - so a link there resolved to #f8f9fa and rendered invisible on
     cream. These three are the live palette, written out once. */
  --r-accent:#b3541e;
  --r-accent-dark:#9c4818;
  --r-highlight:#d17842;
  --r-wrap:1120px;
  /* Radius scale. Everything was 2-3px, which read sharp and cold next to
     photographs of paper and wax. Softer corners are most of the "warm"
     feeling; these three values are the only radii the restyle uses. */
  --r-radius:14px;   /* cards, panels, images */
  --r-radius-sm:10px;/* buttons, inputs */
  --r-radius-pill:999px; /* badges and chips */
}

body:not(.builder-page){
  font-family:var(--default-font);
  color:var(--r-ink);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body:not(.builder-page) h1,body:not(.builder-page) h2,
body:not(.builder-page) h3,body:not(.builder-page) h4{
  font-family:var(--heading-font);
  font-weight:400;
  letter-spacing:-.01em;
}
/* Fraunces is an optical-size font; at display sizes it wants the soft axis. */
body:not(.builder-page) h1,body:not(.builder-page) h2{font-variation-settings:"SOFT" 0,"WONK" 0;}

/* ------------------------------------------------------------- 2. the shell */
#header.header{
  background:var(--r-paper);
  border-bottom:1px solid var(--r-rule);
  box-shadow:none;
}
#header .navbar{min-height:68px;}
#header .navbar-brand.logo img{height:34px;width:auto;}
@media (max-width:1199.98px){#header .navbar-brand.logo img{height:30px;}}

#header .navmenu .nav-link{
  font-family:var(--default-font);
  font-size:15px;
  font-weight:400;
  color:var(--r-ink-soft);
  padding:.5rem .9rem;
}
#header .navmenu .nav-link:hover,
#header .navmenu .nav-link.active{color:var(--r-accent);}

/* Track / Login: utilities, not browse links (2026-10-17, second pass).
   Nine targets in the bar read as crowded. These two serve people who have
   already bought, so they drop a size and lose weight, behind a hairline that
   groups them. ⚠️ Only from the xl breakpoint UP - below it the navbar
   collapses to a vertical stack and a left border would hang in mid-air. */
@media (min-width:1200px){
  #header .navmenu .nav-util .nav-link{font-size:13.5px;padding:.5rem .7rem;}
  #header .navmenu .nav-util-first{
    margin-left:.6rem;padding-left:.75rem;border-left:1px solid var(--r-rule);
  }
}

/* the CTA stops being a stamp and becomes a plain, confident button */
#header .btn-getstarted,
.btn-seal-stamp{
  background:var(--r-accent);
  color:#fff;
  border:1px solid var(--r-accent);
  border-radius:var(--r-radius-sm);
  padding:10px 20px;
  font-size:15px;
  font-family:var(--default-font);
  box-shadow:none;
  transform:none;
}
#header .btn-getstarted:hover,.btn-seal-stamp:hover{background:var(--r-accent-dark);color:#fff;}

/* ------------------------------------------------- 3. the new homepage bits */
/* .r-wrap is a HOOK ONLY - it must never set its own max-width or padding.
   The nav, the footer and every page inheriting block.html are laid out on
   Bootstrap's .container, so a second container here puts the homepage on a
   different grid and the headline stops lining up with the logo (measured
   40px out, 17 Oct). Markup uses class="container r-wrap". */
.r-wrap{}

.r-band{padding:46px 0;}
.r-band.tint{
  background:var(--r-surface);
  border-top:1px solid var(--r-rule);
  border-bottom:1px solid var(--r-rule);
}
/* padding-block ONLY. A `padding: x 0 y` shorthand on an element that also
   carries .r-wrap wipes the side gutter and bleeds the section 40px left of
   the nav - it reads as "the logo is misaligned". Cost an hour on 17 Oct. */
.r-head{max-width:34em;margin-bottom:34px;}
.r-head h2{font-size:clamp(26px,3.6vw,38px);line-height:1.15;margin:0;}
.r-head p{margin-top:12px;color:var(--r-ink-soft);}
.r-eyebrow{
  font-family:var(--default-font);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--r-accent);margin-bottom:12px;
}

.r-btn{
  display:inline-block;padding:14px 26px;border-radius:var(--r-radius-sm);text-decoration:none;
  font-size:16px;border:1px solid var(--r-accent);transition:.15s;
  font-family:var(--default-font);
}
.r-btn-solid{background:var(--r-accent);color:#fff;}
.r-btn-solid:hover{background:var(--r-accent-dark);color:#fff;}
.r-btn-ghost{background:transparent;color:var(--r-accent);}
.r-btn-ghost:hover{background:var(--r-surface);color:var(--r-accent);}

/* hero ------------------------------------------------------------------- */
.r-hero{display:grid;gap:26px;align-items:center;padding-block:28px 34px;}
@media (min-width:900px){
  .r-hero{grid-template-columns:1.05fr .95fr;gap:56px;padding-block:44px 22px;align-items:start;}
}
.r-hero h1{font-size:clamp(33px,6.4vw,58px);line-height:1.08;margin:0;}
.r-hero .r-sub{margin-top:16px;font-size:clamp(17px,2vw,19px);color:var(--r-ink-soft);max-width:30em;}
.r-hero .r-cta{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px;}
.r-hero .r-quiet{margin-top:18px;font-size:14.5px;color:var(--r-ink-soft);}
.r-hero .r-quiet b{font-weight:600;color:var(--r-ink);}

/* the photograph changes under a FIXED headline - this is not a banner
   carousel, there is only ever one message on the page. */
.r-slides{position:relative;aspect-ratio:3/2;max-height:340px;overflow:hidden;
          border-radius:var(--r-radius);background:var(--r-surface);}
.r-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
              opacity:0;transition:opacity 1.1s ease-in-out;}
.r-slides img.on{opacity:1;}
.r-dots{display:flex;gap:7px;margin-top:14px;}
.r-dot{width:7px;height:7px;border-radius:50%;background:#dacbbd;border:0;padding:0;
       cursor:pointer;transition:.2s;}
.r-dot.on{background:var(--r-accent);width:20px;border-radius:4px;}
.r-cap{margin-top:12px;font-size:13.5px;color:var(--r-ink-soft);font-style:italic;}
@media (prefers-reduced-motion:reduce){.r-slides img{transition:none;}}

/* occasion shelf --------------------------------------------------------- */
.r-shelf{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
@media (min-width:700px){.r-shelf{grid-template-columns:repeat(3,1fr);gap:18px;}}
.r-tile{
  display:flex;flex-direction:column;justify-content:flex-end;min-height:128px;
  text-decoration:none;background:var(--r-paper);border:1px solid var(--r-rule);
  border-radius:var(--r-radius);padding:24px 20px 22px;transition:.15s;color:var(--r-ink);
}
.r-tile:hover{border-color:var(--r-accent);transform:translateY(-2px);color:var(--r-ink);}
.r-tile .t{font-family:var(--heading-font);font-size:21px;line-height:1.2;}
.r-tile .d{margin-top:6px;font-size:14px;color:var(--r-ink-soft);}
.r-tile.seasonal{border-color:#d9c4b2;}
.r-season{
  display:inline-block;vertical-align:middle;margin-left:7px;background:var(--r-accent);
  color:#fff;font-family:var(--default-font);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 8px;border-radius:var(--r-radius-pill);
}
.r-more{margin-top:22px;font-size:15px;}
.r-more a{color:var(--r-accent);}

/* products --------------------------------------------------------------- */
.r-prods{display:grid;gap:20px;}
@media (min-width:860px){.r-prods{grid-template-columns:1fr 1fr;gap:28px;}}
.r-prod{
  border:1px solid var(--r-rule);border-radius:var(--r-radius);padding:30px 28px 28px;
  background:var(--r-paper);display:flex;flex-direction:column;
}
.r-prod.feat{border-color:#d9c4b2;background:var(--r-surface);position:relative;}
.r-flag{
  position:absolute;top:-11px;left:28px;background:var(--r-accent);color:#fff;
  font-family:var(--default-font);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 11px;border-radius:var(--r-radius-pill);
}
.r-prod h3{font-size:27px;margin:0;}
.r-prod .r-blurb{margin-top:10px;color:var(--r-ink-soft);font-size:15.5px;}
.r-price{margin-top:22px;display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;}
.r-price .now{font-family:var(--heading-font);font-size:35px;line-height:1;}
.r-price .was{text-decoration:line-through;color:#a2958c;font-size:19px;}
.r-price .per{font-size:14px;color:var(--r-ink-soft);width:100%;}
.r-prod ul{list-style:none;margin:20px 0 0;padding:0;font-size:15.5px;}
.r-prod li{padding:7px 0 7px 22px;position:relative;color:var(--r-ink-soft);}
.r-prod li:before{
  content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;
  border-radius:50%;background:var(--r-highlight);
}
.r-prod .r-btn{margin-top:24px;text-align:center;}
.r-included{margin-top:26px;text-align:center;font-size:15px;color:var(--r-ink-soft);}
.r-included b{color:var(--r-ink);font-weight:600;}

/* proof strip ------------------------------------------------------------ */
.r-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media (min-width:760px){.r-strip{grid-template-columns:repeat(4,1fr);gap:14px;}}
.r-strip img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:var(--r-radius);}
/* height:auto is LOAD-BEARING. These <img> carry width/height attributes (for
   CLS), and a height attribute acts as a used height when no CSS sets one - so
   aspect-ratio is ignored and the photo renders 900px tall. Measured 269x900
   on 17 Oct; the mockup looked right only because it had no attributes. */
.r-strip-note{margin-top:16px;font-size:14px;color:var(--r-ink-soft);max-width:44em;}

/* faq --------------------------------------------------------------------
   Two columns: the heading holds the left, the questions the right. A single
   centred column was tried first and read as an orphan - it set max-width on
   the element that IS the .container, so the heading stopped lining up with
   every other section on the page and the block floated in white space. */
.r-faqgrid{display:grid;gap:26px;}
@media (min-width:900px){
  .r-faqgrid{grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start;}
  .r-faqside{position:sticky;top:96px;}
}
.r-faqside h2{font-size:clamp(26px,3.6vw,38px);line-height:1.15;margin:0;}
.r-faqside .r-more{margin-top:18px;}
.r-faqlist details{border-bottom:1px solid var(--r-rule);padding:18px 0;}
.r-faqlist details:first-child{border-top:1px solid var(--r-rule);}
.r-faqlist summary{
  cursor:pointer;font-family:var(--heading-font);font-size:20px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
}
.r-faqlist summary::-webkit-details-marker{display:none;}
.r-faqlist summary:after{content:"+";color:var(--r-accent);font-family:var(--default-font);font-size:20px;line-height:1;}
.r-faqlist details[open] summary:after{content:"\2013";}
.r-faqlist details p{margin-top:12px;color:var(--r-ink-soft);font-size:16px;max-width:42em;}

/* free letter ------------------------------------------------------------ */
.r-free{
  border:1px solid var(--r-rule);border-left:3px solid var(--r-highlight);
  border-radius:var(--r-radius);padding:30px 28px;display:flex;gap:26px;align-items:center;
  flex-wrap:wrap;background:var(--r-surface);
}
.r-free>div{flex:1 1 320px;}

/* closing ---------------------------------------------------------------- */
.r-close{text-align:center;padding:76px 0;}
.r-close h2{font-size:clamp(27px,4vw,40px);max-width:16em;margin:0 auto;}
.r-close .r-cta{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ------------------------------------------- 4. calmer inherited furniture */
/* every page that extends block.html gets these, which is the point */
body:not(.builder-page) .page-section{padding:56px 0;}
body:not(.builder-page) .lbp-card{border:1px solid var(--r-rule);border-radius:var(--r-radius);box-shadow:none;}
body:not(.builder-page) .section-title h2{font-family:var(--heading-font);font-weight:400;}

/* ------------------------------------------------------------- 5. footer
   The old footer was dark with four trust-pillar icon cards and a row of
   payment badges. It is light now and carries links only. The .footer-r class
   is on the <footer> so these win over the bundle's dark rules without any
   !important. */
#footer.footer-r{
  background:var(--r-surface);
  color:var(--r-ink-soft);
  border-top:1px solid var(--r-rule);
  padding:60px 0 0;
  margin-top:0;
}
#footer.footer-r .footer-logo-r{height:30px;width:auto;display:block;}
#footer.footer-r .footer-tagline-r{
  color:var(--r-ink-soft);font-size:14.5px;max-width:26em;margin:0 0 12px;
}
#footer.footer-r .footer-mail{
  color:var(--r-accent);text-decoration:none;font-size:14.5px;
}
#footer.footer-r .footer-mail:hover{text-decoration:underline;}
#footer.footer-r .footer-heading-r{
  font-family:var(--default-font);font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--r-ink);margin:0 0 14px;font-weight:600;
}
#footer.footer-r .footer-nav-r li{padding:4px 0;}
#footer.footer-r .footer-nav-r a{
  color:var(--r-ink-soft);text-decoration:none;font-size:14.5px;
}
#footer.footer-r .footer-nav-r a:hover{color:var(--r-accent);}
#footer.footer-r .social-links-r a{
  color:var(--r-ink-soft);font-size:18px;text-decoration:none;
  background:none;border:0;width:auto;height:auto;line-height:1;
}
#footer.footer-r .social-links-r a:hover{color:var(--r-accent);}
#footer.footer-r .footer-bottom-r{
  margin-top:52px;border-top:1px solid var(--r-rule);padding:18px 0;
  font-size:13px;color:var(--r-ink-soft);background:transparent;
}

/* The bundle carries a block commented "Footer text and links readability
   overrides" written for the DARK footer, and every declaration in it is
   !important:
       .footer                    { color:#f8f9fa !important }
       .footer a[href^="mailto:"] { color:#f8f9fa !important }
       .footer-nav a              { color:#f8f9fa !important }
       .footer .social-links a    { color:#e2e8f0 !important }
   On a cream footer that is near-white text on near-white paper - the support
   address rendered invisible. !important can only be answered with !important,
   so these are scoped as tightly as possible to .footer-r and nothing else.
   DELETE THIS BLOCK if those bundle rules are ever removed. */
#footer.footer-r{color:var(--r-ink-soft) !important;}
#footer.footer-r a[href^="mailto:"]{color:var(--r-accent) !important;}
#footer.footer-r a[href^="mailto:"]:hover{color:var(--r-accent-dark) !important;}
#footer.footer-r .footer-nav-r a{color:var(--r-ink-soft) !important;}
#footer.footer-r .footer-nav-r a:hover{color:var(--r-accent) !important;}
#footer.footer-r .social-links-r a{color:var(--r-ink-soft) !important;border-color:transparent !important;}
#footer.footer-r .social-links-r a:hover{color:var(--r-accent) !important;}
#footer.footer-r .footer-heading-r{color:var(--r-ink) !important;}

/* ---------------------------------------------------------- 6. newsletter
   Was .bg-accent-tint with pill-shaped controls - the last block on the page
   still wearing the old look. */
.r-news{background:var(--r-surface);border-top:1px solid var(--r-rule);}
.r-news h2{font-size:clamp(24px,3vw,32px);}
.r-news .newsletter-input{
  border-radius:var(--r-radius-sm);border:1px solid var(--r-rule);background:#fff;
  padding:13px 16px;font-size:16px;min-width:min(320px,100%);box-shadow:none;
}
.r-news .newsletter-input:focus{border-color:var(--r-accent);outline:none;box-shadow:none;}

/* Buttons site-wide: square, terracotta, no gradient or lift. .btn-primary is
   used on other pages too, which is the point - the restyle has to reach them
   or the site looks half-done. */
body:not(.builder-page) .btn-primary,body:not(.builder-page) .btn-pricing{
  background:var(--r-accent);border:1px solid var(--r-accent);color:#fff;
  border-radius:var(--r-radius-sm);box-shadow:none;transform:none;font-family:var(--default-font);
}
body:not(.builder-page) .btn-primary:hover,body:not(.builder-page) .btn-pricing:hover{
  background:var(--r-accent-dark);border-color:var(--r-accent-dark);color:#fff;
}
body:not(.builder-page) .btn-outline{
  background:transparent;border:1px solid var(--r-accent);color:var(--r-accent);
  border-radius:var(--r-radius-sm);box-shadow:none;
}
body:not(.builder-page) .btn-outline:hover{background:var(--r-surface);color:var(--r-accent);}

#footer.footer-r .footer-bottom-r p{max-width:none;}

/* The bottom bar now carries the four policy pages + About us, moved out of
   the link columns where they outnumbered the links people actually want. */
#footer.footer-r .footer-bottom-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px 26px;flex-wrap:wrap;
}
#footer.footer-r .footer-legal-r{display:flex;flex-wrap:wrap;gap:8px 18px;}
#footer.footer-r .footer-legal-r a{
  color:var(--r-ink-soft) !important;text-decoration:none;font-size:13px;
}
#footer.footer-r .footer-legal-r a:hover{color:var(--r-accent) !important;}
/* ⚠️ The fixed WhatsApp bubble (.lbp-wa-fab, bottom-right, bottom:1rem) lands
   ON the bottom bar once the page is scrolled to the end - which is the only
   time anyone reads it. It covered 'Shipping policy' and 'Terms of Service'
   at 1440px. The bar therefore reserves a clear strip BELOW itself at every
   width; the bubble sits in that empty space instead of over the links.
   ⚠️ Do not test this without scrolling to the bottom first: compare the
   rects after scrollTo(0, scrollHeight) or the collision never shows up. */
#footer.footer-r .footer-bottom-r{padding-bottom:5.4rem;}
@media (max-width:1199.98px){
  #footer.footer-r .footer-bottom-inner{justify-content:flex-start;}
}

/* ------------------------------------------------- 7. occasion pages (.occ)
   131 pages share templates/occasions/detail.html. The template already owns
   the things that make each page its own - a 20-entry per-occasion ACCENT map
   (--occ-accent), a per-occasion band image and quote, the sticky mobile CTA,
   the cluster rail. None of that is touched here; this is paint only.
   The STOCK hero photo stays (owner, 2026-10-17: "ocasssion page do need stock
   photots man") - our own envelopes would be the same picture 131 times. */
body:not(.builder-page) .occ h2,
body:not(.builder-page) .occ .occ-h2{
  font-family:var(--heading-font);font-weight:400;
  font-size:clamp(25px,3.4vw,34px);line-height:1.15;text-align:left;
}
/* section titles in this template are centred by the bundle */
body:not(.builder-page) .occ .section-title{text-align:left;max-width:34em;margin-left:0;}
body:not(.builder-page) .occ .section-title h2{text-align:left;}
body:not(.builder-page) .occ .section-title .description-title{
  font-family:var(--default-font);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--occ-accent,var(--r-accent));
}
body:not(.builder-page) .occ .occ-kicker{
  display:inline-block;background:var(--occ-accent,var(--r-accent));color:#fff;
  font-family:var(--default-font);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 12px;border-radius:var(--r-radius-pill);
}
body:not(.builder-page) .occ h1{font-size:clamp(29px,4.4vw,44px);line-height:1.12;}

/* "Why send a letter" - editorial list, was four emoji cards */
body:not(.builder-page) .occ-why{display:grid;gap:28px;}
@media (min-width:760px){body:not(.builder-page) .occ-why{grid-template-columns:1fr 1fr;gap:34px 56px;}}
body:not(.builder-page) .occ-why-item{border-top:1px solid var(--r-rule);padding-top:16px;}
body:not(.builder-page) .occ-why-item h3{
  font-family:var(--heading-font);font-size:20px;font-weight:400;margin:0 0 6px;
}
body:not(.builder-page) .occ-why-item p{color:var(--r-ink-soft);font-size:16px;margin:0;}

/* samples - a quoted line with the occasion's own accent down the side */
/* ⚠️ These need MORE classes than the `.occ .lbp-card` rule further down, or
   that one wins and puts the card border back - .occ-sample also carries
   .lbp-card. Specificity, not cascade order. */
body:not(.builder-page) .occ .occ-sample.lbp-card{
  /* the bundle sets `border-top:3px solid var(--occ-accent) !important` on
     .occ-sample, so the top rule only comes off with !important of our own. */
  border:0 !important;
  border-left:2px solid var(--occ-accent,var(--r-accent)) !important;
  border-radius:0;background:transparent;box-shadow:none;
  padding:4px 0 4px 20px !important;
}
body:not(.builder-page) .occ .occ-sample .occ-sample-label{
  font-family:var(--default-font);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--occ-accent,var(--r-accent));
}
body:not(.builder-page) .occ .occ-sample blockquote{
  font-family:var(--heading-font);font-size:19px;line-height:30px;margin:10px 0 0;
}

/* style cards + the cluster rail */
body:not(.builder-page) .occ .lbp-card{border:1px solid var(--r-rule);border-radius:var(--r-radius);box-shadow:none;}
body:not(.builder-page) .occ .btn-outline.btn-sm{
  border-radius:40px;padding:9px 18px;font-size:14.5px;
  border-color:var(--r-rule);color:var(--r-ink-soft);
}
body:not(.builder-page) .occ .btn-outline.btn-sm:hover{
  border-color:var(--occ-accent,var(--r-accent));color:var(--occ-accent,var(--r-accent));background:transparent;
}
/* the hero CTA keeps the occasion's accent rather than the site terracotta */
body:not(.builder-page) .occ .btn-primary{
  background:var(--occ-accent,var(--r-accent));border-color:var(--occ-accent,var(--r-accent));
}
body:not(.builder-page) .occ .btn-primary:hover{filter:brightness(.92);}

/* The band's overlay is inset:0 while the <section> carried 45.5px of vertical
   padding, so the accent->dark gradient painted a tan strip above the photo and
   a dark one below it. Pre-existing; the section should be exactly as tall as
   its image. */
body:not(.builder-page) .occ-letter-band{padding:0;}

/* --------------------------------------------- 8. occasion: the new blocks */
body:not(.builder-page) .occ-make{padding:38px 0;background:var(--r-surface);
  border-top:1px solid var(--r-rule);border-bottom:1px solid var(--r-rule);}
body:not(.builder-page) .occ-make-grid{display:grid;gap:18px;align-items:start;}
@media (min-width:860px){body:not(.builder-page) .occ-make-grid{grid-template-columns:1fr 1fr;gap:22px;}}
body:not(.builder-page) .occ-make-card{
  background:#fff;border:1px solid var(--r-rule);border-radius:var(--r-radius);padding:20px;
}
body:not(.builder-page) .occ-field-label{
  display:block;font-family:var(--default-font);font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--occ-accent,var(--r-accent));margin-bottom:10px;
}
body:not(.builder-page) .occ-field{
  width:100%;border:1px solid var(--r-rule);border-radius:var(--r-radius-sm);padding:12px 14px;
  font-size:16px;font-family:var(--default-font);background:#fff;
}
body:not(.builder-page) .occ-field:focus{outline:none;border-color:var(--occ-accent,var(--r-accent));}
body:not(.builder-page) .occ-field-help{margin-top:8px;font-size:13px;color:var(--r-ink-soft);}
body:not(.builder-page) .occ-make-card .r-btn{margin-top:14px;padding:11px 20px;font-size:15px;}

/* the envelope. CSS draws PAPER and GEOMETRY here - nothing organic, per the
   standing rule. The name is set in Caveat, which home.html already loads. */
body:not(.builder-page) .occ-env{
  position:relative;margin:14px 0 0;max-width:290px;aspect-ratio:1.6/1;border-radius:var(--r-radius);
  background:#cbbca4;border:1px solid #b9a98f;overflow:hidden;
}
body:not(.builder-page) .occ-env-flap{
  position:absolute;inset:0 0 auto 0;height:58%;
  background:#d6c8b2;
  clip-path:polygon(0 0,100% 0,50% 100%);
  border-bottom:1px solid #b9a98f;
}
body:not(.builder-page) .occ-env-name{
  position:absolute;left:9%;right:20%;top:64%;
  font-family:"Caveat",var(--heading-font);font-size:22px;
  color:#3a2f26;line-height:1.1;word-break:break-word;
}
body:not(.builder-page) .occ-env-name.is-ghost{opacity:.38;}
body:not(.builder-page) .occ-env-stamp{
  position:absolute;right:6%;top:8%;width:15%;aspect-ratio:.82;
  background:#fff;border:1px dashed #b9a98f;border-radius:1px;
}
body:not(.builder-page) .occ-when-out{
  margin-top:14px;font-family:var(--heading-font);font-size:18px;line-height:1.35;
}
body:not(.builder-page) .occ-when-out a{color:var(--occ-accent,var(--r-accent));}

/* what actually arrives */
body:not(.builder-page) .occ-inside{padding:44px 0;}
body:not(.builder-page) .occ-inside-grid{display:grid;gap:30px;align-items:center;}
@media (min-width:860px){body:not(.builder-page) .occ-inside-grid{grid-template-columns:.95fr 1.05fr;gap:56px;}}
body:not(.builder-page) .occ-inside-fig img{width:100%;height:auto;display:block;border-radius:var(--r-radius);}
body:not(.builder-page) .occ-inside-list{list-style:none;counter-reset:x;margin:0;padding:0;}
body:not(.builder-page) .occ-inside-list li{
  counter-increment:x;position:relative;padding:9px 0 9px 40px;
  border-top:1px solid var(--r-rule);color:var(--r-ink-soft);font-size:16px;
}
body:not(.builder-page) .occ-inside-list li:before{
  content:counter(x);position:absolute;left:0;top:9px;width:26px;height:26px;
  border-radius:50%;background:var(--occ-accent,var(--r-accent));color:#fff;
  font-family:var(--default-font);font-size:13px;display:grid;place-items:center;
}
body:not(.builder-page) .occ-inside-list b{color:var(--r-ink);font-weight:600;}
body:not(.builder-page) .occ-paid{
  display:inline-block;margin-left:4px;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--occ-accent,var(--r-accent));
  border:1px solid currentColor;border-radius:var(--r-radius-pill);padding:1px 7px;
}
body:not(.builder-page) .occ-inside-note{margin-top:16px;font-size:14px;color:var(--r-ink-soft);}

/* The occasion pages carry a sticky mobile CTA (.occ-sticky). The site-wide
   WhatsApp bubble is fixed at bottom:1rem and lands directly on top of its
   button. Same collision the product pages already solve by lifting the
   bubble. :has() means no JS and no change to the bubble itself; browsers
   without :has simply keep today's behaviour. */
@media (max-width:767px){
  body:has(.occ-sticky) .lbp-wa-fab{bottom:5.2rem;}
}

/* cluster rail - grouped link columns, not a cloud of pills */
body:not(.builder-page) .occ-rail-sub{color:var(--r-ink-soft);font-size:15px;margin:0 0 20px;}
body:not(.builder-page) .occ-rail-list{
  list-style:none;margin:0;padding:0;
  columns:2;column-gap:40px;
}
@media (min-width:760px){body:not(.builder-page) .occ-rail-list{columns:3;}}
@media (min-width:1100px){body:not(.builder-page) .occ-rail-list{columns:4;}}
body:not(.builder-page) .occ-rail-list li{
  break-inside:avoid;padding:6px 0;font-size:15px;
}
body:not(.builder-page) .occ-rail-list a{
  color:var(--r-ink-soft);text-decoration:none;border-bottom:1px solid transparent;
}
body:not(.builder-page) .occ-rail-list a:hover{
  color:var(--occ-accent,var(--r-accent));border-bottom-color:currentColor;
}
body:not(.builder-page) .occ-rail-up{column-span:all;margin-bottom:8px;}
body:not(.builder-page) .occ-rail-up a{color:var(--occ-accent,var(--r-accent));}

/* The price was inheriting --r-ink-soft (rgb 92,82,73) - the muted body grey -
   so it read as faded. It is the figure the whole card is about; it takes full
   ink, and only the struck "was" stays grey. */
body:not(.builder-page) .r-price .now{color:var(--r-ink);font-weight:500;}
body:not(.builder-page) .r-price .per{color:var(--r-ink-soft);}

/* gold-flake hero backdrop (canvas#hero-particles, drawn by main.js).
   The canvas sizes itself from its PARENT's clientWidth/Height, so the hero
   section has to be the positioned ancestor. */
body:not(.builder-page) .hero-r{position:relative;overflow:hidden;}
body:not(.builder-page) #hero-particles{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;display:block;z-index:0;
}
body:not(.builder-page) .hero-r > .r-wrap{position:relative;z-index:1;}
@media (prefers-reduced-motion:reduce){
  body:not(.builder-page) #hero-particles{display:none;}
}

/* Round the inherited furniture too, or the restyled sections sit next to
   sharp Bootstrap boxes on the pages that were not rebuilt. */
body:not(.builder-page) .lbp-card,
body:not(.builder-page) .occ .lbp-card,
body:not(.builder-page) .card,
body:not(.builder-page) .alert{border-radius:var(--r-radius);}
body:not(.builder-page) .btn,
body:not(.builder-page) .btn-primary,
body:not(.builder-page) .btn-outline,
body:not(.builder-page) .btn-pricing,
body:not(.builder-page) .form-control,
body:not(.builder-page) .newsletter-input{border-radius:var(--r-radius-sm);}
#header .btn-getstarted,.btn-seal-stamp{border-radius:var(--r-radius-sm);}
body:not(.builder-page) .occ-inside-fig img,
body:not(.builder-page) .occ-hero-img img{border-radius:var(--r-radius);}

/* ------------------------------------------------- 9. one dark anchor
   The page was white and near-white the whole way down, so sections blurred
   into each other while scrolling. Rather than add more colours, it gets ONE
   dark band at the close - the same move the occasion pages already make with
   their quote band. Dark ink on the page's last screen also makes the final
   CTA the strongest thing on it. */
body:not(.builder-page) #call-to-action.r-close{
  background:#2c211a;border-top:0;border-bottom:0;
}
body:not(.builder-page) #call-to-action.r-close h2{color:#f6efe7;}
body:not(.builder-page) #call-to-action.r-close .r-btn-solid{
  background:var(--r-accent);border-color:var(--r-accent);color:#fff;
}
body:not(.builder-page) #call-to-action.r-close .r-btn-ghost{
  border-color:#6d5c4e;color:#f0e6db;background:transparent;
}
body:not(.builder-page) #call-to-action.r-close .r-btn-ghost:hover{
  background:rgba(255,255,255,.08);color:#fff;
}

/* ---------------------------------------------- 10. shelf tiles as pictures
   ⚠️ An earlier attempt at this targeted `body:not(.builder-page) .r-tile`,
   which matches nothing - the .r-* component rules in this file are NOT
   body-scoped, only the global ones are. The replacement failed silently and
   the images rendered at their intrinsic 600x400, which blew the grid out to
   1926px wide and pushed the third column off-screen. */
.r-tile{padding:0;justify-content:flex-start;overflow:hidden;min-height:0;}
.r-tile-img{display:block;}
.r-tile-img img{width:100%;height:132px;object-fit:cover;display:block;}
.r-tile-txt{display:block;padding:16px 18px 18px;}
.r-tile .t{display:block;font-size:20px;}
.r-tile .d{display:block;margin-top:5px;}

/* ═══════════════════ 8. inner pages (.page-section) ═══════════════════════
   Added 2026-10-17. The restyle replaced the SHELL - nav and footer, which
   every page inherits through block.html -> home.html - but not one inner page
   body. All ~32 of them still run plain Bootstrap, and measuring them found
   drift rather than ugliness:

     h1 size    30.8 / 35 / 40.6 / 42 / 47.6 / 49px   (nine different values)
     h1 weight  400 on some pages, 700 on others
     h2 size    10.92px on one page, 35px on another
     btn radius 700px pill everywhere except /journal at 10px
     card       14px everywhere except /gallery at 16px

   So this section sets ONE scale rather than restyling each page. It is
   deliberately small: type, buttons, cards. Layout stays each page's own.

   ⚠️ SCOPE. `.page-section` comes from block.html, so it marks an inner page -
   but the BUILDER extends block.html too (/handwritten and /printed both carry
   .page-section AND .builder-page). Every rule here is therefore
   `body:not(.builder-page) .page-section`, the same guard as the rest of this
   file. The homepage, /occasions and /gift-ideas have no .page-section at all
   and are untouched.
   ========================================================================= */

body:not(.builder-page) .page-section h1{
  font-family:var(--heading-font);
  font-size:clamp(2rem, 1.35rem + 2.1vw, 2.55rem);
  font-weight:600; line-height:1.14; letter-spacing:-.015em;
  color:var(--r-ink); margin:0 0 .6em;
}
body:not(.builder-page) .page-section h2{
  font-family:var(--heading-font);
  font-size:clamp(1.35rem, 1.1rem + .85vw, 1.65rem);
  font-weight:600; line-height:1.25; letter-spacing:-.01em;
  color:var(--r-ink); margin:0 0 .5em;
}
body:not(.builder-page) .page-section h3{
  font-family:var(--heading-font);
  font-size:1.15rem; font-weight:600; line-height:1.3; color:var(--r-ink);
}
body:not(.builder-page) .page-section h4,
body:not(.builder-page) .page-section h5{
  font-family:var(--heading-font);
  font-size:1.02rem; font-weight:600; color:var(--r-ink);
}
/* ⚠️ `.fw-bold` is `font-weight:700 !important` in Bootstrap, so a plain
   element selector loses to it however specific it is - measured: headings
   stayed at 700 with a non-important rule. !important is the only answer, and
   it is scoped as tightly as the rest of this file. */
body:not(.builder-page) .page-section h1.fw-bold,
body:not(.builder-page) .page-section h2.fw-bold,
body:not(.builder-page) .page-section h3.fw-bold,
body:not(.builder-page) .page-section h4.fw-bold,
body:not(.builder-page) .page-section h5.fw-bold{ font-weight:600 !important; }
body:not(.builder-page) .page-section h1.display-4{
  font-size:clamp(2rem, 1.35rem + 2.1vw, 2.55rem);
}

/* long centred paragraphs are hard to read; cap the measure */
body:not(.builder-page) .page-section p{ max-width:68ch; }
body:not(.builder-page) .page-section .text-center p,
body:not(.builder-page) .page-section p.text-center{ margin-left:auto; margin-right:auto; }

/* Buttons: the shell's CTA is a 10px rectangle, these were 700px pills.
   ⚠️ .btn-close is a round X and must stay round, so it is excluded. */
body:not(.builder-page) .page-section .btn:not(.btn-close){
  border-radius:var(--r-radius-sm); font-weight:600; letter-spacing:0;
}
/* ⚠️ `.rounded-pill` is `border-radius:...!important` in Bootstrap, so this
   needs !important too - measured: buttons stayed at 700px without it.
   A pill BADGE is still a pill; only .btn is squared off. */
body:not(.builder-page) .page-section .btn.rounded-pill{
  border-radius:var(--r-radius-sm) !important;
}

body:not(.builder-page) .page-section .card{
  border-radius:var(--r-radius);
  border:1px solid var(--r-rule);
  box-shadow:none;
}
body:not(.builder-page) .page-section .card.shadow-sm{
  box-shadow:0 1px 3px rgba(36,28,23,.06);
}
body:not(.builder-page) .page-section .rounded-4{ border-radius:var(--r-radius); }

/* `.light-background` is on block.html's wrapper; the bundle resolves it to
   white. Cream matches the rest of the site. */
body:not(.builder-page) .page-section.light-background{ background:var(--r-surface); }