/* ===========================================================================
   Casas + Orígenes — the IA directory sections (houses and countries).
   White canvas, burgundy as the single scarce accent, mono/serif "folio"
   furniture consistent with the Intaglio identity. Loaded via page_css on
   /casas/, /casas/<slug>/, /origen/, /origen/<slug>/.
   Casas-specific additions: the Gazetteer Register (.dir-atlas, houses bound
   under country headers) and the casa-detail Atlas Entry folio head
   (.dir-folio, a mono facts row under the morphing <h1>).
   =========================================================================== */
.dir-page { padding-top: 26px; padding-bottom: 72px; }

.dir-head { max-width: 62ch; margin-bottom: 34px; }
.dir-crumb {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--warm-grey);
}
.dir-crumb a { color: var(--warm-grey); transition: color var(--dur-fast, .2s) var(--ease-out, ease); }
.dir-crumb a:hover { color: var(--burgundy); }
.dir-eyebrow { margin-top: 20px; }
.dir-head h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(34px, 6vw, 52px); letter-spacing: -.015em; margin: 10px 0 0;
}
.dir-lead { margin-top: 14px; max-width: 54ch; line-height: 1.55; }
.dir-count {
  margin-top: 12px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .06em; color: var(--warm-grey);
}

/* Directory grid of house / country tags. */
.dir-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px; margin-top: 6px;
}
.dir-tag {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  min-height: 104px; padding: 18px 20px;
  border: 1px solid var(--line-2); background: var(--surface);
  transition: border-color var(--dur-fast, .2s) var(--ease-out, ease),
              background var(--dur-fast, .2s) var(--ease-out, ease);
}
.dir-tag:hover { border-color: var(--burgundy); background: var(--cream); }
.dir-tag-name { font-size: 21px; letter-spacing: -.01em; color: var(--ink); }
.dir-tag:hover .dir-tag-name { color: var(--burgundy); }
.dir-tag-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dir-tag-n { font-size: 11px; letter-spacing: .04em; color: var(--warm-grey); white-space: nowrap; }
.dir-tag:hover .dir-tag-n { color: var(--burgundy); }

/* Detail header extras (origen_detail.html: a plain reference count under the
   country <h1> — no country chip needed there, the page IS the country). */
.dir-detail-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px; }
.dir-back { font-size: 11px; letter-spacing: .06em; color: var(--warm-grey); }

.dir-products { margin-top: 30px; }
.dir-empty { margin-top: 20px; padding: 46px 0; }

@media (max-width: 600px) {
  .dir-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .dir-tag { min-height: 92px; padding: 15px 16px; }
  .dir-tag-name { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .dir-crumb a, .dir-tag, .dir-tag-name { transition: none; }
}

/* ---------------------------------------------------------------------------
   The Meridian (Orígenes #1) — one continuous engraved calibration rule
   replacing the flat country tile grid. A hairline runs the content width at
   the top of the list; each row (tick) closes it off below, so the whole set
   reads as ONE instrument, not disconnected tiles. Stroke length is real and
   server-computed (views.origen(), `--w`) — never a client-side guess.
   --------------------------------------------------------------------------- */
.meridian { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line-2); }
.meridian-tick {
  display: flex; align-items: center; gap: 22px;
  padding: 15px 2px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background var(--dur-fast, .2s) var(--ease-out, ease);
}
.meridian-tick:hover { background: var(--cream); }
.meridian-name {
  flex: 0 0 176px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  font-variant: small-caps; color: var(--ink);
  transition: color var(--dur-fast, .2s) var(--ease-out, ease);
}
.meridian-tick:hover .meridian-name { color: var(--burgundy); }
.meridian-track { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
/* The tick's proportional reading: draws in once via the [data-reveal]/.is-revealed
   contract (motion.css) — scaleX from left, transform-only, so CLS stays zero
   (the track's true width is already reserved; only the paint animates).
   flex-shrink stays ON: the full-scale (100%) stroke must cede exactly the count
   label's width, or the label clips at the right viewport edge; shorter strokes
   never overflow, so their honest proportions are untouched. */
.meridian-stroke {
  display: block; height: 2px; width: var(--w); max-width: 100%; flex: 0 1 auto;
  background: var(--burgundy); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-reveal, 800ms) var(--ease-out, ease);
}
.meridian-tick.is-revealed .meridian-stroke { transform: scaleX(1); }
.meridian-n {
  flex: 0 0 auto; font-size: 11px; letter-spacing: .04em; color: var(--warm-grey);
  white-space: nowrap; transition: color var(--dur-fast, .2s) var(--ease-out, ease);
}
.meridian-tick:hover .meridian-n { color: var(--burgundy); }

