/*
  parefit.css — shared stylesheet for parefit.app
  ───────────────────────────────────────────────
  The marketing pages: home, privacy, support. Same paper-and-ink
  treatment as yolicali.mx (PareFit is a small project from there),
  with a few page-specific blocks at the bottom for the support
  page's email pill and tip callout.

  Each page links this once and adds nothing else. No build step,
  no JS, no tracking. Hand-written and self-hosted.
*/


/* ---- 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: block;
}

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

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

@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: block;
}


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

/*
  Warm, quiet palette inherited from yolicali.mx. Off-white ground,
  dark charcoal text. The accent red is the Yolicali earth red —
  it ties parefit.app visually to its parent project. Measure set
  to 38em, the comfortable reading line length essay pages use.
*/

: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-text-size-adjust: 100%;
  -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;
}


/* ---- App icon ---- */

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

.app-icon {
  text-align: center;
  margin: 0 0 2rem;
}

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


/* ---- Brand mark on subpages ---- */

/*
  Subpages (privacy, support, press) lead with a small app icon and
  a quiet small-caps "PareFit" wordmark, both linking home. The home
  page shows the icon huge in its hero — this is the same icon at a
  smaller size, so the visual identity carries across every page.
*/

.brand {
  font-family: var(--font-caps);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: var(--color-text-light);
  text-align: center;
  margin-bottom: 0.5rem;
}

.brand a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

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

.brand-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}


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

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


/* ---- Subtitle ---- */

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


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

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; }

strong { font-weight: bold; }


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

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

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


/* ---- Statement ---- */

/*
  The brand line. Set larger, italic, centered. Carries most of the
  weight on the home page above the chapters.
*/

.statement {
  text-align: center;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--color-text);
  line-height: 1.4;
  margin: 0 0 1.5rem;
}


/* ---- Intro ---- */

/*
  The functional summary that follows the statement: what the app
  actually does, in two short sentences.
*/

.intro {
  text-align: center;
  max-width: 32em;
  margin: 0 auto 1.5rem;
}


/* ---- Chapters ---- */

/*
  Numbered sections (Ⅰ, Ⅱ, Ⅲ …) with a small-caps Roman number,
  small-caps title, italic tagline, and body. Same shape as the
  /small-projects.html page on yolicali.mx — the chapter rhythm
  carries the page so we don't need a hedera between every section.
*/

.chapter { margin: 0 0 3.5rem; }
.chapter:last-of-type { margin-bottom: 0; }

.chapter-num {
  display: block;
  font-family: var(--font-caps);
  font-size: 1.4rem;
  letter-spacing: 0.15em;
  color: var(--color-accent);
  text-align: center;
  margin-bottom: 0.4rem;
}

.chapter h2 {
  font-family: var(--font-caps);
  font-size: 1.5rem;
  font-weight: normal;
  letter-spacing: 0.08em;
  text-align: center;
  margin: 0 0 0.4rem;
  color: var(--color-text);
}

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


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

/*
  Statement lists — short declarative items with thin rules between.
  Used in the "What it does" and "What it doesn't" chapters.
*/

ul.list {
  list-style: none;
  margin: 0 0 1.4rem 0;
}

ul.list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-rule);
}

ul.list li:last-child { border-bottom: none; }


/* ---- Hedera ornamental rule ---- */

/*
  The aldus leaf, or hedera (U+2767), is a traditional printer's
  ornament that has marked section breaks since the earliest printed
  books. Rendered as the real Unicode character, no custom font, no
  image. Used sparingly on this page — chapter numbering carries the
  visual rhythm; the hedera marks the larger transitions.
*/

.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"; }


/* ---- Price ---- */

.price { text-align: center; }

.price .amount {
  display: block;
  font-size: 2.2rem;
  font-weight: bold;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}

.price .terms {
  color: var(--color-text-light);
  font-style: italic;
  font-size: 0.95rem;
}


