/* Dancing Pen & Press — shared styles.
   Layout: full-bleed bands of charcoal dots dividing a measure-width column; the lookbook
   breaks out to a mixed-scale masonry so no two jobs read as the same product. */
@font-face{
  font-family:"EB Garamond";
  src:url("../fonts/eb-garamond.woff2") format("woff2-variations"),
      url("../fonts/eb-garamond.woff2") format("woff2");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"EB Garamond";
  src:url("../fonts/eb-garamond-italic.woff2") format("woff2-variations"),
      url("../fonts/eb-garamond-italic.woff2") format("woff2");
  font-weight:400 800;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Vena Amoris";
  src:url("../fonts/vena-amoris.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --charcoal:#3C3C3C;
  --blush:#FCE8E6;
  --cream:#FDFBF7;
  --ink:#434343;
  --ink-soft:#666666;
  --rule:#DCD6D2;
  --display:"Vena Amoris","Snell Roundhand","Apple Chancery",cursive;
  --body:"EB Garamond",Garamond,Georgia,"Times New Roman",serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  margin:0;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:var(--charcoal)}

.gutter{
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
.col{max-width:680px;margin:0 auto}
.wide{max-width:1160px;margin:0 auto}

/* ---- navigation ---- */
.nav{border-bottom:1px solid var(--rule);padding-block:14px}
.nav-inner{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.wordmark{
  font-family:var(--display);
  font-size:1.9rem;color:var(--charcoal);line-height:1;
  text-decoration:none;
}
.nav ul{
  display:flex;gap:36px;list-style:none;margin:0;padding:0;flex-wrap:wrap;
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
}
.nav a{text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}

/* The old dotted band that used to sit here is gone; .rule replaced it long ago
   and .band now means a colour-blocked section (see further down). */

/* ---- headings ---- */
h1{
  font-family:var(--display);font-weight:400;line-height:1.2;
  color:var(--charcoal);margin:0 0 16px;text-wrap:balance;
  font-size:clamp(2.9rem,9.4vw,4.3rem);word-spacing:.06em;
}
h2.section{
  font-family:var(--display);font-weight:400;
  /* the script runs wide, so it shrinks with the viewport rather than
     spilling past the gutter on a narrow phone */
  font-size:clamp(2.1rem,9vw,2.75rem);
  color:var(--charcoal);margin:0 0 6px;line-height:1.28;word-spacing:.06em;
}
.eyebrow{
  font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--charcoal);margin:0 0 6px;
}
.standfirst,.section-note{color:var(--ink-soft);margin:0 0 14px;max-width:62ch}
.standfirst strong{color:var(--ink);font-weight:600}

/* ---- hero ---- */
.hero img{width:100%;height:clamp(300px,52vh,520px);object-fit:cover}
.hero-text{padding-block:26px 6px;text-align:center}
.hero-text p{color:var(--ink-soft);margin:0 auto;max-width:52ch}

/* ---- lookbook ----
   Base is CSS columns, which is what shows if the script never runs.
   When it does run it adds .packed and places every figure itself,
   shortest column first, so the suites pack tight with no holes. */
.masonry{columns:3 260px;column-gap:14px}
.masonry figure{break-inside:avoid;margin:0 0 14px}
.masonry img{width:100%;height:auto;cursor:zoom-in;background:#efece9;display:block}
@media (max-width:620px){ .masonry{columns:1} }

.masonry.packed{columns:auto;position:relative}
.masonry.packed figure{position:absolute;top:0;left:0;margin:0;will-change:transform}

/* ---- lightbox ---- */
.lb{
  position:fixed;inset:0;z-index:50;background:rgba(27,30,36,.94);
  display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-left,0px));
}
.lb img{max-width:100%;max-height:88vh;width:auto;object-fit:contain}
.lb button{
  position:absolute;top:calc(12px + env(safe-area-inset-top,0px));
  right:calc(12px + env(safe-area-inset-right,0px));
  background:transparent;border:1px solid var(--blush);color:var(--blush);
  border-radius:3px;padding:7px 13px;cursor:pointer;
  font-family:var(--body);font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;
}

/* ---- cards and buttons ---- */
.panel{background:var(--blush);border-radius:4px;padding:28px 24px}
.panel h2{font-family:var(--display);font-size:2.5rem;font-weight:400;line-height:1.28;word-spacing:.06em;color:var(--charcoal);margin:0 0 8px}
.panel p{color:var(--ink-soft);margin:0 auto 20px;max-width:52ch}
.center{text-align:center}
.btn{
  display:inline-block;font-size:.82rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cream);background:var(--charcoal);
  border:1px solid var(--charcoal);border-radius:3px;padding:13px 26px;text-decoration:none;
}
.btn:hover{background:#2b3842}
.btn.ghost{color:var(--charcoal);background:transparent}
.btn.ghost:hover{background:var(--blush)}

/* ---- trust strip ---- */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:center}
.trust .figure{font-family:var(--display);font-size:2.6rem;color:var(--charcoal);line-height:1}
.trust p{margin:4px 0 0;font-size:.92rem;color:var(--ink-soft)}
@media (max-width:620px){ .trust{grid-template-columns:1fr;gap:26px} }

