/* ================================================================
   PIMPAL — Landing page stylesheet

   Independent of styles.css on purpose: the landing page is a single
   list, it needs none of the article machinery, and it must keep
   working if the Tailwind build of styles.css ever changes. Plain
   CSS, no build step. The palette mirrors the article theme so the
   two pages feel like one site.
   ================================================================ */

:root {
  color-scheme: light dark;

  --bg:            #EDE6DA;
  --bg-surface:    #F5F0E8;

  --fg:            #1A1210;
  --fg-muted:      #6E5C4A;

  --border:        #C4B69E;
  --border-subtle: #D8CEBC;

  --gold:          #7D5A00;
  --link:          #7B2000;
  --link-hover:    #5C1800;
  --link-visited:  #6B3A20;

  --header-bg:     #1E1410;
  --footer-bg:     #1E1410;
  --footer-fg:     #B8A88E;
  --footer-accent: #D4B87A;

  --focus:         #7D5A00;
  --selection:     #8B691430;

  --font-body: Georgia, "Noto Serif", "Times New Roman", serif;
  --font-mono: "Berkeley Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #12100E;
    --bg-surface:    #1C1816;

    --fg:            #DED4C4;
    --fg-muted:      #A0937F;

    --border:        #3A3028;
    --border-subtle: #2E2620;

    --gold:          #C9A84C;
    --link:          #D9876A;
    --link-hover:    #E8A48A;
    --link-visited:  #C4886E;

    --header-bg:     #0C0A08;
    --footer-bg:     #0C0A08;
    --footer-fg:     #B4A692;
    --footer-accent: #C9A84C;

    --focus:         #C9A84C;
    --selection:     #C9A84C30;
  }
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

::selection { background: var(--selection); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---- Header: the shared banner partial ----
   The banner shares the main column's width and gutters so the two line up,
   and carries the same drop shadows as the article pages. */

.site-header {
  width: 100%;
  max-width: 48rem;
  margin-block-start: 1rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.banner-svg {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 8px 24px rgba(217, 150, 102, 0.4))
    drop-shadow(0 4px 8px rgba(217, 150, 102, 0.3));
}

/* ---- Post list ---- */

main {
  flex: 1;
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
  padding: 2rem 1.5rem 3rem;
}

h1 {
  font-size: 1.75rem;
  margin: 0;
  letter-spacing: 0.02em;
}

.tagline {
  margin: 0.25rem 0 2rem;
  color: var(--fg-muted);
  font-size: 0.95rem;
}

.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-list li {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding-block: 0.6rem;
  border-block-end: 1px solid var(--border-subtle);
}

.post-list li:last-child { border-block-end: 0; }

.post-list time {
  flex: none;
  width: 6.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

.post-list a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.post-list a:visited { color: var(--link-visited); }
.post-list a:hover   { color: var(--link-hover); }

/* Narrow screens: stack the date above the title rather than
   squeezing both onto one line. */
@media (max-width: 30rem) {
  .post-list li {
    flex-direction: column;
    gap: 0.15rem;
  }
  .post-list time { width: auto; }
}

/* ---- Footer: the shared footer partial ---- */

.site-footer {
  background: var(--footer-bg);
  color: var(--footer-fg);
}

.footer-inner {
  max-width: 48rem;
  margin-inline: auto;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.social-links {
  display: flex;
  gap: 1.25rem;
}

.social-links a {
  color: var(--footer-fg);
  text-decoration: none;
}
.social-links a:visited { color: var(--footer-fg); }
.social-links a:hover   { color: var(--footer-accent); }

.copyright { font-size: 0.85rem; }
.copyright span { color: var(--footer-accent); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}