/* The Fine Print Market — shared site pieces: header, drawn components, product cards,
   the studio mat, the seal, the footer, and the review layer. Tokens live in fpm.css. */

/* ======================= Header ======================= */
.site-head {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem var(--gutter) 1rem;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.8vw, 2.6rem);
}
.nav-link {
  position: relative;
  padding: .45em 0;
  font-family: var(--mischief);
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .15em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }
.cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.75em;
  height: 1.75em;
  margin-left: .4em;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .85em;
  letter-spacing: 0;
}
.nav-shop { position: relative; }
.nav-shop::after { /* hover bridge to the menu */
  content: "";
  position: absolute;
  left: -1rem; right: -1rem; top: 100%;
  height: .9rem;
}
.shop-menu {
  position: absolute;
  top: calc(100% + .7rem);
  left: -1.1rem;
  display: grid;
  gap: .15rem;
  min-width: 15.5rem;
  padding: .5rem;
  background: var(--linen);
  border-radius: 3px;
  box-shadow: var(--shadow-paper);
  opacity: 0;
  visibility: hidden;
  translate: 0 .4rem;
  transition: opacity .2s ease, translate .2s ease, visibility .2s;
}
.nav-shop:hover .shop-menu,
.nav-shop:focus-within .shop-menu { opacity: 1; visibility: visible; translate: 0 0; }
.shop-menu a {
  display: grid;
  gap: .1rem;
  padding: .7rem .85rem;
  border-radius: 2px;
  text-decoration: none;
}
.shop-menu a:hover { background: var(--paper); }
.sm-title {
  font-family: var(--romantic);
  font-size: 1.55rem;
  line-height: 1.1;
}
.sm-sub { color: var(--ink-soft); font-size: .98rem; font-style: italic; }
.menu-btn {
  display: none;
  padding: .55rem .9rem;
  background: none;
  border: 1px solid var(--ink);
  border-radius: 2px;
  color: var(--ink);
  font-family: var(--mischief);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ---------- Components (sized in em so they can be reused at any scale) ---------- */

/* Hand-painted banner */
.cmp-banner { display: block; width: 31em; }
.banner-string { width: 100%; height: 4em; overflow: visible; }
.banner-string path { fill: none; stroke: var(--ink); stroke-width: 1.1; opacity: .65; }
.banner-string circle { fill: var(--marigold); }
.banner-shadow { display: block; filter: drop-shadow(0 .6em .7em rgb(48 48 45 / .26)); }
.banner-cloth {
  --cloth: var(--burgundy);
  position: relative;
  display: grid;
  place-items: center;
  height: 11em;
  background-color: var(--cloth);
  background-image:
    repeating-linear-gradient(0deg, rgb(255 255 255 / .04) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / .05) 0 1px, transparent 1px 3px);
  clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%);
}
.banner-cloth::before, .banner-cloth::after {
  content: "";
  position: absolute;
  top: .7em;
  width: .9em; height: .9em;
  border: .22em solid var(--marigold);
  border-radius: 50%;
  background: var(--paper);
}
.banner-cloth::before { left: 3.6%; }
.banner-cloth::after { right: 3.6%; }
.banner-word {
  translate: 0 .08em;
  rotate: -3deg;
  color: var(--linen);
  font-family: var(--brush);
  font-size: 6.4em;
  line-height: 1;
}

