/*
  yolicali.css — shared stylesheet for yolicali.mx
  ────────────────────────────────────────────────
  The canonical "essay-page" treatment used across the site.
  Each page can override individual rules inline if needed
  (the homepage uses a larger logo, for example).
*/


/* ---- Fonts ---- */

/*
  Equity, by Matthew Butterick (MB Type). A serif in the Ehrhardt
  tradition, designed for long-form reading. Self-hosted WOFF2; no
  external font services. Equity A is the standard weight grade.
  The Caps variant provides real small caps — drawn at the correct
  optical weight, not scaled-down capitals.

  https://mbtype.com/fonts/equity/
*/

@font-face {
  font-family: 'Equity A';
  src: url('/fonts/equity_a_regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Equity A';
  src: url('/fonts/equity_a_italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Equity A';
  src: url('/fonts/equity_a_bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Equity A Caps';
  src: url('/fonts/equity_a_caps_regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* ---- Tokens ---- */

/*
  Warm, quiet palette. Off-white ground, dark charcoal text.
  The accent red comes from the Yolicali logo — earthy, not bright.
  Measure set to 38 em for comfortable reading line length.
*/

:root {
  --color-bg:         #f4efe4;
  --color-text:       #302a24;
  --color-text-light: #5a5a5a;
  --color-accent:     #a03520;
  --color-gold:       #b8860b;
  --color-rule:       #d4cfc7;
  --font-body:        'Equity A', Georgia, 'Times New Roman', serif;
  --font-caps:        'Equity A Caps', Georgia, 'Times New Roman', serif;
  --measure:          38em;
}


/* ---- Reset ---- */

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


/* ---- Document ---- */

html {
  font-size: 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
}


/* ---- Page container ---- */

.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
}


/* ---- Logo ---- */

/*
  Apple HIG corner radius: 10/57 of width ≈ 17.54%.
  CSS border-radius as a percentage gives the same ratio at any size.
*/

.logo {
  text-align: center;
  margin-bottom: 3rem;
}

.logo img {
  width: 160px;
  height: auto;
  border-radius: 17.54%;
  box-shadow: 0 2px 12px rgb(0 0 0 / 8%);
}


/* ---- Page title ---- */

h1 {
  font-family: var(--font-caps);
  font-weight: normal;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 3rem;
}


/* ---- Subtitle (the line below an h1) ---- */

/*
  Used on essay pages, the exchange-rate page, and anywhere else a
  short italic descriptor follows the title. Italic, gray, centered.
*/

.subtitle {
  text-align: center;
  font-style: italic;
  color: var(--color-text-light);
  margin-bottom: 3rem;
}

/* When a subtitle immediately follows h1, tighten the gap above the
   subtitle so the two read as a single titling unit. The :has()
   selector here means we only adjust h1 margin when a subtitle is
   actually present. */
h1:has(+ .subtitle) {
  margin-bottom: 0.6rem;
}


/* ---- Section headings ---- */

/*
  Real small caps via Equity A Caps — drawn at the correct optical
  weight by Butterick, not faked with CSS text-transform.
*/

h2 {
  font-family: var(--font-caps);
  font-weight: normal;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  color: var(--color-text-light);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}


/* ---- Body text ---- */

p {
  margin-bottom: 1.4rem;
  text-wrap: pretty;       /* orphan + widow protection */
}

p:last-child {
  margin-bottom: 0;
}


/* ---- Lists ---- */

ul,
ol {
  margin: 0 0 1.4rem 1.5rem;
}

li {
  margin-bottom: 0.6rem;
}


/* ---- Quoted passages ---- */

/*
  Centered pull-quote: each quote becomes a small feature element,
  italic and slightly larger, in muted text. No left rule, no chrome.
*/

blockquote {
  text-align: center;
  font-style: italic;
  color: var(--color-text-light);
  margin: 2rem 0;
  font-size: 1.15rem;
}


/* ---- Example callouts (not quotes) ---- */

/*
  For sample text — handle patterns, format examples — that should
  be visually highlighted but isn't a quotation. Centered small caps
  in muted gray.
*/

.example {
  text-align: center;
  font-family: var(--font-caps);
  letter-spacing: 0.05em;
  color: var(--color-text-light);
  margin: 2rem 0;
}


/* ---- Links ---- */

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:visited {
  color: var(--color-accent);
}

a:hover {
  color: var(--color-gold);
}


/* ---- Call to action ---- */

.cta {
  text-align: center;
  margin-top: 3.5rem;
}

.cta p {
  margin-bottom: 1rem;
}


/* ---- Hedera divider ---- */

/*
  The aldus leaf, or hedera (U+2767), is a traditional ornament printers
  have used to mark section breaks since the earliest printed books.
  Rendered as the real Unicode character — no custom font, no image.
  The browser falls through the body font stack (Equity → Georgia →
  Times → serif) and lands on the visitor's system font for U+2767:
  Apple Symbols on macOS/iOS, Segoe UI Symbol on Windows, DejaVu/Noto
  on Linux. Same character that appears in email signatures and Craft
  docs — finally consistent across channels.
*/

.rule {
  border: none;
  text-align: center;
  margin: 3rem auto;
  font-size: 2.2rem;
  color: var(--color-accent);
  letter-spacing: 0.3em;
}

.rule::before {
  content: "\2767";  /* U+2767 ROTATED FLORAL HEART BULLET */
}


/* ---- Footer ---- */

footer {
  max-width: var(--measure);
  margin: 4rem auto 0;
  padding: 0 1.5rem 4rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-light);
}

footer p {
  margin-bottom: 0.5rem;
}

/*
  Site nav row in the footer. Each top-level page sets a body
  class (.on-home, .on-essays, .on-scenes, .on-exchange,
  .on-books, .on-feeds); the matching li in the footer is
  hidden via display:none so the current page never appears
  as its own footer link. nginx 1.20's SSI parser couldn't
  evaluate path-style operands in `if expr` reliably, so we
  use CSS instead — same outcome, no nginx-version dependency.
*/
.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
}

.footer-nav li {
  display: inline;
}

.footer-nav li + li::before {
  content: " · ";
}

/* Hide the current-page link from the footer nav. */
body.on-home    .footer-nav .nav-home,
body.on-essays  .footer-nav .nav-essays,
body.on-scenes  .footer-nav .nav-scenes,
body.on-exchange .footer-nav .nav-exchange,
body.on-books   .footer-nav .nav-books,
body.on-feeds   .footer-nav .nav-feeds {
  display: none;
}

/* When the first li (Home) is hidden, suppress the leading
   separator that would otherwise appear before whatever li
   becomes first in the visible row. Only Home can be the
   first li, so this rule is needed for body.on-home alone. */
body.on-home .footer-nav .nav-home + li::before {
  content: "";
}

/*
  Sub-footer — the book-colophon treatment.
  Small caps, quieter color, more whitespace above.
  There for readers who know what a colophon is;
  invisible to everyone else.
*/

.footer-meta {
  margin-top: 2rem;
  font-family: var(--font-caps);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  opacity: 0.55;
}


/* ---- Signoff ---- */

.signoff {
  text-align: center;
  margin-top: 4rem;
  font-style: italic;
  color: var(--color-text-light);
}

.signoff .hedera {
  color: var(--color-accent);
  font-style: normal;
}


/* ---- Pagination nav (scenes index) ---- */

.pager {
  margin: 3rem 0 0;
  text-align: center;
  font-family: var(--font-caps);
  letter-spacing: 0.12em;
  font-size: 0.95rem;
}

.pager a {
  margin: 0 0.6rem;
}


/* ---- Figures (content photos) ---- */

figure {
  margin: 2.5rem 0;
}

figure img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

figcaption {
  font-size: 0.85rem;
  color: var(--color-text-light);
  text-align: center;
  margin-top: 0.6rem;
}


/* ---- Portrait ---- */

.portrait {
  text-align: center;
  margin-top: 1.5rem;
}

.portrait img {
  width: 100px;
  height: auto;
  border-radius: 17.54%;
}


/* ---- Responsive ---- */

@media (max-width: 600px) {
  html      { font-size: 18px; }
  .logo img { width: 100px; }
  .page     { padding: 2rem 1.25rem; }
}


/* ---- Scroll-driven fade-up for content images ---- */

/*
  Pure CSS, no JS. Photos rise, fade in, and pull into focus
  as they enter the viewport — like a camera racking focus.
  Elements already in view at page load snap to the end state.
  Honors prefers-reduced-motion.
*/

@supports (animation-timeline: view()) {
  @media not (prefers-reduced-motion: reduce) {
    @keyframes fade-up {
      from {
        opacity: 0;
        transform: translateY(2rem);
        filter: blur(6px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
    }

    figure picture img {
      animation: fade-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}


/* ---- Modern-CSS niceties ---- */

/* Balanced headline wrapping — no lonely trailing words.
   (text-wrap: pretty for paragraphs lives in the `p` rule above.) */
h1, h2 { text-wrap: balance; }

/* Same-site page navigation: browser-level crossfade between pages */
@view-transition { navigation: auto; }

/* Gentle fade-in for h1 + subtitle on first paint.
   The logo is excluded so the page-level @view-transition handles it
   without a second animation stacking on top. */
@media not (prefers-reduced-motion: reduce) {
  h1, .subtitle {
    transition: opacity 0.5s ease-out;
  }

  @starting-style {
    h1, .subtitle { opacity: 0; }
  }
}