/* ==========================================================================
   ACCENTS — THE SMALL MARKS THAT MAKE AN ARTICLE LOOK DESIGNED
   ==========================================================================
   Ruled by Vivek, 2026-09-07, on the red rule above and below a pull quote:
   "this is great I wish we can few more things like red-line that we have in
   there."

   WHAT THIS IS. The quote designs decorate a quote and the heading marks
   decorate a heading. These decorate anything else a writer has written -- a
   paragraph, a run of words, the gap between two sections -- in the same
   language as that red rule: short coloured strokes, caps and bars, nothing
   drawn with an image file.

   HOW IT WORKS, and it is the same as everything else here:

     * The choice is a CLASS the writer picks from the Paragraph dropdown.
       Never inline styling, so redrawing an accent redraws it in every
       article already written.
     * Nothing is an image. Every stroke is a border, a gradient or a mask, so
       an accent costs no request, scales to any screen and can be recoloured.
     * COLOUR COMES FROM ONE PLACE: --yg-accent. It defaults to the red on the
       quote so a page looks the way this one already looks, and a tenant that
       sets a brand colour gets its own -- one line, and every accent follows.

   THE COLOUR
   ----------
   --main-color-one is what a tenant's palette sets. Where it is absent the
   red stands in, which is the colour already carrying the quote design.
   ========================================================================== */

:root {
    --yg-accent: var(--main-color-one, rgb(255, 0, 0));
    --yg-accent-soft: color-mix(in srgb, var(--yg-accent) 12%, transparent);
    --yg-accent-line: 4px;
}

/* ---- 1. RULED — the quote's own treatment, on any paragraph --------------
   The stroke above and the stroke below, offset to opposite ends. This is
   the mark he pointed at, taken off the quote so it can lead a paragraph,
   a stanza or a standfirst. */
.yg-accent--ruled {
    position: relative;
    padding: 1.1rem 0;
}

.yg-accent--ruled::before,
.yg-accent--ruled::after {
    content: "";
    position: absolute;
    height: var(--yg-accent-line);
    width: 5.5rem;
    background: var(--yg-accent);
}

.yg-accent--ruled::before { top: 0; right: 0; }
.yg-accent--ruled::after  { bottom: 0; left: 0; }

/* ---- 2. LEAD — a short bar over the opening line -------------------------
   What a magazine puts above a standfirst. Reads as "this paragraph starts
   something", which a plain bold line does not. */
.yg-accent--lead {
    position: relative;
    padding-top: 1.4rem;
    font-size: 1.08em;
}

.yg-accent--lead::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3.5rem;
    height: var(--yg-accent-line);
    background: var(--yg-accent);
}

/* ---- 3. SIDE — a full stroke down the left edge --------------------------
   The quietest of them, and the one that carries a long passage without
   shouting. */
.yg-accent--side {
    border-left: var(--yg-accent-line) solid var(--yg-accent);
    padding: .25rem 0 .25rem 1.25rem;
}

/* ---- 4. NOTICE — the stroke with a tinted panel behind it ----------------
   For the sentence a reader must not miss. The tint is mixed from the accent
   itself, so it is right in any colour a tenant chooses. */
.yg-accent--notice {
    border-left: var(--yg-accent-line) solid var(--yg-accent);
    background: var(--yg-accent-soft);
    padding: 1rem 1.25rem;
    border-radius: 0 4px 4px 0;
}

/* ---- 5. BRACKETS — two corner marks around a block ----------------------
   Frames a passage without boxing it in. Drawn as corners rather than a
   border so the text still sits on the page rather than in a card. */
.yg-accent--brackets {
    position: relative;
    padding: 1.35rem 1.5rem;
}

.yg-accent--brackets::before,
.yg-accent--brackets::after {
    content: "";
    position: absolute;
    width: 1.6rem;
    height: 1.6rem;
}

