/* shared styles: inner pages, plus the bag, search, cookie notice, back-to-top and theme switch on every page */
:root{
  --madder:#7A1E2C; --harda:#B08D57; --ink:#161412; --chalk:#F4F1EC; --deep:#24201C;
  --serif:"Tiro Devanagari Hindi", Georgia, serif; --sans:"Mukta", system-ui, sans-serif; --ease:cubic-bezier(.22,1,.36,1);
  /* roles: these are what flips in dark mode (ink/chalk stay fixed for text over photos) */
  --bg:#F4F1EC; --fg:#161412; --surface:#FBFAF7; --ph:#E4DFD7; --line:rgba(22,20,18,.14); --nav:rgba(244,241,236,.85); --err:#A3241F; --accent:#7A1E2C;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#141210; --fg:#F4F1EC; --surface:#1D1A17; --ph:#2A2622; --line:rgba(244,241,236,.16); --nav:rgba(20,18,16,.82); --err:#F28B82; --accent:#D9A3AB;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
/* phones: solid bars instead of a live blur, which the phone would redraw on every scroll frame */
@media (max-width:720px){ .snav,.sticky-buy{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;background:var(--bg) !important} }
/* the open list of a dropdown is drawn by the browser on white: keep its words dark in every theme */
select option,select optgroup{color:#161412;background:#fff}
/* touch: no grey flash on tap; buttons answer with a small press instead */
a,button,label,summary{-webkit-tap-highlight-color:transparent}
@media (hover:none){ .btn:active,.icon-btn:active,.chip:active{opacity:.75} }
/* the cookie card and back-to-top button share the bottom corner on phones: the button waits until the card is answered */
body:has(.cookies.show) .totop{opacity:0;pointer-events:none}
html,body{background:var(--bg)}
body{color:var(--fg);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .5s var(--ease),color .5s var(--ease)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.wrap{padding-left:clamp(16px,5vw,72px);padding-right:clamp(16px,5vw,72px)}

/* nav */
.snav{position:sticky;top:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px clamp(16px,4vw,48px);
  background:var(--nav);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);font-size:.9rem;letter-spacing:.01em}
.snav ul{display:flex;gap:clamp(12px,2vw,28px);list-style:none;align-items:center}
.snav ul:last-child{justify-content:flex-end}
.snav .logo{font-family:var(--serif);font-style:italic;font-size:1.5rem;letter-spacing:.02em}
.snav a.on{border-bottom:1px solid currentColor}
.snav a{white-space:nowrap}
@media (max-width:720px){ .snav .hide-sm{display:none} .snav{letter-spacing:.04em;padding-left:12px;padding-right:12px} .snav ul{gap:10px} .snav .logo{font-size:1.25rem} }
.snav .back{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 8px;border:1px solid var(--line);border-radius:999px;transition:background .4s var(--ease),color .4s var(--ease)}
.snav .back:hover{background:var(--fg);color:var(--bg)}
.snav .back svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.snav .back:hover svg{transform:translateX(-3px)}

/* icon buttons in any nav (search, theme) */
.icon-btn{display:inline-grid;place-items:center;width:30px;height:30px;background:none;border:0;cursor:pointer;color:inherit;border-radius:50%}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.theme-btn .moon{display:none} :root[data-theme="dark"] .theme-btn .moon{display:block} :root[data-theme="dark"] .theme-btn .sun{display:none}

/* wishlist heart */
.heart{position:absolute;top:10px;right:10px;z-index:2;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--nav);cursor:pointer;backdrop-filter:blur(6px)}
.heart svg{width:20px;height:20px;fill:transparent;stroke:var(--fg);stroke-width:1.4;transition:fill .3s}
.heart[aria-pressed="true"] svg{fill:var(--accent);stroke:var(--accent)}
.heart.inline{position:static;width:52px;height:auto;border:1px solid var(--fg);border-radius:0;background:none;flex:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 30px;font-size:.9rem;letter-spacing:.01em;border:1px solid var(--fg);background:none;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:color .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--fg);transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1}
.btn:hover{color:var(--bg)} .btn:hover::before{transform:none}
.btn.dark{background:var(--fg);color:var(--bg)} .btn.dark::before{background:var(--madder)}
.btn.dark:hover{color:var(--chalk)}
.btn.wide{width:100%}
.btn[disabled]{opacity:.5;cursor:wait}
.link{background:none;border:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:.85rem;opacity:.7}
.link:hover{opacity:1}

