/* Hallmark · shape: Broadsheet Front · genre: editorial · theme: Newsprint (deal 3/3, seed spanish-home-printing-guide-c961·b5a1b623·2026-11-08·r0) · redesign: full
 * hero: stage · nav: masthead, the wordmark over a ruled section row · footer: a mast, the wordmark over the links · imagery: photographs · signature: the guides set as a front page, one lead story and a ruled index of headlines
 * axes: light/slab-serif/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S3 R4 V4 · weakest: S, a guide site could share this front; kept the brand's three-layer mark and its orange as the one signal so it reads as Hecho a Capas */
/* Hallmark · waive 49b · the wrapped links are photographer names and licences inside the attribution sentences of the image credits · credits are prose the owner must keep verbatim, so a name breaks like any word in a sentence */
/* Hallmark · dismissed 77 · the home page carries four real blocks (front, para empezar, secciones, footer) and a redesign adds no section the page did not have */
@import url("./tokens.css");
@import url("./base.css");
@import url("./fonts.css");

:root {
  --color-accent: oklch(47% 0.14 45);
  --color-focus: oklch(50% 0.17 45);
  --color-brand-1: oklch(41% 0.07 188);
  --color-brand-2: oklch(53% 0.09 188);
  --color-brand-3: oklch(64% 0.17 48);
  --measure: 68ch;
}

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); background: var(--color-ink); color: var(--color-paper); padding: var(--space-xs) var(--space-md); z-index: var(--z-modal); }
.skip:focus-visible { top: var(--space-md); }

a { color: var(--color-accent); text-decoration-color: var(--color-accent); }
a:hover { text-decoration-thickness: 2px; }
a:active { color: var(--color-ink); }

/* masthead */
.masthead { padding-top: var(--space-xl); }
.masthead-inner { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs) var(--space-xl); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-ink); text-decoration: none; font: var(--display-weight) var(--text-2xl)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.wordmark:hover { color: var(--color-ink-2); }
.wordmark:active { color: var(--color-accent); }
.mark { flex: none; }
.mark-1 { fill: var(--color-brand-1); } .mark-2 { fill: var(--color-brand-2); } .mark-3 { fill: var(--color-brand-3); }
.tagline { color: var(--color-muted); font-weight: 500; font-size: var(--text-md); }
.nav { list-style: none; margin: var(--space-lg) 0 0; padding: var(--space-sm) 0; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.nav a { color: var(--color-ink); text-decoration: none; font-weight: 500; font-size: var(--text-md); }
.nav a:hover { color: var(--color-accent); text-decoration: underline; }
.nav a:active { color: var(--color-ink-2); }
.rule--double { box-sizing: content-box; height: 2px; border: 0; border-block: var(--rule-hair) solid var(--color-rule-2); margin: 0; }
.container-rule { max-width: calc(var(--container) - 2 * var(--gutter)); margin-inline: auto; width: calc(100% - 2 * var(--gutter)); }

/* front page */
.front { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl) var(--gap-columns); align-items: center; padding-block: var(--space-xl) var(--section-gap-s); }
.front-text { display: grid; gap: var(--space-lg); }
.front h1 { font-size: var(--text-display-s); max-width: 14ch; }
.front .lead { max-width: 40ch; }
.actions { margin-top: var(--space-xs); }
.btn { display: inline-block; border: 0; border-radius: var(--radius-pill); padding: var(--space-md) var(--space-lg); font: var(--display-weight) var(--text-md)/1 var(--font-display); text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.btn--primary { background: var(--color-ink); color: var(--color-paper); }
.btn--primary:hover { background: var(--color-ink-2); color: var(--color-paper); }
.btn--primary:active { background: var(--color-accent); color: var(--color-accent-ink); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; transition: none; }
figure { margin: 0; }
figure img, .lead-link img, .index-thumb { border: var(--rule-hair) solid var(--color-rule); filter: grayscale(1) contrast(1.15); }
.front-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 60rem) { .front-photo img { aspect-ratio: 16 / 10; } }
figcaption { font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--color-muted); padding-top: var(--space-xs); }
figcaption a { color: var(--color-muted); }

