/* =====================================================================
   Mindful Portrait — base system  ·  "Museum-Editorial"
   A quiet printed journal hung in a serene gallery.
   Shared: tokens · masthead · mobile menu · gutter thread · plaque ·
   breath-meter · framed mats · buttons · colophon footer · motion.
   ===================================================================== */

/* ---- Tokens -------------------------------------------------------- */
:root {
  --porcelain: #F5EFEA;   /* page paper                         */
  --linen:     #FBF7F3;   /* raised surfaces                    */
  --aubergine: #241726;   /* dark "rooms" (events)              */
  --aubergine-2:#2E1F30;
  --plum:      #39303B;   /* primary text on light              */
  --mauve:     #7B5E7A;   /* primary accent / Mindfulness       */
  --mauve-deep:#634B62;
  --clay:      #C98A86;   /* warmth / Motherhood                */
  --gold:      #C8A26B;   /* rationed metallic                  */
  --euc:       #8FA39A;   /* Ayurveda / dividers                */
  --pencil:    #9B9098;   /* muted: meta, numerals, hairlines   */
  --pencil-soft:#C9C0C4;

  /* category wayfinding */
  --c-mind:   var(--mauve);
  --c-mother: var(--clay);
  --c-ayur:   var(--euc);

  /* type */
  --display: "Fraunces", Georgia, serif;
  --ui: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  /* fluid scale */
  --t-micro: 0.72rem;
  --t-small: 0.875rem;
  --t-body:  clamp(1.0625rem, 1.01rem + 0.28vw, 1.1875rem);
  --t-lead:  clamp(1.2rem, 1.06rem + 0.7vw, 1.5rem);
  --t-h3:    clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem);
  --t-h2:    clamp(2rem, 1.5rem + 2.4vw, 3.2rem);
  --t-h1:    clamp(2.6rem, 1.9rem + 3.8vw, 5.25rem);

  /* layout */
  --gutter: clamp(2.4rem, 9vw, 4.5rem);   /* left thread gutter        */
  --thread-x: calc(var(--gutter) / 2);
  --section: clamp(3rem, 7vw, 6.5rem);
  --measure: 40rem;
  --maxw: 1180px;

  --r: 14px;
  --r-pill: 999px;
  --r-tag: 4px;
  --mat-pad: 10px;

  --shadow: 0 18px 44px -26px rgba(36,23,38,.40);
  --shadow-sm: 0 6px 18px -12px rgba(36,23,38,.30);
  --hair: rgba(155,144,152,.55);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--porcelain);
  color: var(--plum);
  font-family: var(--ui);
  font-size: var(--t-body);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body[data-menu-open] { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; color: inherit; background: none; border: 0; }

/* ---- Typography --------------------------------------------------- */
h1,h2,h3,h4 { font-family: var(--display); font-weight: 460; line-height: 1.06; color: var(--plum); letter-spacing: -.005em; }
.fr { font-family: var(--display); }
.fr-it { font-family: var(--display); font-style: italic; font-weight: 420; }
.h1 { font-size: var(--t-h1); font-weight: 420; }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); }
.lead { font-size: var(--t-lead); color: var(--plum); opacity: .9; line-height: 1.5; font-weight: 380; }
.muted { color: var(--pencil); }
.measure { max-width: var(--measure); }

/* PLAQUE / wall-label microtype */
.plaque { font-family: var(--ui); font-size: var(--t-micro); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pencil); display: inline-flex; align-items: center; gap: .55rem; }
.plaque .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mauve); flex: none; }
.plaque .dot--mother { background: var(--clay); }
.plaque .dot--ayur { background: var(--euc); }
.plaque .dot--mind { background: var(--mauve); }

/* leaf-sprig fleuron (one per page) */
.fleuron { color: var(--gold); width: 26px; height: 26px; }