.yg-accent--brackets::before {
    top: 0;
    left: 0;
    border-top: var(--yg-accent-line) solid var(--yg-accent);
    border-left: var(--yg-accent-line) solid var(--yg-accent);
}

.yg-accent--brackets::after {
    bottom: 0;
    right: 0;
    border-bottom: var(--yg-accent-line) solid var(--yg-accent);
    border-right: var(--yg-accent-line) solid var(--yg-accent);
}

/* ---- 6. CAP — a large opening letter with a stroke beside it -------------
   The oldest trick in print. ::first-letter is styled directly, so a writer
   types nothing extra and the letter is still the paragraph's own text. */
.yg-accent--cap::first-letter {
    float: left;
    font-size: 3.1em;
    line-height: .82;
    font-weight: 700;
    margin: .06em .5rem 0 0;
    padding-right: .5rem;
    color: var(--yg-accent);
    border-right: var(--yg-accent-line) solid var(--yg-accent);
}

/* ---- 7. MARKER — a highlighter drawn behind a run of words ---------------
   Inline, not block: it marks a phrase inside a sentence. The gradient sits
   low so it reads as a marker pen rather than a filled box, and it wraps
   correctly across a line break. */
.yg-accent--marker {
    background-image: linear-gradient(
        to bottom,
        transparent 58%,
        color-mix(in srgb, var(--yg-accent) 28%, transparent) 58%
    );
    padding: 0 .15em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* ---- 8. UNDERSCORE — a stroke under a phrase ----------------------------
   Inline. Sits below the descenders instead of through them, which a plain
   text-decoration cannot do. */
.yg-accent--underscore {
    box-shadow: inset 0 -.18em 0 0 var(--yg-accent);
    padding-bottom: .05em;
}

/* ---- 9. DIVIDER — the gap between two sections --------------------------
   A short centred rule with a square set in the middle of it. Applied to an
   empty paragraph, which is what a writer leaves between sections anyway. */
.yg-accent--divider {
    position: relative;
    height: 2.5rem;
    margin: 1.75rem 0;
}

.yg-accent--divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8rem;
    height: 2px;
    background: var(--yg-accent);
}

.yg-accent--divider::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: .55rem;
    height: .55rem;
    background: var(--yg-accent);
}

/* ---- 10. STEP — a numbered marker down the side -------------------------
   For instructions. The number is the browser's own counter, so a writer
   inserts or deletes a step and the rest renumber themselves -- which is the
   whole reason not to type "1." by hand. */
.yg-accent--step {
    counter-increment: yg-step;
    position: relative;
    padding: .1rem 0 1.5rem 3.25rem;
}

.yg-accent--step::before {
    content: counter(yg-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--yg-accent-line) solid var(--yg-accent);
    border-radius: 50%;
    color: var(--yg-accent);
    font-weight: 700;
    font-size: .95rem;
}

/* The counter restarts at the top of each article rather than running on
   from whatever was on the page before it. */
.yg-quote__flow,
.blog-details-content,
.entry-content {
    counter-reset: yg-step;
}

/* ---- 11. TAG — a small label above a paragraph --------------------------
   The word a magazine puts over a section: FEATURE, RECIPE, PART TWO. The
   text is the writer's own, so it is theirs to change and it is readable to
   anything that reads the page. */
.yg-accent--tag {
    display: inline-block;
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--yg-accent);
    border: 2px solid var(--yg-accent);
    border-radius: 3px;
    padding: .2em .6em;
}

/* ---- 12. END — the mark that closes an article --------------------------
   The little square a magazine sets after the last word so a reader knows
   there is no more. */
.yg-accent--end::after {
    content: "";
    display: inline-block;
    width: .62em;
    height: .62em;
    margin-left: .45em;
    vertical-align: baseline;
    background: var(--yg-accent);
}

