/* ============================================================
   flink; — flink.cl · tema propio (sin build)
   Marca heredada del Tumblr original (2012–2014): "flink;" en mono magenta con el punto y coma
   gris, fondo papel claro, links grises que al hover se marcan con resaltador amarillo rayado,
   y títulos con el mismo resaltador. Todo en monoespaciada.
   ============================================================ */

@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plexmono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plexmono-500.woff2") format("woff2"); }

:root {
  --magenta:   #ff258b;   /* logo "flink" */
  --semi:      #cbcbcb;   /* el ";" del logo */
  --hl:        #fff700;   /* resaltador */
  --cyan:      #19c2ff;   /* acento secundario (h3 del tumblr) */
  --red:       #e60000;   /* alt del tumblr — reservado */
  --paper:     #f2f2f2;
  --card:      #ffffff;
  --ink:       #1a1a1a;
  --muted:     #6f7373;   /* gris del tumblr (#8e9292) oscurecido para AA sobre papel */
  --line:      #dddddd;
  --stripe: repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 2px, transparent 2px 6px);

  --font: "IBM Plex Mono", ui-monospace, Consolas, Menlo, monospace;
  --wrap: 900px;
  --meta-w: 170px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 15px/1.7 var(--font);
}
img, video, iframe { max-width: 100%; }
a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover, a:focus-visible { color: #000; background-color: var(--hl); background-image: var(--stripe); text-decoration-color: transparent; }

.fl-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.fl-skip { position: absolute; left: -9999px; }
.fl-skip:focus { left: 16px; top: 8px; z-index: 10; }
.fl-hl { background-color: var(--hl); background-image: var(--stripe); padding: 0 .25em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---------- header ---------- */
.fl-header { padding-top: 32px; }
.fl-header-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.fl-brand { text-decoration: none; }
.fl-brand:hover { background: none; }
.fl-wm { font: 400 clamp(40px, 9vw, 72px)/1 var(--font); color: var(--magenta); letter-spacing: -.02em; }
.fl-wm-semi { color: var(--semi); }
.fl-lang { font-size: 13px; color: var(--muted); padding-bottom: 12px; }
.fl-lang a { text-decoration: none; padding: 2px 4px; }
.fl-lang a.is-active { color: #000; background-color: var(--hl); background-image: var(--stripe); }
.fl-subbar { display: flex; align-items: center; gap: 16px; margin-top: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.fl-stripe { background-color: var(--muted); background-image: var(--stripe); }
.fl-contact { width: var(--meta-w); text-align: right; padding: 2px 10px; }
.fl-contact a { color: #fff; text-decoration: none; font-size: 13px; }
.fl-contact a:hover { color: #000; }
.fl-tagline { color: var(--muted); font-size: 13px; }

/* ---------- listado ---------- */
.fl-main { padding: 40px 0 64px; }
.fl-entry, .fl-post { display: grid; grid-template-columns: var(--meta-w) minmax(0, 1fr); gap: 0 24px; }
.fl-entry { padding: 28px 0; border-bottom: 1px solid var(--line); }
.fl-entry-meta { border-right: 1px solid var(--line); padding-right: 16px; text-align: right; font-size: 12px; color: var(--muted); }
.fl-entry-meta time { display: block; }
.fl-entry-kind { display: block; font-size: 22px; line-height: 1.2; color: var(--ink); font-weight: 400; text-transform: lowercase; text-decoration: none; margin-bottom: 4px; }
.fl-entry-link { display: block; text-decoration: none; color: var(--ink); }
.fl-entry-link:hover { background: none; color: var(--ink); }
.fl-entry-link:hover .fl-entry-title { background-color: var(--hl); background-image: var(--stripe); }
.fl-entry-img { margin-bottom: 14px; background: var(--card); }
.fl-entry-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.fl-entry-title { display: inline; font-size: 22px; font-weight: 500; line-height: 1.35; margin: 0; padding: 0 .2em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.fl-entry-excerpt { color: var(--muted); font-size: 14px; margin: 10px 0 0; }
.fl-pagination { display: flex; justify-content: space-between; padding: 32px 0 0 calc(var(--meta-w) + 24px); font-size: 13px; color: var(--muted); }
.fl-empty { color: var(--muted); }

/* ---------- post ---------- */
.fl-post-title { font-size: clamp(26px, 4vw, 36px); font-weight: 500; line-height: 1.3; margin: 0 0 16px; }
.fl-post-lede { color: var(--muted); font-size: 16px; }
.fl-content { font-size: 15px; }
.fl-content h2, .fl-content h3 { color: var(--cyan); font-weight: 400; line-height: 1.25; margin: 2em 0 .5em; }
.fl-content h2 { font-size: 28px; }
.fl-content h3 { font-size: 22px; }
.fl-content img { height: auto; }
.fl-content blockquote { margin: 1.5em 0; padding: .2em 0 .2em 1em; border-left: 4px solid var(--magenta); color: var(--muted); }
.fl-content pre, .fl-content code { font-family: var(--font); background: var(--card); }
.fl-content pre { padding: 12px; overflow-x: auto; }
.fl-content figure { margin: 1.5em 0; }
.fl-content figcaption { font-size: 12px; color: var(--muted); }
/* Embeds: 16:9 por defecto; flink-embeds.js pone la proporción real de cada video. */
.fl-content iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; margin: 0 auto; }
.fl-content iframe.fl-embed-vertical { max-width: min(400px, 100%); }
.fl-content iframe.fl-embed-ig { aspect-ratio: auto; max-width: 400px; height: 710px; background: var(--card); }
.fl-content .kg-gallery-row { display: flex; gap: 8px; margin-bottom: 8px; }
.fl-content .kg-gallery-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fl-source { margin-top: 2em; font-size: 12px; color: var(--muted); }
.fl-error { padding: 40px 16px; }

/* ---------- footer ---------- */
.fl-footer { border-top: 1px solid var(--line); padding: 24px 0 40px; font-size: 12px; color: var(--muted); }
.fl-social { display: flex; gap: 16px; margin-bottom: 8px; }
.fl-made { margin: 0; }

/* ---------- móvil ---------- */
@media (max-width: 700px) {
  .fl-entry, .fl-post { grid-template-columns: 1fr; }
  .fl-entry-meta { border-right: 0; text-align: left; padding: 0 0 10px; display: flex; gap: 12px; align-items: baseline; }
  .fl-entry-kind { font-size: 16px; margin: 0; }
  .fl-contact { width: auto; }
  .fl-pagination { padding-left: 0; }
}

/* ---------- cards del editor de Ghost (requeridas por gscan) ---------- */
.kg-width-wide { margin-left: -40px; margin-right: -40px; }
.kg-width-full { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.kg-width-full img { width: 100%; }
.kg-gallery-container { display: flex; flex-direction: column; }
.kg-bookmark-card { margin: 1.5em 0; }
.kg-bookmark-container { display: flex; background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.kg-bookmark-container:hover { background: var(--card); }
.kg-bookmark-content { flex: 1; padding: 14px; min-width: 0; }
.kg-bookmark-title { font-weight: 500; }
.kg-bookmark-description { color: var(--muted); font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kg-bookmark-metadata { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.kg-bookmark-icon { width: 16px; height: 16px; }
.kg-bookmark-author, .kg-bookmark-publisher { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kg-bookmark-thumbnail { position: relative; width: 30%; max-height: 120px; }
.kg-bookmark-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .kg-width-wide { margin-left: 0; margin-right: 0; } }


/* Modelos 3D (model-viewer) */
.fl-content model-viewer { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; background: var(--card); border: 1px solid var(--line); --poster-color: var(--card); }
.fl-model-note { font-size: 12px; color: var(--muted); margin-top: 6px; }
.fl-size { font-size: 12px; color: var(--muted); }