/* ---- Wrap --------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.15rem,4vw,2.5rem); }

/* ---- Masthead ----------------------------------------------------- */
.masthead { position: absolute; top: 0; left: 0; right: 0; z-index: 40; color: var(--plum); }
.masthead--fixed { position: sticky; }
.masthead--on-dark { color: var(--porcelain); }
.masthead__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; border-bottom: 1px solid currentColor; border-color: var(--hair); }
.masthead--on-dark .masthead__bar { border-color: rgba(245,239,234,.22); }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.brand img { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.brand__name { font-family: var(--ui); font-weight: 700; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; }
.mast-nav { display: none; align-items: center; gap: 1.6rem; }
.mast-nav a { text-decoration: none; color: inherit; font-family: var(--ui); font-size: var(--t-micro); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; position: relative; padding-bottom: 3px; }
.mast-nav a::after { content:""; position:absolute; left:50%; bottom:0; width:0; height:2px; background: var(--gold); transition: width .3s var(--ease), left .3s var(--ease); }
.mast-nav a:hover::after, .mast-nav a[aria-current]::after { width:100%; left:0; }
.issue-plaque { display: none; }

/* mobile menu trigger */
.menu-trigger { display: inline-flex; align-items: center; gap: .5rem; color: inherit; font-family: var(--ui); font-size: var(--t-micro); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: .5rem .2rem; min-height: 48px; }
.menu-trigger__glyph { position: relative; width: 24px; height: 12px; }
.menu-trigger__glyph span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform .4s var(--ease), opacity .25s ease; }
.menu-trigger__glyph span:first-child { top: 1px; }
.menu-trigger__glyph span:last-child { bottom: 1px; }
.menu-trigger__orb { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
@media (min-width:300px){ .menu-trigger__orb { animation: breathe 9s var(--ease) infinite; } }

/* header search affordance (links to the Journal index) */
.mast-actions { display: inline-flex; align-items: center; gap: .15rem; }
.mast-search { display: inline-grid; place-items: center; width: 44px; height: 44px; color: inherit; border-radius: 50%; transition: background .25s var(--ease); }
.mast-search svg { width: 19px; height: 19px; }
.mast-search:hover { background: color-mix(in srgb, currentColor 10%, transparent); }

/* section numbering + its gutter markers removed per client preference */
.tick, .menu__num { display: none; }
.colophon details > summary .cnum { display: none; }

/* ---- Full-screen mobile menu (the curtain) ----------------------- */
.menu {
  position: fixed; inset: 0; z-index: 80;
  background: var(--aubergine); color: var(--porcelain);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .46s var(--ease);
  visibility: hidden;
  display: flex; flex-direction: column;
  padding: clamp(1.15rem,4vw,2.5rem);
  padding-top: max(1.1rem, env(safe-area-inset-top));
}
body[data-menu-open] .menu { clip-path: inset(0 0 0 0); visibility: visible; }
.menu__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.1rem; border-bottom: 1px solid rgba(245,239,234,.2); }
.menu__close { display: inline-flex; align-items: center; gap: .5rem; color: var(--porcelain); font-family: var(--ui); font-size: var(--t-micro); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; min-height: 48px; }
.menu__close .x { position: relative; width: 22px; height: 22px; }
.menu__close .x::before, .menu__close .x::after { content:""; position:absolute; top:50%; left:0; width:100%; height:2px; background: var(--gold); }
.menu__close .x::before { transform: rotate(45deg); }
.menu__close .x::after { transform: rotate(-45deg); }
.menu__list { list-style: none; padding: 0; margin: auto 0; display: grid; gap: .2rem; }
.menu__list li { border-bottom: 1px solid rgba(245,239,234,.14); }
.menu__link { display: flex; align-items: baseline; gap: 1rem; text-decoration: none; color: var(--porcelain); padding: clamp(.9rem,3.5vw,1.4rem) 0; min-height: 64px; opacity: 0; transform: translateY(16px); }
body[data-menu-open] .menu__link { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
body[data-menu-open] .menu__list li:nth-child(1) .menu__link { transition-delay: .12s; }
body[data-menu-open] .menu__list li:nth-child(2) .menu__link { transition-delay: .18s; }
body[data-menu-open] .menu__list li:nth-child(3) .menu__link { transition-delay: .24s; }
body[data-menu-open] .menu__list li:nth-child(4) .menu__link { transition-delay: .30s; }
.menu__num { font-family: var(--display); font-size: 1rem; color: var(--gold); flex: none; width: 1.6rem; }
.menu__word { font-family: var(--display); font-size: clamp(2.4rem,12vw,3.6rem); font-weight: 420; line-height: 1; }
.menu__cap { display: block; font-family: var(--ui); font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--pencil-soft); margin-top: .35rem; }
.menu__cdot { width: 8px; height: 8px; border-radius: 50%; align-self: center; flex: none; }
.menu__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.1rem; border-top: 1px solid rgba(245,239,234,.2); font-size: var(--t-small); color: var(--pencil-soft); }
.menu__foot a { color: var(--porcelain); text-decoration: none; }
.menu__breath { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--pencil-soft); }
.menu__breath .b { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: breathe 9s var(--ease) infinite; }

