:root{
    /* ---- flat rose-gray base + a three-hue accent family: rose (poppy),
       rust, and gold. Rose is still the primary UI accent (buttons, links,
       focus rings); rust + gold are solid, deliberate fills for the Orange
       and Golden product lines and a few decorative spots wired to them
       (the 3-step cycle diagram) — never blended into a gradient together.
       poppy-light/poppy-dark are a same-hue tint/shade pair used only for
       the logo mark's red-nail ombré. ---- */
    --ground:      #EFEAEC;
    --ground-deep: #E4DCDF;
    --surface:     #FCFAFB;
    --surface-2:   #E9E1E4;
    --ink:         #1C1317;
    --ink-2:       #463A3F;
    --ink-3:       #5A4C52;
    --line:        rgba(36, 26, 30, 0.24);
    --line-firm:   rgba(36, 26, 30, 0.44);
    --poppy:       #B81E35;
    --poppy-light: #D9748A;
    --poppy-dark:  #7A1424;
    --on-poppy:    #FFF6F4;
    --rust:        #A8451F;
    --rust-tint:   #F3E1D3;
    --gold:        #8C6209;
    --gold-tint:   #F5EAC9;
    --rose-tint:   #F6E3E6;
    --radius:      4px;
    --shadow:      0 1px 2px rgba(36,26,30,.05), 0 12px 32px -14px rgba(36,26,30,.22);

    /* ---- back-compat aliases: every existing rule composes its colors
       from these, so redefining them here reskins the whole site without
       touching individual component rules. ---- */
    --paper:       var(--ground);
    --ink-soft:    var(--ink-2);
    --pink:        var(--poppy);
    --orange:      var(--rust);
    --yellow:      var(--gold);
    --pink-tint:   var(--rose-tint);
    --orange-tint: var(--rust-tint);
    --yellow-tint: var(--gold-tint);
    --btn-gradient: linear-gradient(100deg, var(--poppy), var(--poppy));

  /* ---- derived accents. Every alpha and shade of the brand color lives here,
     so a palette change is one edit instead of seventeen. These were inline
     rgba() values until 2026-09-07 — and two of them still carried #D6266E from
     an earlier magenta accent, so the nav hover glow was a different hue from
     the brand it was meant to echo. ---- */
  --poppy-deep:    #93192B;
  --poppy-glow:    rgba(184, 30, 53, .28);
  --poppy-glow-sm: rgba(184, 30, 53, .25);
  --focus-ring:    rgba(184, 30, 53, .14);
  --moss:          #3F6146;
  --field:         #FCFAFB;
  --scrim:         rgba(20, 14, 8, .55);
  --shadow-panel:  rgba(0, 0, 0, .15);
  --shadow-card:   rgba(33, 26, 36, .10);
  --swatch-shade:  rgba(0, 0, 0, .07);
  --swatch-edge:   rgba(0, 0, 0, .10);
  /* Type and rules that sit on the dark footer. */
  --on-dark:       rgba(252, 250, 251, .82);
  --on-dark-2:     rgba(252, 250, 251, .78);
  --on-dark-3:     rgba(252, 250, 251, .55);
  --on-dark-line:  rgba(252, 250, 251, .14);
  --on-dark-warm:  rgba(250, 247, 242, .70);

  /* ---- motion. Three named easings so a transition never has to guess, and
     so the site never reaches for the browser default or a bounce. ---- */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:       cubic-bezier(0.64, 0, 0.78, 0);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short:     .15s;
  --dur-mid:       .25s;

  /* ---- layering. A named ladder instead of an arbitrary four-digit value, which is
     what you write when you do not know what else is on the page. ---- */
  --z-base:        1;
  --z-sticky:      10;
  --z-overlay:     100;
  --z-modal:       200;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  body{
    background:var(--ground);
    color:var(--ink);
    font-family:'Work Sans',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Fraunces',serif;
    font-weight:600;
    letter-spacing:-.01em;
  }
  a{text-decoration:none;color:inherit;}
  img,svg{display:block;}
  button{font-family:inherit;}

  /* ---------- NAV ---------- */
  .site-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 6%;
    background:var(--surface);
    border-bottom:3px solid var(--pink);
  }
  .logo{
    font-family:'Fraunces',serif;
    font-weight:700;
    font-size:1.3rem;
    display:flex;
    align-items:center;
    gap:10px;
    background:none;
    border:none;
    cursor:pointer;
    color:var(--ink);
  }
  .logo-mark{
    display:inline-flex;
    align-items:flex-end;
    gap:3px;
    margin-right:6px;
  }
  .logo-mark span{
    width:8px;
    border-radius:5px 5px 2px 2px;
    background:var(--poppy);
    animation:logo-nail-fade 3.6s ease-in-out infinite;
  }
  .logo-mark span:nth-child(1){height:15px; animation-delay:0s;}
  .logo-mark span:nth-child(2){height:21px; animation-delay:.3s;}
  .logo-mark span:nth-child(3){height:18px; animation-delay:.6s;}
  .logo-mark span:nth-child(4){height:12px; animation-delay:.9s;}
  @keyframes logo-nail-fade{
    0%, 100%{background-color:var(--poppy-light);}
    50%{background-color:var(--poppy-dark);}
  }
  @media(prefers-reduced-motion: reduce){
    .logo-mark span{animation:none; background:var(--poppy);}
  }
  .site-nav ul{display:flex; gap:36px; list-style:none; font-weight:500; font-size:0.92rem;}
  .site-nav ul li a, .site-nav ul li button{opacity:.75; transition:opacity .15s; background:none; border:none; cursor:pointer; font-size:0.92rem; color:var(--ink); font-weight:500;}
  .site-nav ul li a:hover, .site-nav ul li button:hover{opacity:1;}
  .nav-cta{
    padding:11px 22px;
    border-radius:100px;
    background:var(--btn-gradient);
    color:var(--on-poppy);
    font-weight:600;
    font-size:0.88rem;
    border:1px solid transparent;
    cursor:pointer;
    transition:transform .15s var(--ease-out), box-shadow .2s var(--ease-out);
  }
  .nav-cta:hover{transform:translateY(-2px); box-shadow:0 10px 22px var(--poppy-glow);}
  @keyframes logo-nail-fade-text{
    0%, 100%{color:var(--poppy-light); border-color:var(--poppy-light);}
    50%{color:var(--poppy-dark); border-color:var(--poppy-dark);}
  }
  @media(max-width:800px){ .site-nav ul{display:none;} }

  /* ---------- MASTHEAD (desktop) ----------
     The wordmark sits centered on its own line with the navigation beneath it,
     the way a small shop's letterhead reads. Deliberately NOT "wordmark hard
     left, inline links, pill button hard right" — that bar is the one every
     generated SaaS page ships, and it tells a visitor nothing about what kind
     of place they have arrived at. Below 800px this collapses back to a single
     row with the menu button, which is the right shape on a phone. */
  @media(min-width:801px){
    .site-nav{
      display:grid;
      grid-template-areas:"brand brand" "links contact";
      grid-template-columns:max-content max-content;
      justify-content:center;
      align-items:baseline;
      column-gap:34px;
      row-gap:14px;
      padding:30px 6% 0;
    }
    .site-nav .logo{grid-area:brand; justify-self:center; font-size:1.55rem;}
    .site-nav ul{grid-area:links; gap:30px; padding-bottom:20px;}
    /* The call to action stops being a pill and becomes the last item in the
       row, marked by the accent and a drawn underline rather than a filled
       shape — one less button competing with the hero's own. */
    .nav-cta{
      grid-area:contact;
      padding:0 0 20px;
      background:none;
      border:none;
      border-radius:0;
      color:var(--poppy);
      font-size:0.92rem;
      font-weight:600;
      text-decoration:underline;
      text-underline-offset:5px;
      text-decoration-thickness:1.5px;
      transition:text-decoration-thickness .15s var(--ease-out);
    }
    .nav-cta:hover{transform:none; box-shadow:none; text-decoration-thickness:3px;}
  }

  /* A clickable that wraps onto two lines reads as broken rather than designed,
     so neither the wordmark nor the header CTA is allowed to wrap. Below 520px
     they can't both hold the row, so the CTA is dropped rather than shrunk —
     the mobile menu carries Contact, and the hero repeats this exact button one
     screen down. */
  .logo, .nav-cta{white-space:nowrap;}
  @media(max-width:520px){
    .nav-cta{display:none;}
    .logo{font-size:1.15rem;}
  }

  /* ---------- MOBILE SIDE MENU ---------- */
  .mobile-menu-btn{
    display:none;
    background:none;
    border:none;
    cursor:pointer;
    padding:6px;
    flex-direction:column;
    gap:4px;
    opacity:.55;
    transition:opacity .15s var(--ease-out);
  }
  .mobile-menu-btn:hover, .mobile-menu-btn:active{opacity:.85;}
  .mobile-menu-btn span{
    width:20px; height:2px; background:var(--ink); border-radius:2px; display:block;
  }
  @media(max-width:800px){ .mobile-menu-btn{display:flex;} }

  .mobile-menu-overlay{
    display:none;
    position:fixed; inset:0;
    background:var(--scrim);
    z-index:var(--z-overlay);
  }
  .mobile-menu-overlay.open{display:block;}

  .mobile-menu-panel{
    position:fixed;
    top:0; left:0;
    height:100%;
    width:76%;
    max-width:300px;
    background:var(--paper);
    z-index:var(--z-modal);
    transform:translateX(-100%);
    transition:transform .25s var(--ease-out);
    box-shadow:4px 0 24px var(--shadow-panel);
    display:flex;
    flex-direction:column;
    padding:20px 0;
    overflow-y:auto;
  }
  .mobile-menu-panel.open{transform:translateX(0);}
  .mobile-menu-panel .mobile-menu-close{
    align-self:flex-end;
    background:none; border:none; cursor:pointer;
    font-size:1.4rem; color:var(--ink);
    padding:6px 20px 14px;
  }
  .mobile-menu-panel button[data-nav], .mobile-menu-panel a[data-nav]{
    display:block;
    width:100%;
    text-align:left;
    background:none;
    border:none;
    border-bottom:1.5px solid var(--line);
    border-left:4px solid transparent;
    cursor:pointer;
    color:var(--ink);
    font-weight:600;
    font-size:0.98rem;
    padding:16px 22px;
    transition:border-color .15s var(--ease-out), background .15s var(--ease-out);
  }
  .mobile-menu-panel button[data-nav]:hover,
  .mobile-menu-panel a[data-nav]:hover,
  .mobile-menu-panel button[data-nav]:active,
  .mobile-menu-panel a[data-nav]:active{
    border-left-color:var(--pink);
    background:var(--pink-tint);
  }
  .mobile-menu-panel button.mobile-menu-cta, .mobile-menu-panel a.mobile-menu-cta{
    margin:16px 22px 0;
    border-radius:100px;
    text-align:center;
    background:var(--btn-gradient);
    border:1px solid transparent;
    color:var(--on-poppy);
    padding:13px 22px;
    transition:box-shadow .2s var(--ease-out);
  }
  .mobile-menu-panel button.mobile-menu-cta:hover,
  .mobile-menu-panel a.mobile-menu-cta:hover{box-shadow:0 8px 18px var(--poppy-glow-sm);}

  #mobileMenuCartBtn{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    text-align:left;
    background:none;
    border:none;
    border-bottom:1.5px solid var(--line);
    border-left:4px solid transparent;
    cursor:pointer;
    color:var(--ink);
    font-weight:600;
    font-size:0.98rem;
    padding:16px 22px;
    transition:border-color .15s var(--ease-out), background .15s var(--ease-out);
  }
  #mobileMenuCartBtn:hover, #mobileMenuCartBtn:active{border-left-color:var(--pink); background:var(--pink-tint);}
  @keyframes cart-count-bump{
    0%{transform:scale(1);}
    40%{transform:scale(1.4);}
    100%{transform:scale(1);}
  }

  .eyebrow{
    font-weight:600;
    font-size:0.82rem;
    color:var(--ink-soft);
    margin-bottom:14px;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:15px 30px;
    border-radius:100px;
    font-weight:500;
    font-size:0.9rem;
    letter-spacing:.015em;
    cursor:pointer;
    border:1px solid transparent;
    transition:transform .16s var(--ease-out), background-color .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out);
    font-family:inherit;
  }
  /* One focus treatment for everything focusable, not just .btn — nav buttons,
     footer links, and the FAQ triggers previously fell back to the UA ring,
     which is easy to lose against the rose-gray ground. :focus-visible keeps it
     off mouse clicks. */
  .btn:focus-visible,
  a:focus-visible,
  button:focus-visible,
  [tabindex]:focus-visible{outline:2px solid var(--poppy); outline-offset:3px; border-radius:2px;}
  .btn-primary{background:var(--poppy); color:var(--on-poppy);}
  .btn-primary:hover{transform:translateY(-1px); background:var(--poppy-deep);}
  .btn-outline{background:transparent; color:var(--ink); border-color:var(--line-firm);}
  .btn-outline:hover{border-color:var(--ink); background:var(--surface);}

  /* ---------- SECTIONS GENERIC ---------- */
  section{padding:80px 6%;}

  /* ---------- OFFERINGS ---------- */

  /* Subscription "offerings" only ever lists 2 cards (Premade / Custom) —

  /* Subscription now has a single plan — center it instead of stretching
     one card across a 3-track grid built for multiple plans, and size it
     up since it's the one plan card carrying the whole page instead of
     one of several equal options. */
  #subscriptionPlanGrid{grid-template-columns:minmax(0,1fr); max-width:520px; margin:0 auto;}
  #subscriptionPlanGrid .swatch-preview{height:190px;}
  #subscriptionPlanGrid .price{font-size:1.7rem;}

     identical re-skin of About's 3-equal-column layout — lead with Email,
     let Instagram + Response Time sit underneath as a secondary pair. */

  .cycle{
    position:relative;
    width:100%;
    max-width:480px;
    aspect-ratio:1/1;
  }

  /* ---------- FAQ ---------- */
  .faq-item{border-bottom:1px solid var(--line); padding:22px 4px;}
  .faq-item:last-child{border-bottom:none;}
  /* .faq-q is a <button> so the accordion is reachable by keyboard; the resets
     below strip the UA button styling that would otherwise override the type
     and color inherited from the page. */
  .faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; font-size:1rem; transition:color .18s var(--ease-out);
    width:100%; padding:0; background:none; border:0; text-align:left; color:inherit; font-family:inherit; gap:16px;}
  .faq-item:hover .faq-q{color:var(--pink);}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .3s var(--ease-out); color:var(--ink-soft); font-size:0.95rem; line-height:1.6;}
  .faq-item.open .faq-a{max-height:200px; margin-top:12px;}
  .faq-plus{font-size:1.3rem; color:var(--ink-soft); transition:transform .25s var(--ease-out), color .18s var(--ease-out);}
  .faq-item:hover .faq-plus{color:var(--pink);}
  .faq-item.open .faq-plus{transform:rotate(45deg);}

  footer{
    background:var(--ink);
    color:var(--on-dark);
    padding:50px 6% 26px;
    font-size:0.88rem;
  }
  .footer-links{display:flex; gap:20px; flex-wrap:wrap;}
  .footer-links button, .footer-links a{
    background:none; border:none; cursor:pointer;
    color:var(--on-dark-warm); font-size:0.85rem; font-weight:600;
    padding:0; font-family:inherit;
  }
  .footer-links button:hover,
  .footer-links a:hover{color:var(--paper);}
  .foot-line{max-width:340px; margin:0 0 20px;}
  /* Bottom row: copyright and the site credit (Showcase Template §5a). Small
     text near the copyright line, not a badge; plain brand anchors only. */
  .foot-bottom{
    margin-top:34px; padding-top:18px;
    border-top:1px solid var(--on-dark-line);
    display:flex; justify-content:space-between; align-items:baseline;
    flex-wrap:wrap; gap:8px 24px;
    font-size:0.8rem; color:var(--on-dark-3);
  }
  .site-credit{margin:0;}
  .site-credit a{color:var(--on-dark-2); text-decoration:underline; text-underline-offset:2px;}
  .site-credit a:hover{color:var(--paper);}
  .swatch-preview{height:150px; display:flex; align-items:center; justify-content:center; gap:9px;}
  .swatch-preview .fn{width:26px; border-radius:13px 13px 6px 6px; box-shadow:inset 0 -8px 10px var(--swatch-shade), 0 5px 10px var(--swatch-edge);}
  .swatch-preview .fn:nth-child(1){height:56px;}
  .swatch-preview .fn:nth-child(2){height:68px;}
  .swatch-preview .fn:nth-child(3){height:74px;}
  .swatch-preview .fn:nth-child(4){height:64px;}
  .swatch-preview .fn:nth-child(5){height:48px;}
  .price{font-family:'Fraunces',serif; font-weight:600; font-size:1.15rem;}
  /* Sub-section heading — policy pages and anywhere a section needs a head
     below .h-sec. Was .form-section-title, which named a form it never sat in
     and sized at 1.15rem, flattening the policy pages against the rest. */
  .h-sub{font-family:'Fraunces',serif; font-weight:600; font-size:1.4rem; line-height:1.25; margin:0 0 .5rem;}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
  @media(max-width:520px){ .form-row{grid-template-columns:1fr;} }
  @keyframes confirm-pop{
    from{transform:scale(0); opacity:0;}
    to{transform:scale(1); opacity:1;}
  }
  @keyframes confirm-draw{
    to{stroke-dashoffset:0;}
  }

  .swatch-preview.fam-pink{background:var(--pink-tint);}
  .fam-pink .fn{background:var(--pink);}
  .swatch-preview.fam-orange{background:var(--orange-tint);}
  .fam-orange .fn{background:var(--orange);}
  .swatch-preview.fam-yellow{background:var(--yellow-tint);}
  .fam-yellow .fn{background:var(--yellow);}

  .swatch-preview{position:relative;}

  /* ---------- CUSTOM ORDER ---------- */
  .custom-wrap{padding:0 6% 100px; max-width:820px;}
  .custom-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:34px;}
  /* Nail sizing page: back to roughly its original width, just centered
     and a touch wider on desktop instead of sitting flush left, with the
     card pulled up snug under the top bar. */
  @media(min-width:900px){
    #page-sizing .subpage-head{padding-top:0; max-width:1180px; margin:0 auto;}
    #page-sizing .custom-wrap{max-width:1180px; margin:0 auto;}
  }


  .page{display:none;}
  .page.active{display:block; animation:page-enter .4s cubic-bezier(0.16,1,0.3,1);}
  @keyframes page-enter{
    from{opacity:0; transform:translateY(10px);}
    to{opacity:1; transform:translateY(0);}
  }
  @media(prefers-reduced-motion: reduce){
    .page.active{animation:none;}
  }

  /* A quiet cascade for the page's "group" moments — a row of steps, the
     cycle diagram, a checklist — so they arrive one after another instead
     of all snapping in at once with the rest of the page. Runs once on
     page entry only, never on scroll, so it stays a single orchestrated
     beat rather than the "everything fades in" tell. */
  @keyframes stagger-in{
    from{opacity:0; transform:translateY(6px);}
    to{opacity:1; transform:translateY(0);}
  }
  .sets-preview .set-card:nth-child(2){animation-delay:.08s;}
  .sets-preview .set-card:nth-child(3){animation-delay:.16s;}
  @media(prefers-reduced-motion: reduce){
  }

  /* ---------- FRONT PAGE ---------- */

  .front-hero{
    display:grid;
    grid-template-columns:1.02fr 0.98fr;
    gap:clamp(2rem,5vw,4.5rem);
    align-items:center;
    max-width:1180px;
    margin:0 auto;
    padding:clamp(3rem,7vw,5rem) 6%;
  }
  @media(max-width:900px){ .front-hero{grid-template-columns:1fr;} }
  .hero-copy{display:flex; flex-direction:column; align-items:flex-start; gap:1.4rem; text-align:left;}
  .front-hero h1{
    font-size:clamp(2.4rem,5.4vw,3.9rem);
    line-height:1.05;
    letter-spacing:-.016em;
    text-wrap:balance;
  }
  .front-hero h1 em{font-style:normal; font-weight:700; color:var(--poppy);}
  .front-hero p.sub{font-size:1.05rem; color:var(--ink-2); max-width:46ch; line-height:1.6;}
  .hero-actions{display:flex; flex-wrap:wrap; gap:.75rem;}
  .hero-fine{font-size:0.78rem; letter-spacing:.03em; color:var(--ink-3); margin:0;}

  .hero-art{margin:0;}
  .hero-art figcaption{font-size:0.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); text-align:center; margin-top:1rem;}
  .tray-svg{display:block; width:100%; max-width:400px; height:auto; margin:0 auto;}
  .tray-bg{fill:var(--surface); stroke:var(--line);}
  .tray-strip{fill:var(--surface-2); opacity:.55;}

  .gauge-svg{display:block; width:100%; height:auto;}
  .gauge-outline{fill:none; stroke:var(--line-firm); stroke-width:1.4;}
  .gauge-label{fill:var(--ink-2); font-family:'Work Sans',sans-serif; font-size:9px; letter-spacing:.04em;}
  .gauge-hand{fill:var(--ink-3); font-family:'Work Sans',sans-serif; font-size:8px; letter-spacing:.16em;}
  .gauge-tick{stroke:var(--line); stroke-width:1;}
  .gauge-foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem; border-top:1px solid var(--line); margin-top:1.1rem; padding-top:.9rem; font-size:0.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);}

  .sec{max-width:1180px; margin:0 auto; padding:clamp(3rem,7vw,5rem) 6%; border-top:1px solid var(--line);}
  .sec-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.25rem 2rem; margin-bottom:clamp(1.75rem,4vw,2.75rem);}
  .sec-head > div{display:flex; flex-direction:column; gap:.7rem;}
  .h-sec{font-size:clamp(1.7rem,3.2vw,2.4rem); line-height:1.14; letter-spacing:-.008em; text-wrap:balance; margin:0;}
  .lede{color:var(--ink-2); max-width:34ch; margin:0;}

  .band{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--ground-deep);}
  .band-in{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); max-width:1180px; margin:0 auto;}
  @media(max-width:760px){ .band-in{grid-template-columns:1fr;} }
  .fact{background:var(--ground-deep); padding:1.6rem clamp(1rem,3vw,2rem); display:flex; flex-direction:column; gap:.3rem;}
  .fact dt{font-size:0.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3);}
  .fact dd{margin:0; font-family:'Fraunces',serif; font-weight:500; font-size:1.3rem; line-height:1.25;}

  .sets-preview{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.2vw,1.5rem);}
  @media(max-width:820px){ .sets-preview{grid-template-columns:1fr;} }
  .set-card{background:var(--surface); border:1px solid var(--line); border-radius:4px; overflow:hidden; box-shadow:var(--shadow); transition:border-color .2s var(--ease-out), transform .2s var(--ease-out);}
  .set-card:hover{border-color:var(--line-firm); transform:translateY(-2px);}
  /* A photo card and a swatch card have to occupy the same box or the row of
     cards stops lining up. Both use one square well; the drawn swatch centers
     inside it, the photo fills it. */
  .set-card .swatch-preview{height:auto; aspect-ratio:1/1;}
  /* The photo is inset and given a hairline edge rather than bled to the card
     edge. The tray in the source shot is a mid gray, not white, so a full-bleed
     crop either shows the tray's rounded corners as notches or sits as a gray
     slab; framing it makes the edge deliberate and needs no color matching. */
  .set-card .photo-well{
    aspect-ratio:1/1;
    padding:7%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--surface);
  }
  .set-photo{
    display:block;
    width:100%;
    height:auto;          /* the width/height attributes exist only to reserve
                             space before load; aspect-ratio sizes the box */
    aspect-ratio:1/1;
    object-fit:cover;
    border:1px solid var(--line);
    background:var(--surface-2);
  }
  .set-card-body{padding:1.2rem 1.3rem 1.4rem;}
  .set-card-line{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; border-top:1px solid var(--line); padding-top:.8rem; margin-bottom:.6rem;}
  .set-card-line h3{font-size:1.2rem; margin:0;}
  .set-card-price{font-family:'Fraunces',serif; font-size:0.9rem; color:var(--ink-2);}
  .set-card-body p{margin:0; font-size:0.9rem; color:var(--ink-2); line-height:1.55;}
  .sets-custom-note{margin-top:1rem; font-size:0.92rem; color:var(--ink-2);}
  .link-inline{background:none; border:none; padding:0; cursor:pointer; font:inherit; color:var(--poppy); font-weight:600; text-decoration:underline; text-underline-offset:2px;}
  .link-inline:hover{color:var(--poppy-dark);}

  .sizing-sec-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:center;}
  @media(max-width:900px){ .sizing-sec-grid{grid-template-columns:1fr;} }
  .sizing-visual{background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:clamp(1.5rem,3vw,2.5rem); box-shadow:var(--shadow);}

  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden;}
  @media(max-width:820px){ .steps{grid-template-columns:1fr;} }
  .step{background:var(--surface); padding:clamp(1.5rem,3vw,2.1rem); display:flex; flex-direction:column; gap:.6rem;}
  .step-n{font-size:0.72rem; letter-spacing:.16em; color:var(--poppy); font-weight:600;}
  .step h3{font-size:1.25rem; line-height:1.2; margin:0;}
  .step p{margin:0; font-size:0.92rem; color:var(--ink-2); line-height:1.6;}
  /* The subscription's one line. Deliberately below the three steps and in
     small type: it cannot be bought, so it is an aside, not a fourth step.
     The link inside it comes from an owner-editable slot, which is plain text
     and cannot carry a class — so it is styled by position. */
  .steps-note{margin:1.1rem 0 0; font-size:0.88rem; color:var(--ink-3); line-height:1.6; max-width:62ch;}
  .steps-note a{color:var(--poppy); font-weight:600; text-decoration:underline; text-underline-offset:2px;}
  .steps-note a:hover{color:var(--ink);}

  .box-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start;}
  @media(max-width:820px){ .box-grid{grid-template-columns:1fr;} }
  .manifest{margin:0; padding:0; list-style:none; border-top:1px solid var(--line);}
  .manifest li{display:grid; grid-template-columns:1.4rem 1fr; gap:.9rem; align-items:baseline; padding:.85rem 0; border-bottom:1px solid var(--line);}
  .manifest-qty{font-size:0.78rem; color:var(--ink-3); font-variant-numeric:tabular-nums;}
  .manifest-desc{color:var(--ink-2); font-size:0.93rem;}
  .manifest-desc b{color:var(--ink); display:block; font-size:1rem; font-weight:500;}

  .close-cta{border-top:1px solid var(--line); background:var(--ground-deep); padding:clamp(3rem,7vw,5rem) 6%; text-align:center; display:flex; flex-direction:column; align-items:center; gap:1.1rem;}
  .close-cta .eyebrow{justify-content:center;}
  .close-cta h2{font-size:clamp(1.9rem,4.4vw,2.9rem); line-height:1.1; letter-spacing:-.012em; margin:0; max-width:18ch;}
  .close-cta p{margin:0; color:var(--ink-2); max-width:46ch;}
  /* ---------- CONTACT FORM ---------- */
  .contact-wrap{max-width:1180px; margin:0 auto; padding:10px 6% clamp(3rem,6vw,4.5rem);}
  .contact-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:start;}
  .contact-form{display:grid; gap:18px; background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:clamp(1.25rem,3vw,2rem); box-shadow:var(--shadow);}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
  .form-field{display:grid; gap:6px;}
  .form-field > span{font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);}
  .form-field input, .form-field select, .form-field textarea{font:inherit; font-size:1rem; padding:12px 14px; border:1px solid var(--line-firm); border-radius:4px; background:var(--field); color:var(--ink); width:100%;}
  .form-field textarea{resize:vertical; min-height:150px;}
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus{outline:none; border-color:var(--poppy); box-shadow:0 0 0 3px var(--focus-ring);}
  /* The honeypot: off-screen, not display:none, so a naive bot still fills it. */
  .form-hp{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}
  .form-error{margin:0; padding:10px 14px; border-radius:4px; background:var(--rose-tint); color:var(--poppy-dark); font-size:.92rem; border-left:3px solid var(--poppy);}
  .form-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
  .form-actions .btn{display:inline-block; text-decoration:none; font:inherit; cursor:pointer;}
  .form-actions .btn[disabled]{opacity:.6; cursor:progress;}
  .form-note{font-size:.86rem; color:var(--ink-3);}
  .form-thanks{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--moss); border-radius:4px; padding:clamp(1.25rem,3vw,2rem);}
  .form-thanks h2{margin:0 0 8px; font-size:1.4rem;}
  .form-thanks p{margin:0; color:var(--ink-2);}
  .contact-aside{padding-top:6px;}
  .contact-aside h2{font-size:1.15rem; margin:0 0 14px;}
  .contact-aside p{margin:0 0 16px; line-height:1.5;}
  .contact-aside a{color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:2px;}
  .contact-aside a:hover{color:var(--poppy);}
  .contact-meta{font-size:.9rem; color:var(--ink-3);}
  @media(max-width:820px){ .contact-grid{grid-template-columns:1fr;} }
  @media(max-width:560px){ .form-row{grid-template-columns:1fr;} }

  /* ---------- ORDER FORM ----------
     Narrower than the contact page: this is one column of questions to work
     down, and a measurement grid that has to read as two hands rather than as
     a list of twenty boxes. It borrows .form-field and .form-error from the
     contact form above, so the two forms stay the same object. */
  .order-wrap{max-width:720px; margin:0 auto; padding:10px 6% clamp(3rem,6vw,4.5rem);}
  .order-form{display:grid; gap:18px; background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:clamp(1.25rem,3vw,2rem); box-shadow:var(--shadow);}
  /* Each section of the form announces itself with a rule, not a panel. */
  .order-form .h-sub{margin:6px 0 0; padding-top:20px; border-top:1px solid var(--line);}
  .order-help{display:block; font-size:.9rem; color:var(--ink-3); margin:0; line-height:1.5; max-width:62ch;}
  .order-form .form-field textarea{min-height:88px;}
  .form-opt{font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink-3);}

  .measure-hand{border:1px solid var(--line); border-radius:4px; padding:4px 16px 16px; margin:0; display:grid; gap:10px;}
  .measure-hand legend{padding:0 6px; font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);}
  .measure-row{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px;}
  .measure-field{display:grid; gap:5px;}
  .measure-field > span{font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); text-align:center;}
  /* Ten numbers that get compared with each other, so they line up. */
  .measure-field input{font:inherit; font-size:1rem; text-align:center; font-variant-numeric:tabular-nums; padding:10px 4px; border:1px solid var(--line-firm); border-radius:4px; background:var(--field); color:var(--ink); width:100%;}
  .measure-field input:focus{outline:none; border-color:var(--poppy); box-shadow:0 0 0 3px var(--focus-ring);}
  .measure-field.has-error input{border-color:var(--poppy); background:var(--rose-tint);}
  @media(max-width:560px){ .measure-row{grid-template-columns:repeat(3,minmax(0,1fr));} }

  .order-kit{display:grid; grid-template-columns:auto 1fr; gap:.75rem; align-items:start; border:1px solid var(--line); border-radius:4px; padding:14px 16px; cursor:pointer;}
  .order-kit:hover{border-color:var(--line-firm);}
  .order-kit input{accent-color:var(--poppy); width:1.05rem; height:1.05rem; margin:.2rem 0 0;}
  .order-kit .order-help{margin-top:5px;}

  .order-total{border-top:1px solid var(--line); padding-top:16px; display:grid; gap:9px; font-variant-numeric:tabular-nums;}
  .order-total > div{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; font-size:.95rem;}
  .order-total-note{color:var(--ink-3);}
  .order-total-sum{border-top:1px solid var(--line); padding-top:9px; font-weight:600;}
  .order-thanks p{max-width:62ch;}
  .order-thanks a{color:var(--poppy);}

  /* ---------- SETS (gallery + set pages) ---------- */
  .set-card-link{display:block; color:inherit; text-decoration:none;}
  .set-card-link:hover .set-card{border-color:var(--line-firm); transform:translateY(-2px);}
  .set-card-link:focus-visible{outline:2px solid var(--poppy); outline-offset:3px; border-radius:4px;}
  .track-tabs{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 clamp(1.5rem,3vw,2.25rem);}
  .track-tabs a{display:inline-block; padding:8px 16px; border-radius:100px; border:1px solid var(--line-firm); color:var(--ink-2); font-size:.9rem; font-weight:600; text-decoration:none; white-space:nowrap;}
  .track-tabs a:hover{color:var(--ink); border-color:var(--ink);}
  .track-tabs a.current{background:var(--ink); border-color:var(--ink); color:var(--ground);}
  .sets-empty{color:var(--ink-2); max-width:46ch;}
  .sets-empty a{color:var(--poppy);}
  .set-detail{max-width:1180px; margin:0 auto; padding:24px 6% clamp(3rem,6vw,4.5rem); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:start;}
  .set-media .photo-well{aspect-ratio:1/1; padding:5%; display:flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--line); border-radius:4px;}
  .set-media .swatch-preview{aspect-ratio:1/1; height:auto; background:var(--surface); border:1px solid var(--line); border-radius:4px;}
  .set-media .swatch-preview .fn{width:44px;}
  /* Explicit counts, not auto-fit: `auto-fit` with a zero minimum spawns
     unbounded empty tracks, so a fourth photo would squeeze the row instead
     of wrapping. Two across on a phone, three above 520px, any photo count. */
  .set-gallery{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px;}
  .set-shot{margin:0;}
  .set-shot img{display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border:1px solid var(--line); border-radius:4px; background:var(--surface-2);}
  @media(min-width:520px){ .set-gallery{grid-template-columns:repeat(3,minmax(0,1fr));} }
  .set-facts dl{display:grid; gap:0; margin:0 0 22px; border-top:1px solid var(--line);}
  .set-facts dl div{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line);}
  .set-facts dt{font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);}
  .set-facts dd{margin:0; font-weight:600; text-align:right;}
  .set-facts .btn{display:inline-block; text-decoration:none;}
  .set-note{margin:14px 0 0; font-size:.88rem; color:var(--ink-3);}
  .set-story{border-top:1px solid var(--line); background:var(--ground-deep); padding:clamp(2.5rem,5vw,4rem) 6%;}
  .set-story-in{max-width:680px; margin:0 auto; font-size:1.02rem; line-height:1.7; color:var(--ink-2);}
  .set-story-in h2{font-size:1.4rem; margin:0 0 10px; color:var(--ink);}
  .set-story-in h2 + p, .set-story-in h3 + p{margin-top:0;}
  .set-story-in h3{font-size:1.1rem; margin:22px 0 6px; color:var(--ink);}
  .set-story-in p{margin:0 0 14px;}
  .set-story-in ul, .set-story-in ol{margin:0 0 16px; padding-left:1.3em;}
  .set-story-in strong{color:var(--ink);}
  @media(max-width:900px){ .set-detail{grid-template-columns:1fr;} }

  /* ---------- RESOURCES (docs shell) ----------
     Persistent left sidebar, article pane, optional right-rail TOC — the
     Resource Page Template §7a shell, in this site's own tokens. Structure is
     fixed; only the colors are Poppy's. */
  .res-layout{display:flex; align-items:stretch; min-height:60vh; border-top:1px solid var(--line);}
  .rs-side{width:272px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--line); position:sticky; top:0; max-height:100vh; overflow-y:auto; padding:26px 18px;}
  .rs-brand{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:14px;}
  .rs-brand a.b{font-family:'Fraunces',serif; font-weight:600; font-size:1.15rem; color:var(--ink); text-decoration:none;}
  .rs-brand a.back{font-size:.78rem; color:var(--ink-3); text-decoration:none;}
  .rs-brand a.back:hover{color:var(--poppy);}
  .rs-search{width:100%; padding:9px 12px; font:inherit; font-size:.9rem; border:1px solid var(--line-firm); border-radius:4px; background:var(--field); color:var(--ink); margin-bottom:12px;}
  .rs-search:focus{outline:none; border-color:var(--poppy); box-shadow:0 0 0 3px var(--focus-ring);}
  .rs-list{display:flex; flex-direction:column; gap:2px;}
  .rs-grp{display:flex; flex-direction:column; gap:2px; margin-bottom:8px;}
  .rs-group{font-size:.7rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); font-weight:600; padding:12px 10px 5px;}
  .rs-item{display:block; padding:8px 10px; border-radius:4px; color:var(--ink-2); font-size:.92rem; text-decoration:none; line-height:1.35; border-left:3px solid transparent;}
  .rs-item:hover{background:var(--surface-2); color:var(--ink);}
  .rs-item.active{background:var(--rose-tint); color:var(--ink); border-left-color:var(--poppy);}
  .rs-none{color:var(--ink-3); font-size:.88rem; padding:8px 10px; margin:0;}
  .res-main{flex:1; min-width:0; display:flex; align-items:flex-start;}
  .res-article{flex:1; min-width:0; padding:48px 6% 72px;}
  .res-intro{max-width:640px; margin-bottom:34px;}
  .res-intro h1{margin:0 0 12px;}
  .res-intro .lede, .res-doc .lede{color:var(--ink-2); font-size:1.05rem; max-width:60ch;}
  .res-section{max-width:700px; margin-bottom:44px;}
  .res-section h2{font-size:1.5rem; margin:0 0 14px;}
  .res-cat{font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin:26px 0 6px; font-family:'Work Sans',sans-serif; font-weight:600;}
  .res-cat:first-child{margin-top:0;}
  .res-empty{color:var(--ink-3);}
  .res-guides{display:grid; gap:12px;}
  .res-guide{display:block; background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:18px 20px; text-decoration:none; color:inherit; transition:border-color .2s var(--ease-out), transform .2s var(--ease-out);}
  .res-guide:hover{border-color:var(--line-firm); transform:translateY(-2px);}
  .res-guide h3{font-size:1.1rem; margin:0 0 6px;}
  .res-guide p{color:var(--ink-2); font-size:.94rem; margin:0 0 8px;}
  .res-meta{font-size:.82rem; color:var(--ink-3);}
  .res-doc{max-width:720px;}
  .res-doc .eyebrow a{color:var(--ink-3); text-decoration:none;}
  .res-doc .eyebrow a:hover{color:var(--poppy);}
  .res-doc h1{margin:0 0 12px;}
  .res-doc .res-meta{display:block; margin:8px 0 22px;}
  .res-hero img{width:100%; height:auto; border-radius:4px; border:1px solid var(--line);}
  .res-body{font-size:1.02rem; line-height:1.7; color:var(--ink-2);}
  .res-body h2{font-size:1.4rem; margin:34px 0 10px; color:var(--ink); scroll-margin-top:24px;}
  .res-body h3{font-size:1.1rem; margin:26px 0 8px; color:var(--ink); scroll-margin-top:24px;}
  .res-body p{margin:0 0 14px;}
  .res-body ul, .res-body ol{margin:0 0 16px; padding-left:1.3em;}
  .res-body li{margin-bottom:6px;}
  .res-body hr{border:0; border-top:1px solid var(--line); margin:28px 0;}
  .res-body a{color:var(--poppy); text-decoration:underline; text-underline-offset:2px;}
  .res-body strong{color:var(--ink);}
  .res-toc{width:220px; flex-shrink:0; position:sticky; top:0; max-height:100vh; overflow-y:auto; padding:48px 22px 48px 0;}
  .res-toc .toc-h{font-size:.7rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:8px;}
  .res-toc a{display:block; font-size:.86rem; color:var(--ink-2); text-decoration:none; padding:4px 0; line-height:1.35;}
  .res-toc a.toc-h3{padding-left:12px; color:var(--ink-3);}
  .res-toc a:hover{color:var(--poppy);}
  .res-msg{max-width:560px; padding:40px 0;}
  .res-msg h1{margin-bottom:10px;}
  .res-msg a{color:var(--poppy);}
  .mi-credit{max-width:700px; margin:40px 0 0; padding-top:18px; border-top:1px dashed var(--line); font-size:.84rem; color:var(--ink-3);}
  .mi-credit a{color:var(--ink-2); text-decoration:underline; text-underline-offset:2px;}
  .mi-credit a:hover{color:var(--poppy);}
  @media(max-width:1080px){ .res-toc{display:none;} }
  @media(max-width:760px){
    .res-layout{flex-direction:column;}
    .rs-side{width:auto; max-height:none; position:static; border-right:0; border-bottom:1px solid var(--line);}
  }

  .subpage-head{padding:60px 6% 10px; max-width:640px; position:relative;}
  .back-btn{
    margin:24px 6% 0;
    background:none;
    border:none;
    cursor:pointer;
    font-weight:600;
    font-size:0.88rem;
    color:var(--ink-soft);
    display:flex;
    align-items:center;
    gap:6px;
  }
  .back-btn:hover{color:var(--ink);}
  @media(max-width:800px){
    body{padding-bottom:64px;}
  }
  @media(max-width:800px){
    body:has(#page-sizing.active){padding-bottom:0;}
  }

  /* ---------- SATISFYING PRESS FEEDBACK ---------- */
  /* One shared "press" feel across every clickable control on the site —
     declared last so it wins over each button's own :hover transform when
     both apply (i.e. a mouse click). Scale, not translate, so it reads as
     the control itself compressing rather than sliding. */
  .mobile-menu-panel button[data-nav]:active,
  .mobile-menu-panel a[data-nav]:active{
    transform:scale(0.96);
    transition:transform .1s var(--ease-out);
  }
  .set-card:active, .product:active{transform:scale(0.98);}

/* ---- Past artwork -------------------------------------------------------
   The portfolio. Same card box as a set so the two pages feel like one site,
   but no price line and an "ask" link instead of a link to a buyable page.
   Explicit column counts, never auto-fit + minmax(0,1fr): that combination
   spawns unbounded zero-width phantom tracks and squeezes the real ones. */
.art-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.2vw,1.5rem);}
@media(max-width:980px){ .art-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .art-grid{grid-template-columns:1fr;} }
.art-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
}
.art-card .photo-well{
  aspect-ratio:1/1;
  padding:7%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface);
}
.art-card .swatch-preview{height:auto; aspect-ratio:1/1;}
.art-card .set-card-body{display:flex; flex-direction:column; gap:.45rem; flex:1;}
.art-card h3{font-size:1.15rem; margin:0; border-top:1px solid var(--line); padding-top:.8rem;}
.art-facts{margin:0; font-size:0.82rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2);}
.art-card p{margin:0; font-size:0.9rem; color:var(--ink-2); line-height:1.55;}
/* Pushed to the bottom so the link sits on one line across a row of cards
   whose notes are different lengths. */
