/* dandillinger.com theme. Palette from the ponderosa photo:
   bark rust, conifer green, dry-grass straw, warm paper. */
:root {
  --paper: #f7f4ee;
  --ink: #1d201b;
  --muted: #5f6459;
  --rule: #ddd6c8;
  --accent: #9a4527;   /* default: ponderosa bark / whiskey. Pages can override */
  --green: #2c4a35;    /* conifer */
  --straw: #efe6d2;    /* dry grass, card fill */
  --measure: 38rem;
  --font: "Instrument Sans", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141612; --ink: #e9e6de; --muted: #a3a79b; --rule: #2e3129;
    --accent: #e08a5f; --green: #9cc3a5; --straw: #1f221c;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.125rem/1.65 var(--font);
}
a { color: var(--green); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }

/* Header / footer */
.site-header, .site-footer {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 2.5rem); font-size: .9rem;
}
.wordmark { font-weight: 600; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.site-section { color: var(--muted); }
.site-footer { color: var(--muted); border-top: 1px solid var(--rule); margin-top: 4rem; }

/* Backdrop: the page photo fades back behind the title and opening copy.
   Screened with the paper color so text stays readable in both modes. */
.stage { position: relative; }
.backdrop {
  position: absolute; inset: 0 0 auto 0; height: clamp(30rem, 92vh, 60rem);
  overflow: hidden; z-index: 0;
}
.backdrop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.backdrop::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--paper) 30%, transparent) 0%,
    color-mix(in srgb, var(--paper) 42%, transparent) 30%,
    color-mix(in srgb, var(--paper) 80%, transparent) 55%,
    var(--paper) 88%);
}
.page { position: relative; z-index: 1; }
.page.has-backdrop { padding-top: clamp(13rem, 42vh, 24rem); }

/* Page column */
.page { max-width: var(--measure); margin: 0 auto; padding: 2.25rem 1rem 0; }
.kicker { margin: 0 0 .5rem; font-size: .85rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.kicker a { color: var(--accent); text-decoration: none; }
h1 {
  margin: 0; font-weight: 650; letter-spacing: -.03em; line-height: 1;
  font-size: clamp(2.75rem, 9vw, 4.75rem);
}
.place { margin: .6rem 0 2rem; font-size: 1.25rem; color: var(--muted); }

/* Body copy; ### headings in copy become section labels */
.prose p { margin: 0 0 1.15em; }
.prose h2, .prose h3, .specs h2 {
  margin: 2.5rem 0 .6rem; padding-top: 1.25rem; border-top: 2px solid var(--accent);
  font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}

/* Call to action */
.cta { margin: 2rem 0; padding: 1.25rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cta p { margin: 0 0 .9rem; font-weight: 500; }
.button {
  display: inline-block; padding: .65rem 1.2rem; border-radius: 4px;
  background: var(--accent); color: var(--paper); font-weight: 600; font-size: 1rem; text-decoration: none;
}
.button:hover { color: var(--paper); filter: brightness(1.1); }

/* Bottle card */
.specs { margin-top: 1.5rem; background: var(--straw); padding: 0 1.25rem 1.25rem; border-radius: 4px; }
.specs h2 { border-top: 0; padding-top: 1.25rem; margin-top: 0; }
.specs dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.25rem; font-size: 1rem; }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; }
@media (max-width: 30rem) { .specs dl { grid-template-columns: 1fr; gap: 0; } .specs dd { margin-bottom: .6rem; } }

.back { margin: 2rem 0; font-size: 1rem; color: var(--muted); }

/* Other bottles */
.siblings { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin: 2rem 0; }
.sibling { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.sibling img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; margin-bottom: .5rem; }
.sibling:not(:has(img))::before { content: ""; display: block; aspect-ratio: 4 / 3; background: var(--straw); border-radius: 4px; margin-bottom: .5rem; }
.sibling-title { font-weight: 600; }
.sibling-place { font-size: .95rem; color: var(--muted); }
.sibling:hover .sibling-title { color: var(--accent); }

/* Year index */
.years { list-style: none; padding: 0; }
.years li { padding: .9rem 0; border-top: 1px solid var(--rule); }
.years span { display: block; color: var(--muted); font-size: .95rem; }