/* MoreThanMy — editorial theme.
 *
 * Loaded after market.css for this market only (website.py resolves it from the
 * request host). It restyles by overriding the custom properties market.css
 * exposes, plus a short list of selectors where the brand wants gold instead of
 * plain ink. Everything structural — layout, spacing, the voice-layer rules —
 * is inherited unchanged.
 *
 * The look, against the category: the beauty aisle is cream and blush and thin
 * script. This is peach ground, dark-mauve ink, gold hairlines, a high-contrast
 * fashion serif (Bodoni Moda) for headings and an elegant italic (Cormorant) as
 * the voice. Fonts are open-source (OFL) and loaded from Google — the licensed
 * Drose/Moelania stay in the rendered logo and social images, where the CF
 * licence covers them; webfont use would need a separate licence.
 */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;1,6..96,400;1,6..96,500&family=Cormorant:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Mulish:wght@300;400;500;600;700&display=swap');

:root {
  /* Peach ground, mauve ink, mauve-tinted greys, one deep gold. */
  --mk-paper: #FAF1EC;
  --mk-ink:   #453640;   /* Dark Mauve */
  --mk-g1:    #4B3A44;   /* body text */
  --mk-g2:    #6F5A63;   /* muted */
  --mk-g3:    #9C8892;   /* small-caps, captions */
  --mk-g4:    #E7D6CF;   /* hairlines, borders */
  --mk-g5:    #F2E3DC;   /* panel fill */
  --mk-gold:  #A97F38;   /* deep enough to read on peach */

  --mk-sans:    "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mk-display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --mk-display-weight: 600;
  --mk-display-spacing: 0;
  --mk-script:  "Cormorant", "Didot", Georgia, serif;   /* the voice, set in italic below */
}

body { font-weight: 400; }
h1, h2, h3 { font-optical-sizing: auto; }

/* Hero: let the fashion serif be large and airy — the masthead of a magazine. */
.mk-hero { padding-top: 64px; border-bottom-color: var(--mk-g4); }
.mk-hero h1 { font-size: clamp(36px, 6.4vw, 64px); font-weight: 600; line-height: 1.05; }
.mk-hero p { color: var(--mk-g2); font-size: 19px; }

/* The voice layer — byline, pull quote, verdict, post signature — in italic
   Cormorant. It already uses --mk-script; this only adds the slope. */
