/* ============================================================
   VP content templates — base.css

   Slide 1080x1350. Post 1080x1350. Doc page 794x1123 (A4 at 96dpi).
   Banner 1584x396. Themes via [data-theme="light|dark|mixed"] on the row.
   ============================================================ */
@import url("./colors_and_type.css");
@import url("./themes.css");

:root { --slide-w: 1080px; --slide-h: 1350px; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: var(--font-sans); }
/* The gallery ground is deliberately not --ink-900. A near-black frame is one
   of this system's four surfaces, and on an identical ground it stopped
   reading as an object at all. */
body { background: #0b0b0e; color: var(--white); min-height: 100vh; -webkit-font-smoothing: antialiased; }

/* === Gallery chrome ===
   Everything from here to the next banner is the viewer around a template,
   not the template. It never prints and never exports. */
.stage { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 48px 32px 96px; }
.stage-header { width: 100%; max-width: 1400px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.stage-header h1 { color: var(--white); font-size: 22px; font-weight: var(--fw-bold); letter-spacing: -0.02em; margin: 0; }
.stage-header .meta { color: var(--ink-300); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 6px; font-weight: var(--fw-semibold); }
.stage-controls { display: flex; gap: 8px; align-items: center; }
.stage-controls button, .stage-controls select {
  font-family: var(--font-sans); font-size: 13px; font-weight: var(--fw-medium);
  padding: 9px 18px; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06); color: var(--white); cursor: pointer;
  transition: all var(--dur-base) var(--ease-standard); letter-spacing: -0.005em;
}
.stage-controls button:hover { background: rgba(255, 255, 255, .12); }
.stage-controls button.is-active { background: var(--violet-500); border-color: var(--violet-500); color: var(--white); }
.back-link { color: var(--ink-300); text-decoration: none; font-size: 13px; font-weight: var(--fw-semibold); }
.back-link:hover { color: var(--lime-500); }

.slide-row { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; width: 100%; max-width: 1500px; }
.slide-wrap {
  width: 432px; height: 540px; position: relative;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12); background: #000; flex: 0 0 auto;
}
.slide-wrap.size-md { width: 540px; height: 675px; }
.slide-wrap.size-lg { width: 648px; height: 810px; }
.slide { width: var(--slide-w); height: var(--slide-h); transform-origin: 0 0; transform: scale(0.4); position: relative; overflow: hidden; }
.slide-wrap.size-md .slide { transform: scale(0.5); }
.slide-wrap.size-lg .slide { transform: scale(0.6); }
/* The frame counter belongs to the viewer, not the artboard. It is a small
   dark pill rather than bare type, because bare white type disappeared on the
   lime and paper grounds, and it sits top left rather than bottom right: the
   foot of a carousel frame is where the dot rail and the swipe cue live, and
   the counter was landing on top of them. */
.slide-label, .page-label {
  position: absolute; top: 10px; left: 12px; z-index: 10; font-size: 11px; font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, .9); letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none;
  background: rgba(11, 11, 14, .6); padding: 4px 10px; border-radius: var(--r-pill);
}

/* === Slide surface ===
   1080px artboards pad at 64px, the design system's --post-pad. */
.s {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 76px; overflow: hidden;
}

/* === Type ===
   The design system's web scale (76 / 56 / 44 display, 16 body) stepped up
   for an artboard that is read at thumbnail size in a feed. Tracking,
   leading and weights are the system's own. Display sizes stay at -0.03em
   and 1.06 leading; headlines are wrapped by hand into two or three short
   lines rather than left to the box.

   Casing is sentence case everywhere. The two exceptions carried from the
   reference deck are the eyebrow and the wordmark. */
.display { font-size: 116px; font-weight: var(--fw-extrabold); line-height: 1.02; letter-spacing: -0.035em; color: var(--ink-1); margin: 0; text-wrap: balance; }
.h1      { font-size:  84px; font-weight: var(--fw-bold);      line-height: 1.06; letter-spacing: -0.03em;  color: var(--ink-1); margin: 0; text-wrap: balance; }
.h2      { font-size:  62px; font-weight: var(--fw-bold);      line-height: 1.10; letter-spacing: -0.025em; color: var(--ink-1); margin: 0; text-wrap: balance; }
.h3      { font-size:  42px; font-weight: var(--fw-bold);      line-height: 1.18; letter-spacing: -0.02em;  color: var(--ink-1); margin: 0; }
.lede    { font-size:  32px; font-weight: var(--fw-regular);   line-height: 1.5;  letter-spacing: -0.005em; color: var(--ink-2); margin: 0; max-width: 24ch; text-wrap: pretty; }
.body-c  { font-size:  27px; font-weight: var(--fw-regular);   line-height: 1.5;  letter-spacing: -0.005em; color: var(--ink-2); margin: 0; max-width: 30ch; }
.small-c { font-size:  23px; font-weight: var(--fw-regular);   line-height: 1.5;  color: var(--ink-3); margin: 0; }

