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

   The link page Jess's Instagram bio points at. The palette values below are
   copied from Apps/Memarie/src/ui/theme.ts (copied, not imported — this page
   has no build step and no dependencies, and that is the point).

   ── The TYPE deliberately does not match the app, and must not be "fixed" ──

   The app is Jess's tool and is set in Fredoka + Nunito Sans, which are
   friendly and a bit playful. This page is the boutique's public face, and
   Jess's ruling is that it should be classier. So it takes its cue from the
   mark instead: a copperplate script over letterspaced serif capitals. The
   whole page is therefore ONE face — Playfair Display — whose high stroke
   contrast and fine serifs are the same idiom as the VINTAGE lockup.

   Anyone reconciling this back to Nunito/Fredoka for consistency would be
   undoing the decision, not tidying it. See README.

   Three rules carried over from the theme, and they are the whole design:

     1. 70/20/7/3 — the field stays cream, pink is punctuation. The mark is the
        only large pink thing on the page.
     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 or a label.
     3. Shadows are HARD — an offset with no blur. That 2003 sticker edge is
        what makes a pill read as Y2K rather than as a 2024 Material button.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ONE family, one file: this is a bio link opened on phone data, so a second
   face has to earn its bytes and none could. Self-hosted so the page makes
   zero third-party requests and cannot be slowed down — or its visitors
   watched — by someone else's CDN. Google Fonts latin subset, variable, OFL.

   It replaced Fredoka + Nunito Sans and the page got LIGHTER: 38 KB of font
   instead of 61 KB. */
@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);

  /* Fallbacks are real faces, not `serif`: if the file 404s at 18:00 the page
     still looks deliberate rather than broken. Each is a serif that will not
     embarrass the mark. */
  --font: 'Playfair Display', 'Iowan Old Style', 'Palatino Linotype', Palatino,
          Georgia, serif;

  color-scheme: light;
}

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

body {
  margin: 0;
  /* The column is optically centred rather than pinned to the top: this is
     opened from an Instagram bio, so it lands inside that browser's chrome on
     phones of every height and should look composed on all of them. */
  display: grid;
  align-content: center;
  min-height: 100svh;
  font-family: var(--font);
  /* Playfair's default figures are old-style, which turns "00s vintage" into
     "oos vintage" — the zeros sit at x-height and read as letters. Lining
     figures are not a preference here, they are a legibility fix. */
  font-variant-numeric: lining-nums;
  color: var(--cocoa);
  background: var(--cream);
  /* The header wash, cream-dominant on purpose — a full pink ground would blow
     the 70/20/7/3 ratio on its own. */
  background-image:
    radial-gradient(120% 62% at 50% -8%, #ffeef5 0%, #fdf3ee 42%, #fff9f5 78%);
  background-repeat: no-repeat;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--blush); color: var(--cocoa); }

.page {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  padding:
    calc(2.75rem + env(safe-area-inset-top)) 1.25rem
    calc(2.5rem + env(safe-area-inset-bottom));
  text-align: center;
}

/* ── The mark ───────────────────────────────────────────────────────────── */

.wordmark { margin: 0 0 1.1rem; }

.wordmark img {
  display: block;
  width: 100%;
  max-width: 18.5rem;
  height: auto;
  margin-inline: auto;
}

/* The brand line. Sentence case with a full stop on purpose — set as capitals
   it stops being quiet, and the capital M is half the joke. */
.tagline {
  margin: 0 0 0.55rem;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--cocoa);
  text-wrap: balance;
}

/* What she actually sells, under the line that only implies it. */
.bio {
  margin: 0 0 1.4rem;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--taupe-ink);
  text-wrap: balance;
}

/* Decoration, and the one place the undiluted brand pink is allowed to sit on
   its own — it carries no information, so it has no contrast floor to clear. */
.flourish {
  margin: 0 0 1.9rem;
  font-size: 0.85rem;
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  color: var(--pink);
}

/* ── The buttons ────────────────────────────────────────────────────────── */

.links {
  display: grid;
  gap: 0.85rem;
}

.link {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  grid-template-areas: 'icon label' 'icon sub';
  align-items: center;
  column-gap: 0.95rem;

  min-height: 4.25rem;          /* well clear of the 44px tap-target floor */
  padding: 0.8rem 1.15rem;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  text-align: left;
  text-decoration: none;
  color: var(--cocoa);

  /* The frutiger gloss quote: a white highlight over the top half of a fill. */
  background:
    linear-gradient(180deg, #ffffff 0%, #fff9f5 62%, #fdf3ee 100%);
  box-shadow: 2px 3px 0 rgba(59, 42, 42, 0.13);

  transition: transform 120ms ease, box-shadow 120ms ease;
}

.link b {
  grid-area: label;
  font-size: 1.08rem;
  font-weight: 600;   /* 600 not 700: a Didone at full bold on a saturated
                         ground starts closing its own counters up */
  line-height: 1.3;
}

/* A hair of tracking at small sizes. Display serifs are fitted for headlines
   and set too tight at 13px; opening them up is most of what makes this
   readable at arm's length on a phone. */
.link small {
  grid-area: sub;
  font-size: 0.82rem;
  line-height: 1.4;
  letter-spacing: 0.012em;
  color: var(--taupe-ink);
  overflow-wrap: anywhere;
}

/* The one pink button. `primary` is meant to be used once — it is the shop. */
.link.primary {
  border-color: #a8144e;
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%,
                            rgba(255, 255, 255, 0.05) 46%,
                            rgba(0, 0, 0, 0.07) 100%),
    var(--pink-deep);          /* white on #c2185b = 5.87:1 */
  box-shadow: 3px 4px 0 var(--edge);
}

.link.primary small { color: var(--blush); }  /* 5.20:1 on the pink ground */

/* ── Icons ─────────────────────────────────────────────────────────────────
   Two stacked grid items in the same cell: ::before is the chip, ::after is
   the glyph, masked so it takes its colour from the button rather than needing
   a second copy of every file. Adding an icon is one `--icon:` line. */

.link::before {
  content: '';
  grid-area: icon;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--blush);
}

.link.primary::before { background: rgba(255, 255, 255, 0.22); }

@supports ((mask-image: url('')) or (-webkit-mask-image: url(''))) {
  .link::after {
    content: '';
    grid-area: icon;
    place-self: center;
    width: 1.4rem;
    height: 1.4rem;
    background: var(--pink-deep);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
  }
  .link.primary::after { background: #ffffff; }
}

.link[data-icon='bag'] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.6 8h12.8l-1.1 11.4a1.6 1.6 0 0 1-1.6 1.4H8.3a1.6 1.6 0 0 1-1.6-1.4L5.6 8Z'/%3E%3Cpath d='M9 9.4V6.6a3 3 0 0 1 6 0v2.8'/%3E%3C/svg%3E");
}

.link[data-icon='instagram'] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3.2' y='3.2' width='17.6' height='17.6' rx='5.2'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.1' cy='6.9' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

.link[data-icon='mail'] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='5' width='18.4' height='14' rx='3'/%3E%3Cpath d='M3.6 7.4 12 13.3l8.4-5.9'/%3E%3C/svg%3E");
}

/* ── States ────────────────────────────────────────────────────────────────
   The press is the sticker being pushed into the page: it travels exactly as
   far as its shadow is deep, so the offset closes to nothing. */

@media (hover: hover) {
  .link:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 4px 0 rgba(59, 42, 42, 0.17);
  }
  .link.primary:hover { box-shadow: 4px 5px 0 var(--edge); }
}

.link:active {
  transform: translate(2px, 3px);
  box-shadow: 0 0 0 rgba(59, 42, 42, 0.13);
}

/* The ring sits on the cream field via the offset, so it is measured against
   cream — 12.98:1 — on the pink button as well as the white ones. */
.link:focus-visible {
  outline: 3px solid var(--cocoa);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .link, .link:hover, .link:active { transition: none; transform: none; }
}

/* ── Foot ──────────────────────────────────────────────────────────────── */

/* Widely tracked, because that is the one gesture the lockup makes — VINTAGE
   under the script — and the footer is the right place to answer it. */
.foot {
  margin-top: 2.1rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--taupe-ink);
}

/* A short phone (SE, or anything with the Instagram browser's chrome eating
   the viewport) gets the margins back rather than a scrollbar. */
@media (max-height: 700px) {
  .page { padding-top: calc(1.75rem + env(safe-area-inset-top)); }
  .wordmark img { max-width: 15.5rem; }
  .flourish { margin-bottom: 1.35rem; }
}

/* The palette is a cream boutique in any light. Nothing here inverts — the
   declaration exists so a dark-mode browser does not invert it for us. */
@media (prefers-color-scheme: dark) {
  body { background-color: var(--cream); color: var(--cocoa); }
}