/*
Theme Name: Yoiny Cedano Blog
Theme URI: https://blog.yoinycedano.com
Author: SHAART Agency Digital Solutions
Description: Tema editorial de autoridad para el blog de Yoiny Cedano. SEO-first, schema @graph, marca YC.
Version: 1.0.3
Text Domain: yoiny-blog
*/

/* ============================================================
   YOINY CEDANO — Colors & Type
   Brand: educational personal brand for digital marketing,
   automation, sales, content creation, business strategy.
   Vibe: editorial, strategic, direct, creative, professional.
   ============================================================ */

/* ---------- Webfonts ----------
   Brand-supplied fonts served locally from fonts/.
   Other families load from Google Fonts. Feeling Passionate (accent) loads
   from onlinewebfonts CDN (Personal Use license — license commercially for prod). */






/* cyrillic-ext */

/* cyrillic */

/* greek-ext */

/* greek */

/* hebrew */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek-ext */

/* greek */

/* hebrew */

/* vietnamese */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */



/* ============================================================
   COLOR TOKENS
   Source of truth: Brandbook + "Colores Marca YC.png"
   - 3FC3D6  Turquesa (clarity / strategy)
   - DF4699  Rosa Vibrante (authenticity / energy)  [primary]
   - DA6098  Rosa Suave (secondary pink, from palette)
   - 000000  Negro Absoluto
   - FFFFFF  Blanco Puro
   ============================================================ */
:root {
  /* --- Raw brand colors (do not rename) --- */
  --yc-pink: #DF4699;        /* primary */
  --yc-pink-soft: #DA6098;   /* secondary pink (warmer) */
  --yc-cyan: #3FC3D6;        /* turquoise */
  --yc-black: #000000;
  --yc-white: #FFFFFF;

  /* Canonical neutral grays (per brand update) */
  --yc-gray-1: #4E4E4E;  /* darkest gray */
  --yc-gray-2: #777777;  /* mid gray */
  --yc-gray-3: #A2A2A2;  /* light gray */

  /* Soft pink panel kept for collage layouts (not part of primary palette) */
  --yc-cream-pink: #F5DDE6;

  /* Pink scale (derived from #DF4699) */
  --yc-pink-50:  #FDF1F7;
  --yc-pink-100: #FBDCEB;
  --yc-pink-200: #F5A9CD;
  --yc-pink-300: #ED77B0;
  --yc-pink-400: #E45BA3;
  --yc-pink-500: #DF4699;   /* = brand primary */
  --yc-pink-600: #C53383;
  --yc-pink-700: #A02568;
  --yc-pink-800: #75194C;
  --yc-pink-900: #4A0F30;

  /* Cyan scale (derived from #3FC3D6) */
  --yc-cyan-50:  #ECFAFC;
  --yc-cyan-100: #C9F0F4;
  --yc-cyan-200: #8FDFE8;
  --yc-cyan-300: #5FCFDC;
  --yc-cyan-400: #3FC3D6;   /* = brand cyan */
  --yc-cyan-500: #2BAEC1;
  --yc-cyan-600: #1F8E9F;
  --yc-cyan-700: #156A78;
  --yc-cyan-800: #0E4A53;

  /* Neutrals — aligned to canonical grays */
  --yc-ink: #000000;
  --yc-ink-soft: #1A1A1A;
  --yc-graphite: var(--yc-gray-1);   /* #4E4E4E */
  --yc-stone: var(--yc-gray-2);      /* #777777 */
  --yc-stone-200: var(--yc-gray-3);  /* #A2A2A2 */
  --yc-stone-100: #E6E6E6;

  /* --- Semantic foreground / background --- */
  --bg: var(--yc-white);
  --bg-alt: #FAFAFA;
  --bg-inverse: var(--yc-black);
  --bg-accent-pink: var(--yc-pink-500);
  --bg-accent-cyan: var(--yc-cyan-400);
  --bg-soft-pink: var(--yc-cream-pink);

  --fg: var(--yc-ink);
  --fg-soft: var(--yc-ink-soft);
  --fg-muted: var(--yc-graphite);
  --fg-subtle: var(--yc-stone);
  --fg-on-pink: var(--yc-white);
  --fg-on-cyan: var(--yc-black);
  --fg-on-black: var(--yc-white);

  --border: var(--yc-stone-200);
  --border-strong: var(--yc-ink);

  --link: var(--yc-pink-600);
  --link-hover: var(--yc-pink-700);

  --accent: var(--yc-pink-500);
  --accent-2: var(--yc-cyan-400);

  /* ============================================================
     TYPOGRAPHY TOKENS
     - Headlines / hooks → Bebas Neue (primary), Anton, Oswald
       (condensed bold, all-caps look)
     - Body / education  → Montserrat / DM Sans / Inter / Poppins
       / Arimo (clean sans-serif)
     - Accent / display  → Abang*, Filling Passionate*
       (* substituted with Caveat Brush + Pacifico — see SUBSTITUTIONS
       in README)
     ============================================================ */
  --font-display: "Bebas Neue", "Anton", "Oswald", Impact, sans-serif;
  --font-display-anton: "Anton", "Bebas Neue", Impact, sans-serif;
  --font-display-oswald: "Oswald", "Bebas Neue", Impact, sans-serif;

  --font-body: "Montserrat", "DM Sans", "Inter", "Poppins", "Arimo",
               system-ui, -apple-system, sans-serif;
  --font-body-dmsans: "DM Sans", "Inter", system-ui, sans-serif;
  --font-body-inter: "Inter", system-ui, sans-serif;
  --font-body-poppins: "Poppins", "Inter", system-ui, sans-serif;
  --font-body-arimo: "Arimo", "Montserrat", system-ui, sans-serif;

  /* Accent / handwritten — Feeling Passionate is the sole accent typeface */
  --font-accent: "Feeling Passionate", cursive;
  --font-accent-script: "Feeling Passionate", cursive;

  /* Type scale (designed for Instagram 1080×1350 + web) */
  --text-hook:    clamp(48px, 8vw, 120px);  /* huge condensed hooks */
  --text-h1:      clamp(40px, 6vw, 72px);
  --text-h2:      clamp(32px, 4.5vw, 56px);
  --text-h3:      clamp(24px, 3vw, 40px);
  --text-h4:      clamp(20px, 2.4vw, 28px);
  --text-eyebrow: 14px;
  --text-body-lg: 20px;
  --text-body:    16px;
  --text-body-sm: 14px;
  --text-caption: 12px;
  --text-tiny:    11px;

  /* Line-heights */
  --lh-tight:   0.92;   /* @kind font */ /* condensed display */
  --lh-snug:    1.05;   /* @kind font */
  --lh-normal:  1.25;   /* @kind font */
  --lh-relaxed: 1.55;   /* @kind font */
  --lh-loose:   1.75;   /* @kind font */

  /* Letter-spacing */
  --tracking-display: -0.01em;
  --tracking-eyebrow: 0.18em;
  --tracking-button:  0.06em;
  --tracking-body:    0;

  /* Font-weights */
  --fw-regular: 400;   /* @kind font */
  --fw-medium:  500;   /* @kind font */
  --fw-semi:    600;   /* @kind font */
  --fw-bold:    700;   /* @kind font */
  --fw-black:   900;   /* @kind font */

  /* ---------- Spacing / radius / shadow ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --shadow-soft:   0 6px 18px rgba(11, 11, 11, 0.06);
  --shadow-card:   0 12px 28px rgba(11, 11, 11, 0.10);
  --shadow-pop:    0 18px 40px rgba(223, 70, 153, 0.18);
  --shadow-inset:  inset 0 0 0 1px rgba(11, 11, 11, 0.08);

  /* Editorial layout */
  --max-content: 1200px;
  --grid-gutter: 24px;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Use these in markup directly, or as composition targets.
   ============================================================ */

.h-hook,
.text-hook {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--text-hook);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg);
}