/* ---- steps ---- */
.steps{counter-reset:step;display:grid;gap:26px;margin-top:10px}
.step{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.step::before{
  counter-increment:step;content:counter(step);
  font-family:var(--display);font-size:2.6rem;color:var(--charcoal);line-height:1;
  min-width:1.5em;
}
.step h3{font-family:var(--display);font-size:2.6rem;font-weight:400;line-height:1.3;word-spacing:.06em;color:var(--charcoal);margin:0 0 8px}
.step p{margin:0;color:var(--ink-soft)}

/* ---- placeholder marker ---- */
.todo{
  border:1px dashed var(--rule);border-radius:3px;padding:14px 16px;margin:18px 0 0;
  font-size:.88rem;font-style:italic;color:var(--ink-soft);
}

/* ---- two-up ---- */
.two-up{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;align-items:center}
.two-up p{margin:0 0 14px}
@media (max-width:620px){ .two-up{grid-template-columns:1fr} }

/* ---- footer ---- */
footer{background:var(--charcoal);color:var(--cream);margin-top:56px;padding-block:34px}
footer .wordmark{color:var(--blush)}
footer p{margin:8px 0 0;font-size:.92rem;color:#D8D2CE}
footer a{color:var(--blush)}

/* ---- scalloped edge ----
   A die-cut card edge: cream covers the strip except where half-discs of the
   image below poke through. Tile width sets the scallop size. */
.hero{position:relative}
.scallop{
  position:absolute;left:0;right:0;bottom:-1px;height:26px;pointer-events:none;
  background-image:radial-gradient(circle at 13px 0, rgba(0,0,0,0) 0 13px, var(--cream) 13.5px);
  background-size:26px 26px;
  background-repeat:repeat-x;
}
.scallop.up{
  top:-1px;bottom:auto;
  background-image:radial-gradient(circle at 13px 26px, rgba(0,0,0,0) 0 13px, var(--cream) 13.5px);
}
@media (max-width:620px){
  .scallop,.scallop.up{height:18px;background-size:18px 18px}
  .scallop{background-image:radial-gradient(circle at 9px 0, rgba(0,0,0,0) 0 9px, var(--cream) 9.5px)}
  .scallop.up{background-image:radial-gradient(circle at 9px 18px, rgba(0,0,0,0) 0 9px, var(--cream) 9.5px)}
}

/* ---- section rule: hairline with a small scallop trio ---- */
.rule{
  display:flex;align-items:center;gap:16px;
  margin:44px 0 30px;color:var(--charcoal);
}
.rule::before,.rule::after{
  content:"";flex:1;height:1px;background:var(--rule);
}
.rule svg{flex:none;display:block;opacity:.85}

/* Footer carries the scallop on its top edge, cut out of the charcoal. */
footer{position:relative}


/* ---- lace (purchased vector borders) ----
   edge-cream.svg: solid band with arched eyelets, used as a knockout over imagery.
   ornament-charcoal.svg: one repeat of the open outlined lace, used in section rules. */
.hero{position:relative}
.lace{
  position:absolute;left:0;right:0;bottom:-1px;height:34px;pointer-events:none;
  background-image:url("../img/lace/edge-cream.svg");
  background-repeat:repeat-x;
  background-position:left bottom;
  background-size:370px 34px;
}
.lace.up{
  top:-1px;bottom:auto;transform:scaleY(-1);
}
@media (max-width:620px){
  .lace{height:24px;background-size:261px 24px}
}

/* Footer carries the same edge, cut into the charcoal. */
footer{position:relative}





/* Section rule: the dot course from the lace edge, run edge to edge. */
.rule{
  display:block;height:11px;width:100%;margin:46px 0 32px;
  background-image:url("../img/lace/dots.svg");
  background-repeat:repeat-x;
  background-position:left center;
  background-size:auto 11px;
  opacity:.8;
}
@media (max-width:620px){ .rule{height:9px;background-size:auto 9px;margin:36px 0 26px} }

/* All-over lace net, from the purchased tile. */
.lace-bg-soft{position:relative}
.lace-bg-soft::before{
  content:"";position:absolute;inset:0;opacity:.13;pointer-events:none;z-index:0;
  background-image:url("../img/lace/net-tile.png");
  background-size:230px 230px;background-repeat:repeat;
}
.lace-bg-soft > *{position:relative;z-index:1}

/* Doily-framed panel: the oval lace frame, turned landscape, with the
   call to action sitting inside the opening. Frame drops away on phones,
   where the opening would be too small to hold the text. */
.panel.framed{
  background:none;padding:0;
  max-width:820px;margin:0 auto;
  aspect-ratio:1.414;
  background-image:url("../img/lace/frame-oval-landscape.svg");
  background-repeat:no-repeat;background-position:center;background-size:contain;
  display:grid;place-items:center;
}
.panel.framed .panel-inner{max-width:42%;text-align:center}
.panel.framed h2{margin:0 0 14px}
@media (max-width:760px){
  .panel.framed{
    background-image:none;aspect-ratio:auto;display:block;
    background-color:var(--blush);border-radius:4px;padding:28px 24px;
  }
  .panel.framed .panel-inner{max-width:none}
}

/* ---- logo ---- */
.nav .wordmark{display:block;line-height:0}
.nav .wordmark img{height:52px;width:auto;display:block}
@media (max-width:620px){ .nav .wordmark img{height:40px} }

/* ---- blush page (About): full-bleed blush ground with the lace net in ivory ---- */
.blush-page{
  position:relative;
  background-color:var(--blush);
  padding-block:34px 10px;
}
.blush-page::before{
  content:"";position:absolute;inset:0;opacity:.95;pointer-events:none;z-index:0;
  background-image:url("../img/lace/net-tile-cream.png");
  background-size:360px 360px;background-repeat:repeat;
}
.blush-page > *{position:relative;z-index:1}
/* Inside the blush ground the call-to-action panel needs its own ground. */
.blush-page .panel:not(.framed):not(.framed-diamond){background:var(--cream)}

/* ---- home: oversized centred logo ---- */
.nav.nav-hero .nav-inner{flex-direction:column;align-items:center;gap:18px}
.nav.nav-hero .wordmark img{height:132px}
.nav.nav-hero ul{justify-content:center}
@media (max-width:620px){ .nav.nav-hero .wordmark img{height:78px} }

/* Framed panel headings read larger inside the lace openings. */
.panel.framed h2,
.panel.framed-diamond h2{font-size:2.9rem;line-height:1.3;margin:0 0 22px;padding-bottom:.12em}
@media (max-width:620px){
  .panel.framed h2,.panel.framed-diamond h2{font-size:2.2rem}
}

/* Quatrefoil-framed panel for the About call to action. */
.panel.framed-diamond{
  background:none;padding:0;
  max-width:760px;margin:0 auto;
  aspect-ratio:836.7/689.7;
  background-image:url("../img/lace/frame-diamond.svg");
  background-repeat:no-repeat;background-position:center;background-size:contain;
  display:grid;place-items:center;
}
.panel.framed-diamond .panel-inner{max-width:44%;text-align:center}
@media (max-width:760px){
  .panel.framed-diamond{
    background-image:none;aspect-ratio:auto;display:block;
    background-color:var(--cream);border-radius:4px;padding:28px 24px;
  }
  .panel.framed-diamond .panel-inner{max-width:none}
}

/* ---- hero tagline ---- */
.tagline{
  font-size:.8rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--charcoal);margin:0 0 16px;
}
.tagline .mid-dot{
  display:inline-block;vertical-align:middle;
  margin:0 .35em;position:relative;top:-.08em;
}

/* ---- centred section headings ---- */
h2.section.center{text-align:center}
h2.section.big{font-size:3.9rem}
.section-note.center-note{text-align:center;margin-left:auto;margin-right:auto}
@media (max-width:620px){ h2.section.big{font-size:2.9rem} }

/* ---- footer: centred, with the wordmark clear of the lace ---- */
footer .wide{text-align:center}
footer .wordmark{display:inline-block;margin-top:14px}
footer{padding-block:52px 34px}
@media (max-width:620px){ footer{padding-block:38px 28px} }

/* Blush ground without the lace net, for pages whose content must stay legible. */
.blush-page.plain::before{content:none}
.blush-page.plain .panel:not(.framed):not(.framed-diamond){background:var(--cream)}

@media (max-width:620px){ .step h3{font-size:1.75rem} .step::before{font-size:2.1rem} }

/* Keep the five nav items on a single line at phone width. */
@media (max-width:620px){
  .nav ul,
  .nav.nav-hero ul{
    gap:11px;
    font-size:.68rem;
    letter-spacing:.07em;
    flex-wrap:nowrap;
    width:100%;
    justify-content:space-between;
  }
  .nav ul li{white-space:nowrap}
}
@media (max-width:360px){
  .nav ul,.nav.nav-hero ul{gap:7px;font-size:.63rem;letter-spacing:.04em}
}

/* Phrases that may wrap between them but never inside them. */
.nobreak{white-space:nowrap;display:inline-block}

/* The hero line gets the room to sit on one line on a wide screen. */
.hero-text .hero-line{max-width:none}

/* Smaller, blush call-to-action with charcoal lettering. */
.panel.framed .btn,
.panel.framed-diamond .btn{
  font-size:.72rem;
  letter-spacing:.16em;
  padding:10px 20px;
  color:var(--charcoal);
  background:var(--blush);
  border-color:var(--blush);
}
.panel.framed .btn:hover,
.panel.framed-diamond .btn:hover{
  background:var(--cream);
  border-color:var(--charcoal);
}
/* Keep the button clear of the lace frame below it. */
.panel.framed h2,
.panel.framed-diamond h2{margin-bottom:26px}

/* ---- reviews: Etsy review cards, blush on the cream page ---- */
.reviews{columns:2;column-gap:40px;margin-top:34px}
@media (max-width:820px){ .reviews{columns:1;max-width:440px;margin-inline:auto} }
.rv{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  margin:0 0 26px;
}
.rv img{display:block;width:100%;height:auto;border-radius:4px}

/* ---- breathing room between the main page sections ---- */
.sect{margin-top:104px}
@media (max-width:820px){ .sect{margin-top:76px} }
@media (max-width:620px){ .sect{margin-top:60px} }

/* Lift the blush call-to-action off the lace so it reads as a button.
   Two layers: a tight contact shadow plus a wider soft one. */
.panel.framed .btn,
.panel.framed-diamond .btn{
  box-shadow:0 2px 4px rgba(60,60,60,.17), 0 7px 18px rgba(60,60,60,.11);
  transition:box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}
.panel.framed .btn:hover,
.panel.framed-diamond .btn:hover{
  box-shadow:0 4px 8px rgba(60,60,60,.22), 0 12px 26px rgba(60,60,60,.14);
  transform:translateY(-1px);
}
.panel.framed .btn:active,
.panel.framed-diamond .btn:active{
  box-shadow:0 1px 2px rgba(60,60,60,.20);
  transform:translateY(1px);
}
@media (prefers-reduced-motion:reduce){
  .panel.framed .btn,.panel.framed-diamond .btn{transition:none}
  .panel.framed .btn:hover,.panel.framed-diamond .btn:hover{transform:none}
}

/* ---- lace relief ------------------------------------------------------
   The lace moves onto a ::before so the shadow applies to the lace alone
   and not to the heading and button sitting inside it. The blur is kept
   under half a pixel: anything wider than the holes in the mesh bleeds
   across them and fills the openwork with grey. */
.panel.framed,
.panel.framed-diamond{position:relative;background-image:none}

.panel.framed::before,
.panel.framed-diamond::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  filter:drop-shadow(0 1px 0.5px rgba(60,60,60,.45));
}
.panel.framed::before{background-image:url("../img/lace/frame-oval-landscape.svg")}
.panel.framed-diamond::before{background-image:url("../img/lace/frame-diamond.svg")}

