@font-face{font-family:Open Sans;src:url("/assets/open-sans-latin.woff2") format("woff2");font-weight:300 800;font-display:swap}
:root{--ink:#283a32;--paper:#f6f3ea;--surface:#fffdf7;--muted:#4d6256;--sage:#e2e9df;--line:#c9d3c7;--accent:#755346}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 "Open Sans",Arial,sans-serif}
img,canvas{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid #9b604b;outline-offset:4px}
.skip{position:absolute;left:12px;top:-100px;background:white;padding:8px;z-index:5}
.skip:focus{top:8px}
.shell{width:min(1180px,calc(100% - 64px));margin-inline:auto}
.nav{min-height:88px;display:flex;gap:18px;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.nav nav{display:flex;gap:26px;flex-wrap:wrap}
.nav nav a{text-decoration:none;font-size:14px}
.nav nav a[aria-current]{text-decoration:underline;text-underline-offset:5px}
.wordmark{font-size:26px;letter-spacing:.25em;font-weight:400;text-decoration:none}
.hero{padding:40px 0 54px;display:grid;grid-template-columns:1.03fr 1fr;gap:48px;align-items:center}
.hero-copy{padding:16px 0 24px}
.eyebrow{margin:0 0 16px;color:var(--accent);font-weight:700;font-size:12px;letter-spacing:.13em;text-transform:uppercase}
h1,h2,h3{line-height:1.1;margin:0}
h1,h2{font-family:Georgia,serif;font-weight:400;letter-spacing:-.045em}
h1{font-size:clamp(44px,5.15vw,76px);line-height:1.04;max-width:700px}
h1 em{font-weight:400;color:#567361}
h2{font-size:clamp(37px,5vw,68px)}
h3{font-size:23px;letter-spacing:-.025em}
.lede{font-size:18px;max-width:470px;margin:23px 0;color:var(--muted)}
.hero-sanitary{max-width:49ch;margin:0 0 15px;padding-left:12px;border-left:2px solid #9aac9d;color:var(--muted);font-size:14px;line-height:1.5}
.hero-action{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero-action strong{font-size:18px}
.btn,.secondary{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 19px;border:1px solid var(--ink);border-radius:2px;background:var(--ink);color:white;font:700 14px/1.25 "Open Sans",Arial,sans-serif;text-decoration:none;cursor:pointer;text-align:center}
.secondary{background:transparent;color:var(--ink)}
.btn:hover{background:#405b4c}.secondary:hover{background:var(--sage)}
button:disabled{opacity:.55;cursor:wait}
.fine{font-size:13px;color:var(--muted)}
.hero-art{margin:0;background:#e5dfd1;border:1px solid #d6cfc0;padding:9px 9px 0}
.hero-art img{display:block;width:100%;max-height:515px;object-fit:cover;object-position:center 48%}
.hero-art figcaption{padding:9px 5px;font-size:12px;color:#526155}
.stripe{background:#dce6da;border-block:1px solid var(--line)}
.stripe .shell{display:flex;justify-content:space-between;gap:18px;padding-block:16px}
.stripe span{font-size:13px;font-weight:700}
.section{padding-block:72px}
.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:0 36px;margin-top:28px}
.feature-list article{display:grid;grid-template-columns:40px 1fr;gap:8px;border-top:1px solid var(--line);padding:22px 0}
.feature-list article>span{color:var(--accent);font-size:13px;font-weight:700}
.feature-list p{color:var(--muted);margin:.55em 0 0}
.sample-section,.label-section{background:#e8ece2}
.sample-grid{display:grid;grid-template-columns:.9fr 1fr;align-items:center;gap:58px;padding-block:55px}
.sample-grid img{width:100%;max-width:480px;border:1px solid var(--line)}
.sample-grid p:not(.eyebrow){max-width:470px}
.text-link{font-weight:700;text-underline-offset:4px}
.purchase{display:grid;grid-template-columns:1fr 1fr;gap:38px;border:1px solid var(--line);background:var(--surface);padding:35px}
.purchase-price{font:43px Georgia,serif;margin:17px 0}
.checkout-panel form{display:grid;gap:9px}
.checkout-panel label,.editor-grid label{display:grid;gap:3px;font-size:14px;font-weight:700}
input,textarea,select{background:white;border:1px solid #95a69a;border-radius:2px;padding:9px 10px;min-width:0;width:100%;font:16px "Open Sans",Arial,sans-serif;color:var(--ink)}
textarea{resize:vertical}
.checkout-panel #checkout-status:empty{display:none}
.checkout-panel #order>*{margin-bottom:8px}
#pix-image{display:block;width:182px}
details{border-top:1px solid var(--line);padding:13px 0}
summary{cursor:pointer;font-weight:700}
#recover{margin-top:17px}
#recover form{margin-top:11px}
.editor-intro{max-width:690px}
.editor-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:32px;align-items:start;margin-top:20px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.field-grid .wide{grid-column:1/-1}
.style-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:10px}
.style-grid button{width:100%;height:36px;background:var(--swatch);border:1px solid #849687;cursor:pointer}
.style-grid button[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:2px}
.logo-control{margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:end}
.logo-control .fine{grid-column:1/-1;margin:0}
.logo-control input{font-size:14px}
.label-preview{display:grid;grid-template-columns:1fr 1.26fr;gap:12px;background:var(--surface);border:1px solid var(--line);padding:14px}
.label-preview figure{margin:0;min-width:0}
.label-preview canvas{display:block;width:100%;border:1px solid var(--line)}
.label-preview figcaption{font-size:12px;margin-top:5px}
.label-actions,.label-preview>p{grid-column:1/-1;margin:0}
.label-actions{display:flex;gap:8px;flex-wrap:wrap}
.label-actions .secondary{padding:8px 10px}
.faq h2{margin-bottom:22px}
.faq details p{max-width:720px}
.site-footer{background:#263a31;color:white;padding:24px 0}
.site-footer>.shell{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.measurement-preferences{background:none;border:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
.measurement-choice{position:fixed;z-index:20;right:16px;bottom:16px;width:min(440px,calc(100% - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:16px;background:var(--surface);border:1px solid var(--line);box-shadow:0 6px 24px #263a3126;font-size:14px;line-height:1.45}
.measurement-choice p{margin:0 0 8px}
.measurement-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.measurement-actions button{flex:1 1 140px}
#print-sheet{display:none}
@media(max-width:850px){
 .hero{gap:28px}.purchase,.editor-grid{gap:20px}.section{padding-block:53px}
}
@media(max-width:680px){
 .shell{width:calc(100% - 36px)}.nav{min-height:0;padding:12px 0;gap:6px;display:block}
 .nav nav{gap:16px;margin-top:3px}.nav nav a{font-size:13px}
 .hero,.feature-list,.sample-grid,.purchase,.editor-grid{grid-template-columns:1fr}
 .hero{padding:29px 0 33px}.hero-copy{padding:0}.lede{font-size:16px;margin:15px 0}
 h1{font-size:clamp(40px,11vw,62px)}.hero-art img{max-height:none}
 .stripe .shell{display:grid;gap:5px}.stripe span{font-size:12px}
 .section{padding-block:39px}.sample-grid{gap:21px;padding-block:29px}.sample-grid img{max-width:350px}
 .purchase{padding:18px}.label-preview{max-width:485px}
}
@media(max-width:370px){.field-grid,.logo-control{grid-template-columns:1fr}.label-actions .secondary{width:100%}}
@page{size:A4;margin:12mm}
@media print{
 body{background:white}body.printing>*:not(#print-sheet){display:none!important}
 body.printing #print-sheet{display:flex;gap:8mm;align-items:flex-start;padding:1mm}
 #print-front{width:60mm;height:42mm}#print-back{width:90mm;height:var(--label-back-height,112mm)}
 #print-sheet img{max-width:none;print-color-adjust:exact;-webkit-print-color-adjust:exact}
}

/* Ateliê: the first view carries the product, price and purchase link. */
.hero-more {
  font-size: 14px;
  font-weight: 700;
  text-underline-offset: 4px;
}
.hero-art img {
  max-height: none;
  object-fit: contain;
}
.collection-intro {
  max-width: 670px;
  color: var(--muted);
  margin: 14px 0 24px;
}
.recipe-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.recipe-card {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.recipe-card h3 {
  font-size: 15px;
  letter-spacing: 0;
}
.recipe-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  margin: 4px 0 0;
}
.recipe-palette {
  display: flex;
  gap: 3px;
}
.recipe-swatch {
  display: block;
  flex: 1;
  height: 25px;
  border: 1px solid #283a3226;
  border-radius: 2px;
  background: var(--swatch);
}
.collection-note {
  display: grid;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  padding: 16px;
  background: var(--sage);
}
.collection-note p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}
.offer-contents {
  display: grid;
  gap: 21px;
  margin-top: 24px;
}
.guide-cover {
  width: min(100%, 260px);
  margin: 0;
}
.guide-cover img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 7px 18px #23372f22;
}
.guide-cover figcaption {
  color: var(--muted);
  font-size: 13px;
  margin-top: 8px;
}
.offer-contents .feature-list {
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}
.offer-contents .feature-list article {
  display: block;
  padding: 16px 0;
}
.offer-contents .feature-list h3 {
  font-size: 18px;
}
.offer-contents .feature-list p {
  font-size: 14px;
}
.purchase-payment {
  margin-top: -10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
@media (max-width: 680px) {
  .hero h1 {
    font-size: clamp(36px, 10vw, 48px);
  }
  .hero-action {
    gap: 13px;
  }
  .hero-action .btn {
    width: 100%;
  }
  .hero .fine {
    margin-bottom: 0;
  }
}
@media (min-width: 681px) {
  .recipe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .collection-note {
    grid-template-columns: 1fr auto;
    gap: 24px;
  }
  .offer-contents {
    grid-template-columns: minmax(180px, .65fr) minmax(0, 1.65fr);
    gap: 32px;
  }
}
@media (min-width: 1050px) {
  .offer-contents .feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 25px;
  }
}

.collection-gallery {
  display: grid;
  gap: 14px;
}
.collection-gallery .hero-art {
  align-self: start;
}
.recipe-details {
  margin-top: 16px;
}
.recipe-details summary {
  min-height: 44px;
  padding: 10px 0;
}
.recipe-details .recipe-grid {
  margin-top: 10px;
}
@media (min-width: 681px) {
  .collection-gallery {
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .recipe-grid-featured {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 1000px) {
  .collection-gallery {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr);
  }
  .recipe-grid-featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.offer-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 15px;
}
.offer-price strong {
  color: var(--ink);
  font: 700 23px/1.15 'Open Sans', sans-serif;
}
.purchase-price.offer-price {
  margin: 17px 0;
  font: 16px/1.4 'Open Sans', sans-serif;
}
.purchase-price.offer-price strong {
  font: 36px/1.15 Georgia, serif;
}

.reader-stories { padding-bottom: 0; }
.reader-stories h2 { font-size: clamp(34px, 4vw, 54px); }
.reader-stories-grid { display: grid; gap: 14px; margin-top: 22px; }
.reader-stories-grid article {
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line);
  border-top: 3px solid #8da18f;
  background: var(--surface);
}
.reader-stories-grid h3 { font-size: 19px; }
.reader-stars {
  display: block;
  margin: 6px 0 9px;
  color: #855119;
  font-size: 17px;
  letter-spacing: 2px;
}
.reader-stories-grid blockquote { margin: 0; }
.reader-stories-grid p { margin: 0; color: var(--muted); }
@media (min-width: 761px) {
  .reader-stories-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