/* Body copy caps at 62 characters in the design system. On a 1080 artboard
   that measure lands between 24ch and 32ch depending on the size, which is
   what the max-widths above are set to. Release it where a layout needs the
   full column. */
.wide { max-width: none; }

/* The eyebrow. 11px / 600 / uppercase / +0.1em on the web, scaled here. */
.kicker {
  font-size: 20px; font-weight: var(--fw-semibold); line-height: 1;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
  display: flex; align-items: center; gap: 12px; align-self: flex-start;
}

/* Emphasis inside a headline is the marker ring, not colour, so `em` only
   carries a colour where a ring would be the second ring on the layout. */
.display em, .h1 em, .h2 em, .h3 em { font-style: normal; color: var(--accent-text); }

/* The marker ring is drawn 32% taller than the word it circles, so on a
   headline set at 1.02 leading it collides with the line above. A headline
   carrying one opens up enough to hold it. */
.display:has(.mark) { line-height: 1.16; }
.h1:has(.mark), .h2:has(.mark) { line-height: 1.2; }

/* ============================================================
   The marker ring.

   The system's emphasis device: a hand-drawn lime ellipse around one word,
   rotated about -3 degrees, with a loose second stroke beneath it. One ring
   per layout, never two. Lime on light and violet grounds, violet when the
   ground is already lime, which is what --mark resolves to.
   ============================================================ */
.mark { position: relative; display: inline-block; white-space: nowrap; }
.mark > span { position: relative; z-index: 1; }
.mark > svg {
  position: absolute; left: -9%; top: -16%; width: 118%; height: 132%;
  z-index: 0; overflow: visible; transform: rotate(-3deg);
}
.mark > svg .ring, .mark > svg .tail { fill: none; stroke: var(--mark); stroke-linecap: round; }
.mark > svg .tail { opacity: .75; }

/* ============================================================
   The wordmark.

   "VP" set in the brand face with the full stop in the accent. The dot is
   the only coloured mark in the lockup, and --wm-dot flips it from violet
   on light grounds to lime on the violet and near-black ones so it stays
   legible wherever the mark lands.
   ============================================================ */
.wm {
  display: inline-flex; align-items: baseline;
  font-family: var(--font-sans); font-weight: var(--fw-extrabold);
  font-size: 46px; letter-spacing: -0.045em; line-height: 1; color: var(--ink-1);
}
.wm .dot { color: var(--wm-dot); }
.wm .rule { margin-left: 14px; font-size: 19px; font-weight: var(--fw-semibold);
            letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

/* The type-only lockup that names her and the company. Used where the
   two-letter mark is not enough on its own: post feet, banners, doc covers. */
.lockup {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: var(--fw-extrabold); font-size: 20px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-1);
}
.lockup .sep { width: 8px; height: 8px; border-radius: var(--r-circle); background: var(--mark); flex: 0 0 auto; }
.lockup .co { opacity: .45; }
.s--violet .lockup .co, .s--ink .lockup .co { opacity: .7; }

/* === Slide tag ===
   Numbered circle plus section label, the marker pinned top-left of every
   frame in the system. */
.slide-tag { display: inline-flex; align-items: center; gap: 10px; }
.slide-tag .n, .slide-tag .lbl {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--fw-semibold); font-size: 20px; line-height: 1;
  background: var(--ink-1); color: var(--bg-page);
}
.s--violet .slide-tag .n, .s--violet .slide-tag .lbl,
.s--sky .slide-tag .n, .s--sky .slide-tag .lbl { color: var(--violet-600); background: var(--white); }
.s--ink .slide-tag .n, .s--ink .slide-tag .lbl { background: var(--white); color: var(--ink-900); }
.slide-tag .n   { width: 40px; height: 40px; border-radius: var(--r-circle); }
.slide-tag .lbl { height: 40px; padding: 0 20px; border-radius: var(--r-pill); letter-spacing: -0.005em; }

/* === Chrome row ===
   Tag left, wordmark right. Content sits between them, and the margin below
   is what keeps "between" true: without it the eyebrow starts on the same
   line the tag pill ends on. Nothing else is ever pinned to a frame. */