.art-ask{
  margin-top:auto;
  padding-top:.7rem;
  align-self:flex-start;
  font-size:0.9rem;
  font-weight:600;
  color:var(--poppy);
  text-decoration:underline;
  text-underline-offset:3px;
}
.art-ask:hover{text-decoration-thickness:2px;}

/* ---- About ---------------------------------------------------------------
   Four different shapes rather than one shape three times. The page used to
   be three equal cards, each a tag over a heading over a paragraph, which is
   the layout every generated page reaches for — it reads as filler because
   nothing about it responds to what the sections actually say. */

/* 1. A statement. Wide measure, display face, no container. */
.about-open{padding-bottom:clamp(2rem,5vw,3.5rem);}
.about-lead{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:clamp(1.45rem,3.1vw,2.15rem);
  line-height:1.25;
  letter-spacing:-.008em;
  text-wrap:balance;
  max-width:24ch;
  margin:0;
}

/* 2. An asymmetric split — the heading holds its own column so the prose can
      run at a readable measure beside it. Explicit tracks, never auto-fit. */
.about-split{display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start;}
.about-split .h-sec{max-width:14ch;}
.about-body{display:flex; flex-direction:column; gap:1rem; max-width:60ch;}
.about-body p{color:var(--ink-2); line-height:1.65;}
@media(max-width:820px){
  .about-split{grid-template-columns:1fr;}
  .about-split .h-sec{max-width:20ch;}
}

