@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Karla:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ============================================================
   STARS IN THE SKY
   Design DNA: "Maker Goods" — editorial handmade retail.
   Display: Marcellus (single weight, restraint through scale)
   Body:    Karla
   Signatures: the stitch rule + the selvedge price tag
   ============================================================ */

/* ---------- PALETTES ----------
   Every colour in this file resolves through these tokens.
   Nothing below this block hardcodes a hex value. */

:root,
[data-palette="starfield"] {
  --ground:  #FFFFFF;
  --surface: #F7F6F3;
  --ink:     #131C33;
  --muted:   #5C6478;
  --accent:  #B08A3E;
  --rule:    #E3E0D8;
  --deep:    #131C33;
  --on-deep: #F7F6F3;
}

[data-palette="linen"] {
  --ground:  #F6F1E8;
  --surface: #FFFDF9;
  --ink:     #2E2722;
  --muted:   #6E6154;
  --accent:  #B4785C;
  --rule:    #DDD3C4;
  --deep:    #2E2722;
  --on-deep: #F6F1E8;
}

[data-palette="apothecary"] {
  --ground:  #FAF8F3;
  --surface: #FFFFFF;
  --ink:     #1F2620;
  --muted:   #5A6559;
  --accent:  #A88B4E;
  --rule:    #E0DCCF;
  --deep:    #2B3A2E;
  --on-deep: #FAF8F3;
}

[data-palette="plum"] {
  --ground:  #F7F3F1;
  --surface: #FFFFFF;
  --ink:     #2A222A;
  --muted:   #6B5E6B;
  --accent:  #B39456;
  --rule:    #E6DEDD;
  --deep:    #4A3448;
  --on-deep: #F7F3F1;
}

/* ---------- SCALE ---------- */
:root {
  --gutter: clamp(20px, 6vw, 96px);
  --measure: 1320px;
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 40px;
  --s5: 64px; --s6: 104px; --s7: 160px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- RESET ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Any class that sets `display` would otherwise beat the browser's default
   [hidden] rule, leaving supposedly-hidden elements on screen. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: 'Karla', system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.7;
  overflow-x: hidden;
  transition: background-color .55s var(--ease), color .55s var(--ease);
}

img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; }

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

.wrap { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- TYPE ---------- */
h1, h2, h3, .display {
  font-family: 'Marcellus', Georgia, serif;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.005em;
}

h1 { font-size: clamp(40px, 6.2vw, 74px); line-height: 1.02; }
h2 { font-size: clamp(27px, 3.5vw, 43px); }
h3 { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.25; }

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: var(--s3);
}

.lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--muted); max-width: 46ch; }
.small { font-size: 13.5px; color: var(--muted); }

/* ---------- SIGNATURE 1: THE STITCH RULE ----------
   A hand-stitch: 7px dashes, 6px gaps. Draws itself
   left-to-right when it scrolls into view. */

.stitch {
  height: 2px;
  width: 100%;
  background-image: repeating-linear-gradient(
    to right,
    var(--accent) 0 7px,
    transparent 7px 13px
  );
  transform-origin: left center;
  transition: transform 1.1s var(--ease);
}

.stitch-section { padding-block: var(--s6); }
.stitch-section .stitch { opacity: .75; }

/* the same stitch, sewing itself under a link on hover */
.sew {
  text-decoration: none;
  background-image: repeating-linear-gradient(
    to right,
    var(--accent) 0 7px,
    transparent 7px 13px
  );
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  padding-bottom: 4px;
  transition: background-size .55s var(--ease);
}
.sew:hover, .sew:focus-visible { background-size: 100% 2px; }

/* ---------- SIGNATURE 2: THE SELVEDGE TAG ----------
   Echoes the real sewn-in brand tag on Evelyn's utility bag.
   Prices live here — small, letterspaced, never bold, never red. */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px 5px 20px;
  background: var(--surface);
  border: 1px solid var(--rule);
  clip-path: polygon(0 50%, 10px 0, 100% 0, 100% 100%, 10px 100%);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  color: var(--ink);
  white-space: nowrap;
}
.tag::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.tag .unit { color: var(--muted); letter-spacing: 0.04em; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--ground);
  transition: background-color .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), opacity .3s var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ground); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { background: transparent; border-color: var(--accent); color: var(--accent); }

.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .38;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- HEADER ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), background-color .55s var(--ease);
}
.site-header.stuck { border-bottom-color: var(--rule); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-block: 18px;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand img { width: 34px; height: 34px; border-radius: 5px; flex: none; }
.brand-name {
  font-family: 'Marcellus', Georgia, serif;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.site-nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px); }
.site-nav a {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  transition: color .3s var(--ease);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }

.order-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.order-pill:hover { border-color: var(--accent); color: var(--accent); }
.order-pill .count {
  display: inline-grid;
  place-items: center;
  min-width: 19px; height: 19px;
  padding-inline: 5px;
  border-radius: 100px;
  background: var(--accent);
  color: var(--ground);
  font-size: 11px;
  letter-spacing: 0;
}
.order-pill .count[data-empty="true"] { display: none; }

/* ---------- HERO ---------- */
.hero { padding-block: clamp(var(--s5), 8vw, 128px) var(--s6); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(var(--s4), 6vw, 96px);
  align-items: center;
}
.hero h1 { margin-bottom: var(--s3); max-width: 13ch; }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero .lede { margin-bottom: var(--s4); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: var(--s4); }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-figure { position: relative; }
.hero-figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.hero-figure .tag { position: absolute; bottom: 22px; left: -12px; box-shadow: 0 8px 26px rgb(0 0 0 / .10); }

/* ---------- ASYMMETRIC EDITORIAL FEATURE ROWS ---------- */
.section { padding-block: var(--s6); }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
}
.section-head h2 { max-width: 18ch; }

.feature {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(var(--s3), 4vw, var(--s5));
  align-items: center;
  margin-bottom: var(--s6);
}
.feature:last-child { margin-bottom: 0; }

.feature-figure { grid-column: span 7; }
.feature-body   { grid-column: span 5; }

.feature.flip .feature-figure { grid-column: 6 / span 7; grid-row: 1; }
.feature.flip .feature-body   { grid-column: 1 / span 5; grid-row: 1; }

.feature-figure { position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule); }
.feature-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.feature:hover .feature-figure img { transform: scale(1.035); }
.feature.portrait .feature-figure img { aspect-ratio: 3 / 4; }

.feature-body h3 { margin-bottom: 14px; }
.feature-body p { color: var(--muted); margin-bottom: var(--s3); max-width: 38ch; }
.feature-body .tag { margin-bottom: var(--s3); }
.feature-index {
  font-family: 'Marcellus', Georgia, serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--accent);
  display: block;
  margin-bottom: 14px;
}

/* three-up row inside the editorial flow */
.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--s3), 3vw, var(--s4));
  margin-bottom: var(--s6);
  /* The trio follows the feature rows, and the last .feature has its own
     bottom margin zeroed (it is :last-child of the [data-render="features"]
     wrapper). Without this the feature photo and the trio photos collide. */
  margin-top: var(--s6);
}

/* ---------- PRODUCT CARD (shop grid + trio) ---------- */
.card { display: flex; flex-direction: column; }
.card-figure {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  margin-bottom: var(--s2);
  /* hairline frame: side by side on wide screens, light-background product
     photos bleed into the linen ground and read as one continuous block.
     Inset so it sits over the image and costs no layout width. */
  box-shadow: inset 0 0 0 1px var(--rule);
}
.card-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.card:hover .card-figure img { transform: scale(1.04); }

.card-figure .tag { position: absolute; bottom: 14px; left: -10px; }

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: 6px;
}
.card h3 { font-size: 20px; }
.card p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin-bottom: var(--s2); }
.card .card-actions { margin-top: auto; padding-top: var(--s1); }

/* placeholder card for products awaiting photography */
.card-figure.awaiting {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border: 1px dashed var(--rule);
  text-align: center;
  padding: var(--s3);
}
.awaiting-inner { max-width: 22ch; }
.awaiting-mark {
  width: 30px; height: 30px;
  margin: 0 auto var(--s2);
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--accent);
  font-size: 15px;
}
.card-figure.awaiting p {
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  line-height: 1.7;
}

.added { pointer-events: none; }

/* ---------- STOCK ----------
   A sold-out handmade piece is proof the work sells, so it stays on the page:
   the photo steps back, it is named plainly, and the button stops working. */

.sold-out-badge {
  position: absolute;
  top: 14px; right: 14px;
  padding: 5px 11px;
  background: var(--ground);
  border: 1px solid var(--rule);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.card-figure.sold-out img,
.feature-figure.sold-out img { filter: saturate(0.35); opacity: 0.62; }
.card.is-sold-out:hover .card-figure img,
.feature.is-sold-out:hover .feature-figure img { transform: none; }

.stock-note {
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: var(--s2);
}
.stock-note.low  { color: var(--accent); }
.stock-note.sold { color: var(--muted); }
.feature-body .stock-note { margin-bottom: var(--s2); }

/* ---------- TELL ME WHEN IT'S BACK ----------
   Replaces the button in place on a sold-out card. It collects an email
   address, so it says what the address is for before anyone types in it. */

.notify-form { margin-top: var(--s1); }
.notify-row { display: flex; gap: 8px; }
.notify-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 13px 15px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 0;
  transition: border-color .3s var(--ease);
}
.notify-row input:focus { border-color: var(--accent); outline: none; }
.notify-row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.notify-row .btn { flex: none; padding-inline: var(--s3); }
.notify-note {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 8px;
}
.notify-msg { font-size: 12.5px; line-height: 1.6; margin-top: 6px; }
.notify-msg:empty { margin-top: 0; }
.notify-msg.ok  { color: var(--accent); margin-top: 0; }
.notify-msg.err { color: #A6392E; }

/* ---------- FABRIC SWATCHES ----------
   Fabric is the thing customers ask about first, so it is chosen on the card
   rather than described in the order note. The name of the current choice is
   read out once above the row instead of under every chip. */

.fabrics { margin-bottom: var(--s2); }
.fabrics-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 9px;
}
.fabrics-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.fabric-choice {
  font-family: 'Marcellus', Georgia, serif;
  font-size: 14px;
  color: var(--ink);
}

.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  position: relative;
  width: 34px; height: 34px;
  padding: 0;
  border: 1px solid var(--rule);
  background: var(--surface);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.swatch img, .swatch-blank { width: 100%; height: 100%; object-fit: cover; display: block; }
.swatch-blank { background: var(--surface); }
.swatch-any { display: grid; place-items: center; }
.swatch-any-mark { font-size: 13px; color: var(--muted); line-height: 1; }
/* the accessible name for each chip; the readout above carries it visually */
.swatch-label,
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.swatch:hover { border-color: var(--accent); }
.swatch.is-on {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--ground), 0 0 0 3px var(--accent);
}
.swatch.is-on .swatch-any-mark { color: var(--accent); }
.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }


/* ---------- SHOP GRID ---------- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--s4), 4vw, var(--s5)) clamp(var(--s3), 3vw, var(--s4));
}

/* ---------- STORY BAND (inverted) ---------- */
.band {
  background: var(--deep);
  color: var(--on-deep);
  transition: background-color .55s var(--ease), color .55s var(--ease);
}
.band .eyebrow { color: var(--accent); }
.band .lede, .band p { color: color-mix(in srgb, var(--on-deep) 76%, transparent); }
.band .stitch { opacity: 1; }

.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--s4), 6vw, var(--s6));
  align-items: center;
  padding-block: var(--s6);
}
.story-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: inset 0 0 0 1px var(--rule); }
.story-copy h2 { margin-bottom: var(--s3); max-width: 16ch; }
.story-copy p + p { margin-top: var(--s2); }
.story-quote {
  font-family: 'Marcellus', Georgia, serif;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.35;
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid color-mix(in srgb, var(--on-deep) 22%, transparent);
  color: var(--on-deep);
}

/* ---------- STEPS ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--s3), 3vw, var(--s5));
}
.step { padding-top: var(--s3); border-top: 1px solid var(--rule); }
.step-n {
  font-family: 'Marcellus', Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent);
  display: block;
  margin-bottom: 12px;
}
.step h3 { font-size: 21px; margin-bottom: 10px; }
.step p { color: var(--muted); font-size: 15px; }

/* ---------- CONFIRM FLAG ----------
   Visible marker for facts not yet supplied by the client.
   Remove these before the site goes live. */
