/* Lemon Myrtle Lane - single stylesheet. (v31)
   Palette is locked to the brand: Myrtle, Sage, Oat, Wattle. */

/* EB Garamond, subset to Latin and served from this origin. Google Fonts cost
   a DNS lookup, a TLS handshake and two round trips to a third party before a
   heading could paint, which on a phone was slower than the 20 KB font. Latin
   only, so the pair is about 40 KB. swap means text shows immediately in
   Georgia and reflows once the serif lands. */
@font-face{
  font-family:"EB Garamond";
  src:url("/fonts/ebgaramond-400.4c61480a.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"EB Garamond";
  src:url("/fonts/ebgaramond-600.5f4138e0.woff2") format("woff2");
  font-weight:600 700;font-style:normal;font-display:swap;
}

:root{
  --myrtle:#3F5A42;
  --myrtle-dark:#31462F;
  --sage:#8FA68A;
  /* White ground. Oat survives only as the faintest warm tint for alternating
     bands, so the felt colours in the photos do the work instead of competing
     with the background. */
  --oat:#FFFFFF;
  --oat-deep:#F8F6F1;
  --wattle:#D4A24C;
  --ink:#20291F;
  --muted:#5B665C;
  --line:#E6E2D9;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --maxw:1080px;
  --radius:10px;
}

*,*::before,*::after{box-sizing:border-box}

/* The hidden attribute is only display:none in the UA stylesheet, so any class
   that sets its own display wins and the element stays on screen. This is what
   let a hidden checkout button keep showing. */
[hidden]{display:none!important}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--oat);
  color:var(--ink);
  font:17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--myrtle)}
a:focus-visible,button:focus-visible{outline:3px solid var(--wattle);outline-offset:2px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* ---------- Announcement ---------- */
.announce{
  background:var(--myrtle-dark);color:var(--oat);
  font-size:13px;letter-spacing:.02em;text-align:center;padding:9px 16px;
}

/* ---------- Header ---------- */
.site-header{
  background:var(--oat);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-top:16px;padding-bottom:16px;
}
.brand{
  font-family:var(--serif);font-size:23px;font-weight:600;color:var(--myrtle);
  text-decoration:none;letter-spacing:.01em;line-height:1.1;display:block;
}
.brand img{width:116px;height:auto}
.brand span{display:block;font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin-top:3px}
.nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.nav a{
  text-decoration:none;font-size:14px;color:var(--ink);
  padding:4px 0;border-bottom:2px solid transparent;
}
.nav a:hover{border-bottom-color:var(--sage)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;font-size:15px;font-weight:600;
  padding:13px 26px;border-radius:6px;border:2px solid var(--myrtle);
  background:var(--myrtle);color:var(--oat);transition:background .15s,color .15s;
  cursor:pointer;
}
.btn:hover{background:var(--myrtle-dark);border-color:var(--myrtle-dark)}
.btn.ghost{background:transparent;color:var(--myrtle)}
.btn.ghost:hover{background:var(--myrtle);color:var(--oat)}
.btn.wide{width:100%;text-align:center}

/* ---------- Hero: the logo is the hero ---------- */
.hero{
  background:var(--oat-deep);
  border-bottom:1px solid var(--line);
  padding:44px 0 50px;
  text-align:center;
}
/* The logo already carries the name, so the heading under it is a positioning
   line, not a repeat. Kept tight against the mark so the two read as one block
   and the first product still peeks above the fold on a laptop. */
.hero-logo{
  display:block;width:min(300px,66vw);margin:0 auto 18px;
}
.hero-logo img{width:100%;height:auto}
.hero h1{
  font-family:var(--serif);font-size:36px;line-height:1.15;font-weight:600;
  color:var(--myrtle);margin:0 0 12px;
}
.hero p{
  font-size:18px;color:var(--muted);margin:0 auto 24px;max-width:46ch;
}
.hero .hero-eyebrow{font-size:11.5px;color:var(--myrtle);max-width:none}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}

/* A pill above the heading, saying where the books come from before the heading
   says what they are. Oat on Oat deep, so it reads as a label rather than a
   second button competing with the real one below. */
.hero-eyebrow{
  display:inline-block;background:var(--oat);color:var(--myrtle);
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 15px;border-radius:999px;border:1px solid var(--line);
  margin:0 0 16px;
}

/* The second action is a link, not a second button. Two equally weighted
   buttons make the visitor choose before they know enough to; a link offers the
   other road without asking. */
.btn-link{
  color:var(--myrtle);font-size:15px;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;text-decoration-color:var(--sage);
  padding:6px 2px;
}
.btn-link:hover{color:var(--myrtle-dark);text-decoration-color:var(--myrtle-dark)}

/* A rounder button than the rest of the site's, because the hero is the one
   place the shape is doing work rather than just being consistent. */
.hero-actions .btn{border-radius:999px;padding:14px 30px}

/* ---------- Hero with the loop beside it ---------- */
/* Only when public/video actually holds the clip. Without it the rules above
   still describe the hero on their own, so nothing here needs a fallback. */
.hero.has-clip{padding:38px 0 42px;text-align:left}
.hero.has-clip .wrap{
  display:grid;gap:30px;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,392px);
}
.hero.has-clip .hero-logo{margin:0 0 16px;width:min(210px,52vw)}
.hero.has-clip h1{font-size:38px;margin-bottom:12px}
.hero.has-clip p{margin:0 0 22px;max-width:34ch}
.hero.has-clip .hero-actions{justify-content:flex-start}

/* Three facts, not a feature list. Sage ticks rather than bullets, because the
   point is reassurance and a bullet reads as detail. */
.hero-reassure{
  list-style:none;margin:20px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--muted);
}
.hero-reassure li::before{content:"\2713";color:var(--sage);font-weight:700;margin-right:6px}
.hero-trade{font-size:13.5px;color:var(--muted);margin:22px 0 0}
.hero-trade a{color:var(--myrtle);font-weight:600;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--sage)}
.hero-trade a:hover{color:var(--myrtle-dark);text-decoration-color:var(--myrtle-dark)}