.panel.framed .panel-inner,
.panel.framed-diamond .panel-inner{position:relative;z-index:1}

/* No frame on phones, so no shadow to render either. */
@media (max-width:760px){
  .panel.framed::before,
  .panel.framed-diamond::before{display:none}
}

/* ---- lace frames: lift the lace with a sub-pixel shadow ----
   The lace moves onto a ::before so the filter touches only the lace and not
   the heading and button inside it. Blur stays BELOW the size of one mesh
   hole (~2-3px on screen); anything larger bleeds across the holes and the
   openwork fills in with grey. Fill is lightened to #DFDFDF so the finished
   weight matches the flat #CFCFCF it replaces. */
.panel.framed,
.panel.framed-diamond{position:relative;background-image:none}
.panel.framed::before,
.panel.framed-diamond::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  filter:drop-shadow(0 1px 0.5px rgba(60,60,60,.45));
}
.panel.framed::before{background-image:url("../img/lace/frame-oval-landscape.svg")}
.panel.framed-diamond::before{background-image:url("../img/lace/frame-diamond.svg")}
.panel.framed .panel-inner,
.panel.framed-diamond .panel-inner{position:relative;z-index:1}
@media (max-width:760px){
  .panel.framed::before,
  .panel.framed-diamond::before{content:none}
}

