/* Cuchilleras page theme — ported from the standalone dirdam.github.io
   cuchilleras.html. CuchillerasSans (the sans display cut) already lives in
   base.css as the site's Spanish body typeface; the serif display cut used
   for the essay quote and the riddle phrase is only ever used here, so it
   is declared page-scoped, the same way fonts-theme.css keeps its six
   conlang fonts out of the shared stylesheet. */

@font-face {
  font-family: 'Cuchilleras';
  src: url('/assets/fonts/CuchillerasVF.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 50% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cuchilleras';
  src: url('/assets/fonts/CuchillerasItalicVF.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 50% 100%;
  font-style: italic;
  font-display: swap;
}

/* Hero: three-stop palette (sky blue, cream, sage), the same
   three-stop technique as .hero--work above. Light throughout like
   Fonts/Reflections' own light themes rather than the shared dark sweep,
   so — like those two — the heading/subtitle switch to a dark ink instead
   of the shared white below. */
.hero--cuchilleras {
  --hero-c1: #5d94eb;
  --hero-c2: #ffe2c3;
  --hero-c3: #858e75;
  --hero-blob-a-highlight: rgba(255, 255, 255, 0.6);
  --hero-blob-b-highlight: rgba(133, 142, 117, 0.4);
  background: linear-gradient(120deg, var(--hero-c1), var(--hero-c2), var(--hero-c3), var(--hero-c2), var(--hero-c1));
  background-size: 200% 200%;
}

@media (prefers-reduced-motion: reduce) {
  .hero--cuchilleras {
    background: linear-gradient(135deg, var(--hero-c1), var(--hero-c2), var(--hero-c3));
  }
}

.hero--cuchilleras h1 {
  color: #3d3626;
  text-shadow: 0 1px 3px rgba(255, 250, 240, 0.6);
}

.hero--cuchilleras .subtitle {
  color: rgba(61, 54, 38, 0.85);
}

/* ---------- Font utility classes ----------
   The demonstration text (alphabet, digraph samples, quote, riddle) must
   always render in the actual Cuchilleras faces regardless of the current
   UI language — unlike body copy, which only switches to CuchillerasSans
   when the site itself is in Spanish (see tokens.css). */
.font-cuchilleras {
  font-family: 'Cuchilleras', serif;
}

.font-cuchilleras-sans {
  font-family: 'CuchillerasSans', sans-serif;
}

/* ---------- Intro ----------
   A big wordmark image (as on the original dirdam.github.io page), instead
   of plain text, right below the hero — it doubles as a first live specimen
   of the font's new ch/ll letters (highlighted in gold in the image itself). */
.cuchilleras-logo {
  display: block;
  max-width: 640px;
  width: 100%;
  margin: 0 auto var(--space-8);
}

/* Both download buttons now sit above #introduction (right below the
   pill-nav), so this is scoped to the whole page rather than that
   section — safe since this stylesheet only ever loads on this page. */
.btn-pill svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ---------- Alphabet / numbers tables ---------- */
.table-container {
  overflow-x: auto;
  width: 100%;
}

.cuchilleras-table {
  border-collapse: collapse;
  table-layout: auto;
  width: 100%;
}

.cuchilleras-table td {
  border: 1px solid var(--color-border-neutral);
  padding: var(--space-4);
  white-space: nowrap;
  text-align: center;
  font-size: 1.1em;
}

.cuchilleras-table td:first-child {
  background-color: var(--color-page-bg);
  font-weight: 600;
  font-size: var(--font-size-small);
  white-space: normal;
}

.cuchilleras-table-names td {
  font-size: 1em;
}

/* Flags the three new letters (and the crossed 7) introduced by the font. */
.cuchilleras-table td.is-new-letter {
  background-color: var(--color-badge-bg);
  color: var(--color-badge-text);
  font-weight: 700;
}

/* ---------- Digraph ligature demo ----------
   Reuses the site's own .possibilities-grid/.possibility-card look (see
   fonts-theme.css) instead of introducing a new card component. */
.digraph-demo {
  font-size: 1.3em;
  margin: var(--space-2) 0 var(--space-5);
}

.digraph-demo.no-ligatures {
  font-variant-ligatures: none;
}

.possibility-card .badge {
  margin-top: var(--space-4);
}

.possibility-card .badge:first-of-type {
  margin-top: 0;
}

/* ---------- Font tester ---------- */
/* An id selector, not just the .font-cuchilleras utility class, so this
   beats the higher-specificity `.form-field textarea { font: inherit }`
   rule in components.css (which would otherwise reset font-family back to
   the page's own body font). */
/* A fixed, explicit height rather than relying on the rows attribute —
   rows sizes the box in line-heights, which the size slider itself scales,
   so the box would otherwise grow/shrink as its own font size changes.
   resize:vertical still lets a visitor drag it taller by hand. */
#font-test {
  font-family: 'Cuchilleras', serif;
  font-size: 24px;
  height: 120px;
  resize: vertical;
  /* --color-page-bg at 30% opacity — tinted enough to read as a distinct,
     recessed field against the white content-card, but lighter than the
     page's own solid background so it doesn't read as "a hole showing the
     page through the card". The inset shadow reinforces that recessed
     look on top of the tint. */
  background: rgba(244, 244, 248, 0.3);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* #font-test's id-level specificity would otherwise silently beat the
   site's shared focus-ring rules (both class-scoped) and blank out the
   focus outline entirely — keep the inset shadow but layer the ring back
   on top of it while focused. */
#font-test:focus-visible {
  box-shadow: var(--shadow-focus-ring), inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* More breathing room than the shared .content-card p+p spacing gives —
   this introduces the textarea below it, not another paragraph. */
#type .form-field {
  margin-top: var(--space-8);
}

.cuchilleras-toggle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-8) 0;
}