/* ==========================================================================
   BATCH TWO — THE POSTER MARKS
   ==========================================================================
   Vivek, 2026-09-07, with a Saul Bass quote card: "you gave awesome choices --
   can you give some more?"

   The twelve above are typographic: strokes and rules that sit politely
   alongside the writing. What he showed is louder and does a different job --
   a piece of the page that STOPS you: a coloured ground, display type, a
   texture through a word, a shape behind it, the attribution turned on its
   side, an oversized quotation mark in the corner.

   Same discipline as the rest of this file, and it matters more here than
   anywhere: not one of these is an image. The texture is a gradient, the
   hollow letters are a text stroke, the shapes are pseudo-elements. So a
   writer can put one of these on their own words in their own language, and
   it is still selectable text a search engine can read -- which a picture of
   a quote never is.
   ========================================================================== */

/* ---- 13. POSTER — the whole card ----------------------------------------
   The coloured ground with a rule inset from its edges. Everything else in
   this batch is designed to be dropped INSIDE one of these, or used on its
   own in an ordinary article. */
.yg-accent--poster {
    position: relative;
    background: var(--yg-accent);
    color: #fff;
    padding: 3.25rem 3rem;
    margin: 2rem 0;
    overflow: hidden;
}

.yg-accent--poster::before {
    content: "";
    position: absolute;
    inset: .9rem;
    border: 2px solid rgba(255, 255, 255, .85);
    pointer-events: none;
}

/* Type set inside a poster is display type, not body copy. */
.yg-accent--poster .yg-accent--display,
.yg-accent--display {
    font-size: clamp(1.9rem, 5.5vw, 3.4rem);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0;
}

/* ---- 14. BYLINE — the attribution turned on its side --------------------
   Down the left edge, reading upward, the way it sits on the card he showed.
   It is a <span> of the writer's own text, so it is still read aloud and
   still indexed -- it is only turned. */
.yg-accent--byline {
    position: absolute;
    left: 1.9rem;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: lowercase;
    opacity: .95;
}

/* ---- 15. QUOTE MARK — the oversized one in the corner -------------------
   Set behind the words rather than beside them, which is what stops it
   reading as punctuation and starts it reading as a shape. */
.yg-accent--quotemark {
    position: relative;
}

.yg-accent--quotemark::before {
    content: "\201D";
    position: absolute;
    top: -.35em;
    right: 0;
    font-size: 7em;
    line-height: 1;
    font-weight: 800;
    color: currentColor;
    opacity: .28;
    pointer-events: none;
}

/* ---- 16. STIPPLE — a word filled with texture ---------------------------
   The dotted fill on "made". A radial-gradient clipped to the letters
   themselves, so the dots follow the shape of the type at any size and in
   any font the site is set in.

   The colour under it is the fallback: a browser that will not clip a
   background to text paints a solid word instead of a broken one. */
.yg-accent--stipple {
    color: var(--yg-accent);
    background-image: radial-gradient(currentColor 1.4px, transparent 1.5px);
    background-size: 6px 6px;
    -webkit-background-clip: text;
    background-clip: text;
    font-weight: 800;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .yg-accent--stipple { color: transparent; }
}

/* ---- 17. HOLLOW — outlined letters --------------------------------------
   The word drawn as an outline, for the line in a poster that should be
   present without being loud. Same fallback reasoning as the stipple. */
.yg-accent--hollow {
    color: currentColor;
    font-weight: 800;
}

@supports (-webkit-text-stroke: 1px black) {
    .yg-accent--hollow {
        -webkit-text-stroke: 2px currentColor;
        color: transparent;
    }
}

/* ---- 18. HATCH — the little strokes over a word -------------------------
   The hand-drawn ticks across the top of the letters on his card. Repeating
   bars, angled, sitting over the word and clipped to its width. */
.yg-accent--hatch {
    position: relative;
    display: inline-block;
}

.yg-accent--hatch::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: .04em;
    height: .34em;
    background-image: repeating-linear-gradient(
        104deg,
        currentColor 0 2px,
        transparent 2px 9px
    );
    pointer-events: none;
}

/* ---- 19. SPOTLIGHT — a shape behind a word ------------------------------
   The circle sitting behind the last word on his card. Behind, not around:
   the letters stay on top and keep their own colour. */
.yg-accent--spotlight {
    position: relative;
    display: inline-block;
    isolation: isolate;
}

.yg-accent--spotlight::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1.55em;
    height: 1.55em;
    border-radius: 50%;
    background: currentColor;
    opacity: .22;
}

/* ---- 20. ARROW — the triangle -------------------------------------------
   A solid triangle pointing into the text, for a line that introduces the
   one under it. Drawn with a clip-path, so it is a real shape and not a
   character borrowed from a font that may not have it. */
.yg-accent--arrow {
    position: relative;
    padding-left: 3.25rem;
}

.yg-accent--arrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: .2em;
    width: 2.2rem;
    height: 2.2rem;
    background: var(--yg-accent);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ---- 21. KNOCKOUT — words reversed out of a solid bar -------------------
   Inline, and it wraps: a phrase across two lines keeps a full bar on each
   of them rather than one long ragged one. */
.yg-accent--knockout {
    background: var(--yg-accent);
    color: #fff;
    padding: .1em .4em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    font-weight: 700;
}

/* ---- 22. SLANT — a band set at an angle ---------------------------------
   The bar behind a line, skewed. The text is skewed back so it stays
   straight while the band behind it does not. */
.yg-accent--slant {
    position: relative;
    display: inline-block;
    padding: .1em .55em;
    color: #fff;
    font-weight: 700;
    isolation: isolate;
}

.yg-accent--slant::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--yg-accent);
    transform: skewX(-9deg);
}

/* ---- 23. FRAME — a rule inset around a block ----------------------------
   The full frame from his card, as opposed to Brackets, which is only the
   two corners. Fits a passage that should read as a plate on the page. */
.yg-accent--frame {
    position: relative;
    padding: 2rem 2.25rem;
    margin: 1.75rem 0;
}

.yg-accent--frame::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--yg-accent);
    pointer-events: none;
}

/* ---- 24. RIBBON — a label with a notched end ----------------------------
   The tag, cut. For the word that names a section when a plain chip is too
   quiet for it. */
.yg-accent--ribbon {
    display: inline-block;
    background: var(--yg-accent);
    color: #fff;
    font-size: .74em;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .35em 1.5em .35em .8em;
    clip-path: polygon(0 0, 100% 0, calc(100% - .7em) 50%, 100% 100%, 0 100%);
}

/* ==========================================================================
   BATCH THREE — POSTER FURNITURE
   ==========================================================================
   Vivek, 2026-09-07, with the Steve Jobs poster: huge condensed caps, a light
   italic line between them, small words flanked by dashes, a circled joining
   word, a rule with caps on its ends, and a pennant across the bottom.

   These are the PARTS a poster is built from. On their own each is small;
   together they are what makes a block of text read as something composed
   rather than something typed. Every one is the writer's own words -- turned,
   flanked, circled or banded, but still text.
   ========================================================================== */

/* ---- 25. CAP RULE — a line with square ends -----------------------------
   The measuring bar across his poster. Reads as a drawn rule rather than a
   border, which is the whole difference between a divider and a decision. */
.yg-accent--caprule {
    position: relative;
    height: 1.25rem;
    margin: 1.1rem 0;
}

.yg-accent--caprule::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    transform: translateY(-50%);
    background: var(--yg-accent);
}

.yg-accent--caprule::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: .75rem;
    transform: translateY(-50%);
    border-left: 5px solid var(--yg-accent);
    border-right: 5px solid var(--yg-accent);
}

/* ---- 26. ARROW RULE — the same line, pointed --------------------------- */
.yg-accent--arrowrule {
    position: relative;
    height: 1.25rem;
    margin: 1.1rem 0;
}