/* ---- process page: a larger label and more air before the steps ---- */
.process-intro .eyebrow{font-size:.92rem;letter-spacing:.22em;margin-bottom:10px}
.steps.process-steps{margin-top:40px}
.step p a{color:var(--charcoal);text-decoration:underline;text-underline-offset:3px}
.step p a:hover{color:var(--ink)}

/* ---- hand calligraphy headings ----
   Elecia's own lettering replaces the script face on the nine marquee
   headings. The heading element keeps its semantics and the words live in
   the alt attribute, so screen readers and search still get real text.
   inline-block means each piece honours the parent's text-align, and
   width:100% lets it shrink below its max on a narrow screen. */
.cg-head{font-size:0;line-height:0;margin:0 0 20px}
.cg{display:inline-block;width:100%;height:auto}
.cg-pen{max-width:440px}
.cg-process{max-width:330px}
.cg-lookbook{max-width:360px}
.cg-inquire{max-width:225px}
.cg-about{max-width:190px}
.cg-about-sm{max-width:150px}
.cg-what{max-width:300px}
.cg-lets{max-width:235px}
.cg-ready{max-width:252px}

/* The lettering needs more of the lace opening than the old type did. */
.panel.framed .panel-inner{max-width:54%}
.panel.framed-diamond .panel-inner{max-width:52%}
.cg-what{max-width:292px}
.cg-lets{max-width:310px}
/* ...but on phones the lace frame is gone, so the opening constraint goes
   with it. Re-assert the full-width override that the rules above shadowed. */
