/* MarryACactus — gold on near-black, Cormorant Garamond for display, Inter for text. */

:root {
  --bg: #080808;
  --surface: #111;
  --ink: #e0e0e0;
  --ink-soft: #b0b0b0;
  --muted: #777;
  --accent: #d4a017;
  --accent-warm: #c9a227;
  --border: rgba(212, 160, 23, 0.18);
  --border-soft: rgba(212, 160, 23, 0.10);
}
[data-theme="light"] {
  --bg: #f5f1e8;
  --surface: #ffffff;
  --ink: #1a1a1a;
  --ink-soft: #444;
  --muted: #777;
  --accent: #8a6914;
  --accent-warm: #a67d18;
  --border: rgba(138, 105, 20, 0.22);
  --border-soft: rgba(138, 105, 20, 0.12);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--bg); color: var(--ink); }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: 100vh; display: flex; flex-direction: column; line-height: 1.6;
  transition: background .3s, color .3s;
}

.site-header {
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between;
}
.site-header .brand {
  color: var(--accent); text-decoration: none; font-size: 0.85rem;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
}
.site-header nav { display: flex; align-items: center; gap: 1.5rem; }
.site-header nav a {
  color: var(--ink-soft); text-decoration: none; font-size: 0.78rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.site-header nav a:hover { color: var(--accent); }
.theme-toggle {
  background: none; border: 1px solid var(--border); border-radius: 999px;
  color: var(--ink-soft); cursor: pointer; padding: 4px 10px; font-size: 0.9rem; line-height: 1;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: inline; }
[data-theme="light"] .theme-toggle .sun { display: inline; }
[data-theme="light"] .theme-toggle .moon { display: none; }

main { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 64px 24px; }
main.reading { padding-top: 56px; }
/* The front page runs to the edges so the hero can. Its own sections put the padding back. */
main.front { padding: 0; }

/* The hero ------------------------------------------------------------------------------------ */
.hero { width: 100%; max-width: 720px; text-align: center; }
.hero-full {
  position: relative; max-width: none; min-height: min(78vh, 680px);
  display: grid; place-items: center; overflow: hidden; isolation: isolate;
}
.hero-frame {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
/* A scrim, not a filter: the photograph keeps its colour and the type still has something to sit
   on. Dark and light need different scrims, because in light the page behind it is not black. */
.hero-full::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Darken enough for the type, then hand off to the page in the last fifth. A gradient that runs
     to var(--bg) across the whole frame eats the photograph — in light mode it turned the desert
     into cream. */
  background:
    linear-gradient(180deg, rgba(8,8,8,.50) 0%, rgba(8,8,8,.20) 40%, rgba(8,8,8,.32) 70%, transparent 82%),
    linear-gradient(180deg, transparent 80%, var(--bg) 100%);
}
[data-theme="light"] .hero-full::after {
  background:
    linear-gradient(180deg, rgba(10,7,0,.42) 0%, rgba(10,7,0,.16) 40%, rgba(10,7,0,.28) 70%, transparent 82%),
    linear-gradient(180deg, transparent 80%, var(--bg) 100%);
}
.hero-full .hero-words { padding: 0 24px 4vh; }
.hero-full .wordmark, .hero-full .tagline { color: #f7f3ea; text-shadow: 0 2px 26px rgba(0,0,0,.55); }
.hero-full .wordmark { font-size: clamp(3rem, 9vw, 6rem); }
.hero-full .wordmark .accent { color: var(--accent-warm); }
.hero-full .tagline { font-size: clamp(1.05rem, 2.2vw, 1.4rem); }
.wordmark {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(2.6rem, 7vw, 4.5rem);
  font-weight: 400; letter-spacing: -0.5px; line-height: 1.05; color: var(--ink); margin-bottom: 18px;
}
.wordmark .accent { color: var(--accent); }
.tagline { color: var(--ink-soft); font-style: italic; font-size: 1.1rem; font-family: 'Cormorant Garamond', serif; }

.column { width: 100%; max-width: 720px; }
.column h1 {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(2rem, 5vw, 3rem); color: var(--ink); margin-bottom: 8px;
}
.column .tagline { margin-bottom: 40px; display: block; }
.content-posts { list-style: none; }
.content-post { padding: 22px 0; border-bottom: 1px solid var(--border-soft); }
.content-post:last-child { border-bottom: 0; }
.content-post-title { display: block; font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; line-height: 1.25; }
.content-post-title a { color: var(--ink); text-decoration: none; }
.content-post-title a:hover { color: var(--accent); }
.content-post-meta { display: block; margin-top: 6px; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.content-post-excerpt { display: block; margin-top: 10px; color: var(--ink-soft); }
.content-post-cover { display: block; width: 100%; height: auto; margin-bottom: 14px; }
.empty { color: var(--muted); font-style: italic; font-family: 'Cormorant Garamond', serif; }

/* Tags. A topic is a page (/blog/tag/<tag>/), so a tag is always a link — on the post, in the list
   and in the cloud above it. The generator writes no colour; these three rules are the whole look. */
.content-tags { display: block; margin-top: 12px; }
.content-tagcloud { margin-bottom: 34px; }
.content-tag {
  display: inline-block; margin: 0 6px 6px 0; padding: 3px 10px;
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.content-tag:hover { color: var(--accent); border-color: var(--accent); }
.content-crumb { margin-bottom: 10px; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.content-crumb a { color: var(--muted); text-decoration: none; }
.content-crumb a:hover { color: var(--accent); }

.content-body { margin-top: 28px; color: var(--ink-soft); }
.content-body p { margin-bottom: 1.1em; }
.content-body h2, .content-body h3 { font-family: 'Cormorant Garamond', serif; color: var(--ink); margin: 1.4em 0 .5em; font-weight: 400; }
.content-body a { color: var(--accent); }
.content-body img { max-width: 100%; height: auto; }
.content-body img.content-w25{width:25%}.content-body img.content-w50{width:50%}.content-body img.content-w75{width:75%}.content-body img.content-w100{width:100%}
.content-body img.content-left{float:left;margin:0 16px 12px 0}.content-body img.content-right{float:right;margin:0 0 12px 16px}.content-body img.content-center{display:block;margin:12px auto}
.content-body::after{content:"";display:block;clear:both}
.back { display: inline-block; margin-top: 36px; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.back:hover { color: var(--accent); }

.site-footer {
  border-top: 1px solid var(--border); padding: 1.5rem; font-size: 0.8rem; color: var(--muted);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
@media (max-width: 480px) {
  .site-footer { flex-direction: column; gap: 0.5rem; text-align: center; }
}
.nv-brand { text-decoration: none; font-weight: 600; letter-spacing: 0.02em; }
.nv-brand .nv-nex { color: var(--ink); }
.nv-brand .nv-verto { color: var(--accent); }
.nv-brand:hover .nv-nex, .nv-brand:hover .nv-verto { opacity: 0.85; }
@media (max-width: 600px) {
  /* At 390px the wordmark, three links and the toggle do not fit on one line: the brand ran into
     BLOG and the toggle was clipped off the right edge. Two rows, centred, and it fits. */
  .site-header { padding: 0.7rem 1rem; flex-direction: column; gap: 0.6rem; }
  .site-header nav { gap: 1.15rem; }
  .site-header nav a { font-size: 0.7rem; letter-spacing: 0.09em; }
  .site-header .brand { font-size: 0.8rem; letter-spacing: 0.16em; }
}
@media (min-width: 601px) and (max-width: 820px) {
  .site-header nav { gap: 1.1rem; }
}

.column.wide { max-width: 1040px; }

:root {
  --content-gallery-columns: repeat(auto-fill, minmax(220px, 1fr));
  --content-gallery-gap: 14px;
  --content-thumb-radius: 2px;
  --content-event-gap: 10px;
}

.column.wide { max-width: 1120px; }

/* On the front page the three newest posts are cards across the width, not one stretched list:
   a 1120px line of body text is a wall, and the list page is where a list belongs. */
.home .content-posts {
  display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.home .content-post {
  padding: 24px; border: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 2px;
  transition: border-color .2s, transform .2s;
}
.home .content-post:hover { border-color: var(--border); transform: translateY(-2px); }
.home .content-post-title { font-size: 1.45rem; }
.home .content-post-excerpt { flex: 1; }
.home .content-tags { margin-top: 14px; }

/* The schedule reads as a list of dates, so the date leads and the time sits under it. */
.home .content-events { gap: 0; }
.home .content-event {
  grid-template-columns: 6.5rem 1fr; padding: 16px 0;
  border-bottom: 1px solid var(--border-soft);
}
.home .content-event:last-child { border-bottom: 0; }
.home { padding: 72px 24px 88px; }
.home-block { margin-bottom: 72px; }
.home-block:last-child { margin-bottom: 0; }
.home-heading {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft);
}
@media (max-width: 600px) {
  .home { padding: 48px 20px 64px; }
  .home-block { margin-bottom: 52px; }
}
.home-heading a { color: var(--ink); text-decoration: none; }
.home-heading a:hover { color: var(--accent); }
.home-more { margin-top: 16px; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }
.home-more a { color: var(--muted); text-decoration: none; }
.home-more a:hover { color: var(--accent); }
.content-event-day { color: var(--muted); font-size: 0.8rem; font-style: italic; }

.content-gallery-album {
  font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.5rem;
  color: var(--accent); margin: 32px 0 12px; text-transform: lowercase; letter-spacing: .02em;
}
.content-gallery {
  display: grid; gap: var(--content-gallery-gap, 18px); margin-bottom: 28px;
  grid-template-columns: var(--content-gallery-columns, repeat(auto-fill, minmax(260px, 1fr)));
}
.content-gallery-item img { aspect-ratio: 4 / 3; object-fit: cover; }
.content-gallery-item { margin: 0; }
.content-gallery-item img {
  width: 100%; height: auto; display: block; border-radius: var(--content-thumb-radius);
  border: 1px solid var(--border-soft); transition: border-color .2s;
}
.content-gallery-item a:hover img { border-color: var(--accent); }
.content-gallery-item figcaption { margin-top: 7px; font-size: .78rem; color: var(--muted); font-style: italic; }

/* Schedule. A day heading, then its occurrences; an all-day one shows no time. */
.content-events-day {
  font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.4rem; color: var(--ink);
  margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft);
}
.content-events { list-style: none; display: grid; gap: var(--content-event-gap); }
/* list-style on the <li> as well as the <ol>: a grid list item still draws its marker in some
   browsers, which is where the stray middle dots beside every time and location came from. */
.content-events, .content-event { list-style: none; }
.content-event::marker { content: ""; }
.content-event { display: grid; grid-template-columns: 5.5rem 1fr; align-items: baseline; gap: 6px 14px; }
.content-event-time { font-size: .8rem; letter-spacing: .1em; color: var(--accent); font-variant-numeric: tabular-nums; }
.content-event-allday .content-event-time::before { content: "All day"; color: var(--muted); letter-spacing: .08em; }
.content-event-title { color: var(--ink); }
.content-event-title a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--border); }
.content-event-title a:hover { color: var(--accent); border-color: var(--accent); }
.content-event-location { grid-column: 2; font-size: .8rem; color: var(--muted); font-style: italic; }
@media (max-width: 520px) {
  .content-event { grid-template-columns: 1fr; gap: 2px; }
  .content-event-location { grid-column: 1; }
}

:root {
  --content-banner-bg: var(--accent);
  /* The dark theme's accent is a bright gold, so near-black reads on it. The light theme's is a
     deep gold, where near-black is dark-on-dark — checked, and it was unreadable. */
  --content-banner-ink: #080808;
  --content-poster-scrim: rgba(8, 8, 8, .82);
  --content-poster-card: var(--surface);
  --content-poster-radius: 2px;
}
[data-theme="light"] { --content-banner-ink: #f5f1e8; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --content-banner-ink: #f5f1e8; }
}
.content-banner { font-size: .85rem !important; letter-spacing: .01em; }
.content-poster-card { border: 1px solid var(--border); }

#motd:not([hidden]) {
  padding: 10px 1.5rem; background: var(--surface); border-bottom: 1px solid var(--border);
  font-size: .85rem; color: var(--ink-soft); text-align: center;
}
#motd a { color: var(--accent); }