/* Shared styling for the Totient Articles section.
   Tailwind (CDN) handles layout via utility classes on each page; this file
   holds the long-form prose styles plus the few article-specific components
   (hero figure, byline, CTA card, index cards). Palette matches the rest of
   the site: stone text on white, amber accents. */

/* Space Grotesk on headings, matching index.html / privacy.html */
h1, h2, h3 { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; }

/* ---- Long-form prose (extends the .prose-totient rules from privacy.html) ---- */
.prose-totient h2 { margin-top: 2.5rem; margin-bottom: 0.5rem; font-size: 1.45rem; font-weight: 700; color: #1c1917; letter-spacing: -0.01em; }
.prose-totient h3 { margin-top: 1.75rem; margin-bottom: 0.25rem; font-size: 1.12rem; font-weight: 600; color: #1c1917; }
.prose-totient p  { margin-top: 0.85rem; color: #44403c; line-height: 1.75; }
.prose-totient ul, .prose-totient ol { margin-top: 0.85rem; padding-left: 1.4rem; color: #44403c; line-height: 1.75; }
.prose-totient ul { list-style: disc; }
.prose-totient ol { list-style: decimal; }
.prose-totient li { margin-top: 0.4rem; }
.prose-totient li::marker { color: #a8a29d; }
.prose-totient a  { color: #b45309; text-decoration-line: underline; text-underline-offset: 2px; }
.prose-totient a:hover { color: #92400e; }
.prose-totient strong { color: #292524; font-weight: 650; }
.prose-totient code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em; background: #f5f5f4; color: #1c1917;
  padding: 0.1em 0.38em; border-radius: 0.35rem; border: 1px solid #e7e5e4;
}

/* Callout / key-takeaway blockquote */
.prose-totient blockquote {
  margin: 1.5rem 0; padding: 0.85rem 1.15rem;
  border-left: 3px solid #f59e0b; background: #fffbeb;
  border-radius: 0 0.65rem 0.65rem 0; color: #44403c;
}
.prose-totient blockquote p { margin-top: 0; }

/* Tables (e.g. fraction / conversion references) */
.prose-totient table {
  width: 100%; margin-top: 1.25rem; border-collapse: collapse; font-size: 0.95rem;
}
.prose-totient th, .prose-totient td {
  text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid #e7e5e4;
}
.prose-totient thead th {
  color: #1c1917; font-weight: 650; border-bottom: 2px solid #d6d3d1;
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}
.prose-totient tbody tr:nth-child(odd) { background: #fafaf9; }
.prose-totient td code { background: #fff; }

/* ---- Figures (hero + in-body photos) ---- */
figure { margin: 0; }
.article-hero img,
.prose-totient figure img {
  display: block; width: 100%; border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(28,25,23,.04), 0 12px 28px -12px rgba(28,25,23,.18);
}
.article-hero img { aspect-ratio: 16 / 10; object-fit: cover; }
.article-hero.is-portrait img { aspect-ratio: auto; object-fit: contain; max-height: 32rem; }
.prose-totient figure { margin: 1.75rem 0; }
.prose-totient figure img { max-height: 30rem; object-fit: cover; }

/* Phone-screenshot figures (real Totient captures) in a device frame
   — the same bezel/glass/side-button treatment as the landing page. */
figure.app-shot { margin: 1.75rem auto; max-width: 270px; }
.device {
  position: relative;
  padding: 0.5rem;                        /* the metal/glass bezel */
  border-radius: 2.7rem;
  background: linear-gradient(145deg, #44403c 0%, #1c1917 28%, #0c0a09 62%, #292524 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.12),
    0 0 0 1px rgba(0,0,0,.55),
    0 26px 52px -18px rgba(28,25,23,.55),
    0 10px 20px -10px rgba(28,25,23,.45);
}
.device-screen {
  position: relative;
  overflow: hidden;
  border-radius: 2.2rem;
  background: #000;
}
/* override the generic figure-image rules for the screen image */
.device-screen img,
.prose-totient figure .device-screen img {
  display: block; width: 100%;
  aspect-ratio: auto; object-fit: fill; max-height: none;
  border-radius: 0; border: 0; box-shadow: none;
}
.device-screen::after {                   /* faint diagonal glass reflection */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0) 24%, rgba(255,255,255,0) 80%, rgba(255,255,255,.06));
}
.device::before, .device::after {         /* side buttons */
  content: ""; position: absolute; width: 3px; border-radius: 2px;
}
.device::before {                         /* volume pair (left) */
  left: -2px; top: 24%; height: 15%;
  background: linear-gradient(to bottom, #57534e 0 40%, #1c1917 40% 60%, #57534e 60% 100%);
}
.device::after {                          /* power (right) */
  right: -2px; top: 31%; height: 10%;
  background: #57534e;
}
/* Two app screenshots framed side by side, left to right */
figure.app-shot-row { margin: 1.75rem auto; max-width: 540px; }
.app-pair { display: flex; gap: 0.9rem; justify-content: center; align-items: flex-start; }
.app-pair .device { flex: 1 1 0; min-width: 0; }
figcaption {
  margin-top: 0.6rem; font-size: 0.8rem; color: #a8a29d; text-align: center;
}
figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Index cards ---- */
.article-card { transition: transform .2s ease, box-shadow .2s ease; }
.article-card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(28,25,23,.05), 0 20px 36px -16px rgba(28,25,23,.28); }
.article-card .thumb img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }