/* ==========================================================================
   Mimi Bland — base styles (shared by every page)
   Tokens, reset, type, buttons, header, mobile menu, footer.
   ========================================================================== */

/* ---------- design tokens ---------- */
:root {
  --ink: #0A0410;          /* page background */
  --ink-2: #120720;        /* raised bands (ticker) */
  --ink-3: #140822;        /* cards, inputs */
  --ink-4: #1A0B26;        /* image placeholders */
  --ink-footer: #07020C;
  --white: #FFFFFF;
  --cream: #F5EEFC;        /* light button */
  --lilac: #B98CE8;        /* eyebrows, numbers */
  --lilac-2: #CDA8F2;      /* italic accent words */
  --lilac-3: #E4C8FF;
  --lilac-soft: #D9C2F5;   /* nav links */
  --text: #EAE4F2;         /* body copy (brightened again 20 Oct) */
  --text-2: #DDD6E8;       /* secondary copy */
  --muted: #C3B9D3;
  --line: rgba(217, 194, 245, .16);
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --script: 'Pinyon Script', cursive;
  --gutter: clamp(20px, 5vw, 72px);
  --max: 1320px;
}

/* ---------- reset (zero specificity, so components can set their own margins) ---------- */
*, *::before, *::after { box-sizing: border-box; }
:where(h1, h2, h3, p, ul, ol, figure, blockquote) { margin: 0; }
:where(ul, ol) { padding: 0; list-style: none; }
:where(button, input) { font: inherit; color: inherit; }
img { max-width: 100%; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: #E9D5FF; }
a:hover { color: var(--white); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid #E9D5FF; outline-offset: 3px; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: 999px; background: var(--cream); color: #1A0B26; font-weight: 500; text-decoration: none; }
.skip-link:focus { top: 16px; }

/* ---------- layout ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.px { padding-left: var(--gutter); padding-right: var(--gutter); }
.sec { padding: 120px 0; }

/* ---------- type ---------- */
.k { display: inline-flex; align-items: center; gap: 14px; font-size: 11.5px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--lilac); }
.k::before { content: ""; width: 36px; height: 1px; background: currentColor; opacity: .8; }
.k.both::after { content: ""; width: 36px; height: 1px; background: currentColor; opacity: .8; }
.h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(44px, 5vw, 72px); line-height: 1.04; letter-spacing: -.01em; color: var(--white); }
.h2 em { font-style: italic; font-weight: 400; color: var(--lilac-2); }
.body { font-size: 18px; line-height: 1.75; color: var(--text); }

/* ---------- buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 30px; border: 0; border-radius: 999px; background: var(--cream); color: #1A0B26; font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: .03em; text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn:hover { color: #1A0B26; background: var(--white); }
.btn.gh { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1px rgba(233, 213, 255, .45); }
.btn.gh:hover { color: var(--white); background: transparent; box-shadow: inset 0 0 0 1px #E9D5FF; }
.btn.sm { min-height: 44px; padding: 0 22px; font-size: 13px; }
.lnk { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; white-space: nowrap; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--lilac-3); }
.lnk svg { width: 18px; height: 18px; }
.lnk:hover { color: var(--white); }

/* ---------- header ---------- */
.hd { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 92px; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wm { font-family: var(--serif); font-weight: 500; font-size: 20px; letter-spacing: .26em; text-transform: uppercase; text-decoration: none; color: var(--cream); white-space: nowrap; }
.wm:hover { color: var(--white); }
/* the logo (assets/images/logo/mimi-bland-logo.png), white on transparent */
.wm img { display: block; width: auto; height: 44px; }
.ft-logo img { height: 54px; }
.nav { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); }
.nav a.n { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--lilac-soft); padding: 14px 0; white-space: nowrap; }
.nav a.n:hover { color: var(--white); }
.nav a.n[aria-current="page"] { color: var(--white); box-shadow: inset 0 -1px 0 rgba(233, 213, 255, .7); }
.menu-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1px rgba(233, 213, 255, .35); cursor: pointer; }
.menu-btn svg { width: 20px; height: 20px; }
.menu-btn .x { display: none; }
.menu-open .menu-btn .bars { display: none; }
.menu-open .menu-btn .x { display: block; }