/* ---- The gutter THREAD ------------------------------------------- */
.sheet { position: relative; padding-left: var(--gutter); }
.sheet::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--thread-x); width: 1px; background: var(--hair); }
.sheet--gold::before { background: linear-gradient(var(--gold), rgba(200,162,107,.15)); }
.block { position: relative; padding-block: var(--section); }
.block + .block { padding-top: 0; }
.tick { display: none; }   /* section counters + their dots removed per client preference */
.block:first-child .tick { top: 0; }
.tick__num { font-family: var(--display); font-size: .85rem; color: var(--pencil); line-height: 1; }
.tick__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--porcelain); border: 1.5px solid var(--pencil); transition: background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease); }
.block.in .tick__dot { background: var(--mauve); border-color: var(--mauve); transform: scale(1.15); }
.block.in .tick__dot.is-mother { background: var(--clay); border-color: var(--clay); }
.block.in .tick__dot.is-ayur { background: var(--euc); border-color: var(--euc); }

/* ---- Framed image "mat" ------------------------------------------ */
.mat { background: var(--linen); border: 1px solid var(--hair); padding: var(--mat-pad); border-radius: 4px; box-shadow: var(--shadow); }
.mat__img { position: relative; overflow: hidden; background: linear-gradient(135deg, #e9dee0, #d9cdd2); }
.mat__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mat__cap { font-family: var(--display); font-style: italic; font-size: .9rem; color: var(--pencil); text-align: center; padding-top: .6rem; }
.ar-32 { aspect-ratio: 3/2; } .ar-43 { aspect-ratio: 4/3; } .ar-45 { aspect-ratio: 4/5; } .ar-11 { aspect-ratio: 1/1; } .ar-169 { aspect-ratio: 16/9; }

/* ---- Breath-meter (read length) ---------------------------------- */
.breath-meter { display: inline-flex; align-items: center; gap: .28rem; }
.breath-meter i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); display: inline-block; }
.breath-meter i.off { background: transparent; box-shadow: inset 0 0 0 1px var(--pencil-soft); }
.breath-meter::after { content: "min read"; font-family: var(--ui); font-size: var(--t-micro); letter-spacing: .08em; color: var(--pencil); margin-left: .35rem; text-transform: lowercase; }

/* clear read-time label (replaces the ambiguous dotted meter) */
.readtime { font-family: var(--ui); font-size: var(--t-micro); letter-spacing: .05em; color: var(--pencil); white-space: nowrap; }
.readtime::before { content: "·"; margin-right: .5rem; color: var(--pencil-soft); }

/* ---- Buttons & links --------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--ui); font-weight: 700; font-size: .95rem; letter-spacing: .01em; padding: .9rem 1.6rem; border-radius: var(--r-pill); text-decoration: none; transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease); min-height: 48px; }
.btn--primary { background: var(--mauve); color: #fff; }
.btn--primary:hover { background: var(--mauve-deep); transform: translateY(-2px); }
.btn--light { background: var(--porcelain); color: var(--aubergine); }
.btn--light:hover { transform: translateY(-2px); }
.arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow, .ulink:hover .arrow { transform: translateX(4px); }
/* underline-grow link */
.ulink { font-family: var(--ui); font-weight: 700; font-size: .95rem; color: var(--plum); text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; background-image: linear-gradient(var(--clay),var(--clay)); background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%; padding-bottom: 3px; transition: background-size .35s var(--ease); }
.ulink:hover { background-size: 100% 1.5px; }
.masthead--on-dark .ulink, .room .ulink { color: var(--porcelain); }