@media (max-width:760px){
  .panel.framed .panel-inner,
  .panel.framed-diamond .panel-inner{max-width:none}
}

/* Footer wears the real logo artwork, recoloured blush for the charcoal ground. */
.footer-mark{display:block;width:100%;max-width:230px;height:auto;margin:0 auto 4px}
.cg-recent{max-width:420px}
.cg-kind{max-width:400px}

/* ---- in-text portrait: text wraps beside it, stacks on a phone ---- */
.port{float:right;width:252px;margin:5px 0 16px 28px}
.port img{display:block;width:100%;height:auto;border-radius:3px}
.port figcaption{margin-top:7px;font-size:.84rem;font-style:italic;color:var(--ink-soft);text-align:center}
@media (max-width:620px){
  .port{float:none;width:100%;max-width:330px;margin:0 auto 20px}
}

/* Oval panel: lettering sits well inside the opening, button tucked up to it.
   Scoped to .framed so the diamond panel on About is untouched. */
.panel.framed h2{margin-bottom:12px}

/* ---- colour-blocked sections ----
   Blush bands on the cream page, carrying the hero's own scalloped edge so the
   colour change is a die-cut rather than a hard line. The band's padding does
   the spacing, so the .sect margin after one is dropped. */
.band{position:relative;background:var(--blush);padding-block:88px;margin:46px 0 30px}
.band + .sect{margin-top:0}
.band-stats{margin-top:64px}
@media (max-width:620px){ .band{padding-block:62px} .band-stats{margin-top:44px} }

/* The framed panels now sit on blush, so a blush button has no ground to stand
   on. Cream gives it an edge without shouting. */
.panel.framed .btn,
.panel.framed-diamond .btn{
  background:var(--cream);
  border-color:var(--cream);
  color:var(--charcoal);
}
.panel.framed .btn:hover,
.panel.framed-diamond .btn:hover{
  background:#fff;
  border-color:var(--charcoal);
}

/* ---- process steps: the numeral as a large mark, centred on the whole step ----
   Fixed size and vertical centring, so a short step is nearly filled by its
   number and a long one keeps the same number with air around it. Scaling the
   numeral to each block would give seven different sizes. */