/* bag drawer */
.bag{position:fixed;inset:0;z-index:150;pointer-events:none}
.bag-scrim{position:absolute;inset:0;background:rgba(22,20,18,.45);opacity:0;transition:opacity .5s var(--ease)}
.bag-panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--bg);color:var(--fg);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .7s var(--ease)}
.bag.open{pointer-events:auto} .bag.open .bag-scrim{opacity:1} .bag.open .bag-panel{transform:none}
.bag header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid var(--line)}
.bag h2{font-family:var(--serif);font-weight:400;font-size:1.8rem}
.x{background:none;border:0;cursor:pointer;font-size:.9rem;letter-spacing:.01em;color:inherit}
.bag-lines{flex:1;overflow:auto;padding:8px 24px}
.bag-line{display:grid;grid-template-columns:76px 1fr auto;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);font-size:.86rem}
.bag-line img{width:76px;height:96px;object-fit:cover}
.bag-line h3{font-family:var(--serif);font-weight:400;font-size:1.2rem}
.bag-line p{opacity:.65;line-height:1.5}
.line-end{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);margin-top:10px}
.qty button{width:30px;height:30px;background:none;border:0;cursor:pointer}
.qty span{min-width:24px;text-align:center}
.bag-empty{padding:60px 0;text-align:center}
.bag-empty p{font-family:var(--serif);font-size:1.4rem;margin-bottom:24px}
.bag-foot{padding:24px;border-top:1px solid var(--line)}
.bag-foot:empty{display:none}
.bag-row{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0}
.bag-row b{font-weight:500}
.note{font-size:.8rem;opacity:.6;margin:6px 0 18px}

/* product card */
.card{display:block}
.card .ph{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--ph)}
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .8s var(--ease),transform 1.4s var(--ease)}
.card .ph img+img{opacity:0}
/* mouse only: on touch screens a tapped card would otherwise stay "hovered" when you come back */
@media (hover:hover){ .card:hover .ph img+img{opacity:1} .card:hover .ph img{transform:scale(1.04)} }
.card .quick{position:absolute;left:12px;right:12px;bottom:12px;padding:12px;background:var(--bg);color:var(--fg);border:0;cursor:pointer;font-size:.85rem;letter-spacing:.01em;transform:translateY(130%);transition:transform .5s var(--ease)}
.card:hover .quick,.card .quick:focus-visible{transform:none}
@media (hover:none){ .card .quick{transform:none} }
.card h3{font-family:var(--serif);font-weight:400;font-size:1.35rem;margin-top:14px;display:flex;justify-content:space-between;gap:12px}
.card h3 span{font-family:var(--sans);font-size:.95rem;font-weight:400}
.card p{font-size:.85rem;opacity:.6;margin-top:2px}

/* search overlay */
.search{position:fixed;inset:0;z-index:160;pointer-events:none}
.search-scrim{position:absolute;inset:0;background:rgba(22,20,18,.5);opacity:0;transition:opacity .4s var(--ease)}
.search-panel{position:absolute;left:0;right:0;top:0;max-height:90svh;overflow:auto;background:var(--bg);color:var(--fg);padding:28px clamp(16px,5vw,72px) 36px;transform:translateY(-100%);transition:transform .6s var(--ease)}
.search.open{pointer-events:auto} .search.open .search-scrim{opacity:1} .search.open .search-panel{transform:none}
.search form{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--fg);padding-bottom:10px}
.search form svg{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4}
.search input{flex:1;background:none;border:0;outline:none;font-family:var(--serif);font-size:clamp(1.6rem,4vw,2.8rem);min-width:0}
.search .hint{font-size:.8rem;opacity:.6;margin-top:12px}
.search .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.search .chips a{padding:8px 16px;border:1px solid var(--line);border-radius:999px;font-size:.85rem}
.search .chips a:hover{background:var(--fg);color:var(--bg)}
.sresults{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:24px}
.sresults a{display:block;font-size:.85rem}
.sresults img{aspect-ratio:3/4;width:100%;object-fit:cover;background:var(--ph);margin-bottom:8px}
.sresults b{font-family:var(--serif);font-weight:400;font-size:1.1rem;display:block}
.search .all{display:inline-block;margin-top:20px;font-size:.85rem;text-decoration:underline;text-underline-offset:3px}
@media (max-width:720px){ .sresults{grid-template-columns:repeat(2,minmax(0,1fr))} }
mark{background:color-mix(in srgb,var(--harda) 35%,transparent);color:inherit;padding:0 .1em}