/* ---- Dark room ---------------------------------------------------- */
.room { background: var(--aubergine); color: var(--porcelain); position: relative; overflow: hidden; }
.room h1,.room h2,.room h3 { color: var(--porcelain); }
.room .muted { color: var(--pencil-soft); }
.room .lead { color: rgba(245,239,234,.86); }
.room::after { content:""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"); }
.bloom { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; opacity: .5; z-index: 0; }
.bloom--mauve { background: radial-gradient(closest-side, var(--mauve), transparent); }
.bloom--clay { background: radial-gradient(closest-side, var(--clay), transparent); }
.bloom--euc { background: radial-gradient(closest-side, var(--euc), transparent); }
.room > *:not(.bloom) { position: relative; z-index: 1; }

/* ---- Inline newsletter line (guestbook underline) ---------------- */
.letterline { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.letterline input { flex: 1 1 12rem; font: inherit; font-size: 1rem; padding: .6rem .2rem; border: 0; border-bottom: 1.5px solid var(--hair); background: transparent; color: inherit; }
.letterline input:focus { outline: none; border-color: var(--gold); }
.room .letterline input { border-color: rgba(245,239,234,.35); color: var(--porcelain); }
.room .letterline input::placeholder { color: var(--pencil-soft); }

/* ---- Colophon footer --------------------------------------------- */
.colophon { background: var(--aubergine); color: var(--porcelain); position: relative; overflow: hidden; padding-block: clamp(2.5rem,6vw,4rem) 1.6rem; }
.colophon::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"); }
.colophon__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem,4vw,2.5rem); align-items: start; }
.colophon__groups { display: grid; }
.colophon__brand img { width: 46px; height: 46px; border-radius: 50%; }
.colophon__brand .brand__name { color: var(--porcelain); }
.colophon p.note { color: var(--pencil-soft); font-size: .92rem; margin-top: .8rem; max-width: 30ch; }
.colophon .socials { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.1rem; }
.colophon .socials a { width: 42px; height: 42px; border: 1px solid rgba(245,239,234,.28); border-radius: 50%; display: grid; place-items: center; color: var(--porcelain); text-decoration: none; transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.colophon .socials a:hover { background: rgba(245,239,234,.1); border-color: var(--gold); transform: translateY(-2px); }
.colophon .socials svg { width: 18px; height: 18px; display: block; }
.colophon details { border-top: 1px solid rgba(245,239,234,.16); }
.colophon details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .7rem; padding: .95rem 0; min-height: 56px; font-family: var(--ui); font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--porcelain); }
.colophon details > summary::-webkit-details-marker { display: none; }
.colophon details > summary .cnum { font-family: var(--display); color: var(--mauve); }
.colophon details > summary .chev { margin-left: auto; transition: transform .3s var(--ease); color: var(--gold); }
.colophon details[open] > summary .chev { transform: rotate(180deg); }
.colophon details .clinks { display: grid; gap: .55rem; padding-bottom: 1rem; }
.colophon details .clinks a { color: var(--pencil-soft); text-decoration: none; font-family: var(--ui); }
.colophon details .clinks a:hover { color: var(--porcelain); }
.colophon__pin { position: relative; z-index: 1; margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid rgba(245,239,234,.16); }
.colophon__pin .plaque { color: var(--gold); margin-bottom: .6rem; }
.colophon__bottom { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; justify-content: space-between; align-items: center; margin-top: 1.4rem; font-size: var(--t-small); color: var(--pencil-soft); }
.colophon__bottom .fleuron { vertical-align: middle; }