.hero-media{
  position:relative;margin:0;border-radius:var(--radius);overflow:hidden;
  background:var(--line);aspect-ratio:4/5;
  box-shadow:0 14px 28px -20px rgba(32,41,31,.5);
}
.hero-media video{width:100%;height:100%;object-fit:cover;display:block}
.hero-tag{
  position:absolute;left:12px;bottom:12px;
  background:rgba(255,255,255,.93);color:var(--myrtle);
  font-weight:700;font-size:13px;padding:7px 13px;border-radius:999px;
  box-shadow:0 2px 8px rgba(32,41,31,.18);
}

/* Phone: land on the logo, the same first screen as before, and meet the clip
   on the way down. So the media keeps its source order and sits under the
   buttons instead of jumping above them. It is capped by height rather than
   width so a tall phone does not hand it half the screen. */
@media (max-width:760px){
  .hero.has-clip{padding:34px 0 34px;text-align:center}
  .hero.has-clip .wrap{grid-template-columns:1fr;gap:24px}
  .hero.has-clip .hero-logo{margin:0 auto 18px;width:min(230px,60vw)}
  .hero.has-clip h1{font-size:30px}
  .hero.has-clip p{margin-inline:auto}
  .hero.has-clip .hero-actions{justify-content:center}
  .hero-reassure{justify-content:center;gap:6px 14px}
  .hero-media{
    width:100%;max-width:340px;margin-inline:auto;
    aspect-ratio:auto;height:min(42vh,320px);
  }
  /* Biased up the frame: the oven and the hands are above centre, and a centre
     crop of a 4:5 frame cuts the hands off. */
  .hero-media video{object-position:50% 38%}
}

/* Someone who has asked their device for less movement gets the poster and
   nothing else, rather than a paused first frame with a play button on it. */
@media (prefers-reduced-motion:reduce){
  .hero-media video{display:none}
  /* The poster attribute only paints through the video element, so with the
     video gone the still has to come back as a background. */
  .hero-media{background:var(--line) var(--hero-poster) center/cover no-repeat}
}

/* ---------- Sections ---------- */
section{padding:64px 0;scroll-margin-top:96px}
section.tint{background:var(--oat-deep);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.section-head{max-width:56ch;margin:0 0 36px}
.section-head h2{
  font-family:var(--serif);font-size:32px;line-height:1.15;font-weight:600;
  color:var(--myrtle);margin:0 0 10px;
}
.section-head p{font-size:17px;color:var(--muted);margin:0}

/* ---------- Product grid: editorial tiles ---------- */
.grid{
  display:grid;gap:40px 34px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.tile-a{display:block;text-decoration:none;color:inherit}
.tile-img{
  display:block;aspect-ratio:1/1;overflow:hidden;border-radius:4px;
  background:var(--oat-deep);
}
.tile-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.tile-a:hover .tile-img img,.tile-a:focus-visible .tile-img img{transform:scale(1.03)}
.tile-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin:16px 0 4px;padding-bottom:8px;border-bottom:1px solid var(--line);
}
.tile-name{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--myrtle)}
.tile-price{font-size:16px;font-weight:600;white-space:nowrap}
.tile-sub{display:block;font-size:14px;color:var(--muted);line-height:1.5}
@media (prefers-reduced-motion:reduce){
  .tile-img img{transition:none}
  .tile-a:hover .tile-img img{transform:none}
}

/* ---------- Skills pills ---------- */
.skills{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 16px;padding:0;list-style:none}
.skills li{
  font-size:11.5px;background:var(--oat-deep);color:var(--myrtle);
  border:1px solid var(--line);border-radius:20px;padding:3px 10px;
}

/* ---------- Product detail ---------- */
/* Two columns on a desktop: both photos stack down the left, the text holds the
   right. On a phone the photos become one swipeable strip at the top and the
   text follows. They used to be separate grid blocks so the name and price
   could sit between them, but the text column runs long - copy, chips, spec
   table, buy button - and the second photo landed at the very bottom of the
   page, below everything, where nobody ever reached it. */
.product{
  display:grid;grid-template-columns:1fr 1fr;gap:34px 48px;align-items:start;
  padding:56px 0;
}
/* .shot is the figure: the framed photo plus its caption. .figure inside it is
   the fixed-square frame, which clips, so the caption has to live outside it. */
.shot{margin:0}
.shot figcaption{
  padding:11px 2px 0;font-size:13.5px;color:var(--muted);
  font-style:italic;text-align:center;
}
.shots{grid-column:1;grid-row:1;display:grid;gap:22px}
.product-info{grid-column:2;grid-row:1}

/* Every variant of the lead photo is in the DOM; only one is not hidden. */
.shot-variant{display:block}

/* ---------- The choice on a page that has one ---------- */
.choice{
  border:1px solid var(--line);border-radius:10px;
  margin:0 0 16px;padding:10px 14px 12px;min-width:0;
}
.choice legend{
  padding:0 6px;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--sage);
}
.choice label{
  display:flex;align-items:center;gap:8px;padding:3px 0;
  font-size:15px;color:var(--myrtle);cursor:pointer;
}
.choice input{accent-color:var(--myrtle);width:17px;height:17px;flex:0 0 auto;margin:0}
.choice label:has(input:checked) span{font-weight:600}

.product .figure{
  background:var(--sage);border-radius:var(--radius);aspect-ratio:1/1;
  overflow:hidden;position:relative;
}
.product .figure img{width:100%;height:100%;object-fit:cover}
/* The second shot sits shorter, so the main one still leads and the text column
   is not left staring at a metre of white space. */
