/* ==========================================================================
   El Faro — Reportajes / Featured articles
   --------------------------------------------------------------------------
   A SURFACE, not a page. Every article under /articulos/<slug>/ uses this
   sheet; adding an article means adding a directory and a row in
   site-data/articles/articles.json, not writing new CSS.

   Brand values all come from /assets/faro-tokens.css, linked BEFORE this file.
   Nothing here defines a color; everything reads a token, so the whole surface
   follows the site theme.

   The type is the design. Fraunces sets the headline and the section heads;
   Archivo carries the body at a real reading measure; Spline Sans Mono marks
   the things that are data rather than prose — confidence, dates, the
   phrasebook's pronunciation notes. If it looks like a magazine and reads like
   a person wrote it, that is the intent.
   ========================================================================== */

/* Self-hosted faces, latin subset. Zero external requests. */
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:300 700; font-display:swap; src:url('/assets/fonts/fraunces-latin.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:400 700; font-display:swap; src:url('/assets/fonts/fraunces-italic-latin.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/fonts/archivo-latin.woff2') format('woff2'); }
@font-face { font-family:'Spline Sans Mono'; font-style:normal; font-weight:400 600; font-display:swap; src:url('/assets/fonts/spline-mono-latin.woff2') format('woff2'); }

* { box-sizing:border-box; margin:0; }
body {
  font-family:var(--font-sans); background:var(--bg); color:var(--ink);
  line-height:1.62; min-height:100vh; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--brand); }
.wrap { width:min(var(--maxw), 92vw); margin:0 auto; }
/* The reading measure. ~66ch is where prose stops being a wall. */
.measure { width:min(68ch, 92vw); margin-inline:auto; }

/* ---------- Header: the night band, same as every El Faro surface ------- */
header.site { background:var(--night-800); color:var(--header-ink); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:var(--header-h); }
.brand { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
.brand svg { color:var(--beam); flex:none; }
.brand b { font-family:var(--font-serif); font-size:1.12rem; font-weight:600; }
.brand em { display:block; font-style:normal; font-size:.76rem; color:var(--header-ink-soft); }
.lang-toggle { display:flex; border:1px solid color-mix(in srgb, var(--header-ink) 34%, transparent); border-radius:var(--radius); overflow:hidden; }
.lang-toggle button { border:0; background:transparent; padding:6px 12px; font:inherit; font-size:.85rem; color:var(--header-ink-soft); cursor:pointer; }
.lang-toggle button.is-active { background:var(--beam); color:var(--on-accent); font-weight:600; }

main { flex:1; }

/* ---------- Article masthead ---------- */
.art-head { padding:clamp(34px,6vw,64px) 0 clamp(20px,3vw,30px); }
.eyebrow {
  font-family:var(--font-mono); font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-txt);
}
.art-head h1 {
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(2rem, 5.6vw, 3.4rem); line-height:1.05; letter-spacing:-.02em;
  margin-top:12px; text-wrap:balance;
}
.dek {
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:clamp(1.06rem, 2.3vw, 1.35rem); line-height:1.42; color:var(--ink-soft);
  margin-top:16px; text-wrap:pretty;
}
.art-meta {
  margin-top:20px; padding-top:14px; border-top:1px solid var(--line-strong);
  font-family:var(--font-mono); font-size:.76rem; color:var(--ink-faint);
  display:flex; flex-wrap:wrap; gap:6px 16px;
}

/* ---------- Body prose ---------- */
.art-body { padding-bottom:40px; }
.art-body > * + * { margin-top:1.15em; }
.art-body p { text-wrap:pretty; }
.art-body p.lead { font-size:1.09rem; }
.art-body h2 {
  font-family:var(--font-serif); font-weight:600; font-size:clamp(1.35rem,3.2vw,1.85rem);
  line-height:1.16; letter-spacing:-.012em; margin-top:2.2em; text-wrap:balance;
}
.art-body h2 + p { margin-top:.6em; }
.art-body h3 { font-family:var(--font-serif); font-weight:600; font-size:1.14rem; margin-top:1.8em; }
.art-body strong { font-weight:700; }

/* Section intro sits between the heading and its list of places. */
.sec-blurb { color:var(--ink-soft); }

/* ---------- Place cards ----------
   A card is a decision aid, not a database row: the name, where it is, how
   sure we are, and one honest paragraph. Confidence is encoded in FORM as
   well as color — the reportado rule is dashed — so it survives a
   colour-blind reader and a black-and-white print. */
.places { display:flex; flex-direction:column; gap:14px; margin-top:1.2em; }
.place {
  background:var(--surface); border:1px solid var(--line-strong);
  border-left:3px solid var(--conf-ok); border-radius:var(--radius);
  padding:16px 18px;
}
.place.is-reportado { border-left-style:dashed; border-left-color:var(--conf-mid); }
.place-top { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; }
.place h3 {
  font-family:var(--font-serif); font-weight:600; font-size:1.16rem; letter-spacing:-.008em;
  margin:0; line-height:1.2;
}
.place .town { font-size:.85rem; color:var(--ink-faint); }
.place p { margin-top:8px; color:var(--ink-soft); font-size:.96rem; }
.place-foot { margin-top:11px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }

.conf {
  font-family:var(--font-mono); font-size:.68rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 8px; border-radius:var(--radius);
  border:1px solid currentColor;
}
.conf-ok { color:var(--conf-ok); }
.conf-rep { color:var(--conf-mid); }

.tag {
  font-size:.74rem; font-weight:600; padding:3px 9px; border-radius:var(--radius-pill);
  border:1px solid currentColor; line-height:1.35;
}
.tag-veg   { color:var(--diet-veg); }
.tag-vegan { color:var(--diet-vegan); }
.tag-gf    { color:var(--diet-gf); }

.dirlink {
  margin-left:auto; font-size:.85rem; font-weight:600; text-decoration:none;
  color:var(--brand); white-space:nowrap;
}
.dirlink:hover { text-decoration:underline; }

/* ---------- Phrasebook ----------
   The most useful thing in the piece, so it gets the most deliberate
   treatment: Spanish large enough to read off a phone at a table, English
   underneath, and the "what you'll hear back" note in mono so it reads as
   annotation rather than more prose. */
.phrasebook {
  margin-top:1.6em; background:var(--night-800); color:var(--header-ink);
  border-radius:var(--radius); padding:clamp(20px,3.5vw,30px);
}
.phrasebook h2 { font-family:var(--font-serif); font-weight:600; font-size:1.45rem; color:var(--header-ink); margin:0 0 4px; }
.phrasebook > p { color:var(--header-ink-soft); font-size:.95rem; max-width:56ch; }
.phrases { list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:2px; }
.phrases li { padding:13px 0; border-top:1px solid color-mix(in srgb, var(--header-ink) 20%, transparent); }
.phrases li:first-child { border-top:0; }
.ph-es {
  display:block; font-family:var(--font-serif); font-weight:600;
  font-size:clamp(1.08rem,2.4vw,1.3rem); line-height:1.3; color:var(--beam);
}
.ph-en { display:block; margin-top:3px; font-size:.95rem; color:var(--header-ink); }
.ph-note {
  display:block; margin-top:6px; font-family:var(--font-mono); font-size:.76rem;
  line-height:1.5; color:var(--header-ink-soft);
}

/* ---------- Callout (the gluten/celiac warning) ----------
   Deliberately NOT the accent color. This is a safety caveat, and safety
   semantics stay separate from brand decoration. */
.callout {
  margin-top:1.6em; background:var(--bad-bg); color:var(--ink);
  border:1px solid var(--bad); border-left:3px solid var(--bad);
  border-radius:var(--radius); padding:18px 20px;
}
.callout h2 { font-family:var(--font-serif); font-weight:600; font-size:1.2rem; margin:0 0 8px; }
.callout p { color:var(--ink-soft); font-size:.95rem; }
.callout p + p { margin-top:.7em; }

/* ---------- Aside (coverage honesty, unknown-status places) ---------- */
.aside {
  margin-top:1.6em; border-left:3px solid var(--line-strong); padding:2px 0 2px 18px;
  color:var(--ink-faint); font-size:.93rem;
}
.aside p + p { margin-top:.7em; }

/* ---------- Corrections / provenance ---------- */
.provenance {
  margin-top:2.4em; padding-top:18px; border-top:1px solid var(--line-strong);
  color:var(--ink-faint); font-size:.88rem;
}
.provenance p + p { margin-top:.6em; }
.provenance a { color:var(--brand); }

/* ---------- Article index ---------- */
.idx-head { padding:clamp(34px,6vw,60px) 0 8px; }
.idx-head h1 { font-family:var(--font-serif); font-weight:600; font-size:clamp(1.9rem,4.6vw,2.8rem); letter-spacing:-.018em; }
.idx-head p { margin-top:12px; color:var(--ink-soft); max-width:56ch; }
.idx-list { display:flex; flex-direction:column; gap:14px; padding:28px 0 46px; }
a.idx-card {
  display:block; text-decoration:none; color:inherit; background:var(--surface);
  border:1px solid var(--line-strong); border-left:3px solid var(--accent);
  border-radius:var(--radius); padding:20px 22px;
  transition:box-shadow .15s, border-color .15s;
}
a.idx-card:hover { box-shadow:var(--shadow-md); border-left-color:var(--brand); }
.idx-card h2 { font-family:var(--font-serif); font-weight:600; font-size:1.4rem; letter-spacing:-.012em; margin-top:6px; text-wrap:balance; }
.idx-card p { margin-top:8px; color:var(--ink-soft); font-size:.96rem; max-width:62ch; }
.idx-card .when { font-family:var(--font-mono); font-size:.72rem; color:var(--ink-faint); margin-top:10px; display:block; }

/* ---------- Footer ---------- */
footer.site {
  background:var(--night-900); color:var(--footer-ink);
  padding:26px 0 34px; font-size:.86rem; margin-top:auto;
}
footer.site p + p { margin-top:5px; color:var(--footer-ink-soft); }
footer.site a { color:var(--footer-link); }

/* Language visibility — the site-wide convention */
[data-lang="es"] .lang-en { display:none !important; }
[data-lang="en"] .lang-es { display:none !important; }