/* Young Marketers — surfaces, rules, edges.

   The system is FLAT. Nothing in the supplied material has a rounded corner, a drop shadow on
   content, a glassmorphic blur or a border-radius. Depth is made three ways only:
     1. a black ground with rotated red squares behind a directional black veil
     2. solid ink / red blocks sitting on paper
     3. a two-weight rule system — 2px ink for structure, 1px #DCDCDC for hairlines

   The only shadow in the source is the screen-preview page shadow on the A4 document,
   which is chrome around the artefact and never part of it. */

:root {
  --ym-radius: 0;

  /* rules */
  --ym-rule-strong: 2px solid var(--ym-ink); /* @kind other */
  --ym-rule-hair: 1px solid var(--ym-rule); /* @kind other */
  --ym-rule-strong-on-dark: 2px solid #FFFFFF; /* @kind other */
  --ym-rule-hair-on-dark: 1px solid var(--ym-on-dark-25); /* @kind other */
  --ym-rule-accent: 3px solid var(--ym-red-deep); /* quote / callout spine. @kind other */
  --ym-rule-accent-ink: 3px solid var(--ym-ink); /* template-block spine. @kind other */

  /* the only sanctioned shadow: preview chrome around a printed page */
  --ym-shadow-page: 0 10px 34px rgba(0, 0, 0, 0.42);

  /* diamond motif — a square rotated 45deg, bled off the artboard edge.

     THE ERROR EVERYONE MAKES. A square rotated 45deg has a bounding box 1.414x its CSS width.
     The "25-62% of the artboard" rule describes the VISIBLE diamond, so the CSS side must be
     18-44% of the artboard's SHORT edge. width:200px on a 340px card gives a 283px diamond —
     83% of the card, and the card disappears under it.
     A diamond fully contained inside the artboard is wrong; at least one edge always bleeds. */
  --ym-diamond-rotate: rotate(45deg); /* @kind other */
  --ym-diamond-bbox-factor: 1.414; /* @kind other */
  --ym-diamond-side-min: 18%;   /* of the artboard's short edge */
  --ym-diamond-side-max: 44%;
  --ym-diamond-side-sm-min: 11%;
  --ym-diamond-side-sm-max: 27%;
}

/* ---- the CEREMONIAL register — certificates, awards, honours ----
   The same system held quieter: more air, finer rules, ONE RED OBJECT instead of one red mass,
   and the display face in place of the working face. Premium here is restraint and precision,
   not ornament — nothing goes on these pieces that a security printer would not put on a plate.

   The guilloche is the one place the diamond does NOT bleed: it is the motif turned into a
   security-print ground rather than a graphic element. */
:root {
  --ym-cer-frame-inset: 3.2%;      /* 1px ink rule, inset from the trim edge */
  --ym-cer-frame-gap: 9px;         /* to the 1px hairline inside it */
  --ym-cer-corner: 13px;           /* red corner registration marks, 2px stroke */
  --ym-cer-guilloche-tile: 34px;
  --ym-cer-guilloche-stroke: 0.6px;
  --ym-cer-guilloche-opacity: 0.075; /* @kind other */
  --ym-cer-guilloche-opacity-dark: 0.085; /* @kind other */
  --ym-cer-underline-red: 84px;    /* red segment overlaid at the left end of the name rule */
  --ym-cer-seal-deboss: 5px;       /* inner rule inset — depth without a shadow */
}

/* the signature dark ground, as a ready-made stack */
.ym-dark-ground {
  position: relative;
  background: var(--ym-black);
  color: var(--ym-text-on-dark);
  overflow: hidden;
}
.ym-dark-ground > .ym-veil {
  position: absolute;
  inset: 0;
  background: var(--ym-veil-dark);
  pointer-events: none;
}
.ym-diamond {
  position: absolute;
  background: var(--ym-red-deep);
  transform: var(--ym-diamond-rotate);
  pointer-events: none;
}