.ch { display: flex; align-items: center; justify-content: space-between; gap: 24px;
      flex: 0 0 auto; margin-bottom: 44px; position: relative; z-index: 4; }

/* === Pills and chips === */
.pill {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 32px; border-radius: var(--r-pill);
  background: var(--ink-1); color: var(--bg-page);
  font-size: 26px; font-weight: var(--fw-semibold); letter-spacing: -0.01em; align-self: flex-start;
}
.pill--mark    { background: var(--mark); color: var(--on-mark); }
.pill--accent  { background: var(--accent); color: var(--on-accent); }
.pill--quiet   { background: var(--card-bg); color: var(--ink-1); box-shadow: inset 0 0 0 1px var(--card-line); }
.pill--outline { background: transparent; color: var(--ink-1); box-shadow: inset 0 0 0 1px var(--line); }
.s--violet .pill, .s--ink .pill { background: var(--white); color: var(--ink-900); }
.s--violet .pill--mark, .s--ink .pill--mark { background: var(--lime-500); color: var(--ink-900); }

.chips { display: flex; flex-wrap: wrap; gap: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 26px; border-radius: var(--r-pill);
  background: var(--card-bg); color: var(--ink-1);
  box-shadow: inset 0 0 0 1px var(--card-line);
  font-size: 25px; font-weight: var(--fw-medium); letter-spacing: -0.01em;
}
.chip.is-on { background: var(--mark); color: var(--on-mark); box-shadow: none; }
.chip .cdot { width: 10px; height: 10px; border-radius: var(--r-circle); background: var(--accent); flex: 0 0 auto; }
.chip.is-on .cdot { background: var(--on-mark); }

/* === Cards ===
   Flat fills, no border by default. The 1px hairline ring appears only on
   white-on-white nesting, which is what --card-line is for. No gradient on
   a small surface. */
