@font-face{font-family:'Fraunces';font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/fraunces.woff2) format('woff2-variations')}@font-face{font-family:'Figtree';font-style:normal;font-display:swap;font-weight:300 900;src:url(/fonts/figtree.woff2) format('woff2-variations')}
/* Plum & Bee website design system, v1 (11 Nov 2026). Designed from scratch for the site; brand tokens from brand/BRAND.md.
   Idea: "paper on colour". The product is paper, so pictures are clean white sheets on a soft colour field, one field colour per product type. Mobile first. */
:root {
  --plum: #4a2350; --plum-deep: #3a1a40; --honey: #f5b83d; --honey-deep: #d9960f; --pale: #fbdc96;
  --white: #fbf8f3; --paper: #ffffff; --ink: #2a1f2d; --soft: #6b5f6e; --line: #ebe4da;
  /* field colours, one per product type */
  --f-lilac: #ece2ef; --f-butter: #fcedc4; --f-blush: #f8e1d8; --f-sage: #dfeadb; --f-sky: #dde9f1; --f-plum: #5b2f62;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif; --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-s: 12px; --r-m: 20px; --r-l: 32px; --pill: 999px;
  --wrap: 1280px; --pad: 20px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 104px;
}
@media (min-width: 760px) { :root { --pad: 40px; } }
@media (min-width: 1500px) { :root { --pad: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; } ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--honey); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--s5); } @media (min-width: 760px) { .section { padding-block: var(--s6); } }
.tight { padding-top: 0; }

/* type */
.h1, .h2, .h3 { font-family: var(--serif); font-weight: 600; color: var(--plum); font-variation-settings: 'opsz' 72, 'SOFT' 50, 'WONK' 0; letter-spacing: -0.015em; text-wrap: balance; }
.h1 { font-size: clamp(40px, 6vw, 76px); line-height: 1.02; }
.h2 { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.08; }
.h3 { font-size: clamp(21px, 2vw, 26px); line-height: 1.2; }
.h1 em, .h2 em { font-style: normal; color: var(--honey-deep); }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--soft); text-wrap: pretty; }
/* the brand device: two honey stripes, taken from the bee */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 700 13px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--plum); }
.eyebrow::before { content: ''; width: 18px; height: 14px; flex: none; background: linear-gradient(var(--honey) 0 5px, transparent 5px 9px, var(--honey) 9px 14px); border-radius: 2px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.sec-head .h2 { margin-top: 16px; } .sec-head p { color: var(--soft); margin-top: 12px; max-width: 48ch; }
.link { font-weight: 700; color: var(--plum); border-bottom: 2px solid var(--honey); padding-bottom: 3px; white-space: nowrap; } .link:hover { border-color: var(--plum); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 12px 28px; border-radius: var(--pill); font: 700 16px/1.2 var(--sans); border: 2px solid transparent; cursor: pointer; transition: background .15s, transform .15s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn-plum { background: var(--plum); color: var(--white); } .btn-plum:hover { background: var(--plum-deep); }
.btn-honey { background: var(--honey); color: var(--plum); } .btn-honey:hover { background: #f0ad24; }
.btn-line { border-color: var(--plum); color: var(--plum); } .btn-line:hover { background: var(--f-lilac); }
.btn-wide { width: 100%; } .btn svg { width: 18px; height: 18px; flex: none; }

/* top bar, header */
.topbar { background: var(--plum); color: var(--white); font: 600 13.5px/1.3 var(--sans); text-align: center; padding: 10px var(--pad); } .topbar b { color: var(--honey); }
.header { background: rgba(251, 248, 243, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.header .wrap { display: flex; align-items: center; gap: var(--s3); min-height: 68px; }
.logo img { height: 40px; width: auto; }
.nav { display: none; margin-left: auto; gap: 34px; font: 600 16px/1 var(--sans); } .nav a { padding: 10px 0; border-bottom: 2px solid transparent; } .nav a:hover, .nav a[aria-current] { border-color: var(--honey); }
.head-cta { display: none; }
.menu { margin-left: auto; position: relative; }
.menu summary { list-style: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; cursor: pointer; background: var(--paper); border: 1px solid var(--line); } .menu summary::-webkit-details-marker { display: none; }
.menu summary i, .menu summary i::before, .menu summary i::after { content: ''; display: block; width: 20px; height: 2px; background: var(--plum); border-radius: 2px; position: relative; } .menu summary i::before { position: absolute; top: -6px; } .menu summary i::after { position: absolute; top: 6px; }
.menu nav { position: absolute; right: 0; top: 58px; width: min(86vw, 330px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); padding: 10px; box-shadow: 0 20px 44px rgba(42, 31, 45, .16); display: grid; } .menu nav a { padding: 14px 16px; border-radius: 12px; font-weight: 600; } .menu nav a:hover { background: var(--white); }
@media (min-width: 1120px) { .nav { display: flex; gap: 24px; } .nav a { white-space: nowrap; } .head-cta { display: inline-flex; min-height: 46px; padding: 8px 22px; font-size: 15px; } .menu { display: none; } .header .wrap { min-height: 84px; } .logo img { height: 46px; } }
@media (min-width: 1300px) { .nav { gap: 34px; } }

/* paper sheets: the picture language */
.field { position: relative; border-radius: var(--r-m); overflow: hidden; display: grid; place-items: center; background: var(--f-lilac); }
.field.butter { background: var(--f-butter); } .field.blush { background: var(--f-blush); } .field.sage { background: var(--f-sage); } .field.sky { background: var(--f-sky); } .field.plum { background: var(--f-plum); } .field.lilac { background: var(--f-lilac); }
.stack { position: relative; width: 46%; aspect-ratio: 200 / 260; }
.stack svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 10px 18px rgba(58, 26, 64, .16)); }
.stack svg:nth-child(1) { transform: rotate(-9deg) translate(-16%, 2%); } .stack svg:nth-child(2) { transform: rotate(7deg) translate(15%, 3%); } .stack svg:nth-child(3) { transform: rotate(-1deg); }
.stack.one svg { transform: rotate(-3deg); } .stack.wide { width: 58%; }
.note { position: absolute; right: 10px; bottom: 10px; font: 600 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: rgba(74, 35, 80, .45); } .field.plum .note { color: rgba(255, 255, 255, .45); }

/* hero */
.hero { padding-block: var(--s4) var(--s5); overflow: hidden; }
.hero-grid { display: grid; gap: var(--s4); align-items: center; }
.hero .h1 { margin-top: 20px; } .hero .lead { margin-top: var(--s3); max-width: 33em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s4); }
.hero-art { position: relative; aspect-ratio: 1 / 0.9; display: grid; place-items: center; }
.hero-art .disc { position: absolute; width: 86%; aspect-ratio: 1; border-radius: 50%; background: var(--f-butter); }
.hero-art .stack { width: 44%; } .hero-art .stack svg { filter: drop-shadow(0 22px 30px rgba(58, 26, 64, .2)); }
.hero-art .stack svg:nth-child(1) { transform: rotate(-13deg) translate(-44%, 6%); } .hero-art .stack svg:nth-child(2) { transform: rotate(11deg) translate(44%, 5%); } .hero-art .stack svg:nth-child(3) { transform: rotate(-2deg) translateY(-3%); }
.hero-art .bee { position: absolute; width: 19%; right: 5%; top: 4%; transform: rotate(8deg); }
.hero-art .trail { position: absolute; right: 21%; top: 13%; width: 26%; }
@media (min-width: 1020px) { .hero { padding-block: var(--s5) var(--s6); } .hero-grid { grid-template-columns: 1.05fr 1fr; gap: var(--s5); } }

/* facts */
.facts ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.facts li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); padding: 18px; font: 700 16px/1.3 var(--sans); color: var(--plum); }
.facts li small { display: block; margin-top: 6px; font: 400 14.5px/1.4 var(--sans); color: var(--soft); }
.facts svg { width: 26px; height: 26px; color: var(--honey-deep); margin-bottom: 14px; }
@media (min-width: 1020px) { .facts ul { grid-template-columns: repeat(4, 1fr); gap: 20px; } .facts li { padding: 26px; font-size: 18px; } }