/* Narrow viewports: the meridian becomes vertical — each tick's own axis
   rotates from an inline row (name · bar · count) to a stacked column (name
   atop the bar), same three facts, same idiom, just re-flowed for width. */
@media (max-width: 600px) {
  .meridian-tick { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 2px; }
  .meridian-name { flex: 0 0 auto; }
  .meridian-track { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .meridian-stroke { transform: scaleX(1) !important; transition: none !important; }
}

/* ---------------------------------------------------------------------------
   THE PHILATELIC REGISTER (RIG DRAFT, ?origen=sellos): the country directory
   as a sheet of engraved postage stamps — perforated edge (hole mask on the
   outer tile, an inner plate of the same tint hides the central holes so only
   the edge ring perforates), one classical stamp color per country (--sf,
   server-assigned), a real product cover as the vignette, the true count as
   the denomination. Owner correction 2026-07-19: images + color, no bars.
   --------------------------------------------------------------------------- */
/* The collector sheet: cream selvage, registration crosses, printer's
   color-control bar — the stamps live ON a printed sheet, not on the page. */
.sheet { position: relative; background: #faf7f1; border: 1px solid var(--line-2);
  padding: 30px 30px 22px; margin-top: 10px; }
.sheet::before, .sheet::after { content: ""; position: absolute; width: 14px; height: 14px; opacity: .45;
  background: linear-gradient(var(--burgundy-deep), var(--burgundy-deep)) center / 100% 1px no-repeat,
              linear-gradient(var(--burgundy-deep), var(--burgundy-deep)) center / 1px 100% no-repeat; }
.sheet::before { top: 10px; left: 10px; }
.sheet::after { bottom: 10px; right: 10px; }
.sheet-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--warm-grey);
  margin-bottom: 22px; }
.colorbar { display: flex; gap: 6px; justify-content: center; margin-top: 26px; }
.colorbar span { width: 22px; height: 9px; display: block; }
.philately { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 30px 26px; }
.stamp { display: block; position: relative; aspect-ratio: 4 / 5;
  text-decoration: none; color: inherit;
  transition: transform var(--dur-mid, .4s) var(--ease-out, ease); }
/* The perforated plate lives on ::before so the hole mask can never clip the
   stamp's own content (a mask on the element would mask every child with it). */