/* 3. Commitments as a definition list, not cards: a rule, the term in the
      accent, the sentence beneath it. Stacked, so it is never the banned
      label-left/heading-right section head. */
.about-standards-head{margin-bottom:clamp(1.25rem,3vw,2rem);}
.about-standards{display:flex; flex-direction:column;}
.about-standards > div{border-top:1px solid var(--line); padding:1.15rem 0;}
.about-standards > div:last-child{border-bottom:1px solid var(--line);}
.about-standards dt{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:1.08rem;
  color:var(--poppy);
  margin-bottom:.35rem;
}
.about-standards dd{margin:0; color:var(--ink-2); line-height:1.6; max-width:62ch;}

/* 4. A plain close. No band, no button — the page has said its piece. */
.about-close{display:flex; flex-direction:column; gap:.7rem;}
.about-close p{color:var(--ink-2); max-width:56ch; line-height:1.65;}

/* ---- Page title -----------------------------------------------------------
   One size for every page title that is not the home hero: subpages, the
   resources index, and each guide. Before this, .subpage-head h1 had no
   font-size at all and fell through to the browser's default 2em — 32px, which
   is SMALLER than .h-sec at 38.4px, so section headings outranked the page
   they sat on. The ladder now descends: hero 62 / page 46 / section 38 / sub 22. */