/* Envelope, front */
.cmp-envelope {
  --env: var(--blue);
  position: relative;
  display: block;
  width: 35em;
  height: 23em;
  background: var(--env) var(--grain);
  box-shadow: var(--shadow-paper);
}
.env-address {
  position: absolute;
  left: 17%;
  top: 47%;
  color: var(--ink);
  font-family: var(--hand);
  font-size: 2.9em;
  line-height: 1.12;
}
.stamp {
  position: absolute;
  right: 6%;
  top: 8%;
  width: 7.6em;
  height: 9.2em;
  padding: .75em;
  background: var(--sheet);
  rotate: 3deg;
  -webkit-mask:
    radial-gradient(circle .3em, #0000 96%, #000) -.45em -.45em / .9em .9em round,
    linear-gradient(#000 0 0) content-box;
  mask:
    radial-gradient(circle .3em, #0000 96%, #000) -.45em -.45em / .9em .9em round,
    linear-gradient(#000 0 0) content-box;
}
.stamp-art {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--butter);
  color: var(--burgundy);
}
.stamp-art svg { position: absolute; inset: 14% 12% 8%; width: 76%; height: 78%; }
.stamp-value {
  position: absolute;
  left: .4em; top: .3em;
  font-family: var(--mischief);
  font-size: 1.2em;
}
.postmark {
  position: absolute;
  right: 13%;
  top: 6%;
  width: 15em;
  height: 9.6em;
  overflow: visible;
  color: var(--ink);
  opacity: .55;
}

/* Place card */
.cmp-placecard {
  position: relative;
  display: grid;
  place-items: center;
  width: 23em;
  height: 13em;
  background: var(--sheet);
  box-shadow: var(--shadow-paper);
}
.cmp-placecard::before {
  content: "";
  position: absolute;
  inset: .9em;
  border: .3em double var(--rose);
}
.place-name {
  translate: 0 .1em;
  font-family: var(--hand);
  font-size: 5.4em;
  line-height: 1;
}
.place-spark { position: absolute; top: 1.9em; width: 1.5em; fill: var(--marigold); }

/* Printable list */
.cmp-sheet {
  position: relative;
  display: block;
  width: 16.5em;
  height: 22.5em;
  padding: 2.6em 1.9em 0;
  background: var(--sheet);
  box-shadow: var(--shadow-paper);
}
.sheet-title {
  display: block;
  padding-bottom: .25em;
  border-bottom: .06em solid var(--burgundy);
  color: var(--burgundy);
  font-family: var(--romantic);
  font-size: 2.2em;
  font-style: italic;
  line-height: 1.05;
}
.sheet-rows { display: grid; margin-top: .9em; }
.sheet-rows span {
  display: flex;
  align-items: end;
  gap: .7em;
  height: 2.05em;
  border-bottom: .08em solid rgb(48 48 45 / .22);
}
.sheet-rows span::before {
  content: "";
  flex: none;
  width: .95em; height: .95em;
  margin-bottom: .4em;
  border: .1em solid rgb(48 48 45 / .55);
}
.sheet-rows span.done::before {
  background:
    linear-gradient(45deg, transparent 44%, var(--ink) 45% 55%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--ink) 45% 55%, transparent 56%);
}
.sheet-rows i {
  margin-bottom: .1em;
  font-family: var(--hand);
  font-size: 2.05em;
  font-style: normal;
  line-height: 1;
}
.tape {
  position: absolute;
  top: -1.3em;
  left: 50%;
  width: 8em;
  height: 2.6em;
  translate: -50% 0;
  rotate: -5deg;
  background: repeating-linear-gradient(45deg, var(--rose) 0 .55em, var(--linen) .55em 1.1em);
  opacity: .9;
  clip-path: polygon(0 0, 100% 0, 97% 25%, 100% 50%, 97% 75%, 100% 100%, 0 100%, 3% 75%, 0 50%, 3% 25%);
}
.dl-sticker {
  position: absolute;
  right: -1.6em;
  bottom: 1.6em;
  padding: .45em .8em .4em;
  background: var(--denim);
  color: var(--linen);
  font-family: var(--mischief);
  font-size: max(1.05em, 9px);
  letter-spacing: .12em;
  text-transform: uppercase;
  rotate: -5deg;
  box-shadow: 0 1px 2px rgb(48 48 45 / .2);
}

/* Hang tag */
.p-tag { filter: drop-shadow(0 .5em .6em rgb(48 48 45 / .25)); }
.tag-string { position: absolute; left: 3.2em; top: -5.6em; width: 5em; height: 6.4em; overflow: visible; }
.tag-string path { fill: none; stroke: var(--ink); stroke-width: 1.1; opacity: .6; }
.tag-body {
  position: relative;
  display: grid;
  align-content: end;
  gap: .35em;
  width: 9.4em;
  height: 15em;
  padding: 0 1em 1.6em;
  background: var(--marigold);
  clip-path: polygon(26% 0, 74% 0, 100% 15%, 100% 100%, 0 100%, 0 15%);
  font-family: var(--mischief);
  font-size: 1em;
  text-transform: uppercase;
}
.tag-hole {
  position: absolute;
  left: 50%; top: 1.8em;
  width: 1.6em; height: 1.6em;
  translate: -50% 0;
  border: .35em solid color-mix(in srgb, var(--marigold) 60%, var(--linen));
  border-radius: 50%;
  background: var(--paper);
}
.tag-line { font-size: 1.05em; letter-spacing: .12em; line-height: 1.25; }
.tag-rule { width: 2.2em; height: .1em; background: var(--ink); opacity: .6; margin: .3em 0; }

/* Back of a second envelope, peeking */
.cmp-env-back {
  position: relative;
  display: block;
  width: 32em;
  height: 21em;
  background: var(--butter) var(--grain);
  box-shadow: var(--shadow-paper);
}
.cmp-env-back svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cmp-env-back.airmail {
  border: .75em solid transparent;
  border-image: repeating-linear-gradient(-45deg, var(--burgundy) 0 1.1em, var(--linen) 1.1em 1.7em, var(--denim) 1.7em 2.8em, var(--linen) 2.8em 3.4em) 14;
}
.cmp-env-back path { fill: rgb(48 48 45 / .035); stroke: rgb(48 48 45 / .22); stroke-width: 1; vector-effect: non-scaling-stroke; }

.p-spark { width: calc(2.6 * var(--u)); }
.p-spark path { fill: var(--marigold); }
.p-spark.alt path { fill: var(--burgundy); }

/* Printable menu and printable sign */
.cmp-menu {
  position: relative;
  display: block;
  width: 17em;
  height: 26em;
  padding: 2.6em 1.8em;
  background: var(--sheet);
  box-shadow: var(--shadow-paper);
  text-align: center;
}
.cmp-menu::before { content: ""; position: absolute; inset: .9em; border: .12em solid var(--burgundy); }
.m-title { display: block; color: var(--burgundy); font-family: var(--romantic); font-size: 3.6em; font-style: italic; line-height: 1; }
.m-star { display: block; width: 1.4em; margin: 1em auto 1.3em; fill: var(--marigold); }
.m-line { display: block; font-family: var(--mischief); font-size: 1em; letter-spacing: .16em; text-transform: uppercase; }
.m-sub { display: block; margin: .2em 0 1.3em; color: var(--ink-soft); font-family: var(--print); font-size: 1.3em; font-style: italic; }
.cmp-sign {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .6em;
  width: 22em;
  height: 28em;
  background: var(--sheet);
  box-shadow: var(--shadow-paper);
  text-align: center;
}
.cmp-sign::before { content: ""; position: absolute; inset: 1.1em; border: .35em double var(--denim); }
.s-word { color: var(--denim); font-family: var(--romantic); font-size: 5.6em; font-style: italic; line-height: 1; }
.s-sub { font-family: var(--mischief); font-size: 1.2em; letter-spacing: .16em; text-transform: uppercase; }

/* ======================= Product cards ======================= */
.item { display: grid; gap: .5rem; text-decoration: none; }
.item-art {
  position: relative;
  display: block;
  container-type: inline-size;
  margin-bottom: .6rem;
  overflow: hidden;
  border-radius: 3px;
  transition: translate .35s cubic-bezier(.2, .7, .2, 1);
}
.item:hover .item-art, .item:focus-visible .item-art { translate: 0 -6px; }
.art-inner {
  --u: calc(100cqw / 40);
  position: relative;
  display: block;
  aspect-ratio: var(--ar);
  font-size: var(--u);
  background: var(--ground) var(--grain);
}
.art-inner > * { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); rotate: var(--r, 0deg); }
.item-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mischief);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kind { color: var(--room-accent, var(--burgundy)); }
.item-name {
  font-family: var(--romantic);
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  line-height: 1.1;
}
.item-desc { color: var(--ink-soft); font-size: 1.02rem; font-style: italic; line-height: 1.4; }