/* para empezar */
.start { padding-bottom: var(--section-gap-s); }
.start h2 { margin: var(--space-xl) 0 var(--space-xl); }
.start-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-xl) var(--space-2xl); column-rule: var(--rule-hair) solid var(--color-rule); }
.lead-story { display: grid; gap: var(--space-md); align-content: start; }
.lead-link { display: grid; gap: var(--space-md); color: var(--color-ink); text-decoration: none; }
.lead-link img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lead-link h3 { font-size: var(--text-2xl); max-width: 24ch; }
.lead-link:hover h3 { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.lead-link:active h3 { color: var(--color-ink-2); }
.dropcap { max-width: 52ch; }
.dropcap::first-letter { float: left; font: 700 3.4em/0.8 var(--font-display); padding-right: 0.06em; color: var(--color-ink); }
.index { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
.index-row { border-bottom: var(--rule-hair) solid var(--color-rule); }
.index-link { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: var(--space-md); padding-block: var(--space-md); color: var(--color-ink); text-decoration: none; align-items: start; }
.index-thumb { grid-column: 2; grid-row: 1; width: 96px; aspect-ratio: 1; object-fit: cover; }
.index-text { grid-column: 1; grid-row: 1; display: grid; gap: var(--space-2xs); }
.index-head { font: var(--display-weight) var(--text-title)/1.2 var(--font-display); letter-spacing: var(--tracking-display); overflow-wrap: break-word; min-width: 0; }
.index-deck { color: var(--color-ink-2); font-size: var(--text-md); max-width: 60ch; }
.index-link:hover .index-head { color: var(--color-accent); text-decoration: underline; }
.index-link:active .index-head { color: var(--color-ink-2); }
.index-link:focus-visible, .lead-link:focus-visible, .desk-link:focus-visible, .wordmark:focus-visible, .nav a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* secciones */
.desk { background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); padding-block: var(--section-gap-s); margin-bottom: var(--section-gap-s); }
.desk h2 { margin-bottom: var(--space-xl); }
.desks { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
.desk-row { border-bottom: var(--rule-hair) solid var(--color-rule); }
.desk-link { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xs) var(--gap-columns); padding-block: var(--space-xl); color: var(--color-ink); text-decoration: none; align-items: baseline; }
.desk-name { font: var(--display-weight) var(--text-xl)/1.15 var(--font-display); letter-spacing: var(--tracking-display); overflow-wrap: break-word; min-width: 0; }
.desk-line { color: var(--color-ink-2); font-size: var(--text-lg); line-height: 1.45; }
.desk-link:hover .desk-name { color: var(--color-accent); text-decoration: underline; }
.desk-link:active .desk-name { color: var(--color-ink-2); }

/* créditos */
.credits-wrap { padding-block: 0 var(--space-lg); }
.credits { font-size: var(--text-sm); color: var(--color-muted); max-width: var(--measure); }
.credits summary { cursor: pointer; font-weight: 500; color: var(--color-ink); }
.credits summary:hover { color: var(--color-accent); }
.credits summary:active { color: var(--color-ink-2); }
.credits summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.credits ul { padding-left: var(--space-lg); display: grid; gap: var(--space-2xs); }
.credits a { color: var(--color-muted); }

/* pie */
.site-footer { padding-bottom: var(--space-2xl); }
.fwrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: var(--space-xl) var(--gap-columns); padding-block: var(--space-xl); }
.fwrap strong { display: block; font: var(--display-weight) var(--text-lg)/1.2 var(--font-display); margin-bottom: var(--space-sm); }
.fwrap > div:first-child strong { font-size: var(--text-2xl); }
.fwrap p + p { margin-top: var(--space-sm); }
.fwrap li { white-space: nowrap; }
.fwrap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.fwrap a { color: var(--color-ink); }
.fwrap a:hover { color: var(--color-accent); }
.fwrap a:active { color: var(--color-ink-2); }
.fnote { font-size: var(--text-sm); color: var(--color-muted); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-md); max-width: var(--measure); }
.fnote a { color: var(--color-muted); }

@media (max-width: 60rem) {
  .front { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-lg) var(--space-2xl); }
  .front-photo { order: 2; }
  .start-grid { grid-template-columns: minmax(0, 1fr); }
  .desk-link { grid-template-columns: minmax(0, 1fr); }
  .fwrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fwrap > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .masthead { padding-top: var(--space-lg); }
  .nav { gap: var(--space-xs) var(--space-lg); }
  .index-link { grid-template-columns: minmax(0, 1fr) 72px; }
  .index-thumb { width: 72px; }
  .fwrap { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }