/* pedimart: one composed salon scene, red desk, warm counter, green door. */
:root {
  --wall: #f4b3bc;
  --lacquer: #b8162f;
  --lacquer-deep: #8e0f23;
  --lacquer-edge: #d23a52;
  --desk-front: #8b050b;   /* sampled from the bottom of hero-scene.webp so the form band continues the desk */
  --green: #0f5a43;
  --green-deep: #0a4433;
  --felt: #1c1a1d;
  --gold: #c9a24a;
  --gold-deep: #9c7a2c;
  --terrazzo: #f1dfda;
  --paper: #fbf6ef;
  --slip: #fbe3e7;
  --ink: #2a1f24;
  --ink-soft: #5e4c55;
  --rule: rgba(184, 22, 47, .22);
  --shadow: 0 14px 28px -12px rgba(60, 10, 25, .45);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --board: "Oswald", "Archivo Narrow", "Arial Narrow", sans-serif;
  --body: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --hand: "Caveat", "Bradley Hand", cursive;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--wall); color: var(--ink); font: 400 1.0625rem/1.6 var(--body); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1160px, 100% - 2.5rem); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 10; background: var(--green); color: #fff; padding: .6rem 1rem; border-radius: 6px; font-weight: 700; }
.skip:focus { top: 1rem; }
.sec-title { font: 600 clamp(2rem, 4vw, 3rem)/1.05 var(--board); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .7rem; color: var(--lacquer-deep); text-wrap: balance; }
.sec-lede { margin: 0; color: var(--ink-soft); max-width: 60ch; }