.h1, .text-h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg);
}

.h2, .text-h2 {
  font-family: var(--font-display-anton);
  font-size: var(--text-h2);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--fg);
}

.h3, .text-h3 {
  font-family: var(--font-body-poppins);
  font-weight: var(--fw-bold);
  font-size: var(--text-h3);
  line-height: var(--lh-normal);
  color: var(--fg);
}

.h4, .text-h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--text-h4);
  line-height: var(--lh-normal);
  color: var(--fg);
}

.eyebrow, .text-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.lead, .text-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--text-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-soft);
}

.body, .text-body, p {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-body);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  text-wrap: pretty;
}

.body-sm, .text-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--fg-soft);
}

.caption, .text-caption {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}

.handwrite, .text-handwrite {
  font-family: var(--font-accent);
  font-weight: 400;
  color: var(--yc-pink-500);
  letter-spacing: 0;
}

.script, .text-script {
  font-family: var(--font-accent-script);
  color: var(--yc-pink-500);
}

/* Highlighter / marker fill (editorial post style) */
.mark-pink {
  background: var(--yc-pink-500);
  color: var(--yc-white);
  padding: 0.05em 0.3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.mark-cyan {
  background: var(--yc-cyan-400);
  color: var(--yc-black);
  padding: 0.05em 0.3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.mark-black {
  background: var(--yc-black);
  color: var(--yc-white);
  padding: 0.05em 0.3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Link */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 120ms ease;
}
a:hover { color: var(--link-hover); }

/* Reset-ish — soft global so cards look right out of the box */
.yc-base {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
}


/* ============================================================
   YOINY CEDANO — Blog (shared styles)
   Consumes colors_and_type.css tokens. Editorial, white-first (brand v1.0).
   ============================================================ */

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  background:#FFFFFF; /* white — brand v1.0 (cream removed) */
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ text-decoration:none; }

.wrap{ max-width:var(--max-content); margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

/* ---------- Header ---------- */
.bg-header{
  position:sticky; top:0; z-index:50;
  background:#FFFFFF;
  border-bottom:1.5px solid var(--yc-black);
}
.bg-header .row{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:16px 0;
}
.bg-header .logo img{ height:30px; width:auto; }
.bg-nav{ display:flex; align-items:center; gap:28px; }
.bg-nav a{
  font-size:13px; font-weight:var(--fw-semi); letter-spacing:.06em;
  text-transform:uppercase; color:var(--fg); transition:color 150ms ease;
}
.bg-nav a:hover{ color:var(--yc-pink-600); }
.bg-nav a.active{ color:var(--yc-pink-500); border-bottom:2px solid var(--yc-pink-500); padding-bottom:3px; }
.bg-cta{
  display:inline-block; background:var(--yc-pink-500); color:#fff !important;
  font-size:12px; font-weight:var(--fw-bold); letter-spacing:var(--tracking-button);
  text-transform:uppercase; padding:12px 22px; border-radius:var(--radius-pill);
  transition:background 150ms ease, transform 150ms ease;
}
.bg-cta:hover{ background:var(--yc-pink-600); }
.bg-cta:active{ transform:translateY(1px) scale(.98); }
@media (max-width:760px){ .bg-nav{ display:none; } }

/* ---------- Buttons ---------- */
.btn-dark{
  display:inline-block; background:var(--yc-black); color:#fff !important;
  font-size:13px; font-weight:var(--fw-bold); letter-spacing:var(--tracking-button);
  text-transform:uppercase; padding:15px 28px; border-radius:var(--radius-pill);
  transition:background 150ms ease, transform 150ms ease; border:none; cursor:pointer;
}
.btn-dark:hover{ background:var(--yc-ink-soft); }
.btn-dark:active{ transform:translateY(1px) scale(.98); }
.btn-pink{
  display:inline-block; background:var(--yc-pink-500); color:#fff !important;
  font-size:13px; font-weight:var(--fw-bold); letter-spacing:var(--tracking-button);
  text-transform:uppercase; padding:15px 28px; border-radius:var(--radius-pill);
  box-shadow:var(--shadow-pop);
  transition:background 150ms ease, transform 150ms ease; border:none; cursor:pointer;
}
.btn-pink:hover{ background:var(--yc-pink-600); }
.btn-pink:active{ transform:translateY(1px) scale(.98); }

/* ---------- Eyebrow / kicker ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:var(--fw-bold); letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--yc-graphite);
}
.kicker::before{
  content:""; width:26px; height:2px; background:var(--yc-pink-500);
}
.kicker.is-cyan::before{ background:var(--yc-cyan-400); }

/* ---------- Category chips ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  font-size:12px; font-weight:var(--fw-bold); letter-spacing:.08em; text-transform:uppercase;
  padding:9px 18px; border-radius:var(--radius-pill);
  border:1.5px solid var(--yc-black); color:var(--yc-black); background:transparent;
  cursor:pointer; transition:background 150ms ease, color 150ms ease; font-family:var(--font-body);
}
.chip:hover{ background:rgba(0,0,0,.06); }
.chip.active{ background:var(--yc-black); color:#fff; }

/* category tag on cards */
.cat{
  display:inline-block; font-size:10px; font-weight:var(--fw-bold);
  letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  padding:5px 11px; border-radius:var(--radius-xs);
}
.cat.pink{ background:var(--yc-pink-500); color:#fff; }
.cat.cyan{ background:var(--yc-cyan-400); color:var(--yc-black); }
.cat.black{ background:var(--yc-black); color:#fff; }
.cat.outline{ border:1.5px solid var(--yc-black); color:var(--yc-black); }

/* ---------- Post cards ---------- */
.post-card{
  display:flex; flex-direction:column; gap:0;
  background:#fff; border:1.5px solid var(--yc-black); border-radius:var(--radius-md);
  overflow:hidden; transition:transform 200ms cubic-bezier(.22,1,.36,1), box-shadow 200ms ease;
}
.post-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
.post-card .media{ position:relative; aspect-ratio:16/10; background:var(--yc-cream-pink); }
.post-card .media image-slot{ width:100%; height:100%; }
.post-card .media .cat{ position:absolute; top:14px; left:14px; z-index:2; }
.post-card .body{ padding:22px 24px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post-card h3{
  font-family:var(--font-display); font-weight:400; font-size:28px;
  line-height:1; letter-spacing:.005em; text-transform:uppercase; color:var(--yc-black);
}
.post-card h3 a{ color:inherit; transition:color 150ms ease; }
.post-card h3 a:hover{ color:var(--yc-pink-600); }
.post-card p{ font-size:14px; line-height:1.6; color:var(--yc-graphite); }
.post-card .meta{
  margin-top:auto; padding-top:12px;
  display:flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:var(--fw-semi); letter-spacing:.04em;
  text-transform:uppercase; color:var(--yc-stone);
}
.post-card .meta i{ width:4px; height:4px; border-radius:50%; background:var(--yc-stone-200); }

/* ---------- Read-more link ---------- */
.readmore{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:var(--fw-bold); letter-spacing:.08em; text-transform:uppercase;
  color:var(--yc-pink-600); transition:gap 200ms cubic-bezier(.22,1,.36,1);
}
.readmore:hover{ gap:13px; color:var(--yc-pink-700); }

/* ---------- Decorative motifs ---------- */
.deco-ast{ position:absolute; pointer-events:none; }

/* ---------- Newsletter ---------- */
.newsletter{ background:var(--yc-black); color:#fff; position:relative; overflow:hidden; }
.newsletter .inner{
  display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center;
  padding-block:72px;
}
@media (max-width:860px){ .newsletter .inner{ grid-template-columns:1fr; gap:28px; padding-block:56px; } }
.newsletter h2{
  font-family:var(--font-display); font-weight:400; font-size:clamp(40px,5vw,62px);
  line-height:.95; text-transform:uppercase; color:#fff;
}
.newsletter h2 .hl{ color:var(--yc-cyan); }
.newsletter p{ color:#CFCFCF; font-size:15px; line-height:1.6; margin-top:14px; max-width:46ch; }
.news-form{ display:flex; gap:10px; }
@media (max-width:520px){ .news-form{ flex-direction:column; } }
.news-form input{
  flex:1; background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.25);
  border-radius:var(--radius-pill); padding:15px 22px; color:#fff;
  font-family:var(--font-body); font-size:14px; outline:none;
  transition:border-color 150ms ease;
}
.news-form input::placeholder{ color:#9a9a9a; }
.news-form input:focus{ border-color:var(--yc-cyan); }

/* ---------- Footer ---------- */
.bg-footer{ background:var(--yc-black); color:#fff; }
.bg-footer .cols{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px;
  padding-block:64px 48px;
}
@media (max-width:860px){ .bg-footer .cols{ grid-template-columns:1fr; gap:36px; padding-block:48px 36px; } }
.bg-footer .brandcol img{ height:72px; width:auto; }
.bg-footer .brandcol .tag{
  margin-top:26px; font-size:16px; line-height:1.55; color:#E8E8E8; max-width:34ch;
}
.bg-footer .socials{ display:flex; gap:14px; margin-top:26px; }
.bg-footer .socials a{
  width:52px; height:52px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center;
  color:#fff; transition:border-color 150ms ease, background 150ms ease, transform 150ms ease;
}
.bg-footer .socials a:hover{ border-color:var(--yc-pink-400); background:rgba(223,70,153,.14); transform:translateY(-2px); }
.bg-footer .socials svg{ width:21px; height:21px; display:block; }
.bg-footer .colhead{
  font-size:14px; font-weight:var(--fw-bold); letter-spacing:.18em; text-transform:uppercase;
  color:#fff; margin-bottom:22px;
}
.bg-footer .collinks{ display:flex; flex-direction:column; gap:16px; }
.bg-footer .collinks a{
  font-size:16px; color:#E8E8E8; transition:color 150ms ease; width:fit-content;
}
.bg-footer .collinks a:hover{ color:var(--yc-pink-300); }
.bg-footer .bottom{
  border-top:1px solid rgba(255,255,255,.18);
  padding-block:26px 34px;
}
.bg-footer .bottom .row1{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:14px; color:#E8E8E8;
}
.bg-footer .bottom .row1 a{
  color:var(--yc-pink-400); font-weight:var(--fw-bold); letter-spacing:.04em; text-transform:uppercase;
}
.bg-footer .bottom .row1 a:hover{ color:var(--yc-pink-300); }
.bg-footer .disclaimer{
  margin-top:12px; font-size:12.5px; line-height:1.65; color:#A8A8A8;
}

/* ---------- Scroll reveal (SEO-safe: visible por defecto, anima solo con JS) ---------- */
html.has-js .reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
html.has-js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html.has-js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}



  /* ============ masthead ============ */
  .masthead{ position:relative; padding:34px 0 26px; overflow:hidden; }
  .masthead .topline{
    display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
    font-size:11.5px; font-weight:var(--fw-bold); letter-spacing:.16em; text-transform:uppercase;
    color:var(--yc-graphite); margin-bottom:18px;
  }
  .masthead .topline .vol{ color:var(--yc-pink-600); }
  .masthead h1{
    font-family:var(--font-display); font-weight:400;
    font-size:clamp(54px, 9vw, 116px); line-height:.86; letter-spacing:-.005em;
    text-transform:uppercase; color:var(--yc-black); text-align:center;
  }
  .masthead .script{
    font-family:var(--font-accent); font-size:clamp(28px, 4.2vw, 52px);
    color:var(--yc-pink-500); display:block; text-align:center;
    transform:rotate(-2.5deg); margin-top:-4px; position:relative; z-index:2;
  }
  .masthead .subline{
    text-align:center; margin-top:18px;
    font-size:13px; font-weight:var(--fw-semi); letter-spacing:.1em; text-transform:uppercase;
    color:var(--yc-graphite);
  }
  .masthead .subline b{ color:var(--yc-black); }

  /* marquee strip */
  .strip{ background:var(--yc-black); overflow:hidden; padding:13px 0; border-bottom:1.5px solid var(--yc-black); }
  .strip-track{ display:flex; gap:0; width:max-content; animation:strip-scroll 22s linear infinite; }
  .strip span{
    font-family:var(--font-display); font-size:19px; letter-spacing:.12em; text-transform:uppercase;
    color:#fff; padding:0 18px; white-space:nowrap;
  }
  .strip span i{ color:var(--yc-cyan); font-style:normal; margin-right:36px; }
  .strip span:nth-child(even){ color:var(--yc-pink-400); }
  .strip span:nth-child(even) i{ color:#fff; }
  @keyframes strip-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  @media (prefers-reduced-motion:reduce){ .strip-track{ animation:none; } }

  /* ============ cover story + most read ============ */
  .coverzone{ padding:56px 0 64px; }
  .covergrid{ display:grid; grid-template-columns:1.55fr 1fr; gap:34px; align-items:start; }
  @media (max-width:980px){ .covergrid{ grid-template-columns:1fr; } }

  .coverstory{
    background:#fff; border:1.5px solid var(--yc-black); border-radius:var(--radius-lg);
    overflow:hidden; display:flex; flex-direction:column;
    transition:transform 200ms cubic-bezier(.22,1,.36,1), box-shadow 200ms ease;
  }
  .coverstory:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
  .coverstory .media{ position:relative; aspect-ratio:16/8.5; background:var(--yc-cream-pink); }
  .coverstory .media image-slot{ position:absolute; inset:0; width:100%; height:100%; }
  .coverstory .media .cat{ position:absolute; top:18px; left:18px; z-index:2; }
  .coverstory .body{ padding:34px 38px 36px; }
  @media (max-width:640px){ .coverstory .body{ padding:24px 22px 26px; } }
  .coverstory .label{
    font-size:11px; font-weight:var(--fw-bold); letter-spacing:.18em; text-transform:uppercase;
    color:var(--yc-pink-600); display:flex; align-items:center; gap:10px; margin-bottom:14px;
  }
  .coverstory .label::after{ content:""; flex:1; height:1.5px; background:var(--yc-black); opacity:.18; }
  .coverstory h2{
    font-family:var(--font-display); font-weight:400; font-size:clamp(38px,4.8vw,62px);
    line-height:.92; text-transform:uppercase; color:var(--yc-black);
  }
  .coverstory h2 a{ color:inherit; }
  .coverstory h2 a:hover{ color:var(--yc-pink-600); }
  .coverstory .excerpt{ margin-top:14px; font-size:16px; line-height:1.65; color:var(--yc-graphite); max-width:58ch; }
  .coverstory .byline{
    margin-top:20px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    font-size:12px; font-weight:var(--fw-semi); letter-spacing:.05em; text-transform:uppercase; color:var(--yc-stone);
  }
  .coverstory .byline b{ color:var(--yc-black); }
  .coverstory .byline i{ width:4px; height:4px; border-radius:50%; background:var(--yc-stone-200); }

  /* most read */
  .mostread{
    background:transparent; border:1.5px solid var(--yc-black); border-radius:var(--radius-lg);
    padding:28px 28px 14px; position:sticky; top:96px;
  }
  .mostread .mr-head{
    display:flex; align-items:center; gap:12px; margin-bottom:8px;
    font-family:var(--font-display); font-size:30px; text-transform:uppercase; color:var(--yc-black);
  }
  .mostread .mr-head svg{ width:22px; flex-shrink:0; }
  .mr-item{
    display:grid; grid-template-columns:54px 1fr; gap:16px; align-items:start;
    padding:18px 0; border-top:1.5px dashed rgba(0,0,0,.22);
  }
  .mr-item:first-of-type{ border-top:none; }
  .mr-item .num{
    font-family:var(--font-display); font-size:46px; line-height:.85; color:var(--yc-pink-500);
  }
  .mr-item:nth-of-type(even) .num{ color:var(--yc-cyan-500); }
  .mr-item h3{ font-size:15.5px; font-weight:var(--fw-bold); line-height:1.3; color:var(--yc-black); letter-spacing:.005em; }
  .mr-item h3 a{ color:inherit; }
  .mr-item h3 a:hover{ color:var(--yc-pink-600); }
  .mr-item .m{ margin-top:6px; font-size:11px; font-weight:var(--fw-semi); letter-spacing:.06em; text-transform:uppercase; color:var(--yc-stone); }

  /* ============ section heads ============ */
  .sect-head{
    display:flex; align-items:center; gap:18px; margin-bottom:30px;
  }
  .sect-head h2{
    font-family:var(--font-display); font-weight:400; font-size:clamp(34px,4vw,46px);
    line-height:1; text-transform:uppercase; color:var(--yc-black); white-space:nowrap;
  }
  .sect-head .rule{ flex:1; height:1.5px; background:var(--yc-black); opacity:.25; }
  .sect-head .count{
    font-size:12px; font-weight:var(--fw-bold); letter-spacing:.1em; text-transform:uppercase; color:var(--yc-stone);
    white-space:nowrap;
  }

  /* toolbar: chips + search */
  .toolbar{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:34px; }
  .search{
    display:flex; align-items:center; gap:10px;
    border:1.5px solid var(--yc-black); border-radius:var(--radius-pill);
    padding:11px 18px; background:#fff; min-width:250px;
  }
  .search svg{ width:16px; flex-shrink:0; opacity:.6; }
  .search input{
    border:none; outline:none; background:transparent; font-family:var(--font-body);
    font-size:13.5px; color:var(--yc-black); width:100%;
  }
  .search input::placeholder{ color:var(--yc-stone); }

  /* ============ grid ============ */
  .gridzone{ padding:0 0 26px; }
  .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
  @media (max-width:980px){ .grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:640px){ .grid{ grid-template-columns:1fr; } }
  .noresults{
    display:none; padding:44px 0 10px; text-align:center;
    font-family:var(--font-accent); font-size:34px; color:var(--yc-pink-500);
  }

  /* quote interlude */
  .interlude{ padding:74px 0; text-align:center; position:relative; overflow:hidden; }
  .interlude .q{
    font-family:var(--font-accent); font-size:clamp(40px,6vw,72px); line-height:1.1;
    color:var(--yc-pink-500); transform:rotate(-1.5deg); display:inline-block; max-width:20ch;
  }
  .interlude .by{
    margin-top:16px; font-size:12px; font-weight:var(--fw-bold); letter-spacing:.16em;
    text-transform:uppercase; color:var(--yc-graphite);
  }

  /* ============ archive ============ */
  .archive{ padding:8px 0 70px; }
  .arch-row{
    display:grid; grid-template-columns:110px 150px 1fr auto; gap:22px; align-items:baseline;
    padding:20px 6px; border-bottom:1.5px solid rgba(0,0,0,.18);
    transition:background 150ms ease;
  }
  .arch-row:first-of-type{ border-top:1.5px solid var(--yc-black); }
  .arch-row:hover{ background:rgba(255,255,255,.65); }
  @media (max-width:760px){
    .arch-row{ grid-template-columns:1fr auto; }
    .arch-row .ad, .arch-row .ac{ display:none; }
  }
  .arch-row .ad{ font-size:12px; font-weight:var(--fw-semi); letter-spacing:.06em; text-transform:uppercase; color:var(--yc-stone); }
  .arch-row .ac{ font-size:11px; font-weight:var(--fw-bold); letter-spacing:.1em; text-transform:uppercase; color:var(--yc-pink-600); }
  .arch-row h3{
    font-family:var(--font-display); font-weight:400; font-size:26px; line-height:1;
    text-transform:uppercase; color:var(--yc-black);
  }
  .arch-row h3 a{ color:inherit; }
  .arch-row h3 a:hover{ color:var(--yc-pink-600); }
  .arch-row .go{ font-size:18px; color:var(--yc-black); transition:transform 200ms cubic-bezier(.22,1,.36,1); }
  .arch-row:hover .go{ transform:translateX(5px); color:var(--yc-pink-600); }

  /* pagination */
  .pager{
    display:flex; align-items:center; justify-content:center; gap:10px; padding:8px 0 0;
  }
  .pager a{
    width:46px; height:46px; border-radius:50%; border:1.5px solid var(--yc-black);
    display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:var(--fw-bold); color:var(--yc-black);
    transition:background 150ms ease, color 150ms ease;
  }
  .pager a:hover{ background:var(--yc-black); color:#fff; }
  .pager a.cur{ background:var(--yc-pink-500); border-color:var(--yc-pink-500); color:#fff; }
  .pager .dots{ font-weight:var(--fw-bold); color:var(--yc-stone); padding:0 4px; }


/* ============================================================
   YOINY CEDANO — Colors & Type
   Brand: educational personal brand for digital marketing,
   automation, sales, content creation, business strategy.
   Vibe: editorial, strategic, direct, creative, professional.
   ============================================================ */

/* ---------- Webfonts ----------
   Brand-supplied fonts served locally from fonts/.
   Other families load from Google Fonts. Feeling Passionate (accent) loads
   from onlinewebfonts CDN (Personal Use license — license commercially for prod). */






/* cyrillic-ext */

/* cyrillic */

/* greek-ext */

/* greek */

/* hebrew */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek-ext */

/* greek */

/* hebrew */

/* vietnamese */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */



/* ============================================================
   COLOR TOKENS
   Source of truth: Brandbook + "Colores Marca YC.png"
   - 3FC3D6  Turquesa (clarity / strategy)
   - DF4699  Rosa Vibrante (authenticity / energy)  [primary]
   - DA6098  Rosa Suave (secondary pink, from palette)
   - 000000  Negro Absoluto
   - FFFFFF  Blanco Puro
   ============================================================ */
:root {
  /* --- Raw brand colors (do not rename) --- */
  --yc-pink: #DF4699;        /* primary */
  --yc-pink-soft: #DA6098;   /* secondary pink (warmer) */
  --yc-cyan: #3FC3D6;        /* turquoise */
  --yc-black: #000000;
  --yc-white: #FFFFFF;

  /* Canonical neutral grays (per brand update) */
  --yc-gray-1: #4E4E4E;  /* darkest gray */
  --yc-gray-2: #777777;  /* mid gray */
  --yc-gray-3: #A2A2A2;  /* light gray */

  /* Soft pink panel kept for collage layouts (not part of primary palette) */
  --yc-cream-pink: #F5DDE6;

  /* Pink scale (derived from #DF4699) */
  --yc-pink-50:  #FDF1F7;
  --yc-pink-100: #FBDCEB;
  --yc-pink-200: #F5A9CD;
  --yc-pink-300: #ED77B0;
  --yc-pink-400: #E45BA3;
  --yc-pink-500: #DF4699;   /* = brand primary */
  --yc-pink-600: #C53383;
  --yc-pink-700: #A02568;
  --yc-pink-800: #75194C;
  --yc-pink-900: #4A0F30;

  /* Cyan scale (derived from #3FC3D6) */
  --yc-cyan-50:  #ECFAFC;
  --yc-cyan-100: #C9F0F4;
  --yc-cyan-200: #8FDFE8;
  --yc-cyan-300: #5FCFDC;
  --yc-cyan-400: #3FC3D6;   /* = brand cyan */
  --yc-cyan-500: #2BAEC1;
  --yc-cyan-600: #1F8E9F;
  --yc-cyan-700: #156A78;
  --yc-cyan-800: #0E4A53;

  /* Neutrals — aligned to canonical grays */
  --yc-ink: #000000;
  --yc-ink-soft: #1A1A1A;
  --yc-graphite: var(--yc-gray-1);   /* #4E4E4E */
  --yc-stone: var(--yc-gray-2);      /* #777777 */
  --yc-stone-200: var(--yc-gray-3);  /* #A2A2A2 */
  --yc-stone-100: #E6E6E6;

  /* --- Semantic foreground / background --- */
  --bg: var(--yc-white);
  --bg-alt: #FAFAFA;
  --bg-inverse: var(--yc-black);
  --bg-accent-pink: var(--yc-pink-500);
  --bg-accent-cyan: var(--yc-cyan-400);
  --bg-soft-pink: var(--yc-cream-pink);

  --fg: var(--yc-ink);
  --fg-soft: var(--yc-ink-soft);
  --fg-muted: var(--yc-graphite);
  --fg-subtle: var(--yc-stone);
  --fg-on-pink: var(--yc-white);
  --fg-on-cyan: var(--yc-black);
  --fg-on-black: var(--yc-white);

  --border: var(--yc-stone-200);
  --border-strong: var(--yc-ink);

  --link: var(--yc-pink-600);
  --link-hover: var(--yc-pink-700);

  --accent: var(--yc-pink-500);
  --accent-2: var(--yc-cyan-400);

  /* ============================================================
     TYPOGRAPHY TOKENS
     - Headlines / hooks → Bebas Neue (primary), Anton, Oswald
       (condensed bold, all-caps look)
     - Body / education  → Montserrat / DM Sans / Inter / Poppins
       / Arimo (clean sans-serif)
     - Accent / display  → Abang*, Filling Passionate*
       (* substituted with Caveat Brush + Pacifico — see SUBSTITUTIONS
       in README)
     ============================================================ */
  --font-display: "Bebas Neue", "Anton", "Oswald", Impact, sans-serif;
  --font-display-anton: "Anton", "Bebas Neue", Impact, sans-serif;
  --font-display-oswald: "Oswald", "Bebas Neue", Impact, sans-serif;

  --font-body: "Montserrat", "DM Sans", "Inter", "Poppins", "Arimo",
               system-ui, -apple-system, sans-serif;
  --font-body-dmsans: "DM Sans", "Inter", system-ui, sans-serif;
  --font-body-inter: "Inter", system-ui, sans-serif;
  --font-body-poppins: "Poppins", "Inter", system-ui, sans-serif;
  --font-body-arimo: "Arimo", "Montserrat", system-ui, sans-serif;

  /* Accent / handwritten — Feeling Passionate is the sole accent typeface */
  --font-accent: "Feeling Passionate", cursive;
  --font-accent-script: "Feeling Passionate", cursive;

  /* Type scale (designed for Instagram 1080×1350 + web) */
  --text-hook:    clamp(48px, 8vw, 120px);  /* huge condensed hooks */
  --text-h1:      clamp(40px, 6vw, 72px);
  --text-h2:      clamp(32px, 4.5vw, 56px);
  --text-h3:      clamp(24px, 3vw, 40px);
  --text-h4:      clamp(20px, 2.4vw, 28px);
  --text-eyebrow: 14px;
  --text-body-lg: 20px;
  --text-body:    16px;
  --text-body-sm: 14px;
  --text-caption: 12px;
  --text-tiny:    11px;

  /* Line-heights */
  --lh-tight:   0.92;   /* @kind font */ /* condensed display */
  --lh-snug:    1.05;   /* @kind font */
  --lh-normal:  1.25;   /* @kind font */
  --lh-relaxed: 1.55;   /* @kind font */
  --lh-loose:   1.75;   /* @kind font */

  /* Letter-spacing */
  --tracking-display: -0.01em;
  --tracking-eyebrow: 0.18em;
  --tracking-button:  0.06em;
  --tracking-body:    0;

  /* Font-weights */
  --fw-regular: 400;   /* @kind font */
  --fw-medium:  500;   /* @kind font */
  --fw-semi:    600;   /* @kind font */
  --fw-bold:    700;   /* @kind font */
  --fw-black:   900;   /* @kind font */

  /* ---------- Spacing / radius / shadow ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --shadow-soft:   0 6px 18px rgba(11, 11, 11, 0.06);
  --shadow-card:   0 12px 28px rgba(11, 11, 11, 0.10);
  --shadow-pop:    0 18px 40px rgba(223, 70, 153, 0.18);
  --shadow-inset:  inset 0 0 0 1px rgba(11, 11, 11, 0.08);

  /* Editorial layout */
  --max-content: 1200px;
  --grid-gutter: 24px;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Use these in markup directly, or as composition targets.
   ============================================================ */

.h-hook,
.text-hook {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--text-hook);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg);
}

.h1, .text-h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg);
}

.h2, .text-h2 {
  font-family: var(--font-display-anton);
  font-size: var(--text-h2);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--fg);
}

.h3, .text-h3 {
  font-family: var(--font-body-poppins);
  font-weight: var(--fw-bold);
  font-size: var(--text-h3);
  line-height: var(--lh-normal);
  color: var(--fg);
}

.h4, .text-h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--text-h4);
  line-height: var(--lh-normal);
  color: var(--fg);
}

.eyebrow, .text-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.lead, .text-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--text-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-soft);
}

.body, .text-body, p {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-body);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  text-wrap: pretty;
}

.body-sm, .text-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--fg-soft);
}