/* ======================= Studio: cutting mat, paper sheet, tools ======================= */
.custom { position: relative; padding: clamp(2rem, 5vw, 4.5rem) clamp(.75rem, 3vw, 2.5rem); }
.mat {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(3rem, 6vw, 6rem) clamp(1.25rem, 5vw, 5rem);
  border-radius: 14px;
  background-color: var(--sage);
  background-image:
    linear-gradient(rgb(48 48 45 / .2) 1px, transparent 1px),
    linear-gradient(90deg, rgb(48 48 45 / .2) 1px, transparent 1px),
    linear-gradient(rgb(48 48 45 / .09) 1px, transparent 1px),
    linear-gradient(90deg, rgb(48 48 45 / .09) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: 28px 28px;
  box-shadow: inset 0 0 0 1px rgb(48 48 45 / .12), 0 24px 40px -28px rgb(48 48 45 / .5);
}
.mat::before { /* ruler ticks along the top edge */
  content: "";
  position: absolute;
  top: 10px; left: 28px; right: 28px;
  height: 9px;
  background:
    repeating-linear-gradient(90deg, rgb(48 48 45 / .45) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(90deg, rgb(48 48 45 / .3) 0 1px, transparent 1px 24px) bottom / 100% 5px no-repeat;
}
.mat-angles { position: absolute; right: 0; bottom: 0; width: min(38%, 320px); height: auto; pointer-events: none; }
.mat-angles path { fill: none; stroke: rgb(48 48 45 / .28); stroke-width: 1; }
.mat-angles text { fill: rgb(48 48 45 / .5); font-family: var(--mischief); font-size: 9px; }
.custom-sheet {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.3rem;
  justify-items: start;
  max-width: 36rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  background: var(--paper) var(--grain);
  box-shadow: var(--shadow-paper);
  rotate: -1.2deg;
}
.custom-sheet .label { color: var(--ink-soft); }
.custom :is(h1, h2) .ask {
  display: block;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-style: italic;
  font-weight: 340;
}
.custom :is(h1, h2) .answer {
  display: block;
  margin-top: .38em;
  color: var(--burgundy);
  font-family: var(--hand);
  font-size: clamp(3.1rem, 4.8vw, 4.5rem);
  font-weight: 400;
  line-height: 1.1;
  rotate: -3deg;
  transform-origin: left center;
}
.custom :is(h1, h2) .nw { white-space: nowrap; }
.custom-sheet p { max-width: 34ch; margin: 0; font-size: 1.15rem; line-height: 1.5; }
.standin { background: color-mix(in srgb, var(--butter) 45%, transparent); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.studio { position: relative; container-type: inline-size; }
.studio-inner { --u: calc(100cqw / 50); position: relative; height: calc(54 * var(--u)); font-size: var(--u); }
.studio-inner > * { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); rotate: var(--r, 0deg); }
.sketch {
  width: 31em;
  height: 22em;
  background: rgb(250 248 243 / .82);
  box-shadow: var(--shadow-paper);
}
.sketch svg { width: 100%; height: 100%; }
.sketch path, .sketch line, .sketch rect { fill: none; stroke: #555550; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.sketch .faint { opacity: .45; stroke-dasharray: 3 4; }
.sketch text { fill: #4a4a46; font-family: var(--hand); }
.swatch-card {
  width: 40em;
  height: 15em;
  padding: 1.6em 1.8em;
  background: var(--sheet);
  box-shadow: var(--shadow-paper);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4em;
}
.chip { display: grid; gap: .8em; justify-items: start; }
.chip i {
  display: block;
  width: 7.2em; height: 7.2em;
  background: var(--c);
  border-radius: 46% 54% 52% 48% / 44% 46% 54% 56%;
  box-shadow: inset 0 -.3em .6em rgb(0 0 0 / .08);
}
.chip:nth-child(2) i { border-radius: 55% 45% 48% 52% / 52% 58% 42% 48%; }
.chip:nth-child(3) i { border-radius: 42% 58% 60% 40% / 50% 44% 56% 50%; }
.chip:nth-child(4) i { border-radius: 50% 50% 44% 56% / 58% 48% 52% 42%; }
.chip b {
  font-family: var(--mischief);
  font-size: max(1.2em, 10px);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.scrap {
  width: 25em;
  padding: 2em 2em 3em;
  background: var(--butter);
  color: var(--ink);
  font-family: var(--hand);
  font-size: 1em;
  line-height: 1.25;
  box-shadow: var(--shadow-paper);
  clip-path: polygon(0 0, 100% 0, 100% 86%, 93% 90%, 86% 85%, 78% 92%, 70% 87%, 61% 94%, 52% 88%, 43% 93%, 35% 87%, 26% 92%, 18% 86%, 9% 91%, 0 87%);
}
.scrap span { display: block; font-size: 2.4em; }
.brush { width: 30em; height: auto; filter: drop-shadow(0 .4em .5em rgb(48 48 45 / .3)); }

/* ======================= Blind-embossed seal ======================= */
.seal {
  width: clamp(8.5rem, 14vw, 11rem);
  color: var(--paper);
  filter: drop-shadow(-1px -1px 0 rgb(255 255 255 / .95)) drop-shadow(1px 1.5px 1px rgb(48 48 45 / .24));
}

/* ======================= Footer: the fine print ======================= */
.fine-print {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr);
  gap: 2rem 3rem;
  padding: 2.75rem var(--gutter) 2.5rem;
  background: var(--linen);
  font-size: .98rem;
}
.fine-print .label { color: var(--burgundy); }
.fp-nav { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: .4rem 2.5rem; }
.fp-nav a { text-decoration: none; }
.fp-nav a:hover { text-decoration: underline; text-underline-offset: .2em; }
.fp-nav .sub { color: var(--ink-soft); font-style: italic; }
.fp-note { margin: 0; color: var(--ink-soft); font-style: italic; }
.fp-legal {
  grid-column: 1 / -1;
  margin: 1rem 0 0;
  color: var(--ink-soft);
  font-family: var(--mischief);
  font-size: .7rem;
  letter-spacing: .08em;
}

/* ======================= Review layer (not part of the design) ======================= */
.review {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .35rem .35rem .35rem 1.1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 10px 28px -12px rgb(0 0 0 / .55);
  font-family: var(--mischief);
  font-size: .72rem;
  letter-spacing: .06em;
}
.review a { color: var(--paper); text-underline-offset: .2em; }
.review button {
  padding: .55rem .95rem;
  border: 0;
  border-radius: 999px;
  background: var(--butter);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.note {
  display: none;
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 40;
  max-width: 20rem;
  padding: .95rem 1.1rem 1rem;
  background: var(--butter);
  color: var(--ink);
  box-shadow: 0 10px 22px -12px rgb(48 48 45 / .5);
  font-family: var(--print);
  font-size: .95rem;
  line-height: 1.42;
  text-align: left;
  rotate: .8deg;
}
.note b {
  display: block;
  margin-bottom: .3rem;
  font-family: var(--mischief);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
}
html.notes-on .note { display: block; }

/* ======================= Current page in the nav ======================= */
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* ======================= Inner page head ======================= */
.page-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: 1.5rem 3rem;
  padding: clamp(2.5rem, 7vw, 6rem) var(--gutter) clamp(2.5rem, 5vw, 4.5rem);
}
.page-head .label { margin-bottom: 1.1rem; color: var(--room-accent, var(--burgundy)); }
.page-head .label a { text-decoration: none; }
.page-head .label a:hover { text-decoration: underline; text-underline-offset: .2em; }
.page-head h1 {
  font-size: clamp(3.3rem, 8.4vw, 7.6rem);
  font-weight: 340;
  line-height: .92;
  letter-spacing: -.026em;
}
.page-head h1 em { color: var(--room-accent, var(--burgundy)); font-weight: 310; }
.page-head .lede { margin: 0; max-width: 38ch; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.5; }

/* ======================= Photo placeholders =======================
   Stand-ins for real photography. The slip says which shot goes here, so the
   pages double as the shot list. Product = clean, on a plain ground.
   Context = editorial: in use, in a room, in hands. */
.photo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--ar, 4 / 5);
  padding: 1.25rem;
  overflow: hidden;
  border-radius: 3px;
  background-color: var(--ground, var(--linen));
  background-image:
    repeating-linear-gradient(135deg, rgb(48 48 45 / .07) 0 1px, transparent 1px 12px),
    var(--grain);
}
.photo--context { background-color: color-mix(in srgb, var(--ground, var(--sage)) 72%, var(--ink)); }
.photo-slip {
  max-width: 17.5rem;
  padding: .85rem 1rem .95rem;
  background: var(--linen);
  border: 1px dashed rgb(48 48 45 / .45);
  box-shadow: 0 2px 4px rgb(48 48 45 / .12);
  rotate: -1.4deg;
}
.photo-slip b {
  display: block;
  margin-bottom: .3rem;
  color: var(--burgundy);
  font-family: var(--mischief);
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.photo-slip span { display: block; color: var(--ink); font-size: .98rem; font-style: italic; line-height: 1.35; }
.taped { position: relative; }
.taped::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -.8rem;
  left: 50%;
  width: 6.5rem;
  height: 1.7rem;
  translate: -50% 0;
  rotate: -4deg;
  background: repeating-linear-gradient(45deg, var(--rose) 0 .35rem, var(--linen) .35rem .7rem);
  opacity: .9;
  clip-path: polygon(0 0, 100% 0, 97% 25%, 100% 50%, 97% 75%, 100% 100%, 0 100%, 3% 75%, 0 50%, 3% 25%);
}

/* ======================= Small shared bits ======================= */
.hand-note { color: var(--burgundy); font-family: var(--hand); font-size: 2.1rem; line-height: 1.1; }
.bracket { background: color-mix(in srgb, var(--butter) 45%, transparent); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.steps-mini { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps-mini li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .1rem .75rem; counter-increment: step; }
.steps-mini li::before {
  content: counter(step);
  grid-row: span 2;
  color: var(--room-accent, var(--burgundy));
  font-family: var(--romantic);
  font-size: 1.9rem;
  font-style: italic;
  line-height: 1;
}
.steps-mini b { font-family: var(--romantic); font-size: 1.5rem; font-weight: 400; }
.steps-mini span { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.45; }

/* ======================= Ornament kit =======================
   The brand's collected details, used a few at a time: postal edges, patterns,
   labels, printer's ornaments, and blind-embossed type. */

/* Airmail edge: every page opens and closes like an envelope */
.site-head::before,
.fine-print::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 5px;
  background: repeating-linear-gradient(-45deg, var(--burgundy) 0 10px, var(--linen) 10px 16px, var(--denim) 16px 26px, var(--linen) 26px 32px);
}
.fine-print { position: relative; border-top: 0; padding-top: 3.25rem; }
.fine-print::before { height: 7px; }

/* Patterns. Set --p1 (ink color), --p2 (ground) and --pw (repeat size). */
.pat-cabana {
  background-image:
    repeating-linear-gradient(var(--pa, 90deg), var(--p1) 0 var(--pw, 22px), var(--p2) var(--pw, 22px) calc(var(--pw, 22px) * 2)),
    var(--grain);
}
.pat-ticking {
  background-color: var(--p2);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--pw, 18px) - 5px), var(--p1) calc(var(--pw, 18px) - 5px) calc(var(--pw, 18px) - 4px), transparent calc(var(--pw, 18px) - 4px) calc(var(--pw, 18px) - 2px), var(--p1) calc(var(--pw, 18px) - 2px) calc(var(--pw, 18px) - 1px), transparent calc(var(--pw, 18px) - 1px) var(--pw, 18px)),
    var(--grain);
}
.pat-gingham {
  background-color: var(--p2);
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--p1) 45%, transparent) 50%, transparent 0),
    linear-gradient(color-mix(in srgb, var(--p1) 45%, transparent) 50%, transparent 0),
    var(--grain);
  background-size: var(--pw, 22px) var(--pw, 22px), var(--pw, 22px) var(--pw, 22px), auto;
}
.pat-dots {
  background-color: var(--p2);
  background-image: radial-gradient(var(--p1) 1.3px, transparent 1.8px), var(--grain);
  background-size: var(--pw, 16px) var(--pw, 16px), auto;
}