/* ---- Coming-soon pill ---- */

.coming-soon-row {
  text-align: center;
  margin-top: 1.5rem;
}

.coming-soon {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  font-family: var(--font-caps);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--color-text-light);
  border: 1px dashed var(--color-rule);
  border-radius: 999px;
}


/* ---- Signoff with portrait ---- */

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

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

.portrait {
  text-align: center;
  margin: 1rem auto 0;
}

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


/* ---- Postscript ---- */

.postscript {
  font-style: italic;
  text-align: center;
  color: var(--color-text-light);
  max-width: 32em;
  margin: 0 auto;
}


/* ---- Email pill (support page) ---- */

.email {
  text-align: center;
  margin: 1.5rem 0 2rem;
}

.email a {
  display: inline-block;
  font-family: var(--font-caps);
  letter-spacing: 0.08em;
  font-size: 1.1rem;
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  color: var(--color-accent);
}

.email a:hover {
  background: var(--color-rule);
  color: var(--color-text);
}


/* ---- Tip callout (support page) ---- */

.tip {
  font-style: italic;
  color: var(--color-text-light);
  border-left: 2px solid var(--color-rule);
  padding-left: 1rem;
  margin: 1.5rem 0;
}


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

/*
  Footer holds the etymology of the name, the parent-project link,
  the privacy/support nav, and the made-with line. Quieter type and
  more space above set it off from the page proper.
*/

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.6rem; }

footer .etymology {
  font-style: italic;
  max-width: 28em;
  margin: 0 auto 1.2rem;
}

footer .nav-row a { margin: 0 0.5rem; }

/*
  Sub-footer in the book-colophon style. Real small caps via Equity
  A Caps; quieter color and more whitespace above. There for readers
  who notice; invisible to everyone else.
*/

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


/* ---- Subpage footer (privacy, support) ---- */

/*
  The privacy and support pages have a simpler footer — a thin rule
  above the home/back links. No etymology, no made-with.
*/

.subpage-footer {
  max-width: var(--measure);
  margin: 3rem auto 0;
  padding: 1.5rem 1.5rem 4rem;
  border-top: 1px solid var(--color-rule);
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-light);
}

.subpage-footer a { margin: 0 0.6rem; }


/* ---- Mobile ---- */

/* ---- Language switcher ---- */

/*
  Tiny EN | ES toggle in the top-right of the page. Quiet and small —
  small caps, no decoration, the active language bolded. Sits above
  the hero icon without crowding it.
*/

.lang-switch {
  text-align: right;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  color: var(--ink-light, #6b6258);
  margin: 0 0 1.5rem;
}

.lang-switch a {
  color: inherit;
  text-decoration: none;
}

.lang-switch a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lang-switch strong {
  font-weight: 600;
}


/* ---- Screenshots ---- */

/*
  Three iPhone screens between chapters II and III. Row on desktop,
  stacked on mobile. Subtle drop shadow keeps them feeling light on
  the cream background; no border or chrome.
*/

.screenshots {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: flex-start;
  margin: 0 0 3.5rem;
}

.screenshot {
  flex: 1 1 0;
  margin: 0;
  max-width: 240px;
}

.screenshot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 4px 20px rgb(0 0 0 / 6%);
}


@media (max-width: 600px) {
  html { font-size: 17px; }

  .page         { padding: 2rem 1.25rem; }
  .app-icon img { width: 96px; }

  h1               { font-size: 1.35rem; }
  .statement       { font-size: 1.2rem; }
  .chapter h2      { font-size: 1.25rem; }
  .chapter-num     { font-size: 1.2rem; }
  .price .amount   { font-size: 1.7rem; }
  .portrait img    { width: 72px; }
  .email a         { font-size: 1rem; padding: 0.6rem 1.2rem; }

  .screenshots     { flex-direction: column; align-items: center; gap: 2rem; }
  .screenshot      { max-width: 280px; }
}