@media (min-width:861px){
  .product .alt .figure{aspect-ratio:4/3}
}
.product .figure .placeholder{
  position:absolute;inset:0;display:grid;place-items:center;
  color:#1f2c1f;font-size:13px;text-align:center;padding:24px;
}
.product h1{
  font-family:var(--serif);font-size:36px;line-height:1.15;font-weight:600;
  color:var(--myrtle);margin:0 0 12px;
}
.product .price-lg{font-size:25px;font-weight:600;margin:0 0 20px}
.product .prose{max-width:none;padding-bottom:0}
.product .prose p{margin:0 0 16px;color:var(--muted)}
.spec{
  list-style:none;padding:0;margin:24px 0;border-top:1px solid var(--line);
  font-size:15px;
}
.spec li{
  display:flex;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);
}
.spec li strong{flex:0 0 128px;color:var(--myrtle);font-weight:600}
.buy{margin:28px 0 0}
/* Used under the buy button and again in the cart, so it is not scoped to .buy */
.note{font-size:13.5px;color:var(--muted);margin:12px 0 0}
.note a{color:var(--muted)}
.backlink{font-size:14px;margin:0;padding:32px 0 48px}

/* ---------- Prose pages ---------- */
.page-head{padding:52px 0 8px}
.page-head h1{
  font-family:var(--serif);font-size:36px;font-weight:600;color:var(--myrtle);margin:0;
}
.prose{max-width:62ch;padding-bottom:56px}
.prose h2{font-family:var(--serif);font-size:22px;color:var(--myrtle);margin:32px 0 8px}
.prose p{margin:0 0 16px}
.prose ul{padding-left:22px;margin:0 0 16px}
.prose li{margin-bottom:7px}

