/* Dragones & Café, coming-soon page (T-0018). Direction 2a, La Edición.
   Values are copied from dragones-cafe-design-system/tokens/ (colors,
   typography, spacing); the fonts are subsets made by build.py. Served under
   a CSP without unsafe-inline: every style lives here. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('/cormorant-garamond-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/cormorant-garamond.woff2') format('woff2');
}
@font-face {
  font-family: 'Tenor Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/tenor-sans.woff2') format('woff2');
}
@font-face {
  font-family: 'Ephesis';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/ephesis.woff2') format('woff2');
}

:root {
  --dc-tinta: #3A1A33;
  --dc-papel: #F6F2ED;
  --dc-oro: #B18448;
  --dc-lavanda: #C2A7BE;
  --dc-oro-tinta: #8B6839;
  --dc-ciruela-tinta: #675864;

  --surface-page: var(--dc-papel);
  --text-ink: var(--dc-tinta);
  --text-muted: var(--dc-ciruela-tinta);
  --text-accent: var(--dc-oro-tinta);  /* gold as text, AA on paper */
  --accent-foil: var(--dc-oro);        /* ornaments and display type >= 24px */
  --rule-ink: rgba(58, 26, 51, .18);
  --focus-ring: var(--dc-oro-tinta);

  --font-serif: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --font-label: 'Tenor Sans', 'Gill Sans', Optima, sans-serif;
  --font-script: 'Ephesis', 'Snell Roundhand', cursive;

  --tracking-label: .28em;
  --tracking-display: -.025em;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--surface-page); }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-ink);
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--dc-lavanda); color: var(--dc-tinta); }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--text-accent); }
a:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 4px; }

img { display: block; max-width: 100%; height: auto; }

p, h1, figure { margin: 0; }

/* The page root is the container: the fluid sizes below use cqi. */
.page {
  container-type: inline-size;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.label {
  font-family: var(--font-label);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Ornaments are inline SVG: no shipped font holds a star or an arrow. */
.ornament {
  display: inline-block;
  width: .8em;
  height: .8em;
  margin: 0 .35em;
  vertical-align: -.02em;
  fill: currentColor;
}
.star { color: var(--text-accent); }
.arrow { width: 1.4em; height: 1em; margin: 0 0 0 .6em; vertical-align: -.2em; }

.folio, .colophon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: clamp(18px, 2.4cqi, 32px) clamp(20px, 3.4cqi, 56px);
}
.folio { border-bottom: 1px solid var(--rule-ink); }
.colophon { border-top: 1px solid var(--rule-ink); justify-content: center; text-align: center; }

.cover {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 6cqi, 96px);
  padding: clamp(48px, 7cqi, 112px) clamp(20px, 3.4cqi, 56px);
}

.cover-text {
  flex: 1 1 340px;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.firma { width: min(100%, 420px); }
.firma-small { width: min(100%, 300px); }
.firma img { width: 100%; }

.rule {
  display: block;
  width: 56px;
  height: 1px;
  margin: clamp(28px, 3cqi, 40px) 0 clamp(20px, 2.4cqi, 28px);
  background: var(--accent-foil);
}

.eyebrow { color: var(--text-accent); }

.headline {
  margin-top: 14px;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 4.6cqi, 70px);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.lede {
  margin-top: clamp(18px, 2cqi, 26px);
  max-width: 32ch;
  font-weight: 500;
  font-size: clamp(21px, 1.8cqi, 26px);
  line-height: 1.45;
  text-wrap: pretty;
}

.back { margin-top: clamp(28px, 3cqi, 40px); }

.link {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-ink);
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-ink);
  transition: color .4s ease;
}

.qrioso {
  flex: 0 1 380px;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.qrioso img { width: 100%; }
.qrioso figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  margin-top: -8px;
}
.qrioso-name {
  font-family: var(--font-script);
  font-size: clamp(64px, 6.4cqi, 96px);
  line-height: .9;
  color: var(--text-accent);  /* 4.55:1 on paper; foil was 3.01:1 */
}

/* One column below the tablet width: Qrioso follows the text. */
@container (max-width: 859px) {
  .qrioso { flex-basis: 100%; max-width: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}