/* ============================================================
   fabricaciones-4.1.css

   Architecture: .layout + modifier class
   To add a new layout, add a .layout--name block following
   the pattern below. All layouts share the base grid variables.

   Variables:
     --u     line unit (20px)
     --a     left spine width (80px desktop / 40px mobile)
     --gap   column gutter (40px)
     --text  content column width (520px)

   Zone naming:
     .a      left spine (formerly .num) — date, number, word, dingbat, anything
     .b      primary column (formerly .k)
     .c      secondary column (formerly .c)
     .fila   row container (formerly .prop)
   ============================================================ */


/* ── Fonts ─────────────────────────────── */

/* IBM Plex Mono */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/IBMPlexMono-Light.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/IBMPlexMono-LightItalic.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/IBMPlexMono-SemiBoldItalic.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/IBMPlexMono-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/IBMPlexMono-BoldItalic.woff2') format('woff2');
}


/* IBM Plex Sans */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/IBMPlexSans-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/IBMPlexSans-Italic.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/IBMPlexSans-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/IBMPlexSans-SemiBoldItalic.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/IBMPlexSans-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/IBMPlexSans-BoldItalic.woff2') format('woff2');
}


/* IBM Plex Serif */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/IBMPlexSerif-Light.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/IBMPlexSerif-LightItalic.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/IBMPlexSerif-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/IBMPlexSerif-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/IBMPlexSerif-SemiBoldItalic.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/IBMPlexSerif-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/IBMPlexSerif-BoldItalic.woff2') format('woff2');
}


/* ── Base ───────────────────────────────── */

:root {
  --u:    20px;
  --a:    80px;
  --gap:  40px;
  --text: 520px;

  /* Palette */
  --negro:    #1a1a1a;  /* body text, headings */
  --gris:     #aaaaaa;  /* .a spine, colophon, navigation */
  --cyan:     #0891b2;  /* links */
  --verde:    #736b1e;  /* secondary column (.c) */
  --rojo:     #bf1b1b;  /* asterisco, meta, external */
  --amarillo: #ed8008;  /* additional — not yet assigned */
  --naranja:  #ed3f1c;  /* additional — not yet assigned */
}

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font: 16px/20px 'IBM Plex Sans', sans-serif;
  color: var(--negro);
  padding: calc(var(--u) * 4) 20px calc(var(--u) * 6);
}

/* Serif register — apply to body when document is an essay/archive */
body.f-serif {
  font-family: 'IBM Plex Serif', Georgia, serif;
}


/* ── Type ───────────────────────────────── */

h1 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: var(--u);
  text-transform: lowercase;
  color: var(--negro);
}

h2 {
  font-size: 16px;
  font-weight: 500;
  text-transform: lowercase;
}

h3 {
  font-size: 16px;
  font-weight: 500;
  text-transform: lowercase;
}

h4 {
  font-size: 16px;
  font-weight: 500;
  text-transform: lowercase;
}

h5 {
  font-size: 16px;
  font-weight: 500;
  text-transform: lowercase;
}

h6 {
  font-size: 16px;
  font-weight: 500;
  text-transform: lowercase;
}

p {
  margin-bottom: var(--u);
}

ol, ul {
  margin-bottom: var(--u);
  padding-left: calc(var(--u) * 1.5);
}

ol li, ul li {
  margin-bottom: calc(var(--u) * 0.5);
  line-height: var(--u);
}

ol[type="a"] {
  list-style-type: lower-alpha;
}

a {
  color: var(--cyan);
  text-decoration: none;
}

a:hover {
  color: var(--negro);
}

a.meta {
  color: var(--rojo);
}

a.meta:hover {
  color: var(--negro);
}

a.home {
  font: 300 12px/20px 'IBM Plex Mono', monospace;
  color: var(--gris);
  text-decoration: none;
  margin-right: 0.4em;
}

a.home:hover {
  color: var(--cyan);
}

em { font-style: italic; }

strong { font-weight: 500; }

blockquote {
  font-style: italic;
  color: #aaaaaa;
  margin-bottom: var(--u);
}

/* Utility: mono grey — spine content, dates, dingbats, colophon */
.mono {
  font: 300 12px/20px 'IBM Plex Mono', monospace;
  color: var(--gris);
  white-space: nowrap;
}


/* ── Layout base ────────────────────────── */
/*
   Every layout uses .layout + a modifier class.
   The modifier sets grid-template-columns and max-width.
   Children use .a, .b, .c, .fila, .entrada as needed.

   Zones:
     .a      left spine — holds anything: numbers, dates, words, dingbats
     .b      primary column
     .c      secondary column
     .fila   row container

   To add a layout:
     .layout--name {
       grid-template-columns: ...;
       max-width: ...;
     }
   Add a mobile override inside @media (max-width: 900px) if needed.
*/

.layout {
  display: grid;
  gap: var(--gap);
}