/* ---------- Custom orders band ---------- */
.band{background:var(--myrtle);color:var(--oat);padding:64px 0}
.band h2{font-family:var(--serif);font-size:32px;font-weight:600;margin:0 0 14px}
.band p{font-size:18px;color:#CFDBCB;max-width:52ch;margin:0 0 26px}
.band .btn{background:var(--oat);border-color:var(--oat);color:var(--myrtle)}
.band .btn:hover{background:#fff;border-color:#fff}

/* ---------- Footer ---------- */
.site-footer{background:var(--myrtle-dark);color:#CFDBCB;padding:56px 0 28px;font-size:14.5px}
.site-footer .cols{
  display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.site-footer h2{
  font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--sage);margin:0 0 12px;font-weight:600;font-family:var(--sans);
}
.site-footer .brandline{
  font-family:var(--serif);font-size:20px;color:var(--oat);margin:0 0 10px;
}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:8px}
.site-footer a{color:#CFDBCB;text-decoration:none;border-bottom:1px solid transparent}
.site-footer a:hover{border-bottom-color:var(--sage);color:var(--oat)}
.site-footer .bottom{
  margin-top:40px;padding-top:22px;border-top:1px solid rgba(207,219,203,.22);
  font-size:13px;line-height:1.7;
}
.site-footer .bottom p{margin:0 0 4px}

/* ---------- Responsive ---------- */
/* ---------- Skills, now below the body ---------- */
/* Read as a summary of what was just described rather than a spec sheet to
   scroll past, so they are quieter and they carry a label. */
.skills-lead{
  font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-weight:600;
  color:var(--sage);margin:28px 0 9px;
}
.skills{margin:0 0 4px}

/* ---------- Options line ---------- */
/* The only place on the page where construction words live: strings, cords,
   loose, plain. Kept out of the body so the copy reads as play, not assembly. */
.options{
  font-size:14.5px;color:var(--ink);margin:14px 0 0;max-width:46ch;
  padding-left:14px;border-left:2px solid var(--sage);
}

/* ---------- About, home page ---------- */
/* A quiet band, not another sales pitch. Narrow measure so it reads like
   somebody talking rather than marketing copy set across the full width. */
.about-band{
  background:var(--oat-deep);border-top:1px solid var(--line);
  padding:52px 0;
}
.about-band .wrap{max-width:64ch}
.about-band p{font-size:17.5px;line-height:1.7;color:var(--ink);margin:0 0 16px}
.about-band .bb-eyebrow{margin-bottom:10px}
.about-more{margin:4px 0 0}
.about-more a{font-size:15.5px}
@media (max-width:860px){
  .about-band{padding:36px 0}
  .about-band p{font-size:16.5px}
}

/* ---------- How it works ---------- */
.how{background:#fff;padding:56px 0}
.steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
}
.steps li{margin:0}
.step-num{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--oat-deep);border:2px solid var(--sage);color:var(--myrtle);
  font-size:15px;font-weight:700;margin-bottom:12px;
}
.steps h3{
  font-family:var(--serif);font-size:20px;font-weight:600;color:var(--myrtle);
  margin:0 0 6px;
}
.steps p{margin:0;font-size:15.5px;color:var(--muted);line-height:1.6}
@media (max-width:860px){
  .how{padding:38px 0}
  /* Stacked, not squeezed into three columns 110px wide. */
  .steps{grid-template-columns:1fr;gap:22px}
  .steps li{display:grid;grid-template-columns:34px 1fr;gap:0 14px}
  .step-num{grid-row:1/span 2;margin-bottom:0}
  .steps h3{font-size:18px}
}

/* ---------- Build a book, home page ---------- */
/* Tinted so it reads as its own thing above the product grid, without the heavy
   dark band treatment which would stop the page before it starts. */
.bb{background:var(--oat-deep);border-bottom:1px solid var(--line);padding:56px 0}
.bb-inner{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.bb-eyebrow{
  font-size:11px;text-transform:uppercase;letter-spacing:.16em;font-weight:600;
  color:var(--sage);margin:0 0 8px;
}
.bb h2{
  font-family:var(--serif);font-size:34px;line-height:1.12;font-weight:600;
  color:var(--myrtle);margin:0 0 12px;
}
.bb-lead{font-size:17.5px;color:var(--muted);margin:0 0 16px;max-width:44ch}
.bb-price{margin:0 0 22px;font-size:15px;color:var(--muted)}
.bb-price strong{font-size:29px;color:var(--ink);font-weight:600;margin-right:8px}
.bb-price span{white-space:nowrap}
.bb-value{margin:-14px 0 22px;font-size:15.5px;color:var(--myrtle);font-weight:600}

/* Three pages and a cover: the offer explained without a caption. */
.bb-shots{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.bb-shot{border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 2px 10px rgba(32,41,31,.07)}
.bb-shot img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;display:block}
/* The cover sits last and slightly proud, because it is the thing with their
   name on it. */
.bb-shot:last-child{outline:2px solid var(--myrtle);outline-offset:-2px}

@media (max-width:860px){
  .bb{padding:38px 0}
  .bb-inner{grid-template-columns:1fr;gap:26px}
  .bb h2{font-size:28px}
  .bb-lead{font-size:16.5px}
  .bb-price strong{font-size:26px}
  .bb .btn{width:100%;text-align:center}
  /* Photos above the words on a phone: the picture sells it faster than the
     paragraph does on a small screen. */
  .bb-shots{order:-1;grid-template-columns:repeat(4,1fr);gap:8px}
}

/* ---------- Build a book ---------- */
.build-lead{font-size:18px;color:var(--muted);max-width:58ch;margin:0 0 8px}
.build{padding-bottom:110px}
.build-step{padding:34px 0 8px}
.build-step h2{
  font-family:var(--serif);font-size:26px;font-weight:600;color:var(--myrtle);
  margin:0 0 6px;display:flex;align-items:center;gap:12px;
}
.step-n{
  display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;
  border-radius:50%;background:var(--myrtle);color:#fff;
  font-family:var(--sans);font-size:15px;font-weight:700;
}
.build-note{font-size:15px;color:var(--muted);margin:0 0 18px;max-width:52ch}

.picks{
  display:grid;gap:18px 14px;margin-top:18px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  align-items:start;
}
/* Hidden until the page is chosen: sixteen sets of radios across the grid
   before anybody has picked anything is noise, and the question does not arise
   until the page is actually in the book. */
.pick-wrap .choice{display:none;margin:10px 0 0;padding:7px 10px 8px;border-radius:8px}
.pick-wrap.is-on .choice{display:block}
.pick-wrap .choice legend{font-size:10.5px;padding:0 4px}
.pick-wrap .choice label{font-size:13.5px;gap:7px;padding:2px 0}
.pick-wrap .choice input{width:15px;height:15px}
/* The card is the wrapper, not the button, so a page with a choice is one box
   with the radios inside it rather than a button with a second card hanging off
   the bottom. */
.pick-wrap{
  background:#fff;border:2px solid var(--line);border-radius:10px;
  padding:8px 8px 12px;
  transition:border-color .15s,box-shadow .15s,opacity .15s;
}
.pick-wrap:hover{border-color:var(--sage)}
.pick-wrap.is-on{border-color:var(--myrtle);box-shadow:0 0 0 3px rgba(63,90,66,.14)}
/* Dimmed rather than hidden, so the range still reads as sixteen pages even
   when only one slot is left. */
.pick-wrap.is-full{opacity:.38}
.pick-wrap.is-full:hover{border-color:var(--line)}
.pick{
  position:relative;display:block;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;border-radius:8px;padding:0;font:inherit;color:inherit;
}
.pick.is-full{cursor:not-allowed}
.pick-img{display:block;border-radius:6px;overflow:hidden;background:var(--oat-deep)}
.pick-img img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.pick-name{
  display:block;margin-top:9px;font-family:var(--serif);font-size:16px;
  font-weight:600;color:var(--myrtle);line-height:1.25;
}
.pick-slots{display:block;font-size:12px;color:var(--wattle);font-weight:600;margin-top:2px}
.pick-tick{
  position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;
  background:var(--myrtle);color:#fff;display:grid;place-items:center;
  font-size:14px;opacity:0;transform:scale(.7);transition:opacity .15s,transform .15s;
}
.pick.is-on .pick-tick{opacity:1;transform:scale(1)}

/* ---------- Glitter swatches ---------- */

/* Small round tiles rather than cards: eleven of them have to sit in one glance
   on a phone, and the thing being chosen is a colour, not a product. */
.swatches{
  display:flex;flex-wrap:wrap;gap:18px 14px;margin:20px 0 4px;
  /* Capped so eleven colours wrap as six and five rather than ten and a
     lonely one. A tidy second row reads as a palette; one orphan reads as a
     mistake. */
  max-width:610px;
}
.swatch{
  display:block;padding:0;border:0;background:none;font:inherit;color:inherit;
  cursor:pointer;width:84px;text-align:center;-webkit-tap-highlight-color:transparent;
}
.swatch-chip{
  position:relative;display:block;width:76px;height:76px;margin:0 auto;
  border-radius:50%;background:var(--sw,var(--oat-deep));
  box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line),0 2px 6px rgba(32,41,31,.14);
  transition:transform .16s ease,box-shadow .16s ease;
}
.swatch-chip img{
  display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;
  /* The photograph is the colour. Nudging saturation and contrast up a touch
     puts back what the camera's white balance took off the sheets. */
  filter:saturate(1.06) contrast(1.04);
}
/* The pop. Lifting and enlarging on hover is what makes eleven flat circles
   feel like something you are handling.
   Behind a hover query on purpose: a phone has no hover, and Safari resolves
   :hover on tap and then LEAVES it resolved, so without this the last swatch
   you touched stays lifted for the rest of the visit and looks selected. */
@media (hover:hover){
  .swatch:hover .swatch-chip{
    transform:translateY(-4px) scale(1.07);
    box-shadow:0 0 0 2px #fff,0 0 0 3px var(--sage),0 8px 16px rgba(32,41,31,.22);
  }
}
.swatch:focus-visible .swatch-chip{
  transform:translateY(-4px) scale(1.07);
  box-shadow:0 0 0 2px #fff,0 0 0 3px var(--sage),0 8px 16px rgba(32,41,31,.22);
}
.swatch:focus-visible{outline:none}
.swatch:focus-visible .swatch-chip{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--myrtle),0 8px 16px rgba(32,41,31,.22)}
.swatch.is-on .swatch-chip{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 0 0 3px #fff,0 0 0 5px var(--myrtle),0 6px 14px rgba(32,41,31,.24);
}
/* Last, so it wins while the thumb is down whatever else is going on. Pressing
   in rather than lifting out: on a touch screen the finger is already covering
   the swatch, so the only feedback that reads is the edges moving. */
.swatch:active .swatch-chip{
  transform:scale(.93);
  box-shadow:0 0 0 2px #fff,0 0 0 3px var(--myrtle),0 1px 3px rgba(32,41,31,.2);
  transition-duration:.08s;
}
/* A bare white tick disappears on silver and gold, so the tick brings its own
   dark disc with it. That reads on all eleven, and it sits in the corner rather
   than across the middle: dimming the swatch to confirm a choice hides the one
   thing the person is trying to look at. */
.swatch-tick{
  position:absolute;right:-1px;bottom:-1px;display:grid;place-items:center;
  opacity:0;transition:opacity .16s ease;
}
.swatch-tick>span{
  position:relative;display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;
  background:var(--myrtle-dark);color:#fff;font-size:14px;line-height:1;
  box-shadow:0 0 0 2px #fff,0 1px 4px rgba(0,0,0,.28);
  /* Overshoots slightly on the way in, which is what makes a tick feel like a
     confirmation rather than a state change. */
  transform:scale(.6);transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.swatch.is-on .swatch-tick{opacity:1}
.swatch.is-on .swatch-tick>span{transform:scale(1)}
.swatch-name{
  display:block;margin-top:8px;font-size:13px;font-weight:600;
  color:var(--muted);line-height:1.2;
}
.swatch.is-on .swatch-name{color:var(--myrtle)}

@media (prefers-reduced-motion:reduce){
  .swatch-chip,.swatch-tick,.swatch-tick>span{transition:none}
  .swatch:hover .swatch-chip,.swatch:active .swatch-chip,
  .swatch.is-on .swatch-chip{transform:none}
  .swatch.is-on .swatch-tick>span{transform:scale(1)}
}

@media (max-width:600px){
  /* Four across, which puts all eleven in three rows on any phone and keeps
     every chip well above a 44px tap target even at 320px. */
  .swatches{gap:18px 10px;justify-content:flex-start;max-width:none}
  .swatch{width:calc(25% - 8px)}
  .swatch-chip{width:100%;height:auto;aspect-ratio:1/1}
  .swatch-tick>span{width:26px;height:26px;font-size:13px}
  .swatch-name{font-size:12.5px;margin-top:7px}
}

/* The running count and the button follow you down the page, because the whole
   task is "have I got six yet" and that answer should never be off screen. */
.build-bar{
  position:sticky;bottom:0;z-index:25;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(32,41,31,.08);
  padding:12px 0 calc(12px + env(safe-area-inset-bottom));margin-top:26px;
}
.build-bar.is-ready{background:var(--oat-deep);border-top-color:var(--myrtle)}
.build-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.build-count{
  margin:0;font-size:16px;font-weight:600;color:var(--myrtle);
  display:flex;align-items:center;gap:8px;min-width:0;
}
/* A small copy of the swatch, so the bar shows the colour and not just its
   name. It reuses the image already on the page, so it costs no request. */
.count-dot{
  flex:0 0 22px;width:22px;height:22px;border-radius:50%;overflow:hidden;
  background:var(--sw,var(--sage));
  box-shadow:0 0 0 1px #fff,0 0 0 2px var(--line);
}
.count-dot img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.build-bar .btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- A book in the cart ---------- */
.book-contents{
  list-style:none;margin:8px 0 12px;padding:0 0 0 14px;
  border-left:2px solid var(--sage);font-size:13.5px;color:var(--muted);
}
.book-contents li{margin:0 0 2px}
.book-contents .book-cover{color:var(--myrtle);font-weight:600;margin-top:4px}
/* A book added before the colour picker existed. Wattle rather than red: it is
   a thing to finish, not a mistake. */
.book-contents .is-todo{color:var(--wattle)}
.book-contents .is-todo a{color:inherit}

@media (max-width:600px){
  .picks{grid-template-columns:repeat(2,1fr);gap:14px 12px}
  .pick-name{font-size:14.5px}
  .build-step h2{font-size:22px}
  .build-lead{font-size:16.5px}
  .build-bar-inner{flex-direction:column;align-items:stretch;gap:9px}
  .build-count{justify-content:center;font-size:15px}
  .build-bar .btn{width:100%;text-align:center}
}

/* ---------- Cart link in the header ---------- */
.cart-link{
  display:inline-flex;align-items:center;gap:6px;position:relative;
  color:var(--myrtle);text-decoration:none;padding:6px;border-radius:6px;
  flex:0 0 auto;
}
.cart-link:hover{background:var(--oat-deep)}
.cart-count{
  min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  background:var(--wattle);color:#2A2008;
  font-size:11.5px;font-weight:700;line-height:19px;text-align:center;
}

/* ---------- Add to cart ---------- */
/* The button confirms in place rather than throwing up a modal or whisking the
   buyer off to a cart page. On a phone, being bounced out of the page you were
   reading is the fastest way to lose a second item from the order. */
.btn.is-added{background:var(--sage);border-color:var(--sage);color:#1F2C1F}
.btn.wide-sm{min-width:210px;text-align:center}

/* ---------- Cart page ---------- */
.cart-empty{font-size:18px;color:var(--muted);margin:0 0 22px}
/* Capped so the price does not drift half a screen away from the item it
   belongs to on a wide monitor. */
.cart-lines{list-style:none;margin:0 0 28px;padding:0;max-width:760px}
.cart-line{
  display:grid;grid-template-columns:96px 1fr auto;gap:18px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--line);
}
.cart-thumb{display:block;border-radius:6px;overflow:hidden;background:var(--oat-deep)}
.cart-thumb img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.cart-name{
  font-family:var(--serif);font-size:19px;font-weight:600;color:var(--myrtle);
  text-decoration:none;display:inline-block;
}
.cart-name:hover{text-decoration:underline}
.cart-each{font-size:14px;color:var(--muted);margin:2px 0 10px}
.cart-sub{font-size:17px;font-weight:600;white-space:nowrap;padding-top:2px}

.qty{display:flex;align-items:center;gap:4px}
.qty-btn{
  width:34px;height:34px;border:1px solid var(--line);background:#fff;
  border-radius:6px;font-size:17px;line-height:1;color:var(--myrtle);cursor:pointer;
}
.qty-btn:hover{border-color:var(--sage);background:var(--oat-deep)}
.qty-n{min-width:30px;text-align:center;font-size:15px;font-weight:600}
.qty-remove{
  margin-left:10px;border:0;background:none;padding:6px 2px;cursor:pointer;
  font-size:13.5px;color:var(--muted);text-decoration:underline;
}
.qty-remove:hover{color:var(--ink)}

/* ---------- Notes ---------- */
/* Asked here rather than on the Square checkout page, because this is where
   the buyer is still looking at the photo and can see what they are choosing.
   Each page asks the question that page actually has an answer for. */
.line-note{display:block;margin:14px 0 0;max-width:44ch}
.order-note span{
  display:block;font-size:14px;color:var(--myrtle);font-weight:600;margin-bottom:5px;
}
.line-note,.order-note textarea{
  width:100%;font:15px/1.5 var(--sans);color:var(--ink);
  border:1px solid var(--line);border-radius:6px;padding:9px 11px;
  background:#fff;resize:vertical;
}
.line-note:focus,.order-note textarea:focus{
  outline:none;border-color:var(--sage);box-shadow:0 0 0 3px rgba(143,166,138,.28);
}
.order-note{display:block;margin:0 0 26px;max-width:56ch}

/* ---------- Post or pickup ---------- */
/* On the cart rather than at the Square checkout, because a Square payment link
   has no fulfilment picker of its own. */
.fulfil{
  border:1px solid var(--line);border-radius:var(--radius);
  margin:0 0 22px;padding:16px 18px 6px;background:#fff;
}
.fulfil legend{
  font-size:14px;font-weight:600;color:var(--myrtle);padding:0 6px;
}
.fulfil label{
  display:flex;gap:12px;align-items:flex-start;
  padding:10px 0;cursor:pointer;font-size:15px;line-height:1.5;
  border-bottom:1px solid var(--line);
}
.fulfil label:last-child{border-bottom:0}
.fulfil input{
  flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;accent-color:var(--myrtle);
}
.fulfil strong{display:block;color:var(--ink);font-weight:600}
.fulfil span{color:var(--muted)}
@media (max-width:600px){
  .fulfil{padding:14px 14px 4px}
  .fulfil label{font-size:14.5px}
}

/* ---------- Cart footer ---------- */
.cart-foot{padding-top:26px;max-width:520px}
/* Pages, postage, then the total. Quiet rows above a loud one, so the eye lands
   on the number that is actually going to be charged. */
.cart-sums{margin:0 0 10px}
.cart-sum{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin:0 0 7px;font-size:15.5px;color:var(--muted);
}
.cart-total-row{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:18px;margin:0 0 6px;padding-top:12px;padding-bottom:14px;
  border-top:1px solid var(--line);
  border-bottom:2px solid var(--myrtle);
}
.cart-total-row strong{font-size:25px}
.cart-post-note{font-size:13.5px;color:var(--muted);margin:12px 0 20px}
[data-checkout-note]{color:#8A3324}

/* ---------- Order by message fallback ---------- */
/* Shown only when the checkout endpoint is missing or Square is not configured.
   The cart still did its job: it collected the pages, the quantities and the
   notes. This just hands that over in a form the buyer can send. */
.order-fallback{
  margin:26px 0 0;padding:22px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--oat-deep);
}
.order-fallback h2{
  font-family:var(--serif);font-size:21px;font-weight:600;color:var(--myrtle);
  margin:0 0 8px;
}
.order-fallback p{font-size:15px;color:var(--muted);margin:0 0 14px}
.order-fallback textarea{
  width:100%;font:14px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  border:1px solid var(--line);border-radius:6px;padding:11px 13px;
  background:#fff;color:var(--ink);resize:vertical;
}
.order-fallback-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
@media (max-width:600px){
  .order-fallback{padding:18px}
  .order-fallback-actions{flex-direction:column}
  .order-fallback-actions .btn{width:100%;text-align:center}
}

/* ---------- Sticky buy bar (phones only) ---------- */
/* Hidden by default. It only earns its place where the screen is small enough
   that the real buy block scrolls out of reach. */
.buybar{display:none}

/* ---------- Responsive ----------
   Almost everyone arrives here from Instagram on a phone, so the phone layout
   is the one that has to be right, not the one that has to survive. */
@media (max-width:860px){
  .hero{padding:28px 0 32px}
  .hero-logo{width:min(230px,60vw);margin-bottom:12px}
  .hero h1{font-size:27px;margin-bottom:10px}
  .hero p{font-size:16px;margin-bottom:20px}
  .brand img{width:88px}
  .product{grid-template-columns:1fr;gap:20px;padding:20px 0}
  .shots,.product-info{grid-column:1}
  .shots{grid-row:1}
  .product-info{grid-row:2}
  /* One photo at a time, swiped. 86vw leaves the next one peeking at the edge,
     which is the only affordance that reliably says "there is another". Full
     width would look like a single photo and the second would go unseen, which
     is the bug this replaced. */
  .shots{
    display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
    /* Bled out to the screen edges and padded back in, so the strip scrolls
       the full width while the first photo still lines up with the copy. 22px
       is .wrap's gutter. */
    margin:0 -22px;padding:0 22px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .shots::-webkit-scrollbar{display:none}
  .shots .shot{flex:0 0 86%;scroll-snap-align:center}
  .shots .shot:only-child{flex-basis:100%}
  .shot figcaption{padding-top:8px}
  /* A sticky header on a phone costs a third of the screen for the whole scroll
     and hides whatever an anchor link jumps to. The nav is at the top where it
     is expected, the footer repeats it, and on a product page the buy bar is
     pinned instead, which is the control that actually matters. */
  .site-header{position:static}
  .product h1{font-size:27px}
  section{padding:38px 0}
  .section-head{margin-bottom:22px}
  .section-head h2{font-size:25px}
  .section-head p{font-size:15.5px}
  /* Keep the mobile header to one compact band. A wrapping nav pushed the
     hero most of a screen down, which is the worst thing a shop can do. */
  /* Logo and cart share the top row, nav scrolls underneath. The cart has to
     stay reachable without hunting, since it is the whole point of the page. */
  .site-header .wrap{
    display:grid;grid-template-columns:1fr auto;align-items:center;
    gap:8px 12px;padding-top:10px;padding-bottom:8px;
  }
  .brand{grid-column:1;grid-row:1}
  .cart-link{grid-column:2;grid-row:1;justify-self:end}
  .nav{grid-column:1/-1;grid-row:2}
  .brand{font-size:20px}
  .nav{
    gap:16px;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin:0 -22px;padding:0 22px 2px;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;font-size:13.5px}
  /* The row is wider than a phone, so the last link is always half cut. Fading
     the right edge says "this scrolls" without a scrollbar or a script. */
  .nav{
    -webkit-mask-image:linear-gradient(to right,#000 86%,transparent);
    mask-image:linear-gradient(to right,#000 86%,transparent);
  }
  /* Ragged, differently sized buttons look accidental on a phone. Stack them
     to one width so the pair reads as a deliberate choice. */
  .hero-actions{flex-direction:column;align-items:stretch;
    max-width:320px;margin:0 auto;gap:10px}
  .announce{font-size:12px;padding:7px 14px}
  .band{padding:42px 0}
  .band h2{font-size:25px}
  .band p{font-size:16px}
  .page-head{padding:32px 0 4px}
  .page-head h1{font-size:28px}
  .prose{padding-bottom:36px}
  .site-footer{padding:40px 0 24px}
}

/* ---------- Phone grid ----------
   One product per screen meant scrolling ten times to see the range. Two up
   shows four at a glance, which is the density this audience already reads on
   Instagram. The photos are square and the felt is high contrast, so they hold
   up small. */
@media (max-width:600px){
  .grid{grid-template-columns:repeat(2,1fr);gap:26px 14px}
  .tile-row{margin:10px 0 3px;padding-bottom:6px;gap:8px}
  .tile-name{font-size:15px;line-height:1.25}
  .tile-price{font-size:14px}
  /* No clamp. The card line is now one written sentence per tile and it is
     doing the selling, so cutting it at "...broccoli and avoc" costs more than
     the tidy edge is worth. Grid rows equalise in pairs anyway, so the tiles
     still line up across. */
  .tile-sub{font-size:12.5px;line-height:1.4}
  .tile figcaption{padding:11px 12px 14px;font-size:12.5px}
  .tile figcaption strong{font-size:15px}
  /* The book shots carry detail worth seeing, so they stay full width. */
  .gallery-grid{grid-template-columns:1fr;gap:22px}
  .skills li{font-size:11px;padding:3px 9px}
  .spec li strong{flex:0 0 104px}
  .wrap{padding:0 16px}
  .shots{margin:0 -16px;padding:0 16px}
  .nav{margin:0 -16px;padding:0 16px 2px}
}

/* ---------- Sticky buy bar, phones ----------
   Pinned to the bottom so the price and the order button are always one thumb
   away. The page gets padding underneath so the bar never covers the footer. */
@media (max-width:860px){
  .buybar{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    position:fixed;left:0;right:0;bottom:0;z-index:30;
    background:#fff;
    border-top:1px solid var(--line);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 18px rgba(32,41,31,.08);
  }
  .buybar-price{font-size:19px;font-weight:600;color:var(--ink)}
  /* A cart line at 390px cannot afford a 96px thumbnail and a price column on
     the same row, so the price drops under the detail. */
  .cart-line{grid-template-columns:72px 1fr;gap:14px;padding:18px 0}
  .cart-sub{grid-column:2;font-size:16px;padding-top:4px}
  .cart-name{font-size:17px}
  .line-note{margin-top:12px}
  .cart-foot{max-width:none}
  .btn.wide-sm{width:100%}
  .buybar .btn{padding:11px 20px;font-size:14.5px}
  body:has(.buybar){padding-bottom:74px}
}
/* Older browsers without :has() cannot tell which pages carry the bar, so they
   get the clearance on every page. Costs a strip of empty footer, never a
   covered link. */
@supports not selector(:has(*)){
  @media (max-width:860px){
    .site-footer{padding-bottom:96px}
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* ---------- Clickable card thumbnail ---------- */
.card .thumb{display:block;text-decoration:none}
.card .thumb img{transition:transform .25s ease}
.card:hover .thumb img,.card:focus-within .thumb img{transform:scale(1.035)}
@media (prefers-reduced-motion:reduce){
  .card .thumb img{transition:none}
  .card:hover .thumb img,.card:focus-within .thumb img{transform:none}
}

/* ---------- Finished books gallery ---------- */
.tile{
  margin:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
}
.tile .thumb{aspect-ratio:1/1;background:var(--sage);position:relative;display:block}
.tile .thumb img{width:100%;height:100%;object-fit:cover}
.tile figcaption{
  padding:15px 17px 18px;font-size:14px;line-height:1.5;color:var(--muted);
}
.gallery-cta{margin:34px 0 0;display:flex;gap:12px;flex-wrap:wrap}

/* Four book shots read better two-up than orphaned in a three-column row,
   and these images carry enough detail to deserve the extra size. */
@media (min-width:861px){
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:30px}
}

/* Cover tiles carry a title and a note, no price and no button. */
.tile figcaption strong{display:block;color:var(--myrtle);font-family:var(--serif);
  font-size:17px;font-weight:600;margin-bottom:4px}
.tile figcaption span{display:block}

/* ---------- The name on the cover, inside Build a book ---------- */

/* One face, and one only: the cover lettering, drawn from Bec's own specimen
   sheet. Offering a choice would be promising shapes the cutter has never made.
   font-display:block rather than swap, because this face is the preview: a
   flash of the system sans on the cover would show a name in a shape that is
   not the one being bought. At 8 KB the block period is imperceptible. */
@font-face{
  font-family:"LML Cover";
  src:url(/fonts/lml-cover.0b9d967a.woff2) format("woff2");
  font-display:block;
}

.namer{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:26px;align-items:start}

.namer-stage{
  position:relative;width:100%;aspect-ratio:1/1;border-radius:var(--radius);
  overflow:hidden;background:var(--oat-deep) center/cover no-repeat;
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(32,41,31,.10),0 16px 34px -20px rgba(32,41,31,.4);
}
/* No cover chosen, or a cover with no blank photo. A flat panel rather than a
   broken-looking empty frame, with the explanation sitting in the middle of it
   instead of pinned to the bottom over a picture. */
.namer-stage.is-blank{box-shadow:none;display:grid;place-items:center}
.namer-stage.is-blank .namer-ghost{
  position:static;color:var(--muted);text-shadow:none;padding:0 26px;max-width:32ch;
}

/* Centred across, but hung from its top edge, because the script pins the top
   of the capitals just under the cover's stitching and lets a bigger name grow
   downwards into the felt. */
.namer-slot{position:absolute;transform:translateX(-50%);pointer-events:none;white-space:nowrap}

/* The letters are a window onto the photograph of the vinyl the buyer picked a
   step earlier, not a colour standing in for it. background-clip:text is the
   whole mechanism. */
.namer-text{
  display:block;white-space:nowrap;line-height:1;
  font-family:"LML Cover","Trebuchet MS","Segoe UI",sans-serif;
  background-repeat:repeat;background-position:center;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.30)) drop-shadow(0 2px 3px rgba(0,0,0,.22));
}
.namer-text.is-empty{opacity:0}
/* No colour picked yet. Wattle so the name is legible on the felt and visibly
   provisional, rather than invisible until the buyer works out why. */
.namer-text.no-glitter{
  -webkit-text-fill-color:var(--wattle);color:var(--wattle);background-image:none;
}

.namer-ghost{
  position:absolute;inset:auto 0 14px;text-align:center;margin:0;
  font-size:13.5px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.65);pointer-events:none;
}

.namer-field{padding-top:2px}
.namer-lab{
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:var(--sage);margin-bottom:9px;display:block;
}
.namer-field input[type=text]{
  width:100%;max-width:320px;font:600 21px/1.3 var(--sans);color:var(--ink);
  background:var(--oat);border:1.5px solid var(--line);border-radius:9px;
  padding:12px 14px;letter-spacing:.02em;
}
.namer-field input[type=text]:focus-visible{
  outline:none;border-color:var(--myrtle);box-shadow:0 0 0 4px rgba(63,90,66,.18);
}
.namer-field .namer-lab{margin-top:22px}
.namer-row{display:flex;align-items:center;gap:12px;max-width:320px}
.namer-row input[type=range]{flex:1;accent-color:var(--myrtle);min-width:0}
.namer-row output{
  font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted);
  width:3.4em;text-align:right;
}

@media (max-width:760px){
  .namer{grid-template-columns:1fr;gap:18px}
  .namer-stage{max-width:340px;margin-inline:auto}
  .namer-field{text-align:center}
  .namer-field input[type=text]{margin-inline:auto}
  .namer-row{margin-inline:auto}
}

/* ---------- For professionals ---------- */
.prose-wide{max-width:76ch}
.prose .lede{font-size:18px;color:var(--muted);max-width:62ch}
.prose h3{font-family:var(--serif);font-size:18px;color:var(--myrtle);margin:20px 0 4px;font-weight:600}
.domain-pages{color:var(--muted);line-height:1.8}
.domain-pages a{white-space:nowrap}
.table-wrap{overflow-x:auto;margin:0 0 20px}
.skills-table{width:100%;border-collapse:collapse;font-size:14.5px}
.skills-table th{
  text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:0 10px 8px 0;border-bottom:1px solid var(--line);
}
.skills-table td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.skills-table td:first-child{white-space:nowrap;font-weight:600}
.skills-table .r{text-align:right;padding-right:0;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- Discount code on the cart ---------- */
.code{margin:14px 0 6px}
.code label{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.code-row{display:flex;gap:8px}
.code-row input{
  flex:1;min-width:0;font:600 15px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink);background:var(--oat);border:1.5px solid var(--line);border-radius:8px;padding:10px 12px;
}
.code-row input:focus-visible{outline:none;border-color:var(--myrtle);box-shadow:0 0 0 3px rgba(63,90,66,.18)}
.code-row .btn{padding-inline:18px;white-space:nowrap}
.code .note{margin:8px 0 0;font-size:13px}
.code .note.is-good{color:var(--myrtle);font-weight:600}