.subpage-head h1,
.res-intro h1,
.res-doc h1{
  font-size:clamp(2.1rem, 4.4vw, 2.9rem);
  line-height:1.12;
  letter-spacing:-.012em;
  text-wrap:balance;
}

/* The home catalogue's empty state has to span the card grid, or it lands in
   the first of three columns and reads as a very short card. */
.sets-empty-home{grid-column:1 / -1; max-width:54ch; margin:0;}

/* ---- Links inside owner-edited copy ---------------------------------------
   Copy slots are plain text, so a link she writes as [text](/url) comes out as
   a bare <a> with no class — it cannot carry .link-inline or the inline style
   the hand-written markup used. Style by position instead, matching
   .link-inline, so her links look like the ones that were there before. */
.about-close p a,
.custom-card p a,
.sub a,
.hero-fine a,
.lede a {
  color: var(--poppy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.about-close p a:hover,
.custom-card p a:hover,
.sub a:hover,
.hero-fine a:hover,
.lede a:hover { color: var(--poppy-dark); }

/* Color families turned off: the placeholder swatch keeps its shape but drops
   the hue, so a set with no photo still reads as "photo coming" rather than
   as a color it was never assigned. */
.swatch-preview.fam-none { background: var(--surface-2); }
.swatch-preview.fam-none .fn { background: var(--ink-3); opacity: .35; }