/* cookie notice */
.cookies{position:fixed;left:16px;bottom:16px;z-index:140;width:min(400px,calc(100% - 32px));background:var(--bg);color:var(--fg);border:1px solid var(--line);padding:20px;box-shadow:0 18px 50px rgba(22,20,18,.18);transform:translateY(140%);transition:transform .7s var(--ease)}
.cookies.show{transform:none}
.cookies h2{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin-bottom:6px}
.cookies p{font-size:.86rem;line-height:1.55;opacity:.8}
.cookies .row{display:flex;gap:8px;margin-top:16px}
.cookies .btn{padding:11px 18px;flex:1}

/* back to top */
.totop{position:fixed;right:20px;bottom:20px;z-index:130;width:52px;height:52px;border-radius:50%;border:0;background:var(--bg);color:var(--fg);cursor:pointer;display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(22,20,18,.2);opacity:0;transform:translateY(20px) scale(.9);pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.totop circle{fill:none;stroke-width:2}
.totop .track{stroke:var(--line)} .totop .ring{stroke:var(--harda);stroke-linecap:round}
.totop .arrow{position:static;width:18px;height:18px;transform:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.totop:hover .arrow{transform:translateY(-2px);transition:transform .3s var(--ease)}

/* payment window and email preview (native <dialog>: focus is trapped, Esc closes) */
.paysheet{margin:auto;width:min(420px,calc(100% - 24px));max-height:calc(100svh - 24px);border:0;padding:0;background:var(--bg);color:var(--fg);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.paysheet::backdrop{background:rgba(22,20,18,.55);backdrop-filter:blur(3px)}
.paysheet[open]{animation:sheetIn .5s var(--ease)}
@keyframes sheetIn{from{opacity:0;transform:translateY(24px) scale(.98)}}
.ps-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.ps-head div{flex:1} .ps-head b{display:block;font-weight:500} .ps-head small{opacity:.65;font-size:.8rem}
.ps-lock svg{width:22px;height:22px;fill:none;stroke:var(--harda);stroke-width:1.6}
.ps-body{padding:28px 24px;text-align:center}
.ps-amt{font-family:var(--serif);font-size:2.6rem;line-height:1}
.ps-method{margin:8px 0 18px;opacity:.75}
.ps-note{font-size:.82rem;line-height:1.5;opacity:.7;background:var(--surface);padding:12px;margin-bottom:20px;text-align:left}
.ps-body .link{margin-top:14px}
.ps-busy{padding:48px 24px;text-align:center}
.spinner{display:inline-block;width:36px;height:36px;border:2px solid var(--line);border-top-color:var(--harda);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:14px}
@keyframes spin{to{transform:rotate(360deg)}}
.paysheet.mail{width:min(640px,calc(100% - 24px));height:min(760px,calc(100svh - 24px))}
.paysheet.mail[open]{display:flex;flex-direction:column}
.paysheet.mail iframe{flex:1;width:100%;border:0;background:#F4F1EC}
.pay-msg{color:var(--err);font-size:.86rem;line-height:1.5;margin-top:12px}
.pay-msg:empty{display:none}

.sfoot{margin-top:clamp(80px,14vh,140px);background:var(--ink);color:var(--chalk);padding:48px clamp(16px,5vw,72px);display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:.8rem;border-top:1px solid var(--line)}
.sfoot .logo{font-family:var(--serif);font-style:italic;font-size:1.6rem}

/* touch screens: give small text links and buttons a finger-sized hit area without changing how they look */
@media (pointer:coarse){
  .snav a,.x,.link,.search .chips a,.shead .clear{display:inline-flex;align-items:center;min-height:40px}
  /* every small text link and fold-out row gets a finger-sized target; radio buttons and checkboxes grow too */
  .go,.crumbs a,.jump a,.menu-sub a,.mp-links a,.acct-menu a{display:inline-flex;align-items:center;min-height:40px}
  details > summary{padding-top:8px;padding-bottom:8px}
  input[type="radio"],input[type="checkbox"]{width:20px;height:20px}
  .snav .back{min-height:34px}
  .qty button{width:40px;height:40px}
  .icon-btn{width:40px;height:40px}
}
/* ---------- clean menu bar: menu + back | logo | search, account, bag ---------- */
.nav-l,.nav-r{display:flex;align-items:center;gap:4px !important;list-style:none}
.nav-r{justify-content:flex-end}
.nav-l .icon-btn,.nav-r .icon-btn{width:40px;height:40px}
.nav-l svg,.nav-r svg{width:21px;height:21px}
.snav .back{border:1px solid var(--line);border-radius:50%;padding:0}
.bagbtn{position:relative}
.bagbtn .count{position:absolute;top:3px;right:1px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--harda);color:#161412;font-size:11px;font-weight:500;letter-spacing:0;display:grid;place-items:center;line-height:1}
.bagbtn .count:empty,.bagbtn .count[data-zero]{display:none}
#nav .icon-btn::after{display:none}


/* slide-in menu from the left (native dialog: focus stays inside, Esc closes) */
.menu{margin:0;height:100dvh;max-height:100dvh;width:min(440px,88vw);max-width:none;border:0;padding:0;background:var(--bg);color:var(--fg);display:none;flex-direction:column;overflow-y:auto;letter-spacing:0}
.menu[open]{display:flex;animation:menuIn .6s var(--ease)}
.menu.closing{animation:menuOut .38s var(--ease) forwards}
.menu::backdrop{background:rgba(22,20,18,.5);backdrop-filter:blur(2px);animation:fadeIn .5s ease}
.menu.closing::backdrop{animation:fadeOut .38s ease forwards}
@keyframes menuIn{from{transform:translateX(-100%)}}
@keyframes menuOut{to{transform:translateX(-100%)}}
@keyframes fadeIn{from{opacity:0}} @keyframes fadeOut{to{opacity:0}}
.menu-head{display:flex;justify-content:space-between;align-items:center;padding:22px 28px;border-bottom:1px solid var(--line)}
.menu-head .logo{font-family:var(--serif);font-style:italic;font-size:1.6rem}
.menu-main{display:flex;flex-direction:column;padding:20px 28px 8px}
.menu-main > a{font-family:var(--serif);font-size:clamp(1.9rem,6vw,2.5rem);line-height:1.15;padding:8px 0;transition:transform .4s var(--ease),color .3s}
.menu-main > a:hover{transform:translateX(8px);color:var(--accent)}
.menu-sub{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 14px}
.menu-sub a{padding:7px 14px;border:1px solid var(--line);border-radius:999px;font-size:.85rem}
.menu-sub a:hover{background:var(--fg);color:var(--bg)}
.menu-minor{display:grid;padding:14px 28px;border-top:1px solid var(--line);margin-top:auto}
.menu-minor a,.menu-minor button{display:flex;justify-content:space-between;padding:11px 0;font:inherit;font-size:1rem;background:none;border:0;cursor:pointer;color:inherit;text-align:left}
.menu-minor span{opacity:.6;font-size:.85rem}
.menu-foot{display:flex;justify-content:space-between;align-items:center;padding:18px 28px 26px;border-top:1px solid var(--line);font-size:.8rem}
.menu-foot p{opacity:.55;font-family:var(--serif);font-style:italic}
.menu[open] .menu-main > *,.menu[open] .menu-minor,.menu[open] .menu-foot{animation:rise .7s var(--ease) both;animation-delay:calc(.12s + var(--i,0) * .05s)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}

/* background notices (a save that failed, and why) */
.nk-toast{position:fixed;left:50%;bottom:24px;z-index:170;transform:translate(-50%,140%);max-width:min(440px,calc(100% - 32px));padding:12px 18px;background:var(--fg);color:var(--bg);font-size:.92rem;line-height:1.45;box-shadow:0 14px 40px rgba(22,20,18,.25);transition:transform .5s var(--ease)}
.nk-toast.show{transform:translate(-50%,0)}

/* ---------- opening a product (cross-page View Transitions) ----------
   Only shopping steps use this (store.js skips it for every other navigation). The tapped card photo and the
   product page's main photo share one name, so the browser grows one into the other; the menu bar stays put. */
@view-transition{navigation:auto}
.snav{view-transition-name:nk-nav}
.gallery .fr:first-child{view-transition-name:nk-product}
::view-transition-group(nk-product){animation-duration:.55s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(nk-product),::view-transition-new(nk-product){height:100%;object-fit:cover;animation-duration:.55s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(root){animation:vtOut .28s ease both}
::view-transition-new(root){animation:vtIn .45s cubic-bezier(.22,1,.36,1) .1s both}
::view-transition-group(nk-nav){animation:none}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){ @view-transition{navigation:none} }

/* the silk transition canvas sits above everything */
.silk-veil{position:fixed;inset:0;width:100%;height:100%;z-index:500;pointer-events:none}

@media (max-width:400px){
  .snav .logo{font-size:1.2rem}
  .nav-l .icon-btn,.nav-r .icon-btn{width:36px}
}
@media (max-width:360px){   /* the longer "Raw Chanderi" name still has to fit beside four icons on the smallest phones */
  .snav .logo{font-size:1.02rem;letter-spacing:0}
  .snav{padding-left:8px;padding-right:8px} .snav ul{gap:4px}
  .nav-l .icon-btn,.nav-r .icon-btn{width:32px}
}
/* phones: tighter gutters, nothing wider than the screen, inputs at 16px so iOS does not zoom on focus */
@media (max-width:480px){
  .bag header,.bag-foot{padding:18px}
  .bag-lines{padding:4px 18px}
  .bag-line{grid-template-columns:64px 1fr auto;gap:12px}
  .bag-line img{width:64px;height:82px}
  .cookies{left:12px;right:12px;bottom:12px;width:auto}
  .totop{right:14px;bottom:14px;width:46px;height:46px}
  .card h3{flex-wrap:wrap;gap:2px 10px;font-size:1.15rem}   /* two narrow columns: price drops under a long name */
  input,select,textarea{font-size:16px}
  .btn{padding:14px 20px}
}

@media (prefers-reduced-motion:reduce){ *{transition-duration:.01ms !important} }
/* profile block at the top of the side menu */
.am-ini{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--madder);color:#E9C46A;font-family:var(--serif);font-style:italic;font-size:1.3rem}
.am-ini svg{width:22px;height:22px;fill:none;stroke:#E9C46A;stroke-width:1.5}
.menu-profile{margin:18px 28px 6px;padding:18px;background:var(--surface)}
.mp-head{display:flex;gap:14px;align-items:center}
.mp-head b{display:block;font-family:var(--serif);font-weight:400;font-size:1.3rem;line-height:1.1}
.mp-head small{display:block;opacity:.6;font-size:.8rem;word-break:break-all;margin-top:2px}
a.mp-head:hover b{color:var(--accent)}
.mp-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.mp-links a{padding:7px 12px;border:1px solid var(--line);border-radius:999px;font-size:.82rem;transition:background .3s,color .3s}
.mp-links a:hover{background:var(--fg);color:var(--bg)}
.mp-out{margin-top:12px;background:none;border:0;padding:4px 0;cursor:pointer;font:inherit;font-size:.85rem;color:var(--err);text-decoration:underline;text-underline-offset:3px}
.mp-cta{display:flex;gap:8px;margin-top:14px}
.mp-cta .btn{flex:1;padding:12px 10px}
/* theme switch in the top bar */
.theme-btn svg{transition:transform .5s var(--ease)}
/* arriving through the silk: a plain indigo cover from the first paint until the silk canvas takes over */
html.silk-in body::before{content:"";position:fixed;inset:0;z-index:499;background:#5A1622}

/* ===== TRIAL: dusty rose background gradient. Delete from here to the end of the file to remove it. ===== */
:root{--tint:190 132 136}                    /* dusty rose, as r g b */
:root[data-theme="dark"]{--tint:206 140 146} /* a little brighter so it shows on the dark background */
/* a soft dusty rose wash from the top-left corner, fading through the page and returning faintly at the bottom-right */
/* "html body" outranks the home page's own body background; the home sections paint solid colours, so they get the wash too.
   Fixed to the screen, so the wash runs on seamlessly from one section into the next. */
html body,html .promises,html .manifesto,html .making,html:root .occasions,html:root .stores,html body>footer{   /* :root outranks the home page's dark-mode colours */
  background-image:linear-gradient(155deg,rgb(var(--tint) / .24) 0%,rgb(var(--tint) / .07) 35%,transparent 55%,rgb(var(--tint) / .1) 100%);background-attachment:fixed}
/* sections that stay dark in both themes need the brighter rose to show */
.promises,.manifesto,.making,body>footer,[data-theme="dark"] .occasions,[data-theme="dark"] .stores{--tint:206 140 146}