.yg-accent--arrowrule::before {
    content: "";
    position: absolute;
    top: 50%;
    left: .5rem;
    right: .5rem;
    height: 2px;
    transform: translateY(-50%);
    background: var(--yg-accent);
}

.yg-accent--arrowrule::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: .7rem;
    transform: translateY(-50%);
    background: var(--yg-accent);
    clip-path: polygon(
        0 50%, .55rem 0, .55rem 100%,
        calc(100% - .55rem) 100%, calc(100% - .55rem) 0, 100% 50%
    );
}

/* ---- 27. FLANKED — a word with a dash either side ----------------------
   "— LIKE —". Small, centred, and it turns a connecting word into a piece of
   the design instead of a gap in it. */
.yg-accent--flanked {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    font-size: .82em;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.yg-accent--flanked::before,
.yg-accent--flanked::after {
    content: "";
    width: 1.1em;
    height: 2px;
    background: var(--yg-accent);
}

/* ---- 28. CIRCLED — a small word inside a ring -------------------------- */
.yg-accent--circled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4em;
    height: 2.4em;
    padding: 0 .5em;
    border: 2px solid var(--yg-accent);
    border-radius: 999px;
    color: var(--yg-accent);
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-style: italic;
}

/* ---- 29. BANNER — a pennant, notched at both ends ----------------------
   The band across the bottom of his poster. Different from the Ribbon above,
   which is cut at one end only and is a label; this is a headline. */
.yg-accent--banner {
    display: block;
    background: var(--yg-accent);
    color: #fff;
    text-align: center;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .55em 2.75em;
    margin: 1.1rem 0;
    clip-path: polygon(
        0 0, 100% 0, calc(100% - 1.6em) 50%, 100% 100%,
        0 100%, 1.6em 50%
    );
}

/* ---- 30. SCRIPT — the light line between two heavy ones ----------------
   The italic connector. It exists to be quiet: the two display lines it sits
   between are doing the shouting, and without something small in the gap
   they run together. */
.yg-accent--script {
    font-style: italic;
    font-weight: 400;
    font-size: .55em;
    letter-spacing: .01em;
    opacity: .92;
}

/* ---- 31. GRAIN — a printed ground --------------------------------------
   The paper texture under his poster, as a gradient rather than a picture.
   Two fine crossed grids at low opacity, which at a normal reading distance
   reads as stock rather than as a pattern. */
.yg-accent--grain {
    position: relative;
    background-color: #e9e9e7;
    background-image:
        repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px);
    padding: 3rem 2.5rem;
    margin: 2rem 0;
}

/* ---- 32. CREDIT — the name under it ------------------------------------
   Small, centred, spaced out. The attribution on a poster is not a sentence
   and should not be set like one. */
.yg-accent--credit {
    display: block;
    text-align: center;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .75;
    margin-top: 1.5rem;
}

/* ==========================================================================
   BATCH FOUR — THE QUOTE CARDS
   ==========================================================================
   Vivek, 2026-09-07, with three references: a card framed by four offset
   strokes with a quotation mark in opposite corners; a card with a rough
   painted band behind the words; and a sheet of six of them in different
   outline shapes -- hexagon, rectangle, speech bubble, circle, rounded, cut.

   These are the whole card, ready to take a quote. The difference from the
   poster above is who the ground is for: a poster is the accent colour with
   white type on it, a plate is a light ground with the writing in black,
   which is what all of his examples are.

   THE SHAPE IS A SEPARATE PICK from the card, exactly the way a quote's width
   is separate from its design. Six shapes and four card treatments are ten
   entries in a dropdown rather than twenty-four.
   ========================================================================== */

/* ---- 33. PLATE — a light ground with the writing in black ---------------
   Deliberately NOT white-on-colour. A quote card is meant to be read at
   length, and body copy reversed out of a strong colour is hard work. The
   ground is the accent, softened; the words stay black. */