.stamp::before { content: ""; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--sf) 16%, #fdfcf8);
  -webkit-mask: radial-gradient(circle 5px, transparent 5.4px, #000 6px) 0 0 / 22px 22px round;
  mask: radial-gradient(circle 5px, transparent 5.4px, #000 6px) 0 0 / 22px 22px round; }
.stamp:hover { transform: translateY(-4px); }
.stamp-inner { position: absolute; inset: 10px;
  background: color-mix(in srgb, var(--sf) 16%, #fdfcf8);
  border: 1.4px solid var(--sf);
  display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.stamp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.stamp-head { font-family: "Bodoni Moda", serif; font-weight: 600; font-size: 14px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sf);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stamp-no { font-size: 24px; font-weight: 600; color: var(--sf); line-height: 1; }
/* STANDARD v1 §4 bicolor convention: the FRAME carries the per-country plate
   color; every vignette prints in ONE shared duotone pair — warm parchment
   highlight (the vignette ground, via multiply) + oxblood-tinted shadow ink
   (via screen) — never re-inked per country. Two plates, like a real bicolor. */
.stamp-vignette { position: relative; isolation: isolate; flex: 1 1 auto; min-height: 0;
  background: #FAF6EE; border: 1px solid color-mix(in srgb, var(--sf) 40%, transparent);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.stamp-vignette img { width: 100%; height: 100%; object-fit: contain; padding: 10px;
  box-sizing: border-box; filter: grayscale(1) contrast(1.06); mix-blend-mode: multiply; }
.stamp-vignette::after { content: ""; position: absolute; inset: 0;
  background: #35141C; mix-blend-mode: screen; pointer-events: none; }
.stamp-denom { color: var(--sf); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.stamp-foot { font-size: 8.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--warm-grey); }
@media (max-width: 600px) {
  .philately { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px 16px; }
  .stamp-inner { padding: 9px; gap: 6px; }
  .stamp-denom b { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .stamp, .stamp:hover { transform: none; transition: none; }
}

/* Origin detail folio head — a hairline + mono facts row (país · reference
   count), matching the acta/folio register used across the trust surfaces.
   Real data only: both facts already come straight from views.origen_detail(). */
.dir-folio {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2);
  font-size: 12px; letter-spacing: .06em; color: var(--warm-grey);
}
.dir-folio-sep { color: var(--line-2); }

/* ---------------------------------------------------------------------------
   THE GAZETTEER REGISTER (casas index): houses bound under country headers —
   an atlas table of contents, not a flat tag cloud. Reuses the .dir-tag/
   .dir-grid tile idiom unchanged (the Atlas Fold vt-house-name pairing lives
   on the tile itself, untouched by this grouping). Each group is its own
   [data-reveal] with the shared stagger convention (30ms/group); the global
   reduced-motion kill in motion.css already covers it — nothing page-specific
   needed here. "Sin país registrado" is an honest appendix, visually quieter
   (muted header, no oxblood rule) so it never reads as a real country.
   --------------------------------------------------------------------------- */
.dir-atlas { margin-top: 8px; }
.dir-country-group { margin-top: 40px; }
.dir-country-group:first-child { margin-top: 0; }
.dir-country-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 8px; margin-bottom: 16px; border-bottom: 1px solid var(--burgundy-deep);
}
.dir-country-name {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); margin: 0;
}
.dir-country-n { font-size: 11px; letter-spacing: .04em; color: var(--warm-grey); white-space: nowrap; }
.dir-country-group-unresolved .dir-country-head { border-bottom-color: var(--line-2); }
.dir-country-group-unresolved .dir-country-name { color: var(--warm-grey); font-style: italic; }

@media (max-width: 600px) {
  .dir-country-group { margin-top: 32px; }
}

/* ---------------------------------------------------------------------------
   CASA DETAIL as an atlas entry: a folio-style head. The hairline rule sits
   under the morphing <h1>; the mono facts row beneath lists ONLY the facts
   that are actually present (país · referencias · concentraciones) — each an
   inline span so the middle-dot separator (::before on a following sibling)
   never appears next to an absent fact. Scoped to .dir-folio-head (the
   casa_detail.html header carries that extra class) so this atlas-entry
   variant never collides with the origin-detail folio below, which shares
   the .dir-folio/.dir-folio-fact names but a different (flex + explicit
   separator span) layout for a different page. */
.dir-folio-head .dir-folio {
  margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line-2);
  font-size: 11px; letter-spacing: .06em; color: var(--warm-grey);
}
.dir-folio-head .dir-folio-fact { display: inline; }
.dir-folio-head .dir-folio-fact a { color: var(--burgundy); }
.dir-folio-head .dir-folio-fact + .dir-folio-fact::before { content: "\00b7"; margin: 0 10px; color: var(--line-2); }

/* Per-house cross-sell "Más de {país}" — a hairline-ruled register (mirrors the home
   casa-band), NOT another card grid: mono eyebrow, Bodoni names, arrows, no new colors. */
.casa-siblings { margin-top: 46px; max-width: 640px; }
.casa-sib-eyebrow {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--warm-grey); margin-bottom: 4px;
}
.casa-sib-list { list-style: none; margin: 0; padding: 0; }
.casa-sib {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-top: 1px solid var(--line);
  font-family: var(--serif); font-size: 18px; color: var(--ink);
  transition: color var(--dur-fast, .2s) var(--ease-out, ease),
              padding-left var(--dur-fast, .2s) var(--ease-out, ease);
}
.casa-sib:hover { color: var(--burgundy); padding-left: 6px; }
.casa-sib-meta { display: inline-flex; align-items: center; gap: 12px; }
.casa-sib-n { font-family: var(--mono); font-size: 11px; color: var(--warm-grey); }
.casa-sib-arrow { font-size: 13px; color: var(--warm-grey); }
.casa-sib:hover .casa-sib-n, .casa-sib:hover .casa-sib-arrow { color: var(--burgundy); }
@media (prefers-reduced-motion: reduce) {
  .casa-sib { transition: none; }
  .casa-sib:hover { padding-left: 0; }
}