/* ═══════════════════════════════════════════════════════════════════════════
   Memarie Vintage — shop.memarievintage.com

   The shop window. It is a sibling of the link page at memarievintage.com and
   takes its palette and its type from there deliberately, so that the button
   on the bio page and the page it opens read as one house.

   ⚠️ The palette values are COPIED from ../../memarievintage-site/public/css/
   site.css, which copied them from Apps/Memarie/src/ui/theme.ts. Copied, not
   imported: neither page has a build step for CSS and that is the point. If a
   colour changes in the app it changes here by hand or not at all.

   The three rules carried across, unchanged, because they ARE the design:

     1. 70/20/7/3 — the field stays cream, pink is punctuation. On this page the
        photographs are the large colourful things, so the chrome around them
        gets quieter than on the link page rather than louder.
     2. Pink is a FILL, not a text colour. #e7168d measures 4.29:1 on white and
        fails AA; #c2185b is the only pink allowed to carry text.
     3. Shadows are HARD — an offset with no blur. The 2003 sticker edge.

   ── ⛔ AND ONE RULE THAT IS THIS PAGE'S OWN ────────────────────────────────

   **Every card is the same height and every photograph is the same square.**
   Her photographs arrive 1280×1280 from Shopify but her titles do not arrive
   the same length — 21 to 57 characters — so a grid that lets the card size
   itself staggers, and a staggered grid of one-of-a-kind pieces reads as a
   fault rather than as a style. The title box is therefore two lines, fixed,
   and clipped.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/playfair-display-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --cream: #fff9f5;
  --ivory: #fdf3ee;
  --card: #ffffff;
  --cocoa: #3b2a2a;        /* 12.98:1 on cream — body text */
  --taupe-ink: #796060;    /*  5.50:1 on cream — secondary text */
  --pink: #e7168d;         /* the brand pink. FILL ONLY. */
  --pink-deep: #c2185b;    /* the only pink that may be text or a label ground */
  --blush: #ffe4ef;
  --border: #f8bbd0;
  --edge: rgba(59, 42, 42, 0.20);

  --font: 'Playfair Display', 'Iowan Old Style', 'Palatino Linotype', Palatino,
          Georgia, serif;

  color-scheme: light;
}

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

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--font);
  /* Playfair's default figures are old-style: "00s" reads as "oos" and £61.44
     sits at x-height. Lining figures are a legibility fix, not a preference —
     and on a page that is mostly prices it is the single most load-bearing
     line in this file. */
  font-variant-numeric: lining-nums;
  color: var(--cocoa);
  background: var(--cream);
  background-image:
    radial-gradient(120% 40% at 50% -6%, #ffeef5 0%, #fdf3ee 40%, #fff9f5 72%);
  background-repeat: no-repeat;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* viewport-fit=cover is set in the document, so the notch has to be paid for
   here or the first row of cards sits under it on an iPhone. */
.page {
  max-width: 68rem;
  margin: 0 auto;
  padding:
    calc(1.75rem + env(safe-area-inset-top))
    calc(1.1rem + env(safe-area-inset-right))
    calc(2.5rem + env(safe-area-inset-bottom))
    calc(1.1rem + env(safe-area-inset-left));
}

/* ── The head ──────────────────────────────────────────────────────────── */

.wordmark { margin: 0 auto; text-align: center; }
.wordmark a { display: inline-block; }
.wordmark img {
  width: min(15rem, 62vw);
  height: auto;
}

.strap {
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--taupe-ink);
}

.count {
  margin: 1.4rem 0 1.1rem;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink-deep);
}

/* ── The grid ──────────────────────────────────────────────────────────── */

/* Mobile first and genuinely one column at 360px: two 160px cards side by side
   make her photographs too small to judge a garment from, which is the only
   thing this page is for. */
.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 30rem) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48rem) { .grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
@media (min-width: 64rem) { .grid { grid-template-columns: repeat(4, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  /* Rule 3: an offset with no blur. */
  box-shadow: 3px 3px 0 var(--edge);
  overflow: hidden;
}

/* The square. `aspect-ratio` rather than a padding hack so the space is
   reserved before the photograph arrives and nothing shifts — her images are
   1280×1280 and come off a CDN we do not control the latency of. */
.shot {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--ivory);
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.8rem 0.85rem 0.9rem;
  flex: 1;
}

.brand {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink-deep);
  min-height: 0.95rem;   /* holds the line even on the pieces with no brand */
}

/* Two lines, fixed, clipped — see the rule at the head of this file. */
.title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.32 * 0.95rem);
}

.meta {
  font-size: 0.75rem;
  color: var(--taupe-ink);
  min-height: 1rem;
}

.price {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
}

/* ── The Buy button ────────────────────────────────────────────────────── */

/* 44px minimum, because this is opened from an Instagram bio on a phone and a
   pill that misses is a piece not sold. */
.buy {
  display: block;
  margin-top: 0.6rem;
  padding: 0.72rem 1rem;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  box-shadow: 2px 2px 0 var(--edge);
  cursor: pointer;
}
.buy:hover { background: var(--pink-deep); }
.buy:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--edge); }

.buy.sold {
  background: var(--ivory);
  color: var(--taupe-ink);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

a:focus-visible, .buy:focus-visible {
  outline: 3px solid var(--pink-deep);
  outline-offset: 2px;
}

/* ── The foot ──────────────────────────────────────────────────────────── */

.foot {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--taupe-ink);
}
.foot a { color: var(--pink-deep); }
.foot p { margin: 0.2rem 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .buy:active { transform: none; }
}