/* Same segmented-pill look as the site's own language switcher (see
   .lang-toggle in components.css) — a pressed pill button rather than an
   iOS-style on/off switch, so this reads as "pick one of two options"
   using a control this site already establishes, instead of a foreign
   widget borrowed as-is from the original standalone page. */
.cuchilleras-font-toggle {
  display: inline-flex;
  background: var(--overlay-black-06);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}

/* Same height/padding as the nav bar's own pills (--nav-capsule-height,
   see components.css) instead of the taller default button box the first
   version of this toggle used. */
.cuchilleras-font-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-text-subtle);
  height: 36px;
  padding: 0 var(--space-7);
  font-size: var(--font-size-small);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.cuchilleras-font-toggle button:hover {
  color: var(--color-text);
}

.cuchilleras-font-toggle button[aria-pressed="true"] {
  background: var(--gradient-brand);
  color: #ffffff;
}

.cuchilleras-font-toggle button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

/* Size / weight / width sliders — a floating value bubble doubles as the
   slider's own draggable thumb (the native thumb is made transparent). */
.cuchilleras-sliders {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: center;
  margin-bottom: var(--space-6);
}

.cuchilleras-slider-row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  max-width: 420px;
}

.cuchilleras-slider-label {
  width: 70px;
  flex-shrink: 0;
  text-align: right;
  font-weight: 600;
}

.cuchilleras-slider-label::after {
  content: ":";
}

/* Inset by exactly half the value-bubble's width (see .cuchilleras-slider-value
   below) on each side — the bubble is centered on the thumb position, so
   without this inset it would overhang past the track's own ends at the min
   and max values: into the label/colon on the left, and out past the card's
   own edge on the right. This keeps the bubble flush with, never past,
   this container's edges at both extremes. */
.cuchilleras-slider-bar {
  position: relative;
  flex: 1;
  padding: 0 21px;
}

/* A visible gradient track (as on the original page) rather than a flat
   bar — brand-start to brand-end, the same gradient the rest of the site
   uses for its primary buttons. */