/* bento of product types */
.bento { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.bento a { position: relative; display: block; place-items: initial; border-radius: var(--r-m); overflow: hidden; min-height: 210px; padding: 18px; transition: transform .2s; } .bento a:hover { transform: translateY(-3px); }
.bento .t { position: relative; z-index: 2; font: 600 21px/1.1 var(--serif); color: var(--plum); font-variation-settings: 'opsz' 60, 'SOFT' 50, 'WONK' 0; } .bento .t small { display: block; margin-top: 8px; font: 600 13.5px/1.2 var(--sans); color: var(--soft); }
.bento .stack { position: absolute; right: 12%; bottom: -14%; width: 44%; }
.bento .b-plum .t { color: var(--white); } .bento .b-plum .t small { color: var(--pale); }
.bento .big { grid-column: 1 / -1; min-height: 250px; } .bento .big .stack { width: 34%; right: 14%; bottom: -18%; }
@media (min-width: 1020px) { .bento { gap: 20px; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 250px; } .bento a { padding: 30px; min-height: 0; } .bento .t { font-size: 30px; } .bento .t small { font-size: 15px; }
  .bento .big { grid-column: span 5; grid-row: span 2; } .bento .big .stack { width: 54%; right: 12%; bottom: -8%; } .bento .c4 { grid-column: span 4; } .bento .c3 { grid-column: span 3; } .bento .stack { width: 46%; right: 9%; bottom: -24%; } .bento .c4 .stack { width: 40%; } }

/* product cards */
.grid { display: grid; gap: 30px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .grid { gap: 44px 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { display: block; } .card .field { aspect-ratio: 1 / 1; transition: transform .2s; } .card:hover .field { transform: translateY(-3px); }
.card .kind { margin-top: 16px; font: 700 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.card .name { margin-top: 8px; font: 600 17px/1.3 var(--sans); color: var(--ink); }
.card .meta { margin-top: 9px; display: flex; align-items: center; gap: 10px; font: 700 17px/1 var(--sans); color: var(--plum); } .card .meta small { font: 600 13px/1 var(--sans); color: var(--soft); }
.badge { position: absolute; left: 12px; top: 12px; z-index: 2; background: var(--honey); color: var(--plum); font: 700 11.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 7px 11px; border-radius: var(--pill); } .badge.dark { background: var(--plum); color: var(--white); }

/* bands */
.band-plum { background: var(--plum); color: var(--white); } .band-plum .h2 { color: var(--white); } .band-plum .eyebrow { color: var(--pale); } .band-plum .sec-head p { color: #dccfe0; } .band-plum .link { color: var(--white); }
.band-plum .card .name { color: var(--white); } .band-plum .card .kind { color: #c9b6ce; } .band-plum .card .meta { color: var(--honey); } .band-plum .card .meta small { color: #c9b6ce; }
.free-panel { background: var(--f-butter); border-radius: var(--r-l); padding: 28px 20px; display: grid; gap: var(--s4); align-items: center; }
.free-panel .h2 { margin-top: 16px; } .free-panel p { margin-top: 14px; color: var(--ink); max-width: 30em; } .free-panel .btn { margin-top: var(--s3); }
.free-panel .grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -20px; padding-inline: 20px; scrollbar-width: none; } .free-panel .grid .card { flex: 0 0 62%; scroll-snap-align: start; } .free-panel .card .field { background: var(--paper); } .free-panel .card .name { font-size: 15px; } .free-panel .card .kind { display: none; }
@media (min-width: 1020px) { .free-panel { grid-template-columns: 0.85fr 1.5fr; gap: var(--s5); padding: 64px; } .free-panel .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; overflow: visible; margin: 0; padding: 0; } .free-panel .grid .card { flex: none; } .free-panel .card .name { font-size: 17px; } }
.steps { display: grid; gap: 14px; counter-reset: s; } .steps li { counter-increment: s; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); padding: 24px; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--plum); color: var(--honey); font: 600 20px/1 var(--serif); margin-bottom: 18px; }
.steps b { display: block; font: 600 22px/1.2 var(--serif); color: var(--plum); font-variation-settings: 'opsz' 60, 'SOFT' 50, 'WONK' 0; } .steps span { display: block; margin-top: 8px; color: var(--soft); }
@media (min-width: 1020px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 20px; } .steps li { padding: 32px; } }
.about { display: grid; gap: var(--s4); align-items: center; } .about .bee { width: 72px; }
.about .quote { margin-top: 22px; font: 600 clamp(28px, 3.4vw, 46px)/1.14 var(--serif); color: var(--plum); font-variation-settings: 'opsz' 72, 'SOFT' 50, 'WONK' 0; letter-spacing: -0.015em; } .about .quote em { font-style: normal; color: var(--honey-deep); }
.about p + p { margin-top: 14px; } .about .link { display: inline-block; margin-top: 22px; }
@media (min-width: 1020px) { .about { grid-template-columns: 1.15fr 1fr; gap: var(--s6); } }

/* footer */
.footer { background: var(--plum); color: #e7dcea; padding-block: var(--s5) var(--s3); font-size: 15.5px; }
.footer .cols { display: grid; gap: var(--s4) var(--s3); grid-template-columns: 1fr 1fr; } .footer .brand { grid-column: 1 / -1; } .footer .brand img { height: 52px; width: auto; } .footer .brand p { margin-top: 18px; max-width: 30ch; color: #cdbdd2; }
.footer h4 { margin-bottom: 16px; font: 700 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--honey); } .footer li + li { margin-top: 11px; } .footer a:hover { color: var(--white); text-decoration: underline; }
.footer .base { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid #6a4470; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; font-size: 14px; color: #cdbdd2; }
.footer .lang { display: flex; gap: 4px; background: var(--plum-deep); padding: 4px; border-radius: var(--pill); } .footer .lang a { padding: 6px 14px; border-radius: var(--pill); font-weight: 600; } .footer .lang a[aria-current] { background: var(--white); color: var(--plum); }
@media (min-width: 1020px) { .footer .cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .footer .brand { grid-column: auto; } }

/* breadcrumb */
.crumbs { padding-top: 20px; font: 500 14px/1.4 var(--sans); color: var(--soft); display: flex; flex-wrap: wrap; gap: 6px 8px; } .crumbs a:hover { color: var(--plum); text-decoration: underline; } .crumbs span::before { content: '/'; margin-right: 8px; color: #c9bfc9; }

/* product page */
.product { display: grid; gap: var(--s4); padding-block: var(--s3) var(--s5); }
.gallery .main { aspect-ratio: 1 / 0.86; border-radius: var(--r-l); } .gallery .main .stack { width: 40%; }
.gallery .thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; } .gallery .thumbs .field { aspect-ratio: 1; border-radius: 14px; border: 2px solid transparent; } .gallery .thumbs .on { border-color: var(--plum); } .gallery .thumbs .stack { width: 50%; }
.buy h1 { margin-top: 16px; font-size: clamp(32px, 3.5vw, 48px); line-height: 1.06; } .buy .sum { margin-top: 16px; color: var(--soft); font-size: 18px; text-wrap: pretty; }
.buy .price { margin-top: var(--s3); display: flex; align-items: baseline; gap: 12px; font: 700 36px/1 var(--sans); color: var(--plum); } .buy .price small { font: 600 14.5px/1.3 var(--sans); color: var(--soft); }
.buy .actions { margin-top: var(--s3); display: grid; gap: 10px; } .buy .where { margin-top: 12px; font-size: 14px; color: var(--soft); text-align: center; }
.buy .assure { margin-top: var(--s3); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .buy .assure li { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; font: 600 15px/1.3 var(--sans); color: var(--plum); } .buy .assure small { display: block; margin-top: 4px; font: 400 13.5px/1.35 var(--sans); color: var(--soft); }
@media (min-width: 1020px) { .product { grid-template-columns: 1.2fr 1fr; gap: var(--s5); align-items: start; } .buy { position: sticky; top: 112px; padding-top: 8px; } }
.inside { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; } .inside figure .field { aspect-ratio: 1 / 1.05; } .inside .stack { width: 54%; } .inside figcaption { margin-top: 12px; font: 600 16px/1.3 var(--sans); } .inside figcaption small { display: block; font: 400 14px/1.4 var(--sans); color: var(--soft); margin-top: 3px; }
@media (min-width: 1020px) { .inside { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.spec { display: grid; gap: var(--s4); } .spec table { width: 100%; border-collapse: collapse; font-size: 16.5px; } .spec th, .spec td { text-align: left; padding: 15px 0; border-top: 1px solid var(--line); vertical-align: top; } .spec tr:last-child > * { border-bottom: 1px solid var(--line); } .spec th { width: 36%; font-weight: 600; color: var(--soft); }
@media (min-width: 1020px) { .spec { grid-template-columns: 0.8fr 1.2fr; gap: var(--s6); } }
.faq details { border-top: 1px solid var(--line); } .faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; position: relative; font: 600 19px/1.35 var(--sans); color: var(--ink); } .faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 16px; font: 400 30px/1 var(--sans); color: var(--plum); } .faq details[open] summary::after { content: '\2212'; } .faq details p { padding: 0 0 24px; color: var(--soft); max-width: 68ch; }
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--paper); border-top: 1px solid var(--line); padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 14px; box-shadow: 0 -8px 24px rgba(42, 31, 45, .08); } .buybar b { font: 700 21px/1 var(--sans); color: var(--plum); } .buybar .btn { flex: 1; min-height: 50px; }
.has-buybar { padding-bottom: 78px; } @media (min-width: 1020px) { .buybar { display: none; } .has-buybar { padding-bottom: 0; } }

/* free printable page */
.free-hero { display: grid; gap: var(--s4); padding-block: var(--s3) var(--s5); align-items: center; }
.free-hero .h1 { margin-top: 18px; font-size: clamp(38px, 5vw, 64px); } .free-hero .lead { margin-top: var(--s3); max-width: 32em; } .free-hero .btn { margin-top: var(--s4); }
.chips { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: 8px; } .chip { font: 600 14px/1 var(--sans); padding: 10px 14px; border-radius: var(--pill); background: var(--paper); border: 1px solid var(--line); } .chip.free { background: var(--honey); border-color: var(--honey); color: var(--plum); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.free-hero .field { aspect-ratio: 1 / 0.92; border-radius: var(--r-l); } .free-hero .stack { width: 48%; }
@media (min-width: 1020px) { .free-hero { grid-template-columns: 1fr 0.95fr; gap: var(--s6); } }
.ideas { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; } .ideas li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); padding: 18px 20px; font: 600 17px/1.3 var(--sans); color: var(--plum); } .ideas li small { display: block; margin-top: 5px; font: 400 14.5px/1.4 var(--sans); color: var(--soft); }
@media (min-width: 1020px) { .ideas { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.upsell { display: grid; gap: var(--s4); align-items: center; border-radius: var(--r-l); background: var(--plum); color: var(--white); padding: 28px 20px; } .upsell .h2 { color: var(--white); margin-top: 16px; } .upsell .eyebrow { color: var(--pale); } .upsell p { color: #dccfe0; margin-top: 14px; max-width: 30em; }
.upsell .field { aspect-ratio: 1 / 0.8; } .upsell .actions { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .upsell .actions b { font: 700 26px/1 var(--sans); color: var(--honey); }
@media (min-width: 1020px) { .upsell { grid-template-columns: 1fr 1fr; padding: 64px; gap: var(--s5); } }
.narrow { max-width: 860px; }

/* Plum & Bee: styles for hub, shop, guide, text pages and not-found. Loaded after site.css. */

/* hub and shop */
.hub-hero { position: relative; overflow: hidden; border-radius: var(--r-l); margin-top: 20px; padding: 32px 22px 0; display: grid; gap: var(--s3); background: var(--f-lilac); }
.hub-hero.butter { background: var(--f-butter); } .hub-hero.blush { background: var(--f-blush); } .hub-hero.sage { background: var(--f-sage); } .hub-hero.plain { background: transparent; padding: 28px 0 0; border-radius: 0; }
.hub-hero .h1 { margin-top: 18px; font-size: clamp(36px, 4.8vw, 62px); } .hub-hero .lead { margin-top: 18px; color: var(--ink); max-width: 31em; }
.hub-hero .art { display: grid; place-items: center; height: 190px; } .hub-hero .art .stack { width: 150px; transform: translateY(18%); }
.hub-hero.plain .art { display: none; }
@media (min-width: 1020px) { .hub-hero { grid-template-columns: 1.25fr 1fr; padding: 72px 64px; align-items: center; } .hub-hero.plain { padding: 40px 0 0; grid-template-columns: 1fr; } .hub-hero .art { height: auto; position: absolute; right: 9%; bottom: -34%; width: 30%; } .hub-hero .art .stack { width: 100%; transform: none; } }
.toolbar { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; margin: var(--s4) 0 var(--s3); }
.filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); max-width: 100vw; } .filters::-webkit-scrollbar { display: none; }
.filters a { flex: none; font: 600 15px/1 var(--sans); padding: 12px 18px; border-radius: var(--pill); background: var(--paper); border: 1px solid var(--line); color: var(--ink); white-space: nowrap; } .filters a:hover { border-color: var(--plum); } .filters a[aria-current] { background: var(--plum); border-color: var(--plum); color: var(--white); }
.count { font: 600 15px/1 var(--sans); color: var(--soft); }
.more { display: grid; place-items: center; margin-top: var(--s5); }
.prose { max-width: 68ch; } .prose p + p { margin-top: 16px; } .prose .h2 { margin-bottom: 20px; }

/* guide (article) */
.article-head { padding-block: var(--s3) var(--s4); max-width: 900px; } .article-head .h1 { margin-top: 18px; font-size: clamp(36px, 4.6vw, 60px); } .article-head .lead { margin-top: var(--s3); } .article-head .meta { margin-top: var(--s3); font: 600 14px/1.4 var(--sans); color: var(--soft); }
.article { display: grid; gap: var(--s5); padding-bottom: var(--s5); }
.article .body { max-width: 720px; font-size: 18px; line-height: 1.7; } .article .body > * + * { margin-top: 20px; } .article .body h2 { font-size: clamp(26px, 2.6vw, 34px); margin-top: 56px; scroll-margin-top: 120px; } .article .body h2:first-child { margin-top: 0; }
.article .body ul.dots { display: grid; gap: 10px; } .article .body ul.dots li { padding-left: 26px; position: relative; } .article .body ul.dots li::before { content: ''; position: absolute; left: 4px; top: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--honey); }
.callout { background: var(--f-butter); border-radius: var(--r-m); padding: 22px 24px; font-size: 17px; } .callout b { display: block; font: 600 20px/1.2 var(--serif); color: var(--plum); margin-bottom: 6px; font-variation-settings: 'opsz' 60, 'SOFT' 50, 'WONK' 0; }
.sizes { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); padding: 24px; } .sizes svg { width: 100%; max-width: 290px; margin-inline: auto; } .sizes figcaption { margin-top: 14px; font-size: 14.5px; color: var(--soft); text-align: center; }
.article table { width: 100%; border-collapse: collapse; font-size: 16.5px; } .article th, .article td { text-align: left; padding: 13px 10px 13px 0; border-top: 1px solid var(--line); } .article thead th { border-top: 0; font: 700 12.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); } .article tr:last-child td { border-bottom: 1px solid var(--line); }
.aside { display: grid; gap: 20px; align-content: start; }
.toc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); padding: 22px 24px; } .toc h4 { font: 700 12.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); margin-bottom: 14px; } .toc li + li { margin-top: 10px; } .toc a { font-weight: 600; color: var(--plum); } .toc a:hover { text-decoration: underline; }
.promo { background: var(--plum); color: var(--white); border-radius: var(--r-m); padding: 24px; } .promo b { display: block; font: 600 24px/1.15 var(--serif); font-variation-settings: 'opsz' 60, 'SOFT' 50, 'WONK' 0; } .promo p { margin-top: 10px; color: #dccfe0; font-size: 15.5px; } .promo .btn { margin-top: 18px; min-height: 46px; padding: 8px 20px; font-size: 15px; }
@media (min-width: 1020px) { .article { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s6); } .aside { position: sticky; top: 112px; } }

/* text pages (about, help, legal) */
.page-hero { padding-block: var(--s4) var(--s5); } .page-hero .h1 { margin-top: 18px; max-width: 15em; } .page-hero .lead { margin-top: var(--s3); max-width: 36em; }
.story { display: grid; gap: var(--s4); align-items: center; } .story .field { aspect-ratio: 1 / 0.8; border-radius: var(--r-l); } .story .field .stack { width: 34%; } .story p + p { margin-top: 16px; } .story .h2 { margin: 16px 0 20px; }
@media (min-width: 1020px) { .story { grid-template-columns: 1fr 1fr; gap: var(--s6); } .story.flip > :first-child { order: 2; } }
.values { display: grid; gap: 14px; } .values li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); padding: 26px; } .values svg { width: 28px; height: 28px; color: var(--honey-deep); margin-bottom: 16px; } .values b { display: block; font: 600 22px/1.2 var(--serif); color: var(--plum); font-variation-settings: 'opsz' 60, 'SOFT' 50, 'WONK' 0; } .values span { display: block; margin-top: 8px; color: var(--soft); }
@media (min-width: 1020px) { .values { grid-template-columns: repeat(3, 1fr); gap: 20px; } .values li { padding: 32px; } }
.cta { background: var(--plum); color: var(--white); border-radius: var(--r-l); padding: 48px 22px; text-align: center; } .cta .h2 { color: var(--white); } .cta p { margin: 14px auto 0; color: #dccfe0; max-width: 30em; } .cta .hero-actions { justify-content: center; } .cta .btn-line { border-color: var(--white); color: var(--white); } .cta .btn-line:hover { background: var(--f-plum); }
@media (min-width: 1020px) { .cta { padding: 88px 64px; } }

/* not found */
.notfound { min-height: 62vh; display: grid; place-items: center; text-align: center; padding-block: var(--s5); } .notfound img { width: 120px; margin-inline: auto; transform: rotate(14deg); } .notfound .h1 { margin-top: 28px; } .notfound .lead { margin: 18px auto 0; max-width: 26em; } .notfound .hero-actions { justify-content: center; }
.notfound .trail404 { width: 200px; margin: 0 auto -6px; opacity: .8; }

/* small phones and long words (German) */
.hero-grid > *, .spec > *, .about > *, .story > *, .free-hero > *, .product > *, .article > *, .upsell > *, .free-panel > *, .hub-hero > * { min-width: 0; }
.eyebrow { max-width: 100%; } .prose .link, .about .link { white-space: normal; }
.h1, .h2 { overflow-wrap: break-word; } html[lang="de"] .h1, html[lang="de"] .h2, html[lang="de"] .card .name { hyphens: auto; }
@media (max-width: 360px) { .h1 { font-size: 33px; } .h2 { font-size: 27px; } .eyebrow { letter-spacing: .1em; font-size: 12px; } }
.sec-head { flex-wrap: wrap; } .sec-head > div { min-width: 0; flex: 1 1 260px; } .card { min-width: 0; } .card .kind, .card .name { overflow-wrap: anywhere; }
@media (max-width: 360px) { .card .kind { letter-spacing: .06em; font-size: 10.5px; } }
/* free panel: swipe row only on phones; from 620 px a normal three-column row (fix 12 Nov, tablet view broke) */
@media (min-width: 620px) { .free-panel .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; overflow: visible; margin: 0; padding: 0; } .free-panel .grid .card { flex: none; } .free-panel { padding: 40px 32px; } }
@media (min-width: 1020px) { .free-panel { padding: 64px; } .free-panel .grid { gap: 20px; } }
/* sheets made from the real PDF pages */
.stack.real { aspect-ratio: 612 / 792; } .stack.real.land { aspect-ratio: 792 / 612; width: 66%; }
.stack.real img { position: absolute; inset: 0; width: 100%; height: 100%; background: #fff; border-radius: 3px; box-shadow: 0 10px 22px rgba(58, 26, 64, .18), 0 0 0 1px rgba(58, 26, 64, .05); }
.stack.real img:nth-child(1) { transform: rotate(-9deg) translate(-16%, 2%); } .stack.real img:nth-child(2) { transform: rotate(7deg) translate(15%, 3%); } .stack.real img:nth-child(3) { transform: rotate(-1deg); } .stack.real.one img { transform: rotate(-3deg); }
.stack.real.land img:nth-child(1) { transform: rotate(-6deg) translate(-9%, -9%); } .stack.real.land img:nth-child(2) { transform: rotate(5deg) translate(9%, 9%); }
.hero-art .stack.real img { box-shadow: 0 22px 34px rgba(58, 26, 64, .22), 0 0 0 1px rgba(58, 26, 64, .05); }
.hero-art .stack.real img:nth-child(1) { transform: rotate(-13deg) translate(-44%, 6%); } .hero-art .stack.real img:nth-child(2) { transform: rotate(11deg) translate(44%, 5%); } .hero-art .stack.real img:nth-child(3) { transform: rotate(-2deg) translateY(-3%); }
.bento .stack.real.land { width: 62%; }

/* ---------- spacing system (12 Nov, after Faizan's review) ----------
   One gap (--sec) between any two blocks of a page. Boxes inside boxes use one padding on all sides. */
:root { --sec: 64px; --box: 24px; } @media (min-width: 760px) { :root { --sec: 96px; --box: 32px; } } @media (min-width: 1020px) { :root { --box: 64px; } }
main > .wrap { padding-bottom: var(--sec); }
main > .wrap > .product, main > .wrap > .free-hero, main > .wrap > .article { padding-bottom: 0; }
main > .section { padding-block: var(--sec); }
main > .section + .section, main > .wrap + .section { padding-top: 0; }
main > .section.band-plum { padding-top: var(--sec); } main > .band-plum + .section { padding-top: var(--sec); }
main > .hero { padding-bottom: var(--sec); } main > .facts + .section { padding-top: var(--sec); }
.upsell, .free-panel { padding: var(--box); gap: var(--box); } .band-plum .upsell { padding: 0; }
.hub-hero { padding: var(--box) var(--box) 0; } .hub-hero.plain { padding: var(--s3) 0 0; }
@media (min-width: 1020px) { .hub-hero { padding: 72px var(--box); } .hub-hero.plain { padding: var(--s4) 0 0; } }
.cta { padding: 56px var(--box); } @media (min-width: 1020px) { .cta { padding: 88px var(--box); } }
.sec-head { margin-bottom: var(--s4); } .toolbar { margin: var(--s4) 0 var(--s3); }

/* ---------- hover and press ----------
   Buttons stay in place and change colour (a moving target is harder to click). Cards and tiles lift a little, only on devices with a real pointer. */
.btn { transition: background .15s, color .15s, border-color .15s; } .btn:hover { transform: none; } .btn:active { transform: scale(.98); }
@media (hover: none) { .card:hover .field, .bento a:hover, .tile:hover img { transform: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } .card:hover .field, .bento a:hover { transform: none; } }
.callout, .toc { padding: 24px; }

/* plumandbee.com: styles added for the real site (options block, real pictures, extra field colours, text pages). Loaded after site.css and pages.css. */
:root { --f-rose: #f6dfe6; --f-sand: #efe6d6; }
.field.rose { background: var(--f-rose); } .field.sand { background: var(--f-sand); }
.hub-hero.sky { background: var(--f-sky); } .hub-hero.rose { background: var(--f-rose); } .hub-hero.sand { background: var(--f-sand); } .hub-hero.lilac { background: var(--f-lilac); }
.hub-hero.plum { background: var(--plum); } .hub-hero.plum .h1 { color: var(--white); } .hub-hero.plum .lead { color: #e7dcea; } .hub-hero.plum .eyebrow { color: var(--pale); }

/* pictures made from the real files */
.stack.real { aspect-ratio: var(--ar, 0.773); } .stack.real.land { width: 66%; }
.stack.phone { aspect-ratio: var(--ar, 0.46); width: 30%; } .stack.phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12% / 5.6%; border: 5px solid var(--plum); background: var(--plum); box-shadow: 0 14px 26px rgba(58, 26, 64, .22); transform: rotate(-3deg); }
.stack.art { aspect-ratio: 1; width: 52%; } .stack.art .sq { position: absolute; inset: 0; background: #fff; border-radius: 8px; padding: 9%; box-shadow: 0 10px 22px rgba(58, 26, 64, .16), 0 0 0 1px rgba(58, 26, 64, .05); display: grid; place-items: center; }
.stack.art .sq { overflow: hidden; } .stack.art .sq img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.stack.art .sq:nth-child(1) { transform: rotate(-8deg) translate(-16%, 3%); } .stack.art .sq:nth-child(2) { transform: rotate(7deg) translate(16%, 4%); } .stack.art .sq:nth-child(3) { transform: rotate(-1deg); }
.stack.art .sq:only-child { transform: rotate(-3deg); } .stack.art .sq:nth-child(2):last-child { transform: rotate(3deg) translate(8%, 0); } .stack.art .sq:nth-child(1):nth-last-child(2) { transform: rotate(-7deg) translate(-12%, 2%); }
.stack.real img:nth-child(2):last-child { transform: rotate(-2deg) translate(4%, 0); } .stack.real img:nth-child(1):nth-last-child(2) { transform: rotate(7deg) translate(-12%, 2%); }
.card .field .stack.phone { width: 26%; } .gallery .main .stack.phone { width: 24%; } .gallery .main .stack.real.land { width: 62%; } .gallery .main .stack.art { width: 46%; }
.gallery .thumbs .stack.phone { width: 28%; } .gallery .thumbs .stack.real.land { width: 72%; } .gallery .thumbs .stack.art { width: 58%; }
.gallery .thumbs .stack img, .gallery .thumbs .stack .sq { box-shadow: 0 3px 8px rgba(58, 26, 64, .18); } .gallery .thumbs .stack.phone img { border-width: 2px; }
.bento .stack.phone { width: 20%; } .inside .stack.phone { width: 34%; } .inside .stack.real.land { width: 74%; } .inside .stack.art { width: 60%; }

/* product page */
.gallery .main > .stack[hidden] { display: none; }
.gallery .thumbs { grid-template-columns: repeat(6, 1fr); } .gallery .thumbs button { all: unset; cursor: pointer; display: block; border-radius: 14px; } .gallery .thumbs button:focus-visible { outline: 3px solid var(--honey); outline-offset: 2px; }
.gallery .thumbs button[aria-pressed="true"] .field { border-color: var(--plum); }
.buy .price .from { font: 600 15px/1 var(--sans); color: var(--soft); margin-right: -4px; }
.made { margin-top: var(--s3); font-size: 14.5px; color: var(--soft); max-width: 62ch; }
.options { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1020px) { .options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .options.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; } }
.opt { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px; display: flex; flex-direction: column; }
.opt .field { aspect-ratio: 4 / 3; border-radius: 14px; } .opt .field .stack { width: 34%; } .opt .field .stack.real.land { width: 54%; } .opt .field .stack.phone { width: 20%; } .opt .field .stack.art { width: 40%; }
.opt .body { padding: 18px 8px 8px; display: flex; flex-direction: column; flex: 1; }
.opt h3 { font: 600 22px/1.2 var(--serif); color: var(--plum); font-variation-settings: 'opsz' 60, 'SOFT' 50, 'WONK' 0; } .opt p { margin-top: 6px; color: var(--soft); font-size: 15.5px; }
.opt .row { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .opt .row b { font: 700 24px/1 var(--sans); color: var(--plum); } .opt .btn { min-height: 48px; padding: 10px 22px; font-size: 15px; }
.opt.best { border: 2px solid var(--honey); padding: 13px; }
.opt .tag { position: absolute; left: 26px; top: 26px; z-index: 2; background: var(--honey); color: var(--plum); font: 700 11.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 7px 11px; border-radius: var(--pill); }
.inside.three { grid-template-columns: 1fr 1fr; } @media (min-width: 1020px) { .inside.three { grid-template-columns: repeat(3, 1fr); } .inside.two { grid-template-columns: repeat(2, 1fr); max-width: 760px; } }

/* shop and hubs */
.filters a.hub-link { background: var(--paper); }
.hub-hero .art .stack.phone { width: 70px; } @media (min-width: 1020px) { .hub-hero .art .stack.phone { width: 46%; margin-inline: auto; } .hub-hero .art .stack.art { width: 100%; } }

/* text pages */
.doc { max-width: 760px; font-size: 18px; line-height: 1.7; } .doc > * + * { margin-top: 18px; } .doc h2 { font-size: clamp(24px, 2.4vw, 32px); margin-top: 52px; } .doc h2:first-child { margin-top: 0; }
.doc ul { display: grid; gap: 10px; } .doc ul li { padding-left: 26px; position: relative; } .doc ul li::before { content: ''; position: absolute; left: 4px; top: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--honey); }
.doc a { color: var(--plum); font-weight: 600; border-bottom: 2px solid var(--honey); } .doc a:hover { border-color: var(--plum); }
.doc .small { font-size: 15px; color: var(--soft); }

/* hub hero picture: smaller, so the top sheet is not cut by the box */
@media (min-width: 1020px) { .hub-hero .art { right: 8%; bottom: -30%; width: 21%; } .hub-hero .art .stack.real.land { width: 150%; margin-left: -25%; } .hub-hero .art .stack.phone { width: 52%; } }

/* ---------- 12 Nov, after Faizan's review ----------
   Type tiles: the picture is sized from the tile's height, so the same share of it (about 85%) shows at every screen width. */
.bento a .stack, .bento a.big .stack, .bento a.c3 .stack, .bento a.c4 .stack { position: absolute; right: 9%; bottom: -8%; height: 62%; width: auto; }
.bento a.big .stack { height: 60%; right: 12%; }
.bento a .stack.real.land, .bento a.c4 .stack.real.land, .bento a.c3 .stack.real.land { height: 46%; width: auto; right: 12%; }
.bento a .stack.phone { height: 62%; width: auto; }
@media (min-width: 1020px) { .bento a.big .stack { height: 66%; right: 14%; bottom: -6%; } }
/* Product pictures a little larger: they are the main thing in their box. */
.gallery .main .stack { width: 46%; } .gallery .main .stack.real.land { width: 70%; } .gallery .main .stack.art { width: 56%; } .gallery .main .stack.phone { width: 27%; }
.opt .field .stack { width: 40%; } .opt .field .stack.real.land { width: 62%; } .opt .field .stack.art { width: 46%; } .opt .field .stack.phone { width: 23%; }
.card .field .stack { width: 50%; } .card .field .stack.real.land { width: 70%; } .card .field .stack.art { width: 56%; } .card .field .stack.phone { width: 28%; }
.inside .stack { width: 58%; } .inside .stack.real.land { width: 78%; } .inside .stack.phone { width: 36%; }
@media (min-width: 1020px) { .bento a.c3 .stack { height: 54%; right: 8%; } }

.skip{position:absolute;left:-9999px;top:8px;background:#fff;color:#4a2350;padding:10px 16px;border-radius:8px;font-weight:700;z-index:99}.skip:focus{left:8px}