/* ---------- fonts ----------
   Self-hosted Fraunces and Karla (SIL OFL, see fonts/OFL-*.txt), Google's
   latin and latin-ext subsets. Fraunces' axes are trimmed to what the site
   uses: roman wght 400-600, SOFT 70-90, WONK 0-1; italic fixed at wght 400,
   SOFT 90, WONK 1. A new weight or SOFT value needs new font files.
   /fonts/* is cached for a year, so a changed file needs a new name.       */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/fraunces-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/fraunces-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/fraunces-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/fraunces-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Karla";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/karla-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Karla";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/karla-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Karla";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/karla-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Karla";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/karla-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Belt and braces: several blocks below set display:grid, which would otherwise
   beat the browser default rule for the hidden attribute. */
[hidden]{display:none!important}
img{max-width:100%}

/* ---------- palette ----------
   Sampled from the logo. Single committed theme: every colour is painted
   explicitly so the page keeps its look on a light or dark host.         */
:root{
  color-scheme:light;

  /* Sampled from the logo. --ground is the logo's own background colour,
     so the logo image sits on the page with no visible edge.            */
  --ground:#F9F0EA;
  --surface:#FCF8F4;
  --surface-2:#F0E7DE;
  --ink:#2A2419;         /* the wordmark */
  --ink-soft:#665C4E;
  --ink-faint:#74685A;
  --line:#E6DACE;
  --line-strong:#CBB7A3;
  --stitch:rgba(42,36,25,.28);

  /* decorative, straight off the logo */
  --clay:#BE7F5E;        /* the ampersand */
  --blush:#F2CBB8;       /* flower petals */
  --coral:#E0A183;       /* deeper petals */
  --sage:#98A585;        /* leaves */
  --wheat:#DCBE9B;       /* thread spool */
  --copper:#B08D70;      /* the circle frame */
  --cream:#F0E4D8;

  /* the same hues darkened until they clear 4.5:1 on --ground, for text
     and solid buttons. The logo's own tints are too light to read on.   */
  --clay-text:#8C5740;   /* 5.23:1 */
  --sage-text:#5E6B4D;   /* 5.04:1 */

  /* the order form: a field a shade lighter than the cards it sits on,
     and one warning red, deep enough to read as text (6.17:1).         */
  --field:#FFFCF9;
  --error:#9A3B26;

  --shadow:0 1px 0 rgba(42,36,25,.05);

  --step:1.5rem;
  --gutter:clamp(1.25rem,5vw,4rem);
  --measure:34rem;
}

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

html{scroll-behavior:smooth}
.section,.hero{scroll-margin-top:4.5rem}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Karla","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display{
  font-family:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  font-variation-settings:"SOFT" 70,"WONK" 1;
  font-weight:600;
  line-height:1.08;
  text-wrap:balance;
  margin:0;
  letter-spacing:-.012em;
}

p{margin:0}
a{color:inherit}

:focus-visible{
  outline:2px solid var(--clay-text);
  outline-offset:3px;
  border-radius:1px;
}

/* ---------- the page's two stitches ----------
   .seam is the fine running stitch, used for row rules inside lists and
   under the nav. The eight section dividers are a sampler: a different
   hand stitch for each, all at the same height, weight and colour so they
   read as one family rather than seven unrelated rules.

   The band's colour is baked into the data URI: a data URI cannot read a
   custom property, so if --stitch changes this needs changing with it.    */