.cuchilleras-slider-bar input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: var(--gradient-brand);
  border-radius: var(--radius-pill);
  outline: none;
  margin: 0;
}

.cuchilleras-slider-bar input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: transparent;
  cursor: grab;
}

.cuchilleras-slider-bar input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: grab;
}

/* A solid rounded-rect bubble, sitting directly on the track (vertically
   centered on it) rather than floating in reserved space above — it reads
   as the slider's own visible thumb, matching the label row's own vertical
   alignment instead of sitting off on its own line above it. */
/* A full pill, like every other control on this site (the font toggle
   above, .btn-pill, .lang-toggle) — and its background is set inline by
   cuchilleras.js to the exact point on the brand gradient the track itself
   shows at that value, so the thumb always reads as part of the track
   rather than a flat color dropped on top of it. The var() here is only
   the pre-JS fallback (first paint, reduced-motion/no-JS). */
.cuchilleras-slider-value {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 42px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-start);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-small);
  font-weight: 700;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.cuchilleras-slider-value:active {
  cursor: grabbing;
}

@media (max-width: 600px) {
  .cuchilleras-slider-row {
    max-width: none;
    /* The wider desktop gap doesn't fit next to a fixed-width label on a
       narrow card — it pushed the track past the card's own edge. */
    gap: var(--space-6);
  }

  .cuchilleras-slider-label {
    width: 56px;
  }
}

/* ---------- Gallery ----------
   Two specimen boxes, each cross-fading between its own stacked images
   (see cuchilleras.js) — a purposeful revival of the original standalone
   page's alternating background-photo effect, now demonstrating real
   words set in the font instead of just decorating the page. */
.cuchilleras-gallery-grid {
  margin-top: var(--space-5);
}

/* ---------- Gallery thumbs ----------
   Pick a specific specimen instead of waiting for the auto cross-fade —
   clicking one stops the cycle (see cuchilleras.js). A grey overlay marks
   every thumb as "not the current one" except the active pick, the usual
   selected/unselected convention for a thumbnail strip. */
.cuchilleras-gallery-thumbs {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.cuchilleras-gallery-thumb {
  position: relative;
  width: 64px;
  height: 48px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-page-bg);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.cuchilleras-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cuchilleras-gallery-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(60, 60, 65, 0.45);
  transition: background var(--transition-fast);
}

.cuchilleras-gallery-thumb:hover::after {
  background: rgba(60, 60, 65, 0.2);
}

.cuchilleras-gallery-thumb.is-active {
  border-color: var(--color-brand-start);
}

.cuchilleras-gallery-thumb.is-active::after {
  background: rgba(60, 60, 65, 0);
}

.cuchilleras-gallery-thumb:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

/* aspect-ratio 4/3 gives this box exactly enough height for a square
   image at 75% width (0.75 × 0.75 ≈ 0.5625, comfortably under 0.75) to
   render at its full intended width without being squeezed shorter by a
   fixed pixel height — that was the earlier bug: height:100% forced
   object-fit:contain to size by height first, so square-ish images (like
   Churrería/Taller) rendered far narrower than 75%. */
.cuchilleras-gallery-item {
  position: relative;
  aspect-ratio: 4 / 3;
  max-width: 640px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cuchilleras-gallery-item img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  /* Same rounded-corner/elevation language as .cuchilleras-photo and every
     other card on the site, instead of a bare rectangle. */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-resting);
}

.cuchilleras-gallery-item img.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cuchilleras-gallery-item img {
    transition: none;
  }
}

/* ---------- Example text ---------- */
.cuchilleras-quote {
  font-size: 1.4em;
  font-weight: 300;
  line-height: 1.5;
  margin: var(--space-7) 0;
}

.cuchilleras-photo {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
}

.cuchilleras-caption {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  text-align: center;
}

/* ---------- Riddle ---------- */
.cuchilleras-riddle {
  font-size: 1.6em;
  font-weight: 300;
  text-align: center;
  margin: var(--space-8) 0;
  color: var(--color-badge-text);
}