/* pp.css: the shared look. Tokens, type, buttons and section rhythm for every
   page that has moved to the new design. Page-specific layout stays in the
   page. The footer's styles live in nav.js, which builds the footer. */

/* Served from this site, never from a font host: a request to a third party
   would leave the page before the visitor has answered the consent banner.
   Latin subset, variable weight 400-700. License: fonts/README.txt */
@font-face{
  font-family:"Source Serif 4"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/fonts/source-serif-4-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Source Sans 3"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/fonts/source-sans-3-latin.woff2") format("woff2");
}

:root{
  --plum:#4a2138; --plum-deep:#3b1a2d; --rose:#d46a8f; --rose-light:#f2c9d6;
  --gold:#c99a4b; --cream:#fdf6f2; --ink:#3a2a32; --text:#3a2a32; --muted:#6e5864;
  --white:#fff; --rule:#eadbe1; --field:#fbf7f9;
  --line-statement:#8e2f56; --line-plus:#4a2138; --line-simply:#4d6a52;
  /* The logo is a Georgia wordmark, so the page's voice is a serif too. The
     sans is for working parts only (buttons, menus, badges, prices, labels)
     and never sets a headline. */
  --head:"Source Serif 4", Georgia, "Times New Roman", serif;
  --body:"Source Serif 4", Georgia, "Times New Roman", serif;
  --ui:"Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --measure:66ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* font-size-adjust keeps the fallback the same visual size while the web font
   loads, so text does not jump. Browsers without it simply swap. */
body{margin:0; color:var(--ink); font-family:var(--body); font-size:18px; line-height:1.6; font-size-adjust:from-font}
a{color:inherit}
img{max-width:100%; height:auto; display:block}
button{font:inherit}
.wrap{max-width:1160px; margin:0 auto; padding-inline:24px}
@media (max-width:600px){ .wrap{padding-inline:16px} body{font-size:17px} }
:focus-visible{outline:3px solid var(--rose); outline-offset:3px; border-radius:4px}
.on-plum :focus-visible{outline-color:var(--rose-light)}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

h1,h2,h3{font-family:var(--head); color:var(--plum); margin:0; letter-spacing:-.015em; line-height:1.08; text-wrap:balance; font-size-adjust:from-font}
h1{font-size:clamp(3rem, 8.6vw, 6.8rem); font-weight:700; letter-spacing:-.022em; line-height:1}
h2{font-size:clamp(2rem, 4.4vw, 3.15rem); font-weight:700}
h3{font-size:1.42rem; font-weight:700; letter-spacing:-.01em}
p{margin:0 0 1em; max-width:var(--measure)}
/* A serif full stop is a small mark; this one is the brand's, so it is enlarged. */
.dot{color:var(--rose); font-size:1.18em; line-height:0}
.ui{font-family:var(--ui)}

.btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 24px; border-radius:999px;
  font-family:var(--ui); font-weight:700; font-size:1rem; text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:background-color .15s, color .15s, border-color .15s; font-size-adjust:from-font}
.btn-light{background:var(--rose-light); color:var(--plum)} .btn-light:hover{background:var(--white)}
.btn-line{border-color:rgba(242,201,214,.6); color:var(--cream); background:transparent}
.btn-line:hover{border-color:var(--rose-light); background:rgba(242,201,214,.08)}
.btn-plum{background:var(--plum); color:var(--cream)} .btn-plum:hover{background:var(--plum-deep)}
.btn-ghost{background:transparent; color:var(--plum); border-color:var(--rule)} .btn-ghost:hover{border-color:var(--plum)}

/* Sections paint their own ground. The site's fixed background texture sits
   behind everything, so a section with no background would show it through. */
.sec{padding-block:96px; background:var(--white)}
.sec-cream{background:var(--cream)}
.sec-plum{background:var(--plum); color:var(--cream)}
.sec-plum h2{color:var(--cream)} .sec-plum p{color:var(--rose-light)}
@media (max-width:600px){ .sec{padding-block:64px} }
.intro{margin:18px 0 44px; color:var(--muted)}
/* Heading left, intro right on a wide screen, so the width is used; stacked on a phone. */
.sec-head{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:24px 64px; align-items:end; margin-bottom:48px}
.sec-head .intro{margin:0; max-width:48ch}
@media (max-width:820px){ .sec-head{grid-template-columns:1fr; margin-bottom:36px} }
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.split > *{min-width:0}
@media (max-width:820px){ .split{grid-template-columns:1fr; gap:28px} }

/* An inner page opens with its title and one line of context, over a rule. */
.page-head{padding-block:64px 40px; background:var(--white); border-bottom:1px solid var(--rule)}
.page-head .sec-head{margin-bottom:0}
.page-title{font-size:clamp(2.6rem, 6vw, 4.6rem)}
@media (max-width:600px){ .page-head{padding-block:40px 28px} }

/* An exclusive choice is a real radio input, visually replaced by the element
   that follows it. The input keeps the focus ring, drawn on that element. */