.mk-byline, .mk-quote, .mk-verdict-text,
.blog-card .blog-card-footer a,
body[data-path^="blog"] .media-body h5 a { font-style: italic; }
.mk-quote { border-left-color: var(--mk-gold); font-size: 27px; }
.mk-verdict { background: var(--mk-ink); }
.mk-verdict-text { color: #F3E6C4; }               /* soft gold on mauve */

/* Gold is the accent everywhere ink used to carry it quietly: the nav rule,
   every uppercase micro-label, link underlines and hovers. */
.mk-nav { border-bottom: 2px solid var(--mk-gold); }
.mk-tag,
.mk-card-kicker,
.mk-verdict-label,
.mk-share-label,
.blog-card .text-uppercase { color: var(--mk-gold) !important; }
.mk-badge { border-color: var(--mk-gold); color: var(--mk-gold); }
.mk-badge--solid { background: var(--mk-gold); border-color: var(--mk-gold); color: #fff; }

a { color: var(--mk-ink); text-decoration-color: var(--mk-gold); text-underline-offset: 3px; }
.mk-nav-list a:hover, .mk-card a:hover .mk-card-title { color: var(--mk-gold); }
.mk-foot-col a:hover, .mk-foot-contact a:hover { color: var(--mk-gold) !important; }

/* The ticker sits directly above the masthead and both are mauve, so it needs
   its own seam. Gold, like every other rule on this site. */
.mk-ticker { border-bottom-color: var(--mk-gold); }
.mk-ticker-move.is-up { color: #8FCFA3; }

/* Category hero: the strapline is the brand device — the name completing a
   sentence ("More than my skin.") — so it gets the fashion serif in italic,
   like a cover line. The intro takes the Cormorant voice. A gold hairline
   under the band instead of the default grey. */
.mk-cat-hero { border-bottom: 2px solid var(--mk-gold); }
.mk-cat-hero-head { font-style: italic; font-weight: 500; }
.mk-cat-hero-intro {
  font-family: var(--mk-script);
  font-style: italic;
  font-size: 21px;
}

/* Cards: warm the hover, keep the gridlines soft. */
.mk-grid, #blog-list.blog-list { background: var(--mk-g4); border-color: var(--mk-g4); }
.mk-card-title, .blog-card h5 .text-dark { font-weight: 500; }
.mk-card:hover, .blog-card .card:hover { background: var(--mk-g5); }

/* Subscribe block and buttons — mauve on peach, a gold-lit call to action. */
.mk-sub { background: var(--mk-g5); }
.mk-sub-form button,
.mk-share a:hover, .mk-share-copy:hover { background: var(--mk-ink); border-color: var(--mk-ink); }
.mk-sub-form input[type=email], .mk-share a, .mk-share-copy { border-color: var(--mk-ink); }

/* Footer sits on mauve; the base uses near-black hairlines that vanish there. */
.mk-foot-disc, .mk-foot-bar { border-color: rgba(250, 241, 236, 0.14); }
.mk-foot-head, .mk-foot-legal, .mk-foot-contact a { color: #B79FA8; }
.mk-mast, .mk-foot { background: var(--mk-ink); }


/* ----------------------------------------------------------- page texture */
/* A blurred botanical shadow behind the reading column — felt rather than
 * read. Fixed, so it behaves like the paper the page is printed on instead of
 * a picture scrolling past.
 *
 * Two things keep it from costing legibility. It is masked to fade out down
 * the page, so the further into an article you are the cleaner the ground
 * gets; and it sits in a pseudo-element rather than on the text's own
 * background, so no amount of tuning here can dim the type itself. The source
 * image is deliberately low-contrast (sd 34) — a busy texture behind
 * paragraphs is noise the eye keeps trying to resolve.
 */
body[data-path^="blog"]::before,
body[data-path="about"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("/assets/sublunary/markets/morethanmy/texture.webp") center top / cover no-repeat;
  opacity: 0.19;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.55) 46%, rgba(0,0,0,0) 82%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.55) 46%, rgba(0,0,0,0) 82%);
}
/* Everything the reader interacts with stays above it. */
body[data-path^="blog"] > *,
body[data-path="about"] > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) { body::before { background-attachment: scroll; } }

/* ------------------------------------------------------------ listen to it */

.mk-listen {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 10px;
  padding: 4px 12px 4px 10px;
  border: 1px solid var(--mk-gold);
  border-radius: 999px;
  background: none;
  color: var(--mk-gold);
  font: inherit;
  font-size: 12px;
  line-height: 1.6;
  cursor: pointer;
  vertical-align: baseline;
}
.mk-listen:hover { background: var(--mk-gold); color: #fff; }
.mk-listen:focus-visible { outline: 2px solid var(--mk-ink); outline-offset: 2px; }
.mk-listen-icon { font-size: 10px; line-height: 1; }
.mk-listen-note {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--mk-g3);
}

/* ------------------------------------------------------------ buy button */
/* Gold, like every other accent here. The solid one is the closing ask. */
.mk-buy { border-color: var(--mk-gold); color: var(--mk-gold); }
.mk-buy:hover { background: var(--mk-gold); border-color: var(--mk-gold); color: #fff; }
.mk-buy--solid { background: var(--mk-gold); border-color: var(--mk-gold); color: #fff; }
.mk-buy--solid:hover { background: none; color: var(--mk-gold); }
.mk-buy:focus-visible { outline-color: var(--mk-ink); }