/* M&N — design tokens
   Independent intelligence bureau / editorial-analytical brand.
   Trade Gothic Bold No. 2 is a licensed commercial face, embedded below from
   the licensed file. It has no Cyrillic glyphs (checked: 0 in U+0400–04FF) —
   Russian headlines use Inter Black instead, at the same density. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=Archivo:wght@700;800;900&display=swap');

@font-face{
  font-family: "Trade Gothic Bold No. 2";
  src: url("assets/fonts/trade-gothic-bold-no-2.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root{
  /* primary */
  --ink:        #15191B;  /* Ink Black — main dark surface, logo, big headlines */
  --white:      #F9F7F5;  /* Off-White — main light surface, light text on dark */
  --olive:      #4D5044;  /* Muted Olive — secondary surface, charts, calm blocks */
  --rose:       #9F6260;  /* Dusty Rose — accent only, 10–15% of a feed, never dominant */

  /* secondary */
  --charcoal:   #34362F;  /* Dark Olive Charcoal */
  --olive-gray: #66665C;  /* Soft Olive Gray */
  --ivory:      #DFD8D2;  /* Warm Ivory */
  --stone:      #BFB7B1;  /* Warm Stone */
  --beige:      #A39D99;  /* Gray Beige */

  /* type roles */
  --font-display: "Trade Gothic Bold No. 2", "Trade Gothic Bold 2", "Trade Gothic Next Bold", Archivo, sans-serif;
  --font-body:    "Inter", sans-serif;

  /* Single canonical headline size for a square feed card. A one-word title
     and a three-word title share this SAME font-size — length changes the
     line count, never the scale, so a grid reads as one system. */
  --headline-feed: 190px;

  /* logo colors — dark surface */
  --logo-letters-dark: var(--white);
  --logo-amp-dark:      var(--rose);
  --descriptor-dark:    var(--ivory);

  /* logo colors — light surface */
  --logo-letters-light: var(--ink);
  --logo-amp-light:      var(--rose);
  --descriptor-light:    var(--charcoal);
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  font-family: var(--font-body);
  background: #e4e1dc; /* neutral preview backdrop, not part of the brand palette */
}

/* ---------- shared card primitives ---------- */

.canvas{
  position: relative;
  overflow: hidden;
  margin: 40px auto;
  box-shadow: 0 30px 70px rgba(21,25,27,0.28);
}
.canvas--square{ width: 1080px; height: 1080px; }
.canvas--story{  width: 1080px; height: 1920px; }

.headline{
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  /* The licensed file's advance widths are uneven per glyph (a leftover of
     the same corruption that broke its cmap) — this tighter tracking is a
     manual compensation, not a stylistic choice, tuned by eye against the
     rendered word rather than derived from font metrics. */
  letter-spacing: -0.04em;
  line-height: 0.92;
  text-align: left;
  margin: 0;
}
/* Cyrillic fallback per brand spec: Trade Gothic has no Cyrillic glyphs,
   so Russian headlines use Inter Black at the same density instead. */
.headline-cyr{
  font-family: var(--font-body);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.95;
  text-align: left;
  margin: 0;
}

.descriptor{
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin: 0;
}

.mn-logo{
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  display: inline-flex;
  align-items: baseline;
  margin: 0;
}
.mn-logo .amp{ margin: 0; }
.mn-logo--dark .m,
.mn-logo--dark .n{ color: var(--logo-letters-dark); }
.mn-logo--dark .amp{ color: var(--logo-amp-dark); }
.mn-logo--light .m,
.mn-logo--light .n{ color: var(--logo-letters-light); }
.mn-logo--light .amp{ color: var(--logo-amp-light); }

/* The display face's "&" is a fine-stroked swash — reads as an elegant accent
   at hero size (logo showcase, big covers) but its hairlines disappear next
   to the bold M/N at the small utility size, and it starts looking like a
   mismatched font rather than a deliberate contrast. Below hero scale, swap
   it for Inter Bold at the same color role instead. */
.corner-mark .mn-logo .amp{
  font-family: var(--font-body);
  font-weight: 700;
}

.corner-mark{
  position: absolute;
  left: 64px;
  bottom: 56px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* subtle tone-on-tone grain for dark/mid textured surfaces */
.texture-hairline{
  background-image: repeating-linear-gradient(115deg, rgba(249,247,245,0.035) 0px, rgba(249,247,245,0.035) 1px, transparent 1px, transparent 8px);
}

/* small uppercase label — category tags, eyebrows, filler-card captions */
.tag-label{
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin: 0;
}

/* generic placeholder copy standing in for real caption/body text */
.placeholder-text{
  font-family: var(--font-body);
  font-weight: 400;
  margin: 0;
}