.yg-accent--plate {
    position: relative;
    background: color-mix(in srgb, var(--yg-accent) 75%, #fff);
    color: #16181d;
    padding: 3.25rem 3.5rem;
    margin: 2rem 0;
    text-align: center;
    overflow: hidden;
}

.yg-accent--plate .yg-accent--display {
    font-size: clamp(1.4rem, 3.6vw, 2.2rem);
    letter-spacing: .01em;
    margin: 0 0 .9rem;
}

/* ---- 34. OFFSET FRAME — four strokes, not a box ------------------------
   Two long arms top-right, two bottom-left, set in from the edge. It reads
   as a frame without ever closing, which is what stops a quote card looking
   like a table cell. */
.yg-accent--offsetframe {
    position: relative;
    padding: 3rem 3.25rem;
}

.yg-accent--offsetframe::before,
.yg-accent--offsetframe::after {
    content: "";
    position: absolute;
    width: 46%;
    height: 64%;
    pointer-events: none;
}

.yg-accent--offsetframe::before {
    top: 1rem;
    right: 1rem;
    border-top: 6px solid currentColor;
    border-right: 6px solid currentColor;
}

.yg-accent--offsetframe::after {
    bottom: 1rem;
    left: 1rem;
    border-bottom: 6px solid currentColor;
    border-left: 6px solid currentColor;
}

/* ---- 35. MARKS — an opening and a closing mark, opposite corners --------
   Solid and full strength, unlike the faint one behind a poster. They are
   punctuation doing a structural job: they say where the quotation starts
   and where it stops. */
.yg-accent--marks {
    position: relative;
}

.yg-accent--marks::before,
.yg-accent--marks::after {
    position: absolute;
    font-size: 3.6em;
    line-height: 1;
    font-weight: 800;
    color: currentColor;
    pointer-events: none;
}

.yg-accent--marks::before {
    content: "\201C";
    top: 1.1rem;
    left: 1.9rem;
}

.yg-accent--marks::after {
    content: "\201D";
    bottom: -.35rem;
    right: 1.9rem;
}

/* ---- 36. BRUSH — a painted band behind the words -----------------------
   The rough white stroke on his cards. Drawn as an inline SVG mask, which is
   how the heading marks in global-marks.css are drawn too: no file to fetch,
   no fixed size, and the paint takes whatever colour it is given.

   Behind the text, so the writing sits ON the paint rather than being cut
   out of it -- which is what keeps it readable and still selectable. */
.yg-accent--brush {
    position: relative;
    isolation: isolate;
}

.yg-accent--brush::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 6% -3%;
    background: #fff;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M3 30c24-10 50-15 76-12 19 2 35 9 54 10 25 1 47-9 72-10 22-1 43 6 65 7 20 1 39-4 59-3 12 1 24 4 36 4l2 66c-20 8-42 12-64 10-20-2-38-9-58-10-26-1-49 9-75 10-23 1-44-6-66-7-19-1-37 4-56 3-13-1-26-4-39-5-13-1-26 1-38 5z' fill='black'/%3E%3Cpath d='M20 16c31 7 65 4 97-1 16-3 32-7 48-6 15 1 29 6 44 7 27 2 52-7 79-6 13 1 26 4 39 4l1 15c-17 1-34-3-51-4-25-1-47 8-72 7-16-1-31-5-46-6-17-1-33 3-50 5-28 4-58 6-86-2z' fill='black' opacity='.85'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M3 30c24-10 50-15 76-12 19 2 35 9 54 10 25 1 47-9 72-10 22-1 43 6 65 7 20 1 39-4 59-3 12 1 24 4 36 4l2 66c-20 8-42 12-64 10-20-2-38-9-58-10-26-1-49 9-75 10-23 1-44-6-66-7-19-1-37 4-56 3-13-1-26-4-39-5-13-1-26 1-38 5z' fill='black'/%3E%3Cpath d='M20 16c31 7 65 4 97-1 16-3 32-7 48-6 15 1 29 6 44 7 27 2 52-7 79-6 13 1 26 4 39 4l1 15c-17 1-34-3-51-4-25-1-47 8-72 7-16-1-31-5-46-6-17-1-33 3-50 5-28 4-58 6-86-2z' fill='black' opacity='.85'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* ==========================================================================
   THE SHAPE OF A CARD — SIX OUTLINES, PICKED SEPARATELY
   ==========================================================================
   His sheet of six: hexagon, rectangle, speech bubble, circle, rounded, cut.

   HOW AN OUTLINE OF ANY SHAPE IS DRAWN. A border cannot follow a clip-path --
   clipping cuts the border off with everything else. So the outline is two
   stacked layers: one filled with the line colour and clipped to the shape,
   one inset by the line's own thickness, filled with the ground and clipped
   to the same shape. What is left showing between them IS the outline, and it
   follows any shape a clip-path can describe.

   --yg-line is the thickness and --yg-ground is what the card sits on, both
   set here once so a shape can be dropped on a plate, on a brush stroke or on
   the page itself without being told where it is. */
.yg-shape {
    --yg-line: 5px;
    /* WHITE, NOT TRANSPARENT, AND THIS IS THE WHOLE TRICK.
       The fill layer has to actually COVER the line layer under it -- that is
       what leaves only the rim showing. Left transparent it covers nothing,
       the line layer shows through at its full size, and the shape comes out
       as a solid black blob with the writing invisible inside it.

       White because a shaped card is a card: on his references the shape sits
       on a coloured ground and its inside is paper. Override it per use if a
       shape should instead disappear into what it is standing on. */
    --yg-ground: #fff;
    position: relative;
    padding: 3rem 3.25rem;
    isolation: isolate;
}

.yg-shape::before,
.yg-shape::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.yg-shape::before {
    inset: 0;
    background: currentColor;
}

.yg-shape::after {
    inset: var(--yg-line);
    background: var(--yg-ground);
}

/* A shape standing on the page rather than on a plate needs a ground of its
   own, or the fill layer would show the line straight through. */
.yg-shape--onpaper { --yg-ground: #fff; }

.yg-shape--rect::before,
.yg-shape--rect::after { clip-path: none; }

.yg-shape--rounded::before { border-radius: 14px; }
.yg-shape--rounded::after  { border-radius: 10px; }

.yg-shape--circle::before,
.yg-shape--circle::after {
    border-radius: 50%;
}

.yg-shape--circle { padding: 22% 18%; }

.yg-shape--hex::before,
.yg-shape--hex::after {
    clip-path: polygon(14% 0, 86% 0, 100% 50%, 86% 100%, 14% 100%, 0 50%);
}

.yg-shape--hex { padding: 3rem 4.5rem; }

.yg-shape--cut::before,
.yg-shape--cut::after {
    clip-path: polygon(0 0, calc(100% - 2.2rem) 0, 100% 2.2rem, 100% 100%, 2.2rem 100%, 0 calc(100% - 2.2rem));
}

/* The speech bubble: the same rectangle, with a tail cut into the bottom
   edge by the clip-path itself, so the tail is part of the shape and the
   outline runs round it. */
.yg-shape--bubble::before,
.yg-shape--bubble::after {
    clip-path: polygon(
        0 0, 100% 0, 100% 82%, 62% 82%, 52% 100%, 46% 82%, 0 82%
    );
}

.yg-shape--bubble { padding: 2.75rem 3rem 4.5rem; }

/* ==========================================================================
   THE COLOUR — HOW ONE ACCENT DIFFERS FROM ANOTHER
   ==========================================================================
   Vivek, 2026-09-07: "how can we do different colors on them".

   EVERY accent above draws itself from ONE value, --yg-accent, and never
   names a colour of its own. That single fact is what makes this work,
   because a custom property is INHERITED: set it anywhere and everything
   inside takes it.

   So a colour is a class, picked the same way a quote's width is picked --

       one paragraph            put the class on that paragraph
       a whole poster           put it on the poster; everything inside follows
       a whole article          put it on the article

   -- and nothing has to be told twice. Two accents in two colours on the
   same page is two classes, not two copies of the stylesheet.

   WHY A NAMED SET AND NOT A COLOUR PICKER. A picker writes the colour into
   the article's own text. Six months and two hundred posts later the site's
   colours live in two hundred places and cannot be changed at all -- which is
   the exact thing every other design decision in this file is built to avoid.
   These are defined once, here, so re-drawing the palette re-draws every
   article that ever used it.

   BRAND is the default and the one to reach for: it follows whatever colour
   the tenant set for their own site, so their pages look like theirs.
   ========================================================================== */

.yg-ink--brand    { --yg-accent: var(--main-color-one, rgb(255, 0, 0)); }
.yg-ink--red      { --yg-accent: #d92b2b; }
.yg-ink--orange   { --yg-accent: #e2681f; }
.yg-ink--gold     { --yg-accent: #b8860b; }
.yg-ink--green    { --yg-accent: #0d8a5f; }
.yg-ink--teal     { --yg-accent: #0f7b8a; }
.yg-ink--navy     { --yg-accent: #14265c; }
.yg-ink--plum     { --yg-accent: #7b2d5e; }
.yg-ink--ink      { --yg-accent: #1a1d21; }
.yg-ink--stone    { --yg-accent: #6b7280; }

/* A poster or a banner fills with the accent and sets its own text white. On
   the two palest inks that is unreadable, so those two take dark text. There
   is no configuration here and nothing for a writer to get wrong: the pairing
   is decided once, with the colour. */
.yg-ink--stone .yg-accent--poster,
.yg-ink--stone.yg-accent--poster,
.yg-ink--stone .yg-accent--banner,
.yg-ink--stone.yg-accent--banner,
.yg-ink--stone .yg-accent--knockout,
.yg-ink--stone.yg-accent--knockout,
.yg-ink--stone .yg-accent--slant,
.yg-ink--stone.yg-accent--slant,
.yg-ink--stone .yg-accent--ribbon,
.yg-ink--stone.yg-accent--ribbon,
.yg-ink--gold .yg-accent--poster,
.yg-ink--gold.yg-accent--poster,
.yg-ink--gold .yg-accent--banner,
.yg-ink--gold.yg-accent--banner,
.yg-ink--gold .yg-accent--knockout,
.yg-ink--gold.yg-accent--knockout,
.yg-ink--gold .yg-accent--slant,
.yg-ink--gold.yg-accent--slant,
.yg-ink--gold .yg-accent--ribbon,
.yg-ink--gold.yg-accent--ribbon {
    color: #14161a;
}

.yg-ink--stone .yg-accent--poster::before,
.yg-ink--stone.yg-accent--poster::before,
.yg-ink--gold .yg-accent--poster::before,
.yg-ink--gold.yg-accent--poster::before {
    border-color: rgba(0, 0, 0, .6);
}

/* ---- NARROW SCREENS -----------------------------------------------------
   The strokes stay; only the ones that need room give it up. */
@media (max-width: 30rem) {
    .yg-accent--ruled::before,
    .yg-accent--ruled::after { width: 3.5rem; }

    .yg-accent--brackets { padding: 1.1rem 1rem; }

    .yg-accent--cap::first-letter { font-size: 2.6em; }

    .yg-accent--step { padding-left: 2.75rem; }

    /* A poster keeps its ground and its frame; it gives up the padding it
       cannot afford, and the byline, which has no column to stand in. */
    .yg-accent--poster { padding: 2.25rem 1.5rem; }

    .yg-accent--byline { display: none; }

    .yg-accent--quotemark::before { font-size: 4.5em; }

    .yg-accent--frame { padding: 1.4rem 1.25rem; }

    .yg-accent--arrow { padding-left: 2.5rem; }

    .yg-accent--arrow::before { width: 1.7rem; height: 1.7rem; }
}