/* mobile menu: a full-screen panel, shown and hidden without animation */
.mnav { position: fixed; inset: 0; z-index: 15; display: none; flex-direction: column; padding: 112px var(--gutter) 40px; background: var(--ink); overflow-y: auto; }
.menu-open .mnav { display: flex; }
.menu-open { overflow: hidden; }
.menu-open .hd { position: fixed; top: 0; left: 0; right: 0; }
.mnav a.m { padding: 16px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.1; color: var(--cream); text-decoration: none; }
.mnav a.m[aria-current="page"] { color: var(--lilac-2); }
.mnav .btn { margin-top: 32px; }

/* ---------- footer ---------- */
.ft { padding: 96px 0 40px; background: var(--ink-footer); border-top: 1px solid rgba(217, 194, 245, .12); }
.ft-nl { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 64px; padding-bottom: 64px; border-bottom: 1px solid rgba(217, 194, 245, .12); }
.ft-nlt { flex: 1 1 460px; min-width: 0; }
.ft-h { margin-top: 20px; font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 3.2vw, 46px); line-height: 1.1; color: var(--white); }
.ft-h em { font-style: italic; font-weight: 400; color: var(--lilac-2); }
.ft-p { margin-top: 16px; max-width: 520px; font-size: 16px; line-height: 1.7; color: var(--text-2); }
.ft-form { flex: 1 1 440px; min-width: 0; }
.ft-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ft-form input { flex: 1 1 240px; min-width: 0; min-height: 56px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--ink-3); box-shadow: inset 0 0 0 1px rgba(217, 194, 245, .3); color: var(--cream); font-family: var(--sans); font-size: 15px; }
.ft-form input::placeholder { color: #B3A8C6; }
.ft-form input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px #F0A6C8; }
.ft-msg { min-height: 22px; margin-top: 12px; font-size: 14px; color: var(--lilac-3); }
.ft-cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px 64px; padding: 64px 0; }
.ft-brand { flex: 1 1 280px; min-width: 0; }
.ft-sign { margin-top: 24px; max-width: 280px; font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.4; color: var(--lilac-soft); }
.ft-x { margin-top: 6px; font-family: var(--script); font-size: 38px; line-height: 1.2; color: var(--cream); }
.ft-nav { flex: 2 1 560px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 32px; }
.ft-nav div { display: flex; flex-direction: column; gap: 12px; }
.ft-t { margin-bottom: 6px; font-size: 10.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.ft-nav a { font-size: 15px; color: #EEE6F8; text-decoration: none; }
.ft-nav a:hover { color: var(--white); }
.ft-bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 28px; border-top: 1px solid rgba(217, 194, 245, .12); font-size: 13px; color: #B3A8C6; }
.ft-bot a { color: var(--text-2); text-decoration: none; }
.ft-bot a:hover { color: var(--white); }

/* ---------- responsive ---------- */
@media (max-width: 1120px) {
  .nav a.n { display: none; }
}
@media (max-width: 760px) {
  .wm img { height: 34px; }
  .ft-logo img { height: 46px; }
  .sec { padding: 84px 0; }
  .body { font-size: 17px; }
  .hd { height: 76px; }
  .nav .btn { display: none; }
  .menu-btn { display: inline-flex; }
  .ft { padding-top: 72px; }
  .ft-form .btn { flex: 1 1 100%; }
}
@media (min-width: 1121px) {
  .menu-btn, .mnav { display: none !important; }
}
@media (max-width: 1120px) and (min-width: 761px) {
  .menu-btn { display: inline-flex; }
}