/* ── Layout: structured (bilingual, numbered, or other 3-zone use) ── */
/*
   Zones: a | b | c
   Use for: bilingual propositions, essay + notes, manifesto
   HTML:
     <div class="layout layout--structured">
       <div class="fila d0">
         <div class="a">1.</div>
         <p class="b">Primary text</p>
         <p class="c">Secondary text</p>
       </div>
     </div>
*/

.layout--structured {
  grid-template-columns: var(--a) 1fr 1fr;
  max-width: calc(var(--a) + var(--gap) * 2 + var(--text) * 2);
}

.fila {
  display: contents;
}

.a {
  grid-column: 1;
  font: 300 12px/20px 'IBM Plex Mono', monospace;
  color: var(--gris);
  text-align: right;
}

.b {
  grid-column: 2;
  max-width: var(--text);
  min-width: 0;
}

.c {
  grid-column: 3;
  max-width: var(--text);
  min-width: 0;
  color: var(--verde);
}

/* Missing secondary: b spans both content columns */
.fila:not(:has(.c)) .b {
  grid-column: 2 / span 2;
}

/* Depth tone */
.d1 .a { color: #bbbbbb; }
.d2 .a { color: #cccccc; }
.d3 .a { color: #dddddd; }

/* Section spacing */
.section-start > * {
  margin-top: calc(var(--u) * 2);
}


/* ── Layout: prose (single column, with spine) ── */
/*
   Zones: a | b
   Use for: essays, single-language documents
   HTML:
     <div class="layout layout--prose">
       <div class="a">1.</div>
       <p>Text here</p>
     </div>
   Note: p elements without an .a sibling span full width.
*/

.layout--prose {
  grid-template-columns: var(--a) 1fr;
  max-width: calc(var(--a) + var(--gap) + var(--text));
}

.layout--prose p {
  grid-column: 2;
  max-width: var(--text);
  min-width: 0;
}

.layout--prose .a {
  grid-column: 1;
}


/* ── Layout: flow (index, half columns) ─── */
/*
   Columns: auto-fill at half --text width
   Use for: index, lists, grids of entries
   HTML:
     <div class="layout layout--flow">
       <div class="entrada"><span class="mono">◇ 23.abr.26</span> <a href="...">Title</a></div>
     </div>
*/

.layout--flow {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.entrada {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 20px;
}

.entrada .mono {
  min-width: 80px;
}

.entrada-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.entrada-content .img-slot {
  width: 100%;
  aspect-ratio: 1;
  margin-top: 5px;
}

.entrada-content .img-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.entrada a {
  color: var(--negro);
}

.entrada a:hover {
  color: var(--cyan);
}


/* ── Layout extensions (add here as needed) ─── */
/*
   .layout--3col: three content columns + spine
     grid-template-columns: var(--a) 1fr 1fr 1fr;
     max-width: calc(var(--a) + var(--gap) * 3 + var(--text) * 3);

   .layout--halfcol: two half-width columns + spine
     grid-template-columns: var(--a) 1fr 1fr;
     max-width: calc(var(--a) + var(--gap) * 2 + (var(--text) / 2) * 2);

   Follow the same pattern: define grid-template-columns and
   max-width. Add mobile override if the layout needs to collapse.
*/


/* ── Mobile ─────────────────────────────── */

@media (max-width: 900px) {

  /* shrink spine to 40px — preserves hierarchy without taxing narrow screens */
  :root {
    --a: 40px;
  }

  /* structured: dissolve parent grid, each fila becomes its own
     two-column grid. Fixes the display:contents + absolute
     grid-row collision that caused all filas to pile on rows 1 & 2. */

  .layout--structured {
    display: block;
  }

  .fila {
    display: grid;
    grid-template-columns: var(--a) 1fr;
    gap: 0 var(--gap);
    margin-bottom: var(--u);
  }

  .a {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .b {
    grid-column: 2;
    grid-row: 1;
    max-width: 100%;
  }

  .c {
    grid-column: 2;
    grid-row: 2;
    max-width: 100%;
    color: var(--verde);
    margin-top: 5px;
  }

  /* restore depth tones — fila is no longer display:contents */
  .d1 .a { color: #bbbbbb; }
  .d2 .a { color: #cccccc; }
  .d3 .a { color: #dddddd; }

  /* section-start: margin on fila itself */
  .section-start {
    margin-top: calc(var(--u) * 2);
  }

  /* prose unchanged — already single column */
  /* flow unchanged — auto-fill handles narrow screens */
}


/* ── Colophon ───────────────────────────── */

.colophon {
  font: 300 12px/20px 'IBM Plex Mono', monospace;
  color: var(--gris);
  text-align: right;
  margin-top: calc(var(--u) * 3);
  max-width: calc(var(--a) + var(--gap) * 2 + var(--text) * 2);
}

.colophon a {
  color: var(--gris);
  text-decoration: none;
}

.colophon a:hover {
  color: var(--negro);
}