/* THE HOUSE KIT for mockups. Lifted from the live code on Oct 6 2026, not retyped from memory:

     walls, inks, lines   gallery/functions/[[path]].ts, the :root and html[data-theme="dark"] blocks
                          (search "--paper:#f4f3ef"); the 20+ artist wall tones live in the TONES
                          registry in the same file
     Manrope, serif       gallery/public/fonts/*.woff2 (the gallery's own files, copied here)
     mark                 brand-public/lesserspace-mark.png, the file the house mails carry
                          (supabase/functions/_shared/email.ts MARK_URL)
     mail card            supabase/functions/_shared/email.ts: INK #111214, MUTED #75756f,
                          LINE #e7e6e2, PAPER #fcfcfb, CARD #fff

   FIXED: the tokens below, Manrope, the mark, hairline rules, the card. A take may choose WHICH
   token a thing wears; it never invents a new gray or a new ink. An artist's accent comes from the
   content snapshot (logo_color), never from here.

   Re-lift when the live tokens change: grep the :root block above and update this file. */

@font-face{ font-family:"Manrope"; src:url("/assets/manrope.woff2") format("woff2-variations"); font-weight:100 900; font-display:swap; }

/* the gallery's house walls, light (paper) and dark (charcoal) */
:root{
  --paper:#f4f3ef; --ink:#1c1b18; --gray:#6f6c64; --ldesc:#3a3833; --faint:#8b877c;
  --line:#e5e1d7; --hair:#ece9e0; --card:#fff; --card2:#faf9f5; --pillbg:#f6f5f2;
  --ok:#5c9e6c; --wait:#c89a3d; --off:#cbc7bd; --collected:#c2603f;
  --barbg:rgba(255,255,255,.94);
  --accent:#526271;               /* placeholder; set from the artist's logo_color */
  --sans:"Manrope", system-ui, sans-serif;
  --serif:"Instrument Serif", Georgia, "Times New Roman", serif;
  --crumbgap:32px;                /* the house rhythm under the header mark */
  --rhythm:44px;                  /* what follows a header opens on 44px */
  --pv-railw:288px; --pv-gap:54px;/* the piece view's rail and gap */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}
html[data-theme="dark"]{
  --paper:#0e0e12; --ink:#ece9e2; --gray:#a6a29a; --ldesc:#d6d2c8; --faint:#6f6b62;
  --line:#2b2b31; --hair:#1f1f25; --card:#17171c; --card2:#1c1c22; --pillbg:#17171c;
  --ok:#6bbd82; --wait:#d0aa54; --off:#4c4c55; --collected:#d4795a;
  --barbg:rgba(10,10,13,.92);
}

/* the mail's card, for any mockup of a mail or a receipt (one look, CLAUDE.md) */
.mail-page{ background:#fcfcfb; color:#111214; }
.mail-card{ background:#fff; border:1px solid #e7e6e2; max-width:440px; width:100%; margin:0 auto; padding:44px 40px; }
.mail-gray{ color:#75756f; }

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ background:var(--paper); color:var(--ink); font-family:var(--sans); font-weight:300; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; user-select:none; -webkit-user-drag:none; }
a{ color:inherit; text-decoration:none; }
textarea::placeholder{ max-width:100%; }   /* Safari at 115% zoom, see the gallery sheet */

/* no orphans: ask the browser, and glue the last two words in the copy as well (kit.js) */
h1,h2,h3,p,figcaption,.copy{ text-wrap:pretty; }

/* the house type voices */
.caps{ font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; font-weight:400; }
.wordmark{ font-size:13px; letter-spacing:.35em; font-weight:400; text-transform:uppercase; }
.work-title{ font-weight:200; letter-spacing:.01em; }
.meta{ color:var(--gray); font-weight:400; font-size:13px; letter-spacing:.02em; }
.prose{ color:var(--ldesc); line-height:1.7; }

/* hairlines and the art on the wall: a soft lift on paper, a faint border on dark */
.rule{ border:0; border-top:1px solid var(--line); }
.hang{ box-shadow:0 18px 40px -22px rgba(20,18,16,.45), 0 2px 6px -2px rgba(20,18,16,.18); }
html[data-theme="dark"] .hang{ box-shadow:none; outline:1px solid var(--line); }

/* the one button: full width ink outline, square corners (only a button looks like a button) */
.btn{ display:block; width:100%; text-align:center; border:1px solid var(--ink); background:transparent;
  color:var(--ink); padding:15px 18px; font:400 11.5px/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; cursor:pointer; }
.btn:hover{ background:var(--ink); color:var(--paper); }
.flag{ color:var(--accent); font-size:11px; letter-spacing:.3em; text-transform:uppercase; font-weight:400; }

/* the house mark */
.mark{ width:20px; height:20px; display:inline-block; vertical-align:middle; }
html[data-theme="dark"] .mark{ filter:invert(1); }

/* motion: respect the visitor, and the stage's switches */
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
html[data-paused] *, html[data-paused] *::before, html[data-paused] *::after{ animation-play-state:paused !important; }