.caption, .text-caption {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}

.handwrite, .text-handwrite {
  font-family: var(--font-accent);
  font-weight: 400;
  color: var(--yc-pink-500);
  letter-spacing: 0;
}

.script, .text-script {
  font-family: var(--font-accent-script);
  color: var(--yc-pink-500);
}

/* Highlighter / marker fill (editorial post style) */
.mark-pink {
  background: var(--yc-pink-500);
  color: var(--yc-white);
  padding: 0.05em 0.3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.mark-cyan {
  background: var(--yc-cyan-400);
  color: var(--yc-black);
  padding: 0.05em 0.3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.mark-black {
  background: var(--yc-black);
  color: var(--yc-white);
  padding: 0.05em 0.3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Link */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 120ms ease;
}
a:hover { color: var(--link-hover); }

/* Reset-ish — soft global so cards look right out of the box */
.yc-base {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
}



  /* ---------- article layout ---------- */
  .post-hero{ padding:64px 0 38px; position:relative; text-align:center; }
  .breadcrumb{
    display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:26px;
    font-size:12px; font-weight:var(--fw-semi); letter-spacing:.08em; text-transform:uppercase;
  }
  .breadcrumb a{ color:var(--yc-graphite); }
  .breadcrumb a:hover{ color:var(--yc-pink-600); }
  .breadcrumb span{ color:var(--yc-stone-200); }
  .post-hero h1{
    font-family:var(--font-display); font-weight:400;
    font-size:clamp(48px, 7.4vw, 96px); line-height:.9; text-transform:uppercase;
    color:var(--yc-black); margin-inline:auto;
  }
  .post-hero h1 .pink{ color:var(--yc-pink-500); }
  .post-meta{
    display:flex; align-items:center; justify-content:center; gap:16px; margin-top:28px; flex-wrap:wrap;
  }
  .post-meta .who{ display:flex; align-items:center; gap:12px; }
  .post-meta .who image-slot{ width:46px; height:46px; }
  .post-meta .who .name{ font-size:14px; font-weight:var(--fw-bold); color:var(--yc-black); line-height:1.2; }
  .post-meta .who .role{ font-size:12px; color:var(--yc-stone); }
  .post-meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--yc-stone-200); }
  .post-meta .when{ font-size:12.5px; font-weight:var(--fw-semi); letter-spacing:.05em; text-transform:uppercase; color:var(--yc-stone); }

  .post-cover{ padding-bottom:56px; }
  .post-cover .frame{
    border:1.5px solid var(--yc-black); border-radius:var(--radius-lg); overflow:hidden;
    aspect-ratio:21/9; background:var(--yc-cream-pink); position:relative;
  }
  .post-cover image-slot{ width:100%; height:100%; position:absolute; inset:0; }

  /* article body */
  .article{ display:grid; grid-template-columns:1fr minmax(0,720px) 1fr; padding-bottom:80px; }
  .article > *{ grid-column:2; }
  .article .lead{
    font-size:21px; line-height:1.6; font-weight:var(--fw-medium); color:var(--yc-ink-soft);
    margin-bottom:34px;
  }
  .article p{ font-size:17px; line-height:1.75; color:var(--yc-ink-soft); margin-bottom:24px; }
  .article p b{ color:var(--yc-black); }
  .article .em-list{ list-style:none; margin:0 0 24px; }
  .article .em-list li{
    font-size:17px; line-height:1.75; color:var(--yc-ink-soft);
    padding-left:28px; position:relative; margin-bottom:6px;
  }
  .article .em-list li::before{ content:"—"; position:absolute; left:0; color:var(--yc-pink-500); font-weight:700; }

  .article .statement{
    font-family:var(--font-display); font-weight:400; font-size:clamp(30px,4vw,44px);
    line-height:1.02; text-transform:uppercase; color:var(--yc-black);
    margin:42px 0 34px;
  }

  /* PASO heading */
  .paso{ display:flex; align-items:baseline; gap:18px; margin:52px 0 18px; }
  .paso .n{
    font-family:var(--font-display); font-size:64px; line-height:.85; color:var(--yc-pink-500);
  }
  .paso:nth-of-type(even) .n{ color:var(--yc-cyan-500); }
  .paso h2 svg{ color:var(--yc-pink-500); }
  .paso:nth-of-type(even) h2 svg{ color:var(--yc-cyan-500); }
  .tipbox .t{ display:flex; align-items:center; gap:8px; }
  .paso h2{
    font-family:var(--font-display); font-weight:400; font-size:clamp(30px,3.6vw,42px);
    line-height:.95; text-transform:uppercase; color:var(--yc-black);
  }
  .paso-label{
    font-size:12px; font-weight:var(--fw-bold); letter-spacing:var(--tracking-eyebrow);
    text-transform:uppercase; color:var(--yc-pink-600); display:block; margin-bottom:6px;
  }

  /* tip box */
  .tipbox{
    background:#fff; border:1.5px solid var(--yc-black); border-radius:var(--radius-md);
    padding:24px 28px; margin:8px 0 32px;
  }
  .tipbox .t{
    font-size:12px; font-weight:var(--fw-bold); letter-spacing:.12em; text-transform:uppercase;
    color:var(--yc-cyan-600); margin-bottom:8px;
  }
  .tipbox p{ margin:0; font-size:15.5px; }

  /* pull quote */
  .pullquote{
    margin:48px 0; padding:8px 0 8px 34px; border-left:4px solid var(--yc-pink-500);
  }
  .pullquote .q{
    font-family:var(--font-accent); font-size:clamp(38px,5vw,54px); line-height:1.15;
    color:var(--yc-pink-500);
  }
  .pullquote .by{
    margin-top:10px; font-size:12px; font-weight:var(--fw-bold); letter-spacing:.12em;
    text-transform:uppercase; color:var(--yc-stone);
  }

  /* CTA box */
  .ctabox{
    background:var(--yc-black); color:#fff; border-radius:var(--radius-lg);
    padding:44px 46px; margin:54px 0; position:relative; overflow:hidden;
  }
  @media (max-width:640px){ .ctabox{ padding:32px 26px; } }
  .ctabox .k{
    font-size:11px; font-weight:var(--fw-bold); letter-spacing:.16em; text-transform:uppercase;
    color:var(--yc-cyan); margin-bottom:12px; display:block;
  }
  .ctabox h3{
    font-family:var(--font-display); font-weight:400; font-size:clamp(32px,4vw,46px);
    line-height:.95; text-transform:uppercase; color:#fff; max-width:18ch;
  }
  .ctabox p{ color:#CFCFCF; margin:14px 0 24px; max-width:50ch; font-size:15.5px; }
  .ctabox .deco-ast{ top:-20px; right:-14px; width:120px; opacity:.9; }

  /* author */
  .author{
    display:flex; gap:24px; align-items:center;
    background:#fff; border:1.5px solid var(--yc-black); border-radius:var(--radius-md);
    padding:28px 30px; margin:30px 0 0;
  }
  @media (max-width:560px){ .author{ flex-direction:column; text-align:center; } }
  .author image-slot{ width:96px; height:96px; flex-shrink:0; }
  .author .name{ font-family:var(--font-display); font-size:30px; line-height:1; text-transform:uppercase; color:var(--yc-black); }
  .author .bio{ font-size:14.5px; line-height:1.6; color:var(--yc-graphite); margin-top:8px; }
  .author .handle{ font-size:12.5px; font-weight:var(--fw-bold); letter-spacing:.06em; color:var(--yc-pink-600); margin-top:8px; display:inline-block; }

  /* related */
  .related{ padding:64px 0 88px; border-top:1.5px solid var(--yc-black); background:#EFE9DE; }
  .related h2{
    font-family:var(--font-display); font-weight:400; font-size:40px; line-height:1;
    text-transform:uppercase; color:var(--yc-black); margin-bottom:28px;
  }
  .related .grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
  @media (max-width:980px){ .related .grid3{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:640px){ .related .grid3{ grid-template-columns:1fr; } }