.card { background: var(--card-bg); border-radius: var(--r-lg); padding: 34px; }
.card--ring { box-shadow: inset 0 0 0 1px var(--card-line); }
.card--lg { border-radius: var(--r-xl); padding: 44px; }
.card--mark   { background: var(--mark); color: var(--on-mark); }
.card--accent { background: var(--violet-500); color: var(--white); }
.card--ink    { background: var(--ink-900); color: var(--white); }
.card--sky    { background: var(--gradient-sky); color: var(--ink-900); }
.card--violet { background: var(--gradient-violet); color: var(--white); }
.card .ct { font-size: 32px; font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1.18; }
.card .cb { font-size: 24px; line-height: 1.5; color: var(--ink-2); margin-top: 12px; }
.card .ck { font-size: 19px; font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.card--mark .cb, .card--mark .ck { color: rgba(21,21,21,.72); }
.card--accent .cb, .card--accent .ck,
.card--violet .cb, .card--violet .ck,
.card--ink .cb, .card--ink .ck { color: rgba(255,255,255,.78); }

/* ============================================================
   The notch.

   A circular bite out of one corner of a card or a photo, with a round
   arrow button nested into it. Bite radius is the button diameter plus 12
   to 16px. Implemented with a radial-gradient mask, and a mask clips its
   own children, so the button must be a SIBLING of the masked box, not a
   child. That is what .notch-wrap is for. One notch per card, and only
   where something actually sits in it.
   ============================================================ */
.notch-wrap { position: relative; display: flex; flex-direction: column; min-height: 0; }
.notch-wrap > .notch {
  --nsize: 84px;
  -webkit-mask-image: radial-gradient(circle var(--nsize) at 100% 0, transparent var(--nsize), #000 calc(var(--nsize) + 0.5px));
          mask-image: radial-gradient(circle var(--nsize) at 100% 0, transparent var(--nsize), #000 calc(var(--nsize) + 0.5px));
}
.notch-wrap.at-tl > .notch { -webkit-mask-image: radial-gradient(circle var(--nsize) at 0 0, transparent var(--nsize), #000 calc(var(--nsize) + 0.5px)); mask-image: radial-gradient(circle var(--nsize) at 0 0, transparent var(--nsize), #000 calc(var(--nsize) + 0.5px)); }
.notch-wrap.at-br > .notch { -webkit-mask-image: radial-gradient(circle var(--nsize) at 100% 100%, transparent var(--nsize), #000 calc(var(--nsize) + 0.5px)); mask-image: radial-gradient(circle var(--nsize) at 100% 100%, transparent var(--nsize), #000 calc(var(--nsize) + 0.5px)); }
.notch-wrap.at-bl > .notch { -webkit-mask-image: radial-gradient(circle var(--nsize) at 0 100%, transparent var(--nsize), #000 calc(var(--nsize) + 0.5px)); mask-image: radial-gradient(circle var(--nsize) at 0 100%, transparent var(--nsize), #000 calc(var(--nsize) + 0.5px)); }

.notch-btn {
  position: absolute; top: 0; right: 0; width: 60px; height: 60px;
  border-radius: var(--r-circle); display: flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--ink-900); z-index: 3;
  box-shadow: inset 0 0 0 1px var(--line-hairline);
}
.notch-wrap.at-tl > .notch-btn { top: 0; left: 0; right: auto; }
.notch-wrap.at-br > .notch-btn { top: auto; bottom: 0; right: 0; }
.notch-wrap.at-bl > .notch-btn { top: auto; bottom: 0; left: 0; right: auto; }
.notch-btn--ink    { background: var(--ink-900); color: var(--white); box-shadow: none; }
.notch-btn--accent { background: var(--violet-500); color: var(--white); box-shadow: none; }
.notch-btn--mark   { background: var(--lime-500); color: var(--ink-900); box-shadow: none; }
.notch-btn svg { display: block; }

/* === Dot rail and swipe cue ===
   Carousels add a dot rail at the foot. Decks put nothing there. */
.foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: auto; padding-top: 40px; flex: 0 0 auto; }
.dots { display: flex; gap: 8px; align-items: center; }
.dots .dot { width: 9px; height: 9px; border-radius: var(--r-circle); background: var(--line); }
.s--violet .dots .dot, .s--ink .dots .dot { background: rgba(255,255,255,.35); }
.dots .dot.is-active { width: 32px; background: var(--mark); }
.cue { display: inline-flex; align-items: center; gap: 12px; font-size: 23px; font-weight: var(--fw-semibold); color: var(--ink-1); letter-spacing: -0.01em; }
.foot .by { font-size: 22px; color: var(--ink-3); font-weight: var(--fw-medium); }

/* === Author strip ===
   Her sign-off. No headshot ships with this kit, so the avatar falls back to
   violet initials. Drop a photo into shared/assets and swap the <img> in. */
.author { display: flex; align-items: center; gap: 20px; }
.author .av {
  width: 74px; height: 74px; border-radius: var(--r-circle); flex: 0 0 auto; overflow: hidden;
  background: var(--violet-500); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 27px; font-weight: var(--fw-bold);
}
.author .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.author .nm { font-size: 27px; font-weight: var(--fw-bold); color: var(--ink-1); letter-spacing: -0.01em; line-height: 1.3; }
.author .rl { font-size: 22px; color: var(--ink-3); line-height: 1.35; }

/* === Rules and helpers === */
.rule { height: 1px; background: var(--line); width: 100%; }
.row { display: flex; } .col { display: flex; flex-direction: column; }
.center { align-items: center; justify-content: center; }
.between { justify-content: space-between; }
.baseline { align-items: baseline; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.grow { flex: 1; min-height: 0; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; }
.gap-6 { gap: 24px; } .gap-8 { gap: 32px; } .gap-10 { gap: 40px; } .gap-12 { gap: 48px; }
.mt-auto { margin-top: auto; }
.body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* Anchored low. A cover, a statistic and a closing frame all sit against the
   foot of the artboard rather than under the chrome, which is what gives the
   set its shape when the frames are read in sequence. `margin-top: auto` does
   nothing here because .body already claims the free space with flex: 1. */
.body.low { justify-content: flex-end; }
.body.mid { justify-content: center; }

/* ── Stacking ──
   Decorative layers (photo backdrops, colour washes, mosaics) are absolutely
   positioned, and an absolute element paints above its non-positioned
   siblings, so content needs its own stacking context above them. Only
   content is given one here: naming the decoration in a bare `.s > *` rule
   would reset its `position: absolute` at equal specificity and collapse it
   to zero height. */
.s > *:not(.img-full):not(.wash):not(.mosaic-bg):not(.mosaic-scrim):not(.diag):not(.corner-photo) { position: relative; z-index: 2; }
.s > .img-full, .s > .wash, .s > .mosaic-bg, .s > .diag, .s > .corner-photo { z-index: 0; }
.s > .mosaic-scrim { z-index: 1; }

@media print {
  body { background: #fff; }
  .stage-header, .stage-controls { display: none !important; }
  .stage { padding: 0; gap: 0; }
  .slide-wrap, .page-wrap, .post-wrap {
    transform: none !important; border: 0 !important; border-radius: 0;
    page-break-after: always;
  }
  .slide, .page, .post { transform: none !important; }
}