.confirm {
  display: inline-block;
  padding: 1px 7px;
  border: 1px dashed var(--accent);
  border-radius: 3px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

/* ---------- CONTACT / FOOTER ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--s4), 6vw, var(--s6));
  align-items: start;
}
.contact-list { list-style: none; }
.contact-list li { padding-block: var(--s2); border-top: 1px solid var(--rule); }
.contact-list li:first-child { border-top: none; padding-top: 0; }
.contact-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.contact-value { font-family: 'Marcellus', Georgia, serif; font-size: clamp(18px, 1.8vw, 23px); }

.field { margin-bottom: var(--s3); }
.field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 13px 15px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 0;
  transition: border-color .3s var(--ease), background-color .55s var(--ease);
}
.field input:focus, .field textarea:focus { border-color: var(--accent); outline: none; }
.field textarea { min-height: 130px; resize: vertical; }

.site-footer { padding-block: var(--s5) var(--s4); border-top: 1px solid var(--rule); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  font-size: 13px;
  color: var(--muted);
}
.footer-nav { display: flex; gap: var(--s3); flex-wrap: wrap; }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { color: var(--ink); }

/* ---------- ORDER DRAWER ---------- */
.scrim {
  position: fixed; inset: 0;
  background: rgb(0 0 0 / .38);
  opacity: 0;
  visibility: hidden;
  z-index: 80;
  transition: opacity .45s var(--ease), visibility .45s;
}
.scrim.open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 430px;
  max-width: 92vw;
  background: var(--ground);
  border-left: 1px solid var(--rule);
  z-index: 90;
  display: flex;
  flex-direction: column;
  transform: translateX(101%);
  transition: transform .5s var(--ease), background-color .55s var(--ease);
}
.drawer.open { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule);
}
.drawer-head h2 { font-size: 22px; }
.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-size: 17px;
  line-height: 1;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }

.drawer-body { flex: 1; overflow-y: auto; padding: var(--s4); }
.drawer-foot { border-top: 1px solid var(--rule); padding: var(--s4); }

.line {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  gap: var(--s2);
  padding-bottom: var(--s3);
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
}
.line:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.line-figure {
  width: 68px; height: 84px;
  background: var(--surface);
  overflow: hidden;
  display: grid; place-items: center;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .1em;
  text-align: center;
}
.line-figure img { width: 100%; height: 100%; object-fit: cover; }
.line-name { font-family: 'Marcellus', Georgia, serif; font-size: 17px; margin-bottom: 2px; }
.line-unit { font-size: 12px; color: var(--muted); }
.line-fabric { font-size: 12.5px; color: var(--accent); letter-spacing: .03em; margin-bottom: 2px; }
.line-price { font-size: 14px; letter-spacing: .05em; text-align: right; white-space: nowrap; }

.qty { display: inline-flex; align-items: center; gap: 2px; margin-top: 8px; border: 1px solid var(--rule); }
.qty button {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  font-size: 15px; line-height: 1;
  color: var(--muted);
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.qty button:hover { color: var(--ground); background: var(--accent); }
.qty span { min-width: 26px; text-align: center; font-size: 14px; }

.line-remove {
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 10px;
  display: block;
  transition: color .3s var(--ease);
}
.line-remove:hover { color: var(--accent); }

.totals { margin-bottom: var(--s3); }
.totals-row {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  padding-block: 7px;
  font-size: 14px;
  color: var(--muted);
}
.totals-row.grand {
  border-top: 1px solid var(--rule);
  margin-top: 7px;
  padding-top: var(--s2);
  color: var(--ink);
  font-family: 'Marcellus', Georgia, serif;
  font-size: 21px;
}

/* The closed sign. Deliberately quiet rather than alarming — the shop is
   resting, not broken. */
.shop-closed-banner {
  background: var(--ink);
  color: var(--paper, #fff);
  text-align: center;
  padding: 10px var(--s3);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.shop-closed-msg {
  margin: 0;
  padding: var(--s3);
  border: 1px dashed var(--rule);
  border-radius: 2px;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* The shipping caveat, kept at the point of purchase — the totals row above
   carries the number, this carries the conditions attached to it. */
.ship-note {
  margin-top: var(--s2);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.empty-state { text-align: center; padding-block: var(--s6); color: var(--muted); }
.empty-state h3 { font-size: 21px; color: var(--ink); margin-bottom: 10px; }
.empty-state p { margin-bottom: var(--s3); font-size: 15px; }

.notice {
  padding: var(--s2) var(--s3);
  border: 1px dashed var(--accent);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: var(--s3);
}
.notice strong { color: var(--ink); font-weight: 600; }

/* ---------- ORDER REVIEW OVERLAY ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--ground);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s, background-color .55s var(--ease);
}
.overlay.open { opacity: 1; visibility: visible; }

.overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-block: 18px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s5);
}
.review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(var(--s4), 5vw, var(--s6));
  align-items: start;
  padding-bottom: var(--s6);
}
/* Said quietly under the pay button, because it is reassurance rather than an
   instruction -- the customer is about to leave the site and should know why. */
.pay-note {
  margin-top: var(--s2);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}

.checkout-msg {
  margin-top: var(--s2);
  padding: 10px var(--s2);
  font-size: 13.5px;
  line-height: 1.6;
  border-left: 2px solid #A6392E;
  color: #A6392E;
  background: var(--surface);
}
.checkout-msg[hidden] { display: none; }

.order-ref {
  margin-top: var(--s3);
  font-size: 14px;
  color: var(--muted);
}
.order-ref strong {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: .08em;
  user-select: all;
}

.review-summary {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: var(--s4);
  position: sticky;
  top: 96px;
  transition: background-color .55s var(--ease);
}

/* ---------- LOADING + ERROR STATES ---------- */

.skeleton {
  background: linear-gradient(
    100deg,
    var(--surface) 30%,
    color-mix(in srgb, var(--rule) 55%, var(--surface)) 50%,
    var(--surface) 70%
  );
  background-size: 260% 100%;
  animation: shimmer 1.5s linear infinite;
}
@keyframes shimmer { to { background-position: -160% 0; } }

.skeleton-card .card-figure { aspect-ratio: 4 / 5; }
.skeleton-line { height: 11px; margin-bottom: 9px; border-radius: 2px; }

.load-error {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--s5) var(--s3);
  border: 1px dashed var(--rule);
}
.load-error h3 { font-size: 22px; margin-bottom: 12px; }
.load-error p { color: var(--muted); max-width: 46ch; margin: 0 auto var(--s2); font-size: 15px; }

.feature-figure.awaiting {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--rule);
  text-align: center;
}
.feature-figure.awaiting p {
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); line-height: 1.7;
}

/* ---------- SCROLL REVEAL ----------
   Content is visible by default. Only once app.js has loaded and set
   .js on <html> do elements start hidden and fade in. If the script is
   missing or throws, the page still reads normally. */
.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }

.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.in { opacity: 1; transform: none; }

.js .stitch { transform: scaleX(0); }
.js .stitch.in { transform: scaleX(1); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .hero-figure { order: -1; }
  .hero-figure img { aspect-ratio: 4 / 3; }
  .hero h1 { max-width: 100%; }
  .hero-figure .tag { left: 12px; }

  .feature, .feature.flip { grid-template-columns: 1fr; gap: var(--s3); }
  .feature-figure, .feature-body,
  .feature.flip .feature-figure, .feature.flip .feature-body {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .feature.flip .feature-figure { order: -1; }

  .story-grid { grid-template-columns: 1fr; padding-block: var(--s5); }
  .contact-grid { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }
  .review-summary { position: static; }
  .shop-grid, .trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  :root { --s6: 72px; --s7: 104px; }
  body { font-size: 16px; }
  .steps { grid-template-columns: 1fr; gap: var(--s3); }
  .header-inner { flex-wrap: wrap; row-gap: 12px; }
  .brand-name { font-size: 15px; }
  .site-nav { gap: 16px; }
  .site-nav a { font-size: 11.5px; letter-spacing: .1em; }
  .order-pill { padding: 7px 13px; font-size: 11px; }
  .drawer-body, .drawer-foot, .drawer-head { padding-inline: var(--s3); }
}

@media (max-width: 520px) {
  .shop-grid, .trio { grid-template-columns: 1fr; }
  .section-head { margin-bottom: var(--s4); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .skeleton { animation: none; }
  .reveal, .js .reveal { opacity: 1; transform: none; }
  .stitch, .js .stitch { transform: scaleX(1); }
}

@media print {
  .site-header, .drawer, .scrim, .overlay { display: none !important; }
}

/* ============================================================
   ADMIN — same design language, plainer furniture.
   Only loaded on admin.html; costs the storefront nothing but bytes.
   ============================================================ */

.admin-wrap { padding-block: var(--s5) var(--s6); }

.admin-gate { max-width: 460px; margin-inline: auto; text-align: center; }
.admin-gate .lede { margin-inline: auto; }
.admin-gate .field { text-align: left; }

.admin-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: var(--s4);
}

.admin-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}
.admin-head h1, .admin-head h2 { max-width: 20ch; }
.admin-head .lede { font-size: 15px; max-width: 60ch; }

.admin-msg { display: block; font-size: 13.5px; margin-top: var(--s2); color: var(--muted); min-height: 1.2em; }
.admin-msg.ok  { color: var(--accent); }
.admin-msg.err { color: #A6392E; }

/* ---- product list ---- */

.admin-list { border-top: 1px solid var(--rule); }

.admin-item { border-bottom: 1px solid var(--rule); }
.admin-item.is-hidden > summary { opacity: .55; }

.admin-item > summary {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 14px 4px;
  cursor: pointer;
  list-style: none;
  transition: background-color .3s var(--ease);
}
.admin-item > summary::-webkit-details-marker { display: none; }
.admin-item > summary:hover { background: var(--surface); }

.admin-thumb {
  width: 52px; height: 62px;
  flex: none;
  background: var(--surface);
  border: 1px solid var(--rule);
  display: grid; place-items: center;
  overflow: hidden;
}
.admin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-thumb.lg { width: 92px; height: 110px; }
/* fabric is cut from a bolt, not photographed as a product — square reads as
   a swatch where the portrait crop reads as a product shot */
[data-fabric-id] .admin-thumb { height: 52px; }
[data-fabric-id] .admin-thumb.lg { height: 92px; }
.admin-thumb .no-photo {
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-align: center; line-height: 1.5;
}

.admin-item-name {
  flex: 1;
  font-family: 'Marcellus', Georgia, serif;
  font-size: 19px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.admin-item-price { font-size: 14px; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }

.pill-flag {
  font-family: 'Karla', sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px;
  border: 1px solid var(--rule); color: var(--muted);
}
.pill-featured { border-color: var(--accent); color: var(--accent); }

.admin-item-body { padding: var(--s2) 4px var(--s4); max-width: 720px; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s3); }

.admin-item-body .field label { text-transform: none; letter-spacing: .04em; font-size: 12.5px; }
.admin-item-body textarea { min-height: 0; }

.photo-row { display: flex; gap: var(--s3); align-items: flex-start; }
.photo-row input[type="file"] { font-size: 13px; color: var(--muted); }
.hint { font-size: 12.5px; color: var(--muted); margin: 6px 0; }

.linkish {
  font-size: 12.5px; letter-spacing: .06em; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: #A6392E; }

.check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14.5px; margin-bottom: var(--s3); cursor: pointer;
}
.check input { margin-top: 4px; accent-color: var(--accent); flex: none; }

.feature-fields,
.stock-fields {
  border-left: 2px solid var(--rule);
  padding-left: var(--s3);
  margin-bottom: var(--s3);
}

/* the fabric tickboxes on a product, and the swatch face inside each one */
.fabric-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px var(--s3);
  margin-top: 4px;
}
/* these labels sit inside .field, which styles labels as blocks and stretches
   every input to full width -- both have to be undone here */
.field label.fabric-opt {
  display: flex; align-items: center; gap: 10px;
  font-size: 14.5px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 0;
  cursor: pointer;
}
.field .fabric-opt input[type="checkbox"] {
  width: auto;
  padding: 0;
  accent-color: var(--accent);
  flex: none;
}
.fabric-opt-swatch {
  width: 30px; height: 30px;
  flex: none;
  border: 1px solid var(--rule);
  background: var(--surface);
  overflow: hidden;
  display: grid; place-items: center;
}
.fabric-opt-swatch img { width: 100%; height: 100%; object-fit: cover; }
.fabric-opt-swatch .no-photo { font-size: 7px; line-height: 1.2; color: var(--muted); text-align: center; }
.fabric-opt-name { min-width: 0; }

/* The open sign. When the shop is shut this is the most important control on
   the page, so it stops looking like an ordinary card and starts looking like
   a thing that is switched off. */
.open-sign { margin-bottom: var(--s5); }
.open-sign > .check { font-size: 16px; }
.open-sign .field { margin-top: var(--s3); transition: opacity 120ms ease; }
.open-sign .btn { margin-top: var(--s3); }
.open-sign.is-closed {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ---------- ORDERS (admin) ---------- */
.order-row > summary {
  display: grid;
  grid-template-columns: 7rem 1fr auto auto;
  gap: var(--s3);
  align-items: baseline;
}
.order-ref-cell {
  font-family: var(--mono, ui-monospace, monospace);
  letter-spacing: .08em;
  color: var(--ink);
  user-select: all;
}
.order-when { font-size: 13px; color: var(--muted); }
.order-total { font-weight: 600; white-space: nowrap; }
.order-status {
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
/* A cancelled order stays in the list on purpose -- it is a record, not a
   mistake to be swept away -- but it should not read as live work. */
.order-row.is-cancelled > summary { opacity: .55; }
.order-row.is-cancelled .order-status { color: #A6392E; }

.order-who { font-size: 14.5px; margin-bottom: 6px; }
.order-note {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
  border-left: 2px solid var(--rule);
  padding-left: var(--s2);
  margin-bottom: var(--s3);
}
.order-items { list-style: none; margin: 0 0 var(--s3); padding: 0; }
.order-items li {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  padding-block: 7px;
  border-bottom: 1px solid var(--rule);
  font-size: 14.5px;
}
.order-items em { color: var(--muted); font-style: normal; }
.order-sums { font-size: 14px; color: var(--muted); margin-bottom: var(--s3); }
.order-sums strong { color: var(--ink); font-weight: 600; }

@media (max-width: 640px) {
  .order-row > summary { grid-template-columns: 1fr auto; row-gap: 4px; }
  .order-when { grid-column: 1 / -1; order: 3; }
}

/* ---------- WAITING LIST (admin) ---------- */
.wait-group {
  border-top: 1px solid var(--rule);
  padding-block: var(--s3);
}
.wait-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s2); margin-bottom: 10px;
}
.wait-head h3 { font-size: 19px; }
.wait-count {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
/* selectable in one gesture -- the next thing she does is paste these */
.wait-emails {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink);
  word-break: break-word;
  user-select: all;
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: var(--s2) var(--s3);
}
.wait-history { margin-top: var(--s4); }
.wait-past { font-size: 13.5px; color: var(--muted); line-height: 1.7; margin-bottom: 10px; }
.wait-past strong { color: var(--ink); font-weight: 600; }

.admin-item-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.admin-item-actions .admin-msg { margin-top: 0; }
.btn.danger { border-color: #C8B0AC; color: #A6392E; }
.btn.danger:hover { background: #A6392E; border-color: #A6392E; color: var(--ground); }

@media (max-width: 720px) {
  .admin-grid { grid-template-columns: 1fr; }
  .fabric-check-grid { grid-template-columns: 1fr; }
  .admin-item > summary { gap: var(--s2); }
  .admin-item-name { font-size: 17px; }
  .photo-row { flex-direction: column; }
}

/* iOS Safari zooms the whole page when a text field under 16px takes focus.
   Applied to every text field, not just this one, so the order form and the
   admin behave the same way on a phone. */
@media (max-width: 600px) {
  .notify-row input,
  .field input, .field textarea, .field select { font-size: 16px; }
}