.opt{display:block; position:relative}
.opt input:focus-visible + *{outline:3px solid var(--rose); outline-offset:3px}

.btn-sm{min-height:40px; padding:0 16px; font-size:.92rem}
.btn:disabled{background:#e9dfe4; color:#8a7580; border-color:transparent; cursor:not-allowed}

/* A bar that stays at the bottom of the window: the shop's cart, the box
   tracker. env() keeps it clear of the iPhone home indicator. */
.bar{position:sticky; bottom:var(--pp-consent-h,0px); z-index:5; background:var(--plum); color:var(--cream); padding-bottom:env(safe-area-inset-bottom,0px)}
.bar .wrap{display:flex; align-items:center; gap:10px 16px; padding-block:14px; flex-wrap:wrap}
.bar-sum{font-family:var(--ui); font-weight:700; font-size:1.05rem}
.bar-note{font-family:var(--ui); font-size:.88rem; color:var(--rose-light)}
.bar .btn{margin-left:auto}

.msg{font-family:var(--ui); font-size:.92rem; margin:10px 0 0; color:var(--line-statement)}
.fine{font-size:.85rem; color:var(--muted); margin:12px 0 0}
.fine a{color:var(--muted)}

.badge{display:inline-block; background:var(--accent, var(--plum)); color:var(--white); font-family:var(--ui); font-weight:700; font-size:.85rem; padding:5px 12px; border-radius:999px}
.price{font-family:var(--ui); font-weight:700; font-size:2.1rem; color:var(--plum); margin-top:10px; letter-spacing:-.02em; font-variant-numeric:lining-nums tabular-nums}
.price small{font-size:.95rem; font-weight:600; color:var(--muted); letter-spacing:0}
/* A line's colour never appears without its name badge: two of the three are
   hard to tell apart for some people, and the name is what carries it. */
.l-statement{--accent:var(--line-statement)} .l-plus{--accent:var(--line-plus)} .l-simply{--accent:var(--line-simply)}

/* A product that is not on sale yet: blush, plum text. Never the plum .badge,
   which marks a box you can buy today. */
.chip{display:inline-block; background:var(--rose-light); color:var(--plum); font-family:var(--ui); font-weight:700; font-size:.85rem; letter-spacing:.02em; padding:5px 12px; border-radius:999px}

/* ---- the site header ----
   One copy for every page with the main menu (checkout keeps its own, shorter
   one). nav.js mounts the account control into "header .wrap". The menu is
   never hidden: on a narrow screen it drops to its own row and scrolls
   sideways. Element selectors on purpose, so every page's own rules keep the
   specificity they had when this block lived in each page. */
header{background:rgba(253,246,242,.96); backdrop-filter:blur(8px); border-bottom:1px solid rgba(74,33,56,.10)}
header .wrap{display:flex; align-items:center; gap:14px; flex-wrap:wrap; max-width:1160px; margin:0 auto; padding:12px 24px}
header .logo{flex:0 0 auto; display:inline-flex; text-decoration:none}
/* "safe center": plain centre on a row that overflows clips BOTH ends, and the
   left overhang can never be scrolled back into view. */
.site-nav{display:flex; flex:1 1 auto; justify-content:safe center; gap:26px; font-family:var(--ui);
  font-size:15px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.site-nav::-webkit-scrollbar{display:none}
.site-nav a{text-decoration:none; color:var(--plum); white-space:nowrap; font-weight:600; padding:8px 0;
  min-height:40px; display:inline-flex; align-items:center}
.site-nav a:hover{color:var(--line-statement)}
/* While the row is wider than the screen its right edge fades, so the cut-off
   tab reads as "more this way". nav.js sets .pp-nav-more only while there is
   more to scroll to and clears it at the end of the row. A mask fades the
   links themselves and adds no layer over them, so every tab stays tappable.
   Without mask support the row simply has a hard edge. */
.site-nav.pp-nav-more{-webkit-mask-image:linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask-image:linear-gradient(to right, #000 calc(100% - 40px), transparent)}
header .wrap .ppnav{margin-left:auto}
@media (max-width:760px){
  header .wrap{padding:10px 16px; gap:8px}
  .site-nav{order:3; flex-basis:100%; gap:16px; font-size:14.5px}
}

/* ---- sticky header: slides away scrolling down, returns scrolling up ----
   Sticky lives in CSS so the header never needs JavaScript to stay at the top.
   nav.js only adds .pp-hdr-hidden to the root element while she scrolls down;
   if nav.js never runs, the header simply stays visible. --hdr-off is how far
   below the top other sticky things must park: the header's height while it
   shows, zero while it is away. The header must outrank the page body, and
   pages give main no z-index: the account menu hangs below the bar, and on a
   tie the later element paints on top. */
:root{--hdr-off:var(--hdr-h,57px); scroll-padding-top:var(--hdr-h,57px)}
:root.pp-hdr-hidden{--hdr-off:0px}
body > header{position:sticky; top:0; z-index:30; transition:transform .22s ease}
.pp-hdr-hidden body > header{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){ body > header{transition:none} }

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