/* ============================================================================
   MAGAZINE — an editorial, print-flavoured theme for PopUP_CMS
   Built for ScrollStory Magazine (created 2026-10-02).

   Layering (core/themes.php emitter):
   - assets/css/popup-fonts.css (Font Playground) loads FIRST (typography slot),
     then the BASE sheet themes/PopUP_theme/assets/css/site.css (the shared
     machinery: header/nav/switch/cards, token-driven), then THIS file as the
     active theme's accent layer. Everything here is scoped under
     .site-container so it out-types the playground skin by specificity.
   - Strategy: re-ink the base's design tokens for newsprint, re-point the
     base's --c-brass accent hooks at ELECTRIC BLUE (owner palette rule: never
     gold on dark), swap the type to Grenze display + Georgia text, and add
     the story shelf (.story-grid / .story-card). The shell markup (header,
     nav, footer, switch) is zobeide's, untouched — only re-dressed here.

   Palette: warm paper + ink in the light; a midnight edition in the dark.
   Accents: electric blue #1F3BFF (light) / #7D8CFF (dark), teal for chips.
   ============================================================================ */

/* ----- Type: Grenze (variable serif + italic) from the shared assets cut ---
   (4 levels up from themes/Magazine/assets/css/ = the site root's assets/) */
@font-face {
  font-family: 'Grenze';
  src: url('../../../../assets/fonts/text/Grenze-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Grenze';
  src: url('../../../../assets/fonts/text/Grenze-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ----- Tokens: light — newsprint day ----- */
:root {
  --c-bg:            #F5F1E8;   /* warm paper */
  --c-surface:       #FDFAF3;   /* the lighter plate cards sit on */
  --c-text:          #23201A;
  --c-title:         #16140F;
  --c-muted:         #6B6557;
  --c-faint:         #9A9180;
  --c-accent:        #1F3BFF;   /* electric blue — the only loud voice */
  --c-teal:          #0E7C7B;   /* chips and secondary marks */
  --c-border:        #E1D9C9;
  --c-border-strong: #C8BEA9;
  --c-brass:         #1F3BFF;   /* re-point the base's accent hooks at blue */
  --shadow-card:     0 0.3rem 1.2rem rgba(35, 28, 12, 0.07);
  --shadow-card-up:  0 1.2rem 2.8rem rgba(35, 28, 12, 0.11);
  --shadow-pop:      0 1.2rem 3.2rem rgba(35, 28, 12, 0.13);
  --img-dim:         0;
}

/* ----- Tokens: dark — the midnight edition ----- */
:root[data-force-color-mode="dark"] {
  --c-bg:            #121316;
  --c-surface:       #1A1C21;
  --c-text:          #DEDCD4;
  --c-title:         #F3F1EA;
  --c-muted:         #9C978B;
  --c-faint:         #6F6B62;
  --c-accent:        #7D8CFF;   /* electric blue, lifted for the dark */
  --c-teal:          #3EC1B3;
  --c-border:        #2A2C33;
  --c-border-strong: #3B3E46;
  --c-brass:         #7D8CFF;
  --shadow-card:     0 0.3rem 1.4rem rgba(0, 0, 0, 0.35);
  --shadow-card-up:  0 1.2rem 3rem rgba(0, 0, 0, 0.45);
  --shadow-pop:      0 1.4rem 3.6rem rgba(0, 0, 0, 0.5);
}

/* ----- Foundations: the text is the magazine ----- */
.site-container {
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', Times, serif;
  font-size: 1.75rem;
  line-height: 1.65;
}

.site-container h1,
.site-container h2,
.site-container h3,
.site-container h4 {
  font-family: 'Grenze', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.14;
}
.site-container h1 {
  font-size: clamp(4rem, 8vw, 6.4rem);
  line-height: 1.04;
}
.site-container h2 { font-size: clamp(2.8rem, 4.6vw, 3.8rem); margin-top: 4.8rem; }
.site-container h3 { font-size: 2.3rem; }
.site-container h4 { font-family: Georgia, serif; font-size: 1.5rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; }

/* drop caps for opening paragraphs — pure print */
.site-container .post-inner > p:first-of-type::first-letter,
.site-container .page-body > .section-inner > p:first-of-type::first-letter {
  font-family: 'Grenze', Georgia, serif;
  font-weight: 700;
  font-size: 3.4em;
  line-height: 0.85;
  float: left;
  padding: 0.06em 0.12em 0 0;
  color: var(--c-title);
}

/* ----- Masthead: zobeide's header, set like a newspaper nameplate ----- */
.site-header {
  padding-bottom: 2.6rem;
  border-bottom: 3px double var(--c-border-strong);
}
.site-container .brand {
  font-family: 'Grenze', Georgia, serif;
  font-weight: 700;
  font-size: clamp(3.2rem, 6.5vw, 5.2rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-title);
}
.site-container .brand:hover { color: var(--c-accent); }
.site-container .brand-tagline {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1.8rem;
  letter-spacing: 0.02em;
  color: var(--c-muted);
  margin: 1.2rem 0 0;
}
.site-container .brand-tagline::before,
.site-container .brand-tagline::after { content: " — "; font-style: normal; color: var(--c-faint); }

/* ----- Navigation: small caps, blue on hover ----- */
.site-container .mainMenu a {
  font-family: Georgia, serif;
  font-size: 1.45rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-container .mainMenu a:hover { color: var(--c-accent); }

/* ----- Links in running text: ink with a blue underline ----- */
.site-container .post-inner a:not(.preview):not(.button),
.site-container .page-body a:not(.story-card):not(.button) {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--c-accent);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.site-container .post-inner a:not(.preview):not(.button):hover,
.site-container .page-body a:not(.story-card):not(.button):hover {
  color: var(--c-accent);
  text-decoration-thickness: 2px;
}

/* lede + kicker keep the base's shapes, re-inked by tokens */

/* ── The story shelf — sinbad's grid rhythm, flat typographic cards ─────── */

.site-container .story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-container a.story-card {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  height: 100%;
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-card);
  padding: 2.8rem 2.6rem 2.4rem;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease,
              background-color 0.35s ease;
}
.site-container a.story-card::before {           /* printer's top rule */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0.4rem;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.site-container a.story-card:hover,
.site-container a.story-card:focus-visible {
  transform: translateY(-0.4rem);
  box-shadow: var(--shadow-card-up);
  border-color: color-mix(in srgb, var(--c-accent) 40%, var(--c-border));
}
.site-container a.story-card:hover::before,
.site-container a.story-card:focus-visible::before { transform: scaleX(1); }

.site-container .story-chip {
  align-self: flex-start;
  font-family: Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-teal);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.35rem 1.2rem;
  margin-bottom: 0.5rem;
}
.site-container .story-title {
  display: block;
  font-family: 'Grenze', Georgia, serif;
  font-size: 2.7rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: var(--c-title);
  margin: 0;
}
.site-container .story-teaser {
  display: block;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--c-muted);
  margin: 0;
}
.site-container .story-open {
  display: block;
  margin-top: auto;
  padding-top: 1.8rem;
  font-family: Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.site-container .story-open::after { content: " →"; display: inline-block;
  transition: transform 0.25s ease; }
.site-container a.story-card:hover .story-open::after { transform: translateX(0.4rem); }

/* the shelf: sinbad's rhythm — 3 across, 2 under 900px, 1 under 600px */
@media (max-width: 900px) {
  .site-container .story-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .site-container .story-grid { grid-template-columns: 1fr; gap: 2.4rem; }
}

/* ----- Footer: colophon rules ----- */
.site-container .site-footer { border-top: 3px double var(--c-border-strong); }
.site-container .footer-brand { text-transform: uppercase; letter-spacing: 0.04em; }

/* ----- Print: a magazine that admits it ----- */
@media print {
  .site-container .switchModeButton,
  .site-container .site-nav { display: none; }
  .site-container { font-size: 11pt; color: #000; background: #fff; }
}

/* ----- nav hygiene -----
   The base theme hides #main-menu-toggler on desktop but leaves the raw
   menu checkbox rendering as an unstyled square (upstream quirk, zobeide
   has it too). Visually hide the input — it stays functional for the
   label's :checked hook. */
#show-menu-input-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  border: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

/* ----- card wall: real covers ----- */
.site-container .story-thumb {
  display: block;
  margin: -2.8rem -2.6rem 1.5rem;   /* cancel the card padding: flush cover */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e7e2d8;
}
.site-container .story-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.site-container a.story-card:hover .story-thumb img { transform: scale(1.045); }