/* Vintage label: notched corners and an inner rule, for eyebrows and small titles */
.vlabel {
  --vl-bg: var(--linen);
  --vl-fg: var(--ink);
  --notch: 6px;
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .6em;
  width: fit-content;
  margin: 0;
  padding: .7em 1.2em .62em;
  background: var(--vl-bg);
  color: var(--vl-fg);
  font-family: var(--mischief);
  font-size: .74rem;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
  -webkit-mask:
    radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) top left / 51% 51% no-repeat,
    radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) top right / 51% 51% no-repeat,
    radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) bottom left / 51% 51% no-repeat,
    radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) bottom right / 51% 51% no-repeat;
  mask:
    radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) top left / 51% 51% no-repeat,
    radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) top right / 51% 51% no-repeat,
    radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) bottom left / 51% 51% no-repeat,
    radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) bottom right / 51% 51% no-repeat;
}
.vlabel::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid color-mix(in srgb, var(--vl-fg) 40%, transparent);
  pointer-events: none;
}
.vlabel .no { font-family: var(--romantic); font-size: 1.5em; font-style: italic; letter-spacing: 0; line-height: .7; text-transform: none; white-space: nowrap; }

/* Printer's ornament: a pause between things */
.ornament { display: flex; align-items: center; justify-content: center; gap: .9rem; margin: 0; color: var(--marigold); }
.ornament::before, .ornament::after { content: ""; width: min(5rem, 16vw); height: 1px; background: currentColor; opacity: .55; }
.ornament span { font-size: .78rem; letter-spacing: .55em; margin-right: -.55em; }

/* Tiny stars and dots, placed by hand */
.spark, .dot { position: absolute; pointer-events: none; }
.spark {
  width: var(--sz, 14px);
  aspect-ratio: 1;
  background: var(--c, var(--marigold));
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.dot { width: var(--sz, 6px); aspect-ratio: 1; border-radius: 50%; background: var(--c, var(--burgundy)); }

/* Blind-embossed type: same color as the paper, visible only as a pressed edge */
.pressed {
  color: var(--pressed-on, var(--paper));
  text-shadow: -1px -1px 0 rgb(255 255 255 / .9), 1px 1.5px 1px rgb(48 48 45 / .17);
  pointer-events: none;
  user-select: none;
}

/* Die-cut edges */
.perforated {
  --t: 16px;
  padding: calc(var(--t) * .8);
  -webkit-mask:
    radial-gradient(circle calc(var(--t) * .3), #0000 96%, #000) calc(var(--t) / -2) calc(var(--t) / -2) / var(--t) var(--t) round,
    linear-gradient(#000 0 0) content-box;
  mask:
    radial-gradient(circle calc(var(--t) * .3), #0000 96%, #000) calc(var(--t) / -2) calc(var(--t) / -2) / var(--t) var(--t) round,
    linear-gradient(#000 0 0) content-box;
}
.scalloped {
  --s: 16px;
  padding: var(--s);
  -webkit-mask:
    radial-gradient(circle calc(var(--s) / 2), #000 97%, #0000) 0 0 / var(--s) var(--s) round,
    linear-gradient(#000 0 0) 50% 50% / calc(100% - var(--s)) calc(100% - var(--s)) no-repeat;
  mask:
    radial-gradient(circle calc(var(--s) / 2), #000 97%, #0000) 0 0 / var(--s) var(--s) round,
    linear-gradient(#000 0 0) 50% 50% / calc(100% - var(--s)) calc(100% - var(--s)) no-repeat;
}

/* Rubber-stamp ink: sits into the paper instead of on top of it */
.inked { mix-blend-mode: multiply; opacity: .9; }

/* Airmail sticker and a striped paper strip, for collages */
.airmail-label {
  position: absolute;
  display: grid;
  gap: .15em;
  padding: .7em 1em .6em;
  background: var(--denim);
  color: var(--linen);
  font-family: var(--mischief);
  font-size: max(1.15em, 9px);
  letter-spacing: .16em;
  line-height: 1.1;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgb(48 48 45 / .25);
}
.airmail-label small { font-size: .72em; letter-spacing: .14em; opacity: .8; }
.cmp-strip { display: block; width: 22em; height: 3.8em; box-shadow: var(--shadow-paper); }

/* ======================= Motion: a few considered moments =======================
   Everything here is off for visitors who ask for reduced motion (see fpm.css). */

/* Pages cross-fade into each other; the header stays put */
@view-transition { navigation: auto; }
.site-head { view-transition-name: site-head; }

/* Reveal on scroll. site.js adds .is-in; without JS everything is simply visible. */
.js [data-reveal] {
  opacity: 0;
  translate: 0 16px;
  transition: opacity .9s ease, translate .9s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

@keyframes stamp-down {
  0% { opacity: 0; scale: 1.6; rotate: -14deg; }
  70% { opacity: var(--ink, .55); scale: .97; }
  100% { opacity: var(--ink, .55); scale: 1; rotate: 0deg; }
}
@keyframes slap {
  from { opacity: 0; translate: -.6em -1em; scale: 1.15; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes twinkle {
  0% { opacity: 0; scale: 0; }
  60% { opacity: 1; scale: 1.35; }
  100% { opacity: 1; scale: 1; }
}
@keyframes sway {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(1.6deg); }
  75% { transform: rotate(-1.6deg); }
}

/* Painted banners sway from their nail; hang tags swing from their hole */
a.piece:hover .cmp-banner,
.item:hover .cmp-banner,
.room-product:hover .cmp-banner,
.specimens li:hover .cmp-banner { animation: sway 2.8s ease-in-out infinite; transform-origin: 50% 0; }
.p-tag:hover .tag-body,
.item:hover .tag-body { animation: sway 2.2s ease-in-out infinite; transform-origin: 50% 2.6em; }

/* Product art tips a little as it lifts */
.item-art { transition: translate .35s cubic-bezier(.2, .7, .2, 1), rotate .35s cubic-bezier(.2, .7, .2, 1); }
.item:hover .item-art, .item:focus-visible .item-art { rotate: -.6deg; }

/* The wordmark keeps its own fine print: an asterisk on hover */
.wordmark .wm-big { position: relative; }
.wordmark .wm-big::after {
  content: "*";
  position: absolute;
  top: -.05em;
  right: -.38em;
  color: var(--burgundy);
  font-size: .55em;
  opacity: 0;
  translate: 0 .25em;
  transition: opacity .3s ease, translate .3s ease;
}
a.wordmark:hover .wm-big::after, a.wordmark:focus-visible .wm-big::after { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .js [data-reveal] { opacity: 1; translate: none; }
}

/* ======================= Phones ======================= */
@media (max-width: 760px) {
  .page-head { grid-template-columns: minmax(0, 1fr); }

  .menu-btn { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: calc(100% - .25rem);
    left: var(--gutter);
    right: var(--gutter);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    padding: 1rem 1.25rem 1.25rem;
    background: var(--linen);
    border-radius: 3px;
    box-shadow: var(--shadow-paper);
  }
  .site-nav.open { display: flex; }
  .nav-shop::after { display: none; }
  .shop-menu {
    position: static;
    min-width: 0;
    padding: 0 0 .5rem .75rem;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    translate: none;
  }

  .mat { grid-template-columns: minmax(0, 1fr); }
  .mat { padding: 2.5rem .75rem; }
  .custom-sheet { rotate: -.6deg; padding: 1.75rem 1.5rem; }
  .custom :is(h1, h2) .answer { white-space: normal; }
  .plaque { padding: 1em 1.3em; letter-spacing: .12em; }

  .fine-print { grid-template-columns: minmax(0, 1fr); }
  .fp-nav { grid-template-columns: repeat(2, auto); }

  .note { position: relative; top: auto; right: auto; grid-column: 1 / -1; max-width: none; margin: 0 0 1.5rem; rotate: 0deg; }
  .review { left: 1rem; right: 1rem; justify-content: space-between; }
}