.steps.process-steps .step{align-items:center;gap:26px}
.steps.process-steps .step::before{
  font-size:5.4rem;line-height:.9;min-width:auto;width:96px;text-align:center;
  color:var(--charcoal);
}
@media (max-width:620px){
  .steps.process-steps .step{gap:14px}
  .steps.process-steps .step::before{font-size:3.2rem;width:54px}
}

/* Numeral hangs from the top of its step rather than centring. */
.steps.process-steps .step{align-items:start}
.steps.process-steps .step::before{margin-top:-.06em}

/* Process doily: bigger lettering, dropped toward the oval's widest point.
   :has() scopes this to that panel so the homepage oval is untouched. */
.cg-ready{max-width:338px}
.panel.framed:has(.cg-ready) .panel-inner{margin-top:30px}
@media (max-width:760px){
  .panel.framed:has(.cg-ready) .panel-inner{margin-top:0}
}
/* Process doily, fine tuning. */
.cg-ready{max-width:306px}
.panel.framed:has(.cg-ready) .panel-inner{margin-top:28px}
.panel.framed:has(.cg-ready) h2{margin-bottom:-14px}
.panel.framed:has(.cg-ready) .btn{font-size:.68rem;padding:9px 17px}

/* ---- process steps in her own hand ----
   Both sheets were drawn at one nib size, so every piece is scaled by a single
   factor and carries its true width inline. The counter is retired. */
.steps.process-steps .step::before{content:none}
.steps.process-steps .step{grid-template-columns:136px 1fr;gap:26px;align-items:start}
.steps.process-steps .num{display:block;height:auto;margin:16px auto 0}
.steps.process-steps h3{margin:0 0 10px}
@media (max-width:620px){
  .steps.process-steps .step{grid-template-columns:64px 1fr;gap:14px}
  .steps.process-steps .num{width:auto !important;height:48px}
}
/* FAQ doily: lettering sized to the opening, button tucked under it. */
.panel.framed:has(.cg-wondering) .panel-inner{margin-top:30px}
.panel.framed:has(.cg-wondering) h2{margin-bottom:-16px}

/* ---- doilies stay on phones ----
   They were dropped below 760px back when the headings were live type and the
   opening was too small to hold them. The headings are images now, so they
   scale with the frame and the lace can stay. */
@media (max-width:760px){
  .panel.framed,
  .panel.framed-diamond{
    aspect-ratio:1.414;display:grid;place-items:center;
    background-color:transparent;border-radius:0;padding:0;
  }
  .panel.framed-diamond{aspect-ratio:836.7/689.7}
  .panel.framed::before,
  .panel.framed-diamond::before{content:"";display:block}
  .panel.framed .panel-inner{max-width:41%}
  .panel.framed-diamond .panel-inner{max-width:44%}
  .panel.framed .btn,
  .panel.framed-diamond .btn{font-size:.56rem;padding:6px 11px;letter-spacing:.09em}
  .panel.framed h2,
  .panel.framed-diamond h2{margin-bottom:-8px}
}

/* FAQ doily: smaller button, lifted clear of the lace. */
.panel.framed:has(.cg-wondering) .btn{font-size:.64rem;padding:8px 15px}
.panel.framed:has(.cg-wondering) h2{margin-bottom:-26px}

/* About doily: lettering down a little, button up. */
.panel.framed-diamond:has(.cg-lets) .panel-inner{margin-top:18px}
.panel.framed-diamond:has(.cg-lets) h2{margin-bottom:-18px}

/* Hero text centred in its cream band: push down 13px, pull the band back up. */
.hero-text{padding-block:39px 6px;margin-bottom:-13px}

/* Phone: the oval opening was too tight for the lettering and the button, so
   the doily is scaled past the screen edges and the panel grown to hold its
   new height. Background images never create horizontal scroll. */
@media (max-width:620px){
  .panel.framed{aspect-ratio:0.86}
  .panel.framed::before{background-size:168% auto}
  .panel.framed .panel-inner{max-width:60%}
  .panel.framed h2{margin-bottom:-4px}
}

/* Smallest phones: the opening shrinks faster than the lettering does. */
@media (max-width:370px){
  .panel.framed{aspect-ratio:0.78}
  .panel.framed::before{background-size:196% auto}
  .panel.framed .panel-inner{max-width:52%}
  .panel.framed .btn,
  .panel.framed-diamond .btn{font-size:.52rem;padding:6px 9px}
}