.seam-band{
  height:15px;
  background-repeat:repeat-x;
  background-position:center;
}
.sb-blanket{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='15'%20viewBox='0%200%2018%2015'%3E%3Cg%20fill='none'%20stroke='%232A2419'%20stroke-opacity='.42'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M0%204%20H18%20M3%204%20V11.5'/%3E%3C/g%3E%3C/svg%3E")}
.sb-chain{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='15'%20viewBox='0%200%2016%2015'%3E%3Cg%20fill='none'%20stroke='%232A2419'%20stroke-opacity='.42'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cellipse%20cx='8'%20cy='7.5'%20rx='7.2'%20ry='4.4'/%3E%3C/g%3E%3C/svg%3E")}
.sb-cross{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='15'%20viewBox='0%200%2022%2015'%3E%3Cg%20fill='none'%20stroke='%232A2419'%20stroke-opacity='.42'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%204%20L11%2011.5%20M11%204%20L4%2011.5'/%3E%3C/g%3E%3C/svg%3E")}
.sb-fly{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='15'%20viewBox='0%200%2022%2015'%3E%3Cg%20fill='none'%20stroke='%232A2419'%20stroke-opacity='.42'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%204.5%20L11%2010.5%20L19%204.5%20M11%2010.5%20V13.5'/%3E%3C/g%3E%3C/svg%3E")}
.sb-herringbone{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='15'%20viewBox='0%200%2026%2015'%3E%3Cg%20fill='none'%20stroke='%232A2419'%20stroke-opacity='.42'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1%2011.5%20L7%204%20L13%2011.5%20L19%204%20L25%2011.5'/%3E%3C/g%3E%3C/svg%3E")}
.sb-knots{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='15'%20viewBox='0%200%2026%2015'%3E%3Cg%20fill='none'%20stroke='%232A2419'%20stroke-opacity='.42'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%207.5%20H11'/%3E%3Ccircle%20cx='18'%20cy='7.5'%20r='1.7'%20fill='%232A2419'%20fill-opacity='.42'%20stroke='none'/%3E%3C/g%3E%3C/svg%3E")}
.sb-running{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='19'%20height='15'%20viewBox='0%200%2019%2015'%3E%3Cg%20fill='none'%20stroke='%232A2419'%20stroke-opacity='.42'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M0%207.5%20H11'/%3E%3C/g%3E%3C/svg%3E")}
.sb-seed{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='15'%20viewBox='0%200%2022%2015'%3E%3Cg%20fill='none'%20stroke='%232A2419'%20stroke-opacity='.42'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%209.5%20L8%205.5%20M13%206%20L18%209.5'/%3E%3C/g%3E%3C/svg%3E")}

.seam{
  height:2px;
  background-image:repeating-linear-gradient(to right,var(--stitch) 0 11px,transparent 11px 19px);
  background-repeat:repeat-x;
}

.wrap{
  max-width:76rem;
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.eyebrow{
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0;
}

/* ---------- nav ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:20;
  background:color-mix(in srgb,var(--ground) 95%,transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.nav-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding-block:.9rem;
}
.mark{
  display:flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-variation-settings:"SOFT" 70,"WONK" 1;
  font-weight:600;
  font-size:1.0625rem;
  letter-spacing:-.01em;
}
.mark svg{display:block;flex:none}
/* the name is one flex item; without this the .amp span becomes its own
   item and picks up the .mark gap on both sides. */
.mark-name{white-space:nowrap}
.nav-links{
  display:flex;
  gap:1.75rem;
  align-items:center;
  font-size:.9375rem;
}
.nav-links a{
  text-decoration:none;
  color:var(--ink-soft);
  padding-bottom:2px;
  transition:color .18s ease;
}
.nav-links a:hover{color:var(--ink)}
@media (max-width:760px){
  .nav-links{gap:0}
  .nav-links a:not(.nav-cta){display:none}
  .nav-cta{
    border:1.5px solid var(--line-strong);
    border-radius:999px;
    padding:.38rem 1rem;
    font-size:.875rem;
    font-weight:700;
    color:var(--ink);
  }
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(3rem,8vw,6.5rem) clamp(3rem,7vw,5.5rem)}
.hero-in{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2.5rem,6vw,5rem);
  align-items:center;
}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;gap:3rem}
}

.hero h1{
  font-size:clamp(2.9rem,7.4vw,4.75rem);
  font-variation-settings:"SOFT" 85,"WONK" 1;
  margin-block:1.1rem .25rem;
}
/* Fraunces' WONK axis swaps in a swash ampersand that reads as a curly "e".
   .amp turns WONK off wherever an ampersand is set in Fraunces.          */
.amp{font-variation-settings:"SOFT" 70,"WONK" 0}
.hero h1 .amp{
  font-weight:500;
  font-variation-settings:"SOFT" 85,"WONK" 0;
  color:var(--clay-text);
  padding-inline:.04em;
}
/* the stitched underline draws itself on load */
.stitched{
  display:inline-block;
  padding-bottom:.16em;
  background-image:repeating-linear-gradient(to right,var(--coral) 0 11px,transparent 11px 19px);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 2px;
  animation:draw 1.05s cubic-bezier(.65,0,.35,1) .55s forwards;
}
@keyframes draw{to{background-size:100% 2px}}

.lede{
  max-width:var(--measure);
  font-size:1.1875rem;
  color:var(--ink-soft);
  margin-top:1.4rem;
}
.hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:2rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:inherit;
  font-size:.9375rem;
  font-weight:700;
  letter-spacing:.01em;
  text-decoration:none;
  padding:.7rem 1.35rem;
  border-radius:999px;
  border:1.5px solid transparent;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-solid{background:var(--clay-text);color:var(--ground);border-color:var(--clay-text)}
.btn-solid:hover{background:var(--ink);border-color:var(--ink)}
.btn-quiet{border-color:var(--line-strong);color:var(--ink)}
.btn-quiet:hover{border-color:var(--ink);background:var(--surface)}

/* ---------- the logo ----------
   logo.png has its background keyed out to transparency, so it sits on the
   page with no edge. --ground is still sampled from the original artwork.  */
.logo-art{
  display:block;
  width:min(100%,27rem);
  height:auto;
  margin-inline:auto;
  animation:settle 1s cubic-bezier(.22,1,.36,1) .1s both;
}
@keyframes settle{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .stitched{animation:none;background-size:100% 2px}
  .logo-art{animation:none}
  .btn:hover{transform:none}
  .tile-btn:hover{transform:none}
  .fb-frame{transition:none}
  *{scroll-behavior:auto !important}
}

/* ---------- generic section rhythm ---------- */
.section{padding-block:clamp(3.5rem,8vw,6rem)}
.section-head{
  display:grid;
  gap:.85rem;
  max-width:38rem;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.section-head h2{font-size:clamp(1.9rem,4vw,2.7rem)}
.section-head p{color:var(--ink-soft)}

/* ---------- our story ---------- */
.story{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
@media (max-width:860px){ .story{grid-template-columns:1fr;gap:2rem} }

.story-aside{
  display:grid;
  gap:clamp(1.5rem,3vw,2.25rem);
  align-content:start;
}
.story-photo{margin:0;display:grid;gap:.65rem}
.story-photo img{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:3px;
}
.story-photo figcaption{
  font-size:.8125rem;
  font-style:italic;
  color:var(--ink-faint);
}

.story-body{
  display:grid;
  gap:1.25rem;
  max-width:var(--measure);
  font-size:1.09375rem;
}
.story-body p:first-child{
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-variation-settings:"SOFT" 70,"WONK" 1;
  font-size:1.375rem;
  line-height:1.42;
  color:var(--ink);
}
.pull{
  margin-top:.5rem;
  padding-top:1.5rem;
  border-top:0;
}
.pull-line{
  height:2px;
  background-image:repeating-linear-gradient(to right,var(--stitch) 0 11px,transparent 11px 19px);
  margin-bottom:1.25rem;
}
.pull p{
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-variation-settings:"SOFT" 90,"WONK" 1;
  font-style:italic;
  font-size:1.3125rem;
  line-height:1.4;
  color:var(--clay-text);
  max-width:30rem;
}

/* ---------- what we make ----------
   One row per category, text and picture alternating sides. A category with
   no photo yet falls back to its colour swatch, so the grid stays whole
   while photos are still being gathered.                                 */
.cats{
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  margin:0;
  padding:0;
  list-style:none;
}
.cat{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--line);
}
.cat:nth-child(even) .cat-text{order:2}

.cat-text{
  background:var(--surface);
  padding:clamp(1.5rem,2.6vw,2.25rem);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.55rem;
  min-height:13.5rem;
}
.cat-text h3{font-size:1.375rem}
.cat-text p:last-child{color:var(--ink-soft);font-size:.96875rem;max-width:26rem}

.cat-media{
  position:relative;
  background:var(--surface);
  min-height:13.5rem;
  overflow:hidden;
}
.cat-media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}

/* the swatch fallback keeps the running-stitch device */
.cat-blush{background:var(--blush)}
.cat-sage{background:var(--sage)}
.cat-wheat{background:var(--wheat)}
.cat-clay{background:var(--clay)}
.cat-cream{background:var(--cream)}
.cat-swatch::after{
  content:"";
  position:absolute;
  left:1.25rem;
  right:1.25rem;
  top:50%;
  height:2px;
  background-image:repeating-linear-gradient(to right,rgba(255,255,255,.72) 0 9px,transparent 9px 16px);
}
.cat-cream.cat-swatch::after,.cat-wheat.cat-swatch::after,.cat-blush.cat-swatch::after{
  background-image:repeating-linear-gradient(to right,rgba(42,36,25,.34) 0 9px,transparent 9px 16px);
}

.cats-empty{max-width:var(--measure);color:var(--ink-soft);padding-block:1.25rem}

@media (max-width:700px){
  .cat{grid-template-columns:1fr}
  .cat:nth-child(even) .cat-text{order:0}   /* text first on a phone, always */
  .cat-media{min-height:0;aspect-ratio:4/3} /* a photo-shaped band, not a sliver */
  .cat-text{min-height:0}
}

/* ---------- how it works ---------- */
.steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.75rem,4vw,3.25rem);
}
@media (max-width:800px){ .steps{grid-template-columns:1fr;gap:2.25rem} }
.step{display:grid;gap:.7rem;align-content:start}
.step-rule{
  height:2px;
  background-image:repeating-linear-gradient(to right,var(--stitch) 0 11px,transparent 11px 19px);
}
.step-n{
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-variation-settings:"SOFT" 90,"WONK" 1;
  font-style:italic;
  font-weight:400;
  font-size:1.0625rem;
  color:var(--clay-text);
  margin-top:.9rem;
}
.step h3{font-size:1.3125rem}
.step p{color:var(--ink-soft);font-size:.96875rem}

.floss{
  display:flex;
  gap:.4rem;
  margin-top:.35rem;
}
.floss span{
  width:1.5rem;
  height:1.5rem;
  border-radius:2px;
  display:block;
}

/* ---------- custom order form ----------
   Built from content/order.json: the product cards, their questions and the
   thank-you message all come from there. This is only how it looks.     */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.order{display:grid;gap:clamp(2.5rem,5vw,3.25rem);max-width:52rem}
.order-fill{display:grid;gap:clamp(2.75rem,6vw,3.75rem)}
.order-fallback{max-width:var(--measure);color:var(--ink-soft)}
.order-fallback a{color:var(--clay-text);text-underline-offset:3px}

.ostep{display:grid;gap:1.35rem;scroll-margin-top:5.5rem}
.ostep .f{scroll-margin-top:6.5rem}
.ostep-head{display:grid;gap:.4rem}
.ostep-head .step-n{margin-top:.9rem}
.ostep-head h3{font-size:clamp(1.4rem,3vw,1.625rem)}
.ostep-head p:last-child:not(.step-n){color:var(--ink-soft);font-size:.96875rem;max-width:36rem}

/* the product cards */
.picks{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(9.25rem,1fr));
  gap:.85rem;
  margin:0;
  padding:0;
  list-style:none;
}
.pick{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  padding:0;
  font:inherit;
  color:inherit;
  text-align:left;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  cursor:pointer;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.pick:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:0 10px 22px rgba(46,39,31,.10)}
.pick:disabled{cursor:not-allowed;opacity:.55;transform:none;box-shadow:none}
.pick-media{position:relative;display:block;aspect-ratio:4/3}
.pick-media:not(.cat-swatch){background:var(--cream)}
.pick-media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.pick-body{display:flex;flex-direction:column;gap:.3rem;flex:1;padding:.8rem .9rem .9rem}
.pick-name{font-size:1.0625rem;line-height:1.2}
.pick-blurb{font-size:.84375rem;line-height:1.45;color:var(--ink-soft)}
.pick-meta{font-size:.78125rem;font-weight:700;color:var(--ink-faint)}
.pick-cta{
  margin-top:auto;
  padding-top:.45rem;
  font-size:.84375rem;
  font-weight:700;
  color:var(--clay-text);
}
.pick-count{
  position:absolute;
  top:.55rem;
  right:.55rem;
  min-width:1.75rem;
  height:1.75rem;
  padding:0 .5rem;
  border-radius:999px;
  background:var(--ink);
  color:var(--ground);
  font-size:.8125rem;
  font-weight:700;
  line-height:1.75rem;
  text-align:center;
}

/* the pieces added so far */
.pieces{display:grid;gap:1rem;margin:0;padding:0;list-style:none}
.pieces-empty{
  padding:1.1rem 1.25rem;
  border:1.5px dashed var(--line-strong);
  border-radius:3px;
  color:var(--ink-soft);
  font-size:.96875rem;
}
.piece{
  display:grid;
  gap:1.25rem;
  padding:clamp(1.15rem,3vw,1.65rem);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:4px;
  scroll-margin-top:5.5rem;
  animation:settle .45s cubic-bezier(.22,1,.36,1) both;
}
.piece-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.piece-head h4{font-size:1.3125rem;margin-top:.15rem}
.piece-fields{display:grid;gap:1.35rem}
.piece-none{color:var(--ink-soft);font-size:.9375rem}
.more-btn{justify-self:start}

.mini-btn{
  flex:none;
  font:inherit;
  font-size:.84375rem;
  font-weight:700;
  padding:.4rem .95rem;
  border-radius:999px;
  border:1.5px solid var(--line-strong);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease;
}
.mini-btn:hover{border-color:var(--ink);background:var(--ground)}
button.btn{font-family:inherit;cursor:pointer}
.btn:disabled{opacity:.6;cursor:progress;transform:none}

/* fields */
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.35rem 1.25rem}
.f-wide{grid-column:1/-1}
@media (max-width:640px){ .fgrid{grid-template-columns:1fr} }
.f{display:grid;gap:.45rem;align-content:start;min-width:0;margin:0;padding:0;border:0}
.f-label{padding:0;font-size:.96875rem;font-weight:700;line-height:1.35;color:var(--ink)}
.f-opt{font-weight:400;color:var(--ink-faint)}
.f-help{font-size:.875rem;line-height:1.45;color:var(--ink-faint)}
.f-err{font-size:.875rem;font-weight:700;color:var(--error)}
.f-err::before{content:"";display:inline-block;width:.45rem;height:.45rem;margin-right:.45rem;border-radius:50%;background:currentColor;vertical-align:.1em}

.inp{
  width:100%;
  min-height:2.95rem;
  padding:.62rem .85rem;
  font:inherit;
  font-size:1rem;           /* 16px or more, so iOS doesn't zoom in on focus */
  color:var(--ink);
  background:var(--field);
  border:1.5px solid var(--line-strong);
  border-radius:3px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.inp::placeholder{color:var(--ink-faint);opacity:.8}
.inp:hover{border-color:var(--copper)}
.inp:focus{outline:none;border-color:var(--clay-text);box-shadow:0 0 0 3px rgba(190,127,94,.22)}
.inp[aria-invalid="true"]{border-color:var(--error)}
.piece .inp{max-width:30rem}
.piece textarea.inp{max-width:none}
.inp-num{max-width:7.5rem!important}
textarea.inp{min-height:7.5rem;line-height:1.55;resize:vertical}
select.inp{
  appearance:none;
  -webkit-appearance:none;
  padding-right:2.5rem;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201.5l5%205%205-5'%20fill='none'%20stroke='%232A2419'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .95rem center;
}

/* pick-one and pick-any, drawn as pills */
.pills{display:flex;flex-wrap:wrap;gap:.5rem}
.pill{position:relative;display:inline-flex}
.pill input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pill > span{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-height:2.6rem;
  padding:.45rem 1.05rem;
  font-size:.9375rem;
  font-weight:500;
  line-height:1.2;
  background:var(--field);
  border:1.5px solid var(--line-strong);
  border-radius:999px;
  transition:border-color .18s ease,background-color .18s ease,color .18s ease;
}
.pill:hover > span{border-color:var(--ink)}
.pill input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.pill input:focus-visible + span{outline:2px solid var(--clay-text);outline-offset:3px}
.f[aria-invalid="true"] .pill > span{border-color:var(--error)}
.dot{flex:none;width:.85rem;height:.85rem;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(42,36,25,.22)}
.pill input:checked + span .dot{box-shadow:0 0 0 1.5px var(--ground)}

/* the boxes that must be ticked before sending */
.agree{display:grid;gap:.6rem}
.agree label{display:flex;gap:.65rem;align-items:flex-start;font-size:.96875rem;line-height:1.45;cursor:pointer}
.agree input{flex:none;width:1.15rem;height:1.15rem;margin:.15rem 0 0;accent-color:var(--clay-text)}

/* a picture or a link under a question (a font chart, a size guide) */
.f-pic{display:block;max-width:28rem;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--surface)}
.f-pic img{display:block;width:100%;height:auto}
.f-link{justify-self:start;font-size:.9375rem;color:var(--clay-text);text-underline-offset:3px}

/* a name, laid out letter by letter so a spelling slip is easy to spot */
.name-tiles{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.15rem}
.name-tiles:empty{display:none}
.name-tiles span{
  min-width:2rem;
  height:2.4rem;
  padding:0 .35rem;
  display:grid;
  place-items:center;
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-variation-settings:"SOFT" 70,"WONK" 0;
  font-weight:600;
  font-size:1.25rem;
  background:var(--cream);
  border:1.5px dashed var(--line-strong);
  border-radius:3px;
}
.name-tiles .gap{min-width:.75rem;width:.75rem;background:none;border:0}

/* photos */
.drop{
  position:relative;
  display:grid;
  justify-items:center;
  gap:.2rem;
  padding:1.5rem 1.25rem;
  text-align:center;
  color:var(--ink-soft);
  font-size:.9375rem;
  background:var(--field);
  border:1.5px dashed var(--line-strong);
  border-radius:3px;
  cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease;
}
.drop:hover,.drop.is-over{border-color:var(--ink);background:var(--surface)}
.drop:focus-within{outline:2px solid var(--clay-text);outline-offset:3px}
.drop strong{color:var(--clay-text)}
.thumbs{display:flex;flex-wrap:wrap;gap:.75rem;margin:0;padding:0;list-style:none}
.thumbs:empty{display:none}
.thumb{position:relative;width:6.5rem}
.thumb img,.thumb .thumb-ph{
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:3px;
  font-size:.75rem;
  color:var(--ink-faint);
}
.thumb button{
  position:absolute;
  top:.3rem;
  right:.3rem;
  width:1.9rem;
  height:1.9rem;
  display:grid;
  place-items:center;
  padding:0;
  font:inherit;
  font-size:1.1rem;
  line-height:1;
  color:var(--ground);
  background:rgba(42,36,25,.78);
  border:0;
  border-radius:50%;
  cursor:pointer;
}

/* honeypot: people never see it, bots fill it in. Named "nectar" because
   browsers autofill fields called things like "company", and a real
   person's request would then be quietly dropped. */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

.order-actions{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center}
.fineprint{font-size:.875rem;color:var(--ink-faint)}
.fineprint .link{font:inherit;padding:0;border:0;background:none;color:var(--clay-text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.notice{
  padding:.9rem 1.1rem;
  font-size:.96875rem;
  color:var(--ink);
  background:#F8E6DF;
  border:1.5px solid var(--error);
  border-radius:3px;
}
.notice .link{font:inherit;font-weight:700;padding:0;border:0;background:none;color:var(--error);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.notice-soft{background:var(--surface);border-color:var(--line-strong)}

/* review and thank-you panels */
.panel{
  display:grid;
  gap:1.5rem;
  padding:clamp(1.5rem,4vw,2.5rem);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:4px;
  scroll-margin-top:5.5rem;
}
.panel:focus{outline:none}
.panel-head{display:grid;gap:.5rem}
.panel-head h3{font-size:clamp(1.6rem,3.5vw,2rem)}
.panel-head p:not(.eyebrow){color:var(--ink-soft)}
.rv{display:grid;gap:1.35rem}
.rv-block{display:grid;gap:.85rem}
.rv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-top:1.1rem}
.rv-head h4{font-size:1.1875rem;margin-top:.15rem}
.rv-list{
  display:grid;
  grid-template-columns:minmax(0,12rem) minmax(0,1fr);
  gap:.45rem 1.25rem;
  margin:0;
}
.rv-list dt{font-size:.9375rem;color:var(--ink-soft)}
.rv-list dd{margin:0;font-weight:500;overflow-wrap:anywhere;white-space:pre-line}
@media (max-width:560px){
  .rv-list{grid-template-columns:1fr;gap:.1rem}
  .rv-list dd{margin-bottom:.6rem}
}
.rv-callout{
  padding:.85rem 1.05rem;
  font-size:.9375rem;
  background:var(--cream);
  border:1.5px dashed var(--line-strong);
  border-radius:3px;
}
.done .floss{margin-top:0}

@media (prefers-reduced-motion:reduce){
  .piece{animation:none}
  .pick:hover{transform:none}
}

/* ---------- say hello ---------- */
.hello{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:4px;
  padding:clamp(2rem,5vw,3.75rem);
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
@media (max-width:860px){ .hello{grid-template-columns:1fr} }
.hello h2{font-size:clamp(1.9rem,4vw,2.7rem)}
.hello p{color:var(--ink-soft);max-width:32rem;margin-top:.9rem}

.contact-list{
  display:grid;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
}
.contact-list li{border-top:0}
.contact-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding-block:.9rem;
  text-decoration:none;
  transition:color .18s ease;
}
.contact-row:hover .contact-val{color:var(--clay-text)}
.contact-key{
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
  flex:none;
}
.contact-val{
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-variation-settings:"SOFT" 70,"WONK" 1;
  font-size:1.0625rem;
  text-align:right;
  overflow-wrap:anywhere;
  transition:color .18s ease;
}

/* ---------- where to find us ---------- */
.events{
  display:grid;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
  max-width:54rem;
}
.event{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(1.1rem,3vw,2.25rem);
  align-items:center;
  padding-block:1.5rem;
}
@media (max-width:640px){
  .event{
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
    gap:1.1rem;
  }
  .event-go{grid-column:2;justify-self:start;margin-top:.75rem}
}

.event-date{
  width:4.75rem;
  padding:.5rem .3rem .55rem;
  text-align:center;
  background:var(--cream);
  border:1.5px dashed var(--line-strong);
  border-radius:3px;
  line-height:1.1;
}
.event-mon{
  display:block;
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--clay-text);
}
.event-day{
  display:block;
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-variation-settings:"SOFT" 70,"WONK" 1;
  font-weight:600;
  font-size:1.75rem;
  margin-block:.1rem;
}
.event-dow{
  display:block;
  font-size:.6875rem;
  letter-spacing:.06em;
  color:var(--ink-faint);
}

.event-body{display:grid;gap:.3rem;min-width:0}
.event-body h3{font-size:1.25rem}
.event-where{color:var(--ink-soft);font-size:.96875rem}
.event-when{color:var(--ink-faint);font-size:.90625rem}
.event-note{color:var(--ink-soft);font-size:.96875rem;margin-top:.15rem}

.event-go{
  font-size:.875rem;
  font-weight:700;
  text-decoration:none;
  padding:.5rem 1.05rem;
  border:1.5px solid var(--line-strong);
  border-radius:999px;
  color:var(--ink);
  white-space:nowrap;
  transition:border-color .18s ease,background-color .18s ease;
}
.event-go:hover{border-color:var(--ink);background:var(--surface)}

.events-empty{
  max-width:var(--measure);
  color:var(--ink-soft);
  padding-block:1.25rem;
}
.events-empty a{color:var(--clay-text);text-underline-offset:3px}

/* ---------- gallery ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:clamp(1rem,2.2vw,1.75rem);
  margin:0;
  padding:0;
  list-style:none;
}
.tile{display:grid;gap:.7rem;align-content:start;margin:0}
.tile-btn{
  display:block;
  width:100%;
  padding:0;
  margin:0;
  font:inherit;
  color:inherit;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  cursor:zoom-in;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.tile-btn:hover{
  border-color:var(--line-strong);
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(46,39,31,.10);
}
.tile-btn img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--cream)}
.tile-cap{display:grid;gap:.18rem}
.tile-tag{
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.tile-title{
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-variation-settings:"SOFT" 70,"WONK" 1;
  font-weight:600;
  font-size:1.0625rem;
  line-height:1.25;
}
.tile-note{font-size:.90625rem;color:var(--ink-soft)}

.gallery-empty{max-width:var(--measure);color:var(--ink-soft);padding-block:1.25rem}

/* ---------- lightbox ---------- */
.lightbox{
  border:0;
  padding:0;
  background:transparent;
  max-width:min(94vw,58rem);
  max-height:94vh;
  overflow:visible;
  color:var(--ink);
}
.lightbox::backdrop{background:rgba(46,39,31,.80)}
.lightbox-in{
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:4px;
  padding:.85rem;
  display:grid;
  gap:.85rem;
}
.lightbox img{
  display:block;
  max-width:100%;
  max-height:72vh;
  margin-inline:auto;
  object-fit:contain;
  background:var(--cream);
  border-radius:2px;
}
.lightbox-foot{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1.25rem;
  padding-inline:.3rem .1rem;
}
.lightbox-text{display:grid;gap:.15rem;min-width:0}
.lightbox-close{
  flex:none;
  font:inherit;
  font-size:.875rem;
  font-weight:700;
  cursor:pointer;
  padding:.45rem 1.05rem;
  border-radius:999px;
  border:1.5px solid var(--line-strong);
  background:transparent;
  color:var(--ink);
  transition:border-color .18s ease,background-color .18s ease;
}
.lightbox-close:hover{border-color:var(--ink);background:var(--ground)}

/* ---------- latest from facebook ---------- */
.fb{
  display:grid;
  grid-template-columns:minmax(0,1fr) 31.25rem;
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
@media (max-width:980px){ .fb{grid-template-columns:1fr} }
.fb .section-head{margin-bottom:0}
.fb .section-head .btn{justify-self:start;margin-top:.5rem}
.fb-embed{
  position:relative;
  width:100%;
  max-width:31.25rem;
  min-height:34rem;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
  overflow:hidden;
}
.fb-fallback{
  position:absolute;
  inset:0;
  display:grid;
  align-content:center;
  gap:.6rem;
  padding:2rem;
  text-align:center;
  font-size:.96875rem;
  color:var(--ink-soft);
}
.fb-fallback a{color:var(--clay-text);text-underline-offset:3px}
.fb-frame{
  position:relative;
  display:block;
  width:100%;
  height:34rem;
  border:0;
  opacity:0;
  transition:opacity .35s ease;
}
.fb-frame.is-loaded{opacity:1}
/* ---------- footer ---------- */
.foot{
  padding-block:2.25rem 3rem;
  display:flex;
  flex-wrap:wrap;
  gap:1rem 2rem;
  align-items:center;
  justify-content:space-between;
  font-size:.875rem;
  color:var(--ink-faint);
}
.foot .mark{font-size:.9375rem;color:var(--ink)}

/* Three pages, one sewing table. The original palette and stitch sampler stay. */
.skip-link{position:fixed;top:.5rem;left:1rem;z-index:100;background:var(--ink);color:var(--surface);padding:.75rem 1rem;transform:translateY(-160%)}
.skip-link:focus{transform:none}
main:focus{outline:none}
.section{padding-block:clamp(2.75rem,5vw,4rem)}
.nav-in{position:relative;min-height:4.5rem;gap:1.5rem}
.nav-links{gap:1.5rem;align-items:center}
.nav-links a{white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
.nav-links a[aria-current="page"]{color:var(--clay-text);text-decoration:underline;text-underline-offset:.4rem}
.nav-links .nav-cta{border:1px solid var(--clay-text);border-radius:999px;padding:.5rem 1rem;color:var(--clay-text)}
.nav-toggle{display:none}
.hero{padding-block:clamp(2.5rem,5vw,4rem)}
.hero-in{gap:3rem;align-items:center}
.hero h1{font-size:clamp(2.65rem,4.2vw,3.8rem);max-width:none}
.hero .lede{font-size:1.125rem;max-width:32rem;margin-top:1.5rem}
.hero-brand{text-align:center}
.hero-brand .logo-art{width:min(100%,21rem);animation:none}
.hero-brand p{color:var(--ink-soft);font-family:Fraunces,Georgia,serif;font-style:italic;font-size:1rem;margin-top:.5rem}
.hero-note{font-size:.875rem;color:var(--ink-soft);margin-top:1.25rem}
.page-intro{padding-block:clamp(2.75rem,6vw,4.5rem);display:grid;gap:1rem}
.page-intro h1,.page-custom-order .section-head h1{font-size:clamp(2.5rem,5vw,4rem)}
.page-intro .lede{max-width:40rem;margin:0;font-size:1.125rem}
.section-heading-row{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;margin-bottom:2rem}
.section-heading-row .section-head{margin-bottom:0}
.text-link{color:var(--clay-text);font-weight:700;font-size:.9375rem;text-underline-offset:.25em;display:inline-block}
.text-link:hover{text-decoration-thickness:2px}
.gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.25rem 1.5rem}
.tile-cap{gap:.45rem}
.tile-title{font-size:1.125rem;line-height:1.25}
.tile-request{margin-top:.35rem}
.tile-note{font-size:.9375rem}
.tile-btn{border-radius:4px;overflow:hidden}
.story{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:3rem}
.story-photo{max-width:21rem}
.story-photo img{aspect-ratio:4/3;object-position:50% 45%}
.story-body p:first-child{font-size:1.25rem;line-height:1.5}
.story-aside .section-head h2{font-size:clamp(1.9rem,3.4vw,2.4rem)}
.cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;border:0;border-radius:0;background:none;overflow:visible}
.cat{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.cat:nth-child(even) .cat-text{order:0}
.cat-text{padding:1.5rem;min-height:0;flex:1;gap:.75rem;border-top:4px solid var(--sage)}
.cat-text p:last-of-type{font-size:1rem;max-width:none}
.cat-text .text-link{margin-top:auto;padding-top:.5rem}
.cat-media{order:-1;aspect-ratio:16/9;min-height:0}
.cat-no-photo .cat-text{border-top-style:dashed}
.cat-accent-blush .cat-text{border-color:var(--blush)}
.cat-accent-sage .cat-text{border-color:var(--sage)}
.cat-accent-wheat .cat-text{border-color:var(--wheat)}
.cat-accent-clay .cat-text{border-color:var(--clay)}
.cat-accent-cream .cat-text{border-color:var(--copper)}
.collection-cta{display:grid;justify-items:start;gap:1rem}
.collection-cta h2{font-size:clamp(1.9rem,4vw,2.7rem)}
.fb{align-items:center}
.fb .section-head{margin:0}
.fb-embed{height:auto;min-height:12rem}
.fb-embed.is-open{height:544px}
.footer-links{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;width:100%}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:.2em}
.lightbox{max-height:94dvh;overflow:auto;overscroll-behavior:contain;width:min(54rem,94vw)}
.lightbox-in{padding:1rem}
.lightbox-in>img{max-height:55dvh;object-fit:contain;width:100%;background:var(--surface)}
.lightbox-tools{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.35rem 0;margin-bottom:.75rem;font-size:.875rem;background:var(--surface)}
.lightbox-foot{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.lightbox-text{flex:1 1 100%}
.lightbox-close{min-height:44px}
.lightbox .tile-note{display:block}
@media(max-width:900px){
  .hero-in{grid-template-columns:1.2fr 1fr;gap:1.5rem}
  .story{gap:2rem}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .featured-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:621px){.nav-links a:not(.nav-cta){display:inline-flex}}
@media(max-width:620px){
  .nav-in{flex-wrap:wrap;gap:.25rem 1rem;padding-block:.7rem;min-height:4rem}
  .nav-links{display:flex;width:100%;gap:.5rem 1rem;justify-content:space-between}
  .nav-links a:not(.nav-cta){display:inline-flex}
  .nav-ready .nav-toggle{display:inline-flex;min-height:44px;padding:.45rem .9rem;margin-left:auto}
  .nav-ready .nav-links{display:none;padding-top:.65rem;border-top:1px solid var(--line)}
  .nav-ready .nav-links.is-open{display:flex}
  .nav-links a{font-size:.875rem}
  .nav-links .nav-cta{padding:.35rem .65rem}
  .hero-in{grid-template-columns:1fr;gap:1.5rem}
  .hero h1{font-size:clamp(2.4rem,10vw,3.4rem);max-width:14ch}
  .hero-brand{display:none}
  .hero .lede{font-size:1.0625rem}
  .hero-cta{gap:.75rem;flex-wrap:wrap}
  .hero-cta .btn{padding:.65rem 1rem}
  .hero-note{font-size:.8125rem}
  .section-heading-row{align-items:start;flex-direction:column;gap:1rem}
  .featured-grid{grid-template-columns:1fr;gap:1.25rem}
  .featured-grid .tile{display:grid;grid-template-columns:38% 1fr;gap:1rem;align-items:center}
  .featured-grid .tile-cap{padding-top:0}
  .featured-grid .tile-note{display:none}
  .gallery:not(.featured-grid){gap:1.5rem 1rem}
  .gallery:not(.featured-grid) .tile-note{display:none}
  .tile-title{font-size:1rem}
  .tile-tag{font-size:.625rem;letter-spacing:.12em}
  .tile-request{font-size:.8125rem}
  .story{grid-template-columns:1fr;gap:1.5rem}
  .story-aside{grid-template-columns:1fr 35%;gap:1rem;align-items:center}
  .story-aside .section-head h2{font-size:1.7rem}
  .story-photo img{aspect-ratio:3/4}
  .story-body p:first-child{font-size:1.125rem}
  .cats{grid-template-columns:1fr}
  .cat-text{padding:1.25rem}
  .fb{grid-template-columns:1fr;gap:1.5rem}
  .hello{padding:1.5rem}
  .foot{padding-block:1.5rem}
  .lightbox-in{padding:.65rem}
  .lightbox-tools .mini-btn{padding:.5rem .65rem}
}
@media(prefers-reduced-motion:reduce){.pick:hover{transform:none}}

.page-our-work .page-intro{padding-bottom:2.5rem}
.page-our-work .page-intro .hero-cta{margin-top:.5rem}
.featured-grid .tile{display:flex;flex-direction:column}
.featured-grid .tile-cap{flex:1;display:flex;flex-direction:column}
.featured-grid .tile-request{margin-top:auto;padding-top:.75rem}
@media(max-width:620px){.featured-grid .tile{display:grid}}

/* CMS paragraphs may include intentional line breaks. */
[data-copy]{overflow-wrap:break-word}
p[data-copy],.story-body [data-copy]{white-space:pre-line}

/* Optional social content and concise, keyboard-accessible FAQs. */
.fb-embed:not(.is-open){padding:2rem;display:grid;align-content:center;gap:1rem}
.fb-embed:not(.is-open) .fb-fallback{position:static;padding:0}
.fb-embed.is-open .fb-privacy{display:none}
.fb-privacy{font-size:.875rem;color:var(--ink-soft)}
.fb-embed [hidden],.faq-section[hidden]{display:none!important}
.faq-list{max-width:48rem}
.faq-list details{padding:1.1rem 0;border-bottom:1px dashed var(--line-strong)}
.faq-list summary{font-weight:600;cursor:pointer;color:var(--ink);padding:.25rem 0}
.faq-list summary:focus-visible{outline:2px solid var(--clay-text);outline-offset:5px}
.faq-list details p{margin-top:.75rem;color:var(--ink-soft)}