/* ---------- header ---------- */
.bar .wrap { display: flex; justify-content: space-between; align-items: center; padding-block: 1.1rem; }
.wordmark { font: 600 1.5rem/1 var(--board); letter-spacing: .04em; text-transform: none; text-decoration: none; color: var(--lacquer-deep); }
.wordmark span { color: var(--green); }
.bar nav { display: flex; align-items: center; gap: 1.6rem; font-weight: 700; font-size: .95rem; color: var(--lacquer-deep); }
.bar nav a { text-decoration: none; }
.bar nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bar nav .cta { background: var(--green); color: #fff; padding: .55rem 1rem; border-radius: 6px; }
.bar nav .cta:hover { background: var(--green-deep); text-decoration: none; }
/* on the landing page the bar sits on the scene's plain upper wall */
.hero-page .bar { position: absolute; inset: 0 0 auto; z-index: 2; }

/* ---------- hero: one composed scene ----------
   hero-scene.webp is 1536x1024. Shown rows 110-900 (the blank upper wall above, and the
   desk front below, are cropped). The felt board's inner area is x 301-891, y 239-607. */
.hero { position: relative; overflow: hidden; aspect-ratio: 1536 / 790; background: #edb2a6; }
.hero-scene { position: absolute; left: 0; top: -13.92%; width: 100%; height: auto; display: block; }
.board-text {
  position: absolute; left: 19.6%; width: 38.4%; top: 16.33%; height: 46.58%;
  margin: 0; display: grid; place-content: center; text-align: center;
  font: 500 3.4vw/1.12 var(--board); letter-spacing: .07em; text-transform: uppercase;
  color: #f4efe8;
  text-shadow: 0 -1px 0 rgba(255,255,255,.3), 0 2px 0 rgba(0,0,0,.7), 0 5px 7px rgba(0,0,0,.45);
}

/* ---------- desk front: waitlist (plain CSS continuing the scene's desk) ---------- */
.desk-front {
  background: linear-gradient(rgba(0,0,0,.18), transparent 1.2rem), var(--desk-front);
  padding-block: 2.2rem 3.4rem; color: #fff4f5;
}
.panel { max-width: 640px; margin-inline: auto; text-align: center; }
.panel h2 { display: block; font: 500 1.15rem/1 var(--board); letter-spacing: .18em; text-transform: uppercase; margin: 0 0 .9rem; }
/* disclosure follows the form so the email field stays in the first viewport */
.panel-kicker { margin: 0 0 .55rem; font: 600 1.05rem/1.3 var(--body); color: #fff; }
.panel-lede { margin: 1.1rem auto 0; max-width: 54ch; color: #ffe3e7; font-size: 1rem; }
.signup { display: flex; border-radius: 8px; overflow: hidden; box-shadow: 0 6px 14px -8px rgba(0,0,0,.6); }
.signup input {
  flex: 1; min-width: 0; border: 0; padding: 1rem 1.1rem;
  font: 500 1rem var(--body); background: #fde4e8; color: var(--ink);
}
.signup input::placeholder { color: #8a6a73; }
.signup input:focus { outline: 3px solid var(--wall); outline-offset: -3px; }
.signup button {
  border: 0; padding: 0 1.4rem;
  font: 500 1.05rem var(--board); letter-spacing: .1em; text-transform: uppercase;
  background: var(--green); color: #fff; cursor: pointer; transition: background .2s;
}
.signup button:hover { background: var(--green-deep); }
.signup button:disabled { opacity: .7; cursor: default; }
.fine { margin: .9rem 0 0; font-size: .9rem; color: #f7cfd6; }
.fine a { color: inherit; text-underline-offset: 2px; }
.fine svg { vertical-align: -2px; margin-right: .25rem; }
.form-msg { margin: .6rem 0 0; min-height: 1.4em; font-weight: 700; }
.form-msg.ok { color: #c9f2e1; }
.form-msg.err { color: #ffe0e5; }

/* example tag on every mock */
.ex-tag { display: inline-block; justify-self: start; margin: 0; font: 600 .78rem/1 var(--body); letter-spacing: .04em; background: var(--paper); color: var(--lacquer-deep); padding: .35rem .6rem; border-radius: 999px; }
/* honeypot for bots; never shown */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- door policy: plain green, sign as a simple panel ---------- */
.door-sec { background: var(--green); color: #f3fbf7; padding-block: 4.5rem; }
.door-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3.5rem; align-items: center; }
.door-sec .sec-title { color: var(--wall); }
.door-sec .sec-lede { color: #cfe7dd; margin-bottom: 1.8rem; }
.policy { list-style: none; margin: 0; padding: 0; }
.policy li { display: grid; grid-template-columns: 52px 1fr; gap: 1rem; align-items: start; padding: 1rem 0; border-top: 1px solid rgba(255,255,255,.14); }
.policy .ico { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--wall); display: grid; place-items: center; color: var(--wall); }
.policy h3 { margin: 0 0 .2rem; font: 500 1.1rem/1.2 var(--board); letter-spacing: .12em; text-transform: uppercase; }
.policy p { margin: 0; color: #cfe7dd; }
.door-foot { margin: 1.6rem 0 0; font: 500 .9rem/1.3 var(--board); letter-spacing: .12em; text-transform: uppercase; color: var(--wall); }
.door-foot svg { vertical-align: -1px; margin-right: .4rem; }

/* ---------- menu card ---------- */
.menu { padding-block: 5rem; }
.menu .sec-title { color: var(--lacquer-deep); }
.price-card {
  background: var(--paper); border-radius: 6px;
  padding: 2.2rem clamp(1.4rem, 4vw, 2.8rem); max-width: 860px; margin-top: 2.2rem;
  /* printed menu frame: a lacquer double rule inset from the card edge */
  outline: 2px solid var(--lacquer); outline-offset: -12px;
  box-shadow: var(--shadow), inset 0 0 0 16px var(--paper), inset 0 0 0 17px var(--rule);
}
.price-row { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1.5rem; padding: 1.1rem 0; border-top: 1px dashed var(--rule); }
.price-row:first-child { border-top: 0; }
.price-row h3 { margin: 0; font: 600 1.35rem/1.1 var(--board); letter-spacing: .04em; text-transform: uppercase; }
.price-row .tag { font: 600 1rem var(--board); letter-spacing: .08em; text-transform: uppercase; color: var(--green); white-space: nowrap; }
.price-row p { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); max-width: 66ch; }

/* ---------- chatters + tip jar ---------- */
.chat-sec { padding-block: 5rem; }
.chat-sec .sec-title { color: var(--lacquer-deep); }
.chat-sec .note { margin: 1.2rem 0 0; font-size: .88rem; color: var(--ink-soft); }
.chat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.can-cant { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.6rem; }
.can-cant h3 { font: 600 1.05rem/1 var(--board); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .6rem; }
.can-cant .yes h3 { color: var(--green); }
.can-cant .no h3 { color: var(--lacquer); }
.can-cant ul { list-style: none; margin: 0; padding: 0; }
.can-cant li { padding: .45rem 0; border-top: 1px solid var(--rule); }
.chat-demo { display: grid; grid-template-columns: 1fr 150px; gap: 1.5rem; align-items: end; }
.thread { background: var(--paper); border-radius: 12px; box-shadow: var(--shadow); padding: 1.1rem; display: grid; gap: .7rem; }
.thread .ex-tag { background: var(--slip); }
.msg { max-width: 88%; padding: .65rem .85rem; border-radius: 14px; font-size: .96rem; }
.msg.in { background: var(--slip); border-bottom-left-radius: 4px; }
.msg.out { justify-self: end; background: var(--lacquer); color: #fff; border-bottom-right-radius: 4px; }
.log { border-top: 1px solid var(--rule); padding-top: .6rem; font-size: .84rem; color: var(--ink-soft); }
.log div { display: flex; justify-content: space-between; gap: 1rem; }
.tipjar { text-align: center; margin: 0; }
.tipjar img { width: 150px; height: auto; display: block; margin-inline: auto; filter: drop-shadow(6px 10px 10px rgba(90,20,35,.28)); }
.tipjar figcaption { font: 700 1.25rem var(--hand); color: var(--lacquer-deep); }

/* ---------- house rules ---------- */
.rules { background: var(--felt); color: #f4efe8; padding-block: 4.5rem; }
.rules .sec-title { color: var(--wall); }
.rules .sec-lede { color: #cfc6cb; margin-bottom: 1.6rem; }
.rules ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; }
.rules li { padding: 1rem 0; border-top: 1px solid rgba(255,255,255,.14); }
.rules li strong { display: block; font: 500 1.15rem/1.2 var(--board); letter-spacing: .08em; text-transform: uppercase; color: var(--wall); margin-bottom: .2rem; }
.rules li span { color: #cfc6cb; }
.rules .more { margin-top: 1.6rem; }
.rules .more a { color: var(--wall); font-weight: 700; }

/* ---------- closing ---------- */
.close { background: var(--lacquer); color: #fff4f5; padding-block: 4.5rem; border-top: 10px solid var(--lacquer-deep); }
.close .sec-title { color: #fff4f5; }
.close .sec-lede { color: #f7cfd6; margin-bottom: 1.8rem; }
.close-form { max-width: 720px; }
.close-form fieldset { border: 0; margin: 0 0 1.3rem; padding: 0; }
.close-form legend { font-weight: 700; margin-bottom: .6rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips label { position: relative; padding: .5rem .9rem; border-radius: 999px; border: 2px solid rgba(255,255,255,.4); font-weight: 600; font-size: .95rem; cursor: pointer; }
.chips input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chips label:has(input:checked) { background: var(--wall); color: var(--lacquer-deep); border-color: var(--wall); }
.chips label:has(input:focus-visible) { outline: 3px solid #fff; outline-offset: 2px; }
.close .fine-label { display: block; font-weight: 700; margin-bottom: .6rem; }

footer { background: #140f12; color: #cbbfc5; padding-block: 2.2rem; font-size: .92rem; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; }
footer nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
footer a { color: #f4e8ec; }

/* ---------- product mocks: plain UI cards, always tagged as examples ---------- */
.avatar { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--wall); color: var(--lacquer-deep); font: 600 .78rem/1 var(--board); letter-spacing: .06em; }
.cover { position: relative; aspect-ratio: 1; border-radius: 8px; display: flex; align-items: flex-end; justify-content: space-between; padding: .55rem .6rem; color: #fff; font: 600 .78rem/1 var(--body); overflow: hidden; }
.cover::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 45%); }
.cover > * { position: relative; }
.cover.c1 { background: linear-gradient(150deg, var(--lacquer-edge), var(--lacquer-deep)); }
.cover.c2 { background: linear-gradient(150deg, #2d7a61, var(--green-deep)); }
.cover.c3 { background: linear-gradient(150deg, #e0bd6c, var(--gold-deep)); }
.cover.c4 { background: repeating-linear-gradient(135deg, var(--slip) 0 10px, #f6d3da 10px 20px); color: var(--lacquer-deep); justify-content: center; align-items: center; }

.shop-sec { background: var(--paper); padding-block: 4.5rem; }
.shop-head { margin-bottom: 2rem; }
.shop-mock { background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 1.2rem 1.3rem 1.4rem; }
.shop-profile { display: flex; align-items: center; gap: .8rem; padding-bottom: 1rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--rule); }
.shop-profile strong { display: block; font-weight: 700; }
.shop-profile .ex-tag { margin-left: auto; background: var(--slip); }
.verified { font-size: .85rem; color: var(--green); font-weight: 600; }
.sets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.set h3 { margin: .6rem 0 .15rem; font: 700 1rem/1.25 var(--body); }
.set p { margin: 0; display: flex; justify-content: space-between; gap: .5rem; font-size: .9rem; color: var(--ink-soft); }
.set b { color: var(--ink); font-variant-numeric: tabular-nums; }

.inbox { background: var(--paper); color: var(--ink); border-radius: 14px; box-shadow: 0 22px 40px -18px rgba(0,0,0,.55); padding: 1rem 1.1rem 1.1rem; }
.inbox-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.inbox-top strong { font: 600 1.05rem/1 var(--board); letter-spacing: .1em; text-transform: uppercase; color: var(--lacquer-deep); }
.inbox .ex-tag { background: var(--slip); }
.switch { flex: none; width: 2.4rem; height: 1.4rem; border-radius: 999px; background: #c9bcc1; position: relative; }
.switch::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.switch.is-on { background: var(--green); }
.switch.is-on::after { left: 1.15rem; }
.gate { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: .6rem .8rem; font-size: .9rem; font-weight: 600; }
.threads { list-style: none; margin: .4rem 0 0; padding: 0; }
.threads li { display: flex; gap: .75rem; padding: .8rem 0; border-bottom: 1px solid var(--rule); }
.threads p { margin: 0; }
.threads .who { font-weight: 700; }
.badge { margin-left: .35rem; font: 600 .7rem/1 var(--body); background: var(--gold); color: var(--felt); padding: .2rem .4rem; border-radius: 4px; vertical-align: 1px; }
.threads .prev { font-size: .92rem; color: var(--ink-soft); }
/* buyer stat pills; named .stats so they don't collide with the form's .chips */
.stats { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem !important; }
.stats span { font-size: .75rem; font-weight: 600; background: var(--slip); color: var(--lacquer-deep); padding: .15rem .45rem; border-radius: 999px; font-variant-numeric: tabular-nums; }
.held-row { display: flex; gap: .75rem; padding: .8rem 0; opacity: .62; }
.held-row p { margin: 0; }
.held-row .who { font-weight: 700; }
.held-row .prev { font-size: .92rem; color: var(--ink-soft); }
.held-tag { margin-left: .35rem; font: 600 .7rem/1 var(--body); background: var(--ink-soft); color: #fff; padding: .2rem .4rem; border-radius: 4px; vertical-align: 1px; }
.held { margin: .2rem 0 0; font-size: .85rem; color: var(--ink-soft); }

.msg-card { display: flex; align-items: center; gap: .7rem; background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: .5rem .7rem .5rem .5rem; }
.msg-card .cover { width: 2.6rem; aspect-ratio: 1; border-radius: 6px; padding: 0; justify-content: center; align-items: center; }
.msg-card div:nth-child(2) { flex: 1; min-width: 0; }
.msg-card strong { display: block; font-size: .92rem; }
.msg-card span { font-size: .8rem; color: var(--ink-soft); }
.msg-card b { font-variant-numeric: tabular-nums; }
.sold { justify-self: center; font: 600 .8rem/1 var(--body); color: var(--green); background: #e3f1ec; padding: .4rem .7rem; border-radius: 999px; }

/* ---------- legal pages ---------- */
.doc-head { background: var(--lacquer); color: #fff4f5; padding-block: 3rem; }
.doc-head h1 { font: 600 clamp(2.2rem, 5vw, 3.4rem)/1 var(--board); letter-spacing: .05em; text-transform: uppercase; margin: 0 0 .5rem; }
.doc-head p { margin: 0; color: #f7cfd6; }
.doc { background: var(--paper); padding-block: 3rem 5rem; }
.doc article { max-width: 70ch; }
.doc h2 { font: 600 1.4rem/1.2 var(--board); letter-spacing: .05em; text-transform: uppercase; color: var(--lacquer-deep); margin: 2.4rem 0 .6rem; }
.doc li { margin: .35rem 0; }
.doc .updated { font: 500 .8rem/1 var(--board); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 1.6rem 0 1rem; }
.doc .note { background: var(--slip); border: 1px solid var(--rule); border-radius: 6px; padding: .2rem 1.2rem; margin: 1.2rem 0; }
.doc code { font-size: .9em; background: var(--slip); padding: .05rem .3rem; border-radius: 3px; }
.draft-note { border: 2px dashed var(--lacquer); border-radius: 8px; padding: 1rem 1.2rem; font-weight: 600; background: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .door-grid, .chat-grid { grid-template-columns: 1fr; }
  .sets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inbox { max-width: 480px; }
  .rules ol { grid-template-columns: 1fr; }
  .bar nav a:not(.cta) { display: none; }
}
/* phones and small tablets: the scene is drawn at a fixed 840px wide (rows 0-900 shown) and
   centred on the letterboard (felt centre x = 596/1536 → 326px), clamped so it never leaves a gap */
@media (max-width: 840px) {
  .hero { aspect-ratio: auto; height: 492px; --img-left: clamp(calc(100% - 840px), calc(50% - 326px), 0px); }
  .hero-scene { width: 840px; top: 0; left: var(--img-left); }
  .board-text { left: calc(var(--img-left) + 164.6px); width: 322.6px; top: 130.7px; height: 201.3px; font-size: 28px; }
}
@media (max-width: 600px) {
  .signup { flex-direction: column; }
  .signup button { padding: .95rem; }
  .can-cant, .chat-demo { grid-template-columns: 1fr; }
  .tipjar img { width: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}