/* ---- Index rows (shared: home preview + blog archive) ------------ */
.idx { list-style: none; padding: 0; margin: 0; display: grid; }
.idx__row { border-top: 1px solid var(--hair); }
.idx__row:last-child { border-bottom: 1px solid var(--hair); }
.idx__head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .9rem; padding: 1.05rem 0; text-decoration: none; color: inherit; min-height: 56px; }
.idx__num { font-family: var(--display); font-size: 1.35rem; color: var(--pencil); line-height: 1; }
.idx__main { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.idx__title { font-family: var(--display); font-size: clamp(1.2rem, 4.4vw, 1.6rem); line-height: 1.14; color: var(--plum); font-weight: 440; }
.idx__head:hover .idx__title { color: var(--mauve); }
.idx__meta { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.idx__cdot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.idx__date { font-family: var(--ui); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--pencil); }
.idx__chev { color: var(--gold); transition: transform .3s var(--ease); font-size: .9rem; }

/* category dot colors */
.cd-mind, .cd-self { background: var(--mauve); }
.cd-mother, .cd-women { background: var(--clay); }
.cd-ayur, .cd-wellness { background: var(--euc); }
.cd-mental { background: #6E7B8A; }
.cd-story { background: var(--gold); }

/* ---- Reveal + reduced motion ------------------------------------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@keyframes breathe { 0%,100%{ transform: scale(.7); opacity:.6 } 50%{ transform: scale(1.15); opacity:1 } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: opacity .15s linear; }
  .menu { transition: opacity .15s linear; clip-path: none; opacity: 0; }
  body[data-menu-open] .menu { opacity: 1; }
  body[data-menu-open] .menu__link { transition: none; transition-delay: 0s !important; }
  .menu__breath .b, .menu-trigger__orb, .breathe { animation: none !important; }
}

/* ---- Desktop ------------------------------------------------------ */
@media (min-width: 900px) {
  .mast-nav { display: inline-flex; }
  .issue-plaque { display: inline-block; }
  .menu-trigger { display: none; }
  .colophon__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .colophon__groups { display: contents; }
  .colophon details { border-top: 0; }
  .colophon details > summary { pointer-events: none; padding-bottom: .4rem; }
  .colophon details > summary .chev { display: none; }
  .colophon details[open] .clinks, .colophon details .clinks { display: grid; }
  .colophon details:not([open]) .clinks { display: grid; }   /* always open on desktop */
}

/* ---- Content pages (About / Contact / Privacy / generic) — preserve real content ---- */
.mp-page { max-width: 58rem; }
.mp-page__portrait { width: min(56%, 220px); margin: 0 auto 2rem; }
.mp-page__portrait .mat__img { aspect-ratio: 4/5; }
.mp-page__title { text-align: center; margin-bottom: 1.6rem; font-weight: 460; }
.mp-page__content { font-size: var(--t-body); line-height: 1.75; color: #38313b; }
.mp-page__content > * + * { margin-top: 1.15rem; }
.mp-page__content h1, .mp-page__content h2, .mp-page__content h3, .mp-page__content h4 { font-family: var(--display); color: var(--plum); margin-top: 2.2rem; line-height: 1.15; }
.mp-page__content h1 { font-size: var(--t-h2); }
.mp-page__content h2 { font-size: var(--t-h3); }
.mp-page__content a { color: var(--mauve-deep); text-underline-offset: 3px; }
.mp-page__content img { border-radius: var(--r); height: auto; }
.mp-page__content ul, .mp-page__content ol { padding-left: 1.3rem; }
.mp-page__content li + li { margin-top: .4rem; }
.mp-page__content .wp-block-columns { gap: clamp(1.4rem,4vw,2.5rem); }
.mp-page__content .wp-block-buttons, .mp-page__content .wp-block-button__link { border-radius: var(--r-pill); }

/* ---- Jetpack subscription form, styled to match (replaces Kit) ---- */
.mp-subscribe form, .mp-subscribe .wp-block-jetpack-subscriptions__form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: center; }
.mp-subscribe input[type="email"], .mp-subscribe .wp-block-jetpack-subscriptions__textfield input {
  font: inherit; font-size: 1rem; flex: 1 1 13rem; min-width: 0;
  padding: .85rem 1.1rem; border-radius: var(--r-sm); border: 1.5px solid var(--hair); background: var(--linen); color: var(--ink);
}
.mp-subscribe input[type="email"]:focus { outline: none; border-color: var(--mauve); box-shadow: 0 0 0 3px rgba(123,94,122,.16); }
.mp-subscribe button, .mp-subscribe .wp-block-jetpack-subscriptions__button {
  font-family: var(--ui); font-weight: 700; font-size: .95rem; cursor: pointer;
  background: var(--mauve); color: #fff !important; border: 0; border-radius: var(--r-pill); padding: .85rem 1.5rem; min-height: 48px;
  text-decoration: none; transition: background .25s var(--ease);
}
.mp-subscribe button:hover { background: var(--mauve-deep); }
/* dark contexts (band + colophon) */
.mp-subscribe--dark input[type="email"], .colophon .mp-subscribe input[type="email"] { background: rgba(255,255,255,.95); border-color: transparent; }
.mp-subscribe--dark button, .colophon .mp-subscribe button { background: var(--porcelain); color: var(--aubergine) !important; }
.mp-subscribe--dark button:hover, .colophon .mp-subscribe button:hover { background: #fff; }
.mp-subscribe .wp-block-jetpack-subscriptions__subscribe-success, .mp-subscribe p { font-size: .85rem; }

.colophon__letterlabel { font-family: var(--ui); font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: .7rem; }
.colophon .mp-subscribe { max-width: 22rem; }

/* contact page: give the newsletter block within content a bit of room */
.mp-page__content .wp-block-jetpack-subscriptions { margin-top: 1rem; }