@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  --black: #0a0a0a;
  --copper: #c47830;
  --copper-dark: #8b5220;
  --copper-light: #d4944a;
  --cream: #e8dcc8;
  --cream-dim: #b8a890;
  /* Over the pictures behind the pages: 40% brighter than the old .72. */
  --overlay: rgba(10, 10, 10, 0.43);
  --panel: rgba(15, 10, 5, 0.73);
  --border: rgba(196, 120, 48, 0.3);
  /* The top bar and the menu down the left (index.php). */
  --top-h: 64px;
  --sb-open: 248px;
  --sb-closed: 78px;
  --sbw: var(--sb-open);
  --slate: url('../images/ui/slate-a-512.jpg');
}

html.sb-collapsed { --sbw: var(--sb-closed); }

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

html {
  /* Room for the fixed top bar whenever the page scrolls to something:
     the skip link, an error, the next field. */
  scroll-padding-top: calc(var(--top-h) + 1rem);
}

body {
  font-family: 'EB Garamond', Georgia, serif;
  background-color: var(--black);
  color: var(--cream);
  font-size: 18px;
  line-height: 1.7;
  min-height: 100vh;
}

/* ── The picture behind the page (includes/backgrounds.php) ──
   Decoration only. It sits in the bottom-right corner and fades to black
   towards the top and left, under the dark overlay; the admin log in has
   it centred, fading out at the edges. It hangs from the top of the screen
   at the screen's full height (lvh) rather than resting on the bottom edge:
   on a phone the bottom edge moves as the address bar shrinks and grows
   while you scroll, and the picture jumped with it (Leah, 10 October 2026). */
.cn-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--black);
}

.cn-bg img {
  position: absolute;
  display: block;
}

.cn-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--overlay);
}

.cn-bg[data-place="corner"] img {
  right: 0;
  bottom: 0;
  width: min(64vw, 1400px);
  height: auto;
  max-height: 92vh;
  object-fit: cover;
  object-position: right bottom;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%), linear-gradient(to top, #000 45%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 38%), linear-gradient(to top, #000 45%, transparent 100%);
  mask-composite: intersect;
}

.cn-bg[data-place="centre"] img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: radial-gradient(ellipse 55% 65% at 50% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 55% 65% at 50% 50%, #000 40%, transparent 100%);
}

/* Fog drifting slowly low across the page (off with Reduce Motion, below).
   Hung from the top like the picture, so it stays put on a phone too. */
.cn-fog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.cn-fog::before,
.cn-fog::after {
  content: '';
  position: absolute;
  left: -30vw;
  width: 160vw;
  filter: blur(40px);
  opacity: 0.55;
  will-change: transform;
}

.cn-fog::before {
  bottom: -12vh;
  height: 60vh;
  background: radial-gradient(ellipse at 30% 60%, rgba(200, 190, 170, 0.10), transparent 60%),
              radial-gradient(ellipse at 75% 50%, rgba(200, 190, 170, 0.08), transparent 55%);
  animation: cn-drift 70s ease-in-out infinite alternate;
}

.cn-fog::after {
  bottom: 10vh;
  height: 45vh;
  background: radial-gradient(ellipse at 60% 50%, rgba(190, 180, 160, 0.07), transparent 60%);
  animation: cn-drift 95s ease-in-out infinite alternate-reverse;
}

@keyframes cn-drift {
  from { transform: translateX(-8vw); }
  to   { transform: translateX(10vw); }
}

/* The copper gradient for the menu numerals lives in a hidden SVG. */
.cn-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ── Top bar (index.php): menu button, emblem and name, Log in ── */
.site-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--top-h);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  background: rgba(8, 6, 3, 0.82);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
  view-transition-name: site-top;
}

.site-menu-toggle {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--sb-closed);
  height: var(--top-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border);
  color: var(--copper-light);
  cursor: pointer;
}

.site-menu-toggle svg {
  width: 26px;
  height: 26px;
  transition: transform 0.3s;
}

.site-menu-toggle:hover {
  background: rgba(196, 120, 48, 0.08);
}

.site-menu-toggle .icon-menu { display: none; }
html.sb-collapsed .site-menu-toggle .icon-fold { transform: rotate(180deg); }

.site-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
}

.site-brand img {
  height: 38px;
  width: auto;
  filter: drop-shadow(0 0 8px rgba(196, 120, 48, 0.35));
}

.site-brand span {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper-light);
  white-space: nowrap;
}

/* ── The menu: slate tiles down the left (index.php, site_menu_tile()) ──
   Folds down to its numerals on a computer; a drawer on phones. */
.site-nav {
  position: fixed;
  top: var(--top-h);
  left: 0;
  bottom: 0;
  width: var(--sbw);
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem 0.7rem;
  background: rgba(8, 6, 3, 0.78);
  backdrop-filter: blur(4px);
  border-right: 1px solid var(--border);
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.3s ease;
  view-transition-name: site-nav;
}

.site-nav a.slate {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 54px;
  padding: 0.45rem 0.75rem 0.45rem 0.45rem;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-dim);
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid rgba(196, 120, 48, 0.22);
  background: linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.55)), var(--slate) center / 260px auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -2px 4px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.7);
  transition: border-color 0.25s, box-shadow 0.25s, color 0.25s;
}

.site-nav a.slate:hover,
.site-nav a.slate:focus-visible {
  color: var(--cream);
  border-color: var(--copper);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 14px rgba(196, 120, 48, 0.45), 0 2px 6px rgba(0, 0, 0, 0.7);
}

.site-nav a.slate:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 2px;
}

/* The page you are on: a copper inlay down the tile's left edge. */
.site-nav a.slate[aria-current="page"] {
  color: var(--copper-light);
  border-color: rgba(196, 120, 48, 0.6);
}

.site-nav a.slate[aria-current="page"]::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(var(--copper-light), var(--copper-dark));
  box-shadow: 0 0 8px rgba(212, 148, 74, 0.7);
}

.slate-num {
  flex: none;
  width: 44px;
  height: 32px;
}

.slate-num text {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 1px;
}

.slate-label { white-space: nowrap; }
.slate-tip { display: none; }

/* Folded down to the numerals (computers only): the names become tooltips. */
@media (min-width: 769px) {
  html.sb-collapsed .site-nav { overflow: visible; }

  html.sb-collapsed .site-nav a.slate {
    justify-content: center;
    padding: 0.45rem 0;
    gap: 0;
  }

  html.sb-collapsed .slate-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  html.sb-collapsed .slate-tip {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    padding: 0.35rem 0.7rem;
    background: #0d0a06;
    border: 1px solid var(--copper);
    border-radius: 4px;
    color: var(--cream);
    font-size: 0.72rem;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  }

  html.sb-collapsed a.slate:hover .slate-tip,
  html.sb-collapsed a.slate:focus-visible .slate-tip { display: block; }
}

.site-scrim { display: none; }

/* ── The page beside the menu: content, then the footer ── */
.site-page {
  position: relative;
  z-index: 1;
  margin-left: var(--sbw);
  padding-top: var(--top-h);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.3s ease;
}

.site-page > main {
  flex: 1;
}

/* Page sections */
.page-section {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  min-height: 100%;
}

.page-section.active {
  display: block;
}

.page-section.visible {
  opacity: 1;
}

/* Copper divider */
.copper-rule {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--copper), transparent);
  margin: 1.5rem auto;
}

.copper-rule.left {
  margin: 1.5rem 0;
}

/* Page emblem */
.page-emblem {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.page-emblem img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  opacity: 0.9;
  filter: drop-shadow(0 0 12px rgba(196, 120, 48, 0.4));
}

/* Page header block */
.page-header {
  text-align: center;
  padding: 3rem 2rem 2rem;
}

.home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5rem 2rem 3rem;
  min-height: 60vh;
}

.home-hero h1 {
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--copper-light);
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 20px rgba(196, 120, 48, 0.3);
}

.home-hero .subtitle {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.75rem, 1.5vw, 0.9rem);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 2rem;
}

.home-hero p {
  max-width: 800px;
  font-size: 1.1rem;
  color: var(--cream);
  font-style: italic;
  line-height: 1.9;
}

.home-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem 4rem;
}

.feature-panel {
  background: rgba(15, 10, 5, 0.45);
  border: 1px solid var(--border);
  padding: 2.5rem;
}

.feature-panel h2 {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 1rem;
}

.cta-button {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.75rem 2rem;
  border: 1px solid var(--copper);
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper-light);
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  transition: background 0.3s, color 0.3s;
}

.cta-button:hover,
.cta-button:focus-visible {
  background: var(--copper);
  color: var(--black);
}

/* ── ABOUT PAGE ── */
.about-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.page-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--copper-light);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.page-title-sub {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 2rem;
}

.about-content p {
  margin-bottom: 1.5rem;
  color: var(--cream);
  font-size: 1.05rem;
}

.submissions-box {
  border: 1px solid var(--border);
  padding: 2rem;
  margin-top: 3rem;
  background: var(--panel);
  position: relative;
}

.submissions-box::before {
  content: 'Submissions';
  position: absolute;
  top: -0.65rem;
  left: 1.5rem;
  background: #0d0a06;
  padding: 0 0.75rem;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
}

/* About social */
.about-social {
  margin: 2rem 0;
}

.about-social-label {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.75rem !important;
}

.about-social-icons {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* ── BOOKS PAGE ── */
.books-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.author-section {
  margin-bottom: 4rem;
}

.author-name {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  color: var(--copper-light);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
}

.author-bio {
  font-style: italic;
  color: var(--cream-dim);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.author-links {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.author-link {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--copper-light);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 0.3rem 0.8rem;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.author-link:hover,
.author-link:focus-visible {
  background: var(--copper);
  color: var(--black);
  border-color: var(--copper);
}

.series-link {
  color: var(--copper-light);
  text-decoration: none;
  transition: color 0.3s;
}

.series-link:hover {
  color: var(--copper);
}

.buy-link {
  display: inline-block;
  padding: 0.4rem 1rem;
  border: 1px solid var(--copper);
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--copper-light);
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}

.buy-link:hover,
.buy-link:focus-visible {
  background: var(--copper);
  color: var(--black);
}

/* ── NEWS PAGE ── */
.news-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.news-article {
  border-bottom: 1px solid var(--border);
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
}

.news-article:last-child {
  border-bottom: none;
}

.news-image {
  margin-bottom: 1rem;
}

.news-image img {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border: 1px solid var(--border);
}

.news-date {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.5rem;
}

.news-title {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  color: var(--cream);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.news-excerpt {
  color: var(--cream-dim);
  font-style: italic;
}

.news-links {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.news-link {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--copper-light);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 0.3rem 0.8rem;
  transition: background 0.3s, color 0.3s;
}

.news-link:hover,
.news-link:focus-visible {
  background: var(--copper);
  color: var(--black);
}

/* Newsletter */
.newsletter-box {
  border: 1px solid var(--border);
  padding: 2rem;
  margin-top: 3rem;
  background: var(--panel);
  position: relative;
}

.newsletter-box::before {
  content: 'Newsletter';
  position: absolute;
  top: -0.65rem;
  left: 1.5rem;
  background: #0d0a06;
  padding: 0 0.75rem;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
}

.newsletter-title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.5rem;
}

.newsletter-desc {
  color: var(--cream-dim);
  font-style: italic;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.newsletter-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* ── CONTACT PAGE ── */
.contact-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.contact-form {
  margin-top: 2rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: rgba(15, 10, 5, 0.9);
  border: 1px solid var(--border);
  color: var(--cream);
  font-family: 'EB Garamond', serif;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  outline: none;
  transition: border-color 0.3s;
  appearance: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--copper);
}

.form-group textarea {
  resize: vertical;
  min-height: 140px;
}

.form-submit {
  padding: 0.85rem 2.5rem;
  background: transparent;
  border: 1px solid var(--copper);
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper-light);
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.form-submit:hover,
.form-submit:focus-visible {
  background: var(--copper);
  color: var(--black);
}

.form-message {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  display: none;
}

.form-message.success {
  border: 1px solid var(--copper);
  color: var(--copper-light);
  display: block;
}

.form-message.error {
  border: 1px solid #8b2020;
  color: #c44040;
  display: block;
}

/* ── FOOTER (index.php): at the end of the page, scrolling with it ── */
.site-foot {
  text-align: center;
  padding: 1.4rem 2rem;
  border-top: 1px solid var(--border);
  background: rgba(10, 8, 4, 0.7);
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--copper-dark);
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.footer-legal {
  margin-top: 0.4rem;
}

.footer-link {
  color: var(--copper-dark);
  text-decoration: none;
  transition: color 0.3s;
}

.footer-link:hover,
.footer-link:focus-visible {
  color: var(--copper-light);
}

.footer-sep {
  margin: 0 0.6em;
  color: var(--copper-dark);
}

/* ── SOCIAL ICONS ── */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--copper);
  transition: color 0.3s;
}

.social-icon:hover,
.social-icon:focus-visible {
  color: var(--copper-light);
}

/* ── COOKIE BANNER ── */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(10, 8, 4, 0.97);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(6px);
}

.cookie-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.cookie-inner p {
  font-family: 'EB Garamond', serif;
  font-size: 0.9rem;
  color: var(--cream-dim);
  margin: 0;
  line-height: 1.5;
}

.cookie-inner a {
  color: var(--copper-light);
  text-decoration: none;
}

.cookie-inner a:hover {
  text-decoration: underline;
}

.cookie-buttons {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.cookie-btn {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.5rem 1.25rem;
  cursor: pointer;
  border: 1px solid var(--copper);
  transition: background 0.3s, color 0.3s;
}

.cookie-btn-accept {
  background: var(--copper);
  color: var(--black);
}

.cookie-btn-accept:hover {
  background: var(--copper-light);
  border-color: var(--copper-light);
}

.cookie-btn-reject {
  background: transparent;
  color: var(--copper-light);
}

.cookie-btn-reject:hover {
  background: rgba(196,120,48,0.1);
}

/* Honeypot field for the contact form — invisible to real visitors */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Read by screen readers, not shown. */
.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;
}

/* Hints and problems on forms (newsletter sign-up). */
.hint {
  color: var(--cream-dim);
  font-size: 0.9rem;
  font-style: italic;
  margin: 0.4rem 0 0;
}

.field-error {
  color: #e06a6a;
  font-size: 0.95rem;
  margin: 0.4rem 0 0;
}

.form-group input[aria-invalid="true"] {
  border-color: #e06a6a;
}

.error-summary {
  border: 2px solid #e06a6a;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.error-summary h3 {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: #e06a6a;
  margin-bottom: 0.5rem;
}

.error-summary ul {
  margin: 0;
  padding-left: 1.2rem;
}

.error-summary a {
  color: var(--cream);
}

.form-message:focus,
.error-summary h3:focus {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}

/* ── HOME: FOLLOW US ── */
.home-social {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem 4rem;
}

.home-social h2 {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 1rem;
}

.home-social-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.home-social-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  background: rgba(15, 10, 5, 0.45);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

/* Lit up in copper, like the other buttons, on hover and keyboard focus. */
.home-social-row:hover,
.home-social-row:focus-visible {
  background: var(--copper);
  border-color: var(--copper);
  box-shadow: 0 0 18px rgba(196, 120, 48, 0.35);
}

.home-social-row:hover .home-social-label,
.home-social-row:focus-visible .home-social-label,
.home-social-row:hover .social-icon,
.home-social-row:focus-visible .social-icon {
  color: var(--black);
}

/* Icon left / text right by default, reversed on every other row so the
   layout keeps alternating automatically as more platforms are added. */
.home-social-row:nth-child(even) {
  flex-direction: row-reverse;
}

.home-social-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}

.home-social-icon svg {
  width: 100%;
  height: 100%;
}

.home-social-label {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
}

@media (max-width: 480px) {
  .home-social-row {
    padding: 1.25rem;
    gap: 1rem;
  }

  .home-social-icon {
    width: 36px;
    height: 36px;
  }

  /* The page scrolls as a whole, so nothing may be wider than a phone. */
  .feature-panel { padding: 1.75rem 1.25rem; }
}

/* Loading state */
.loading {
  text-align: center;
  padding: 4rem;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper-dark);
}

/* ── Phase 2: pages with their own addresses ── */

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 1000;
  padding: 0.6rem 1rem;
  background: var(--black);
  color: var(--copper-light);
  border: 1px solid var(--copper);
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--copper-light);
  outline-offset: 3px;
}
#content-area:focus { outline: none; }

.catalogue-switch {
  margin: 0 0 2.5rem;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.catalogue-switch a,
.author-name a,
.author-row-links a,
.breadcrumb a {
  color: var(--copper-light);
}
.author-name a { text-decoration: none; }
.author-name a:hover,
.author-name a:focus-visible { text-decoration: underline; }

/* The authors list: name across the top, the photo beside the bio, and the
   covers in a row under the bio. Every other row puts the photo on the
   right, by grid areas only, so the reading order stays name, photo, bio,
   links, books for every author. */
.author-list { list-style: none; }
.author-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  grid-template-areas:
    "name  name"
    "photo text"
    "photo covers";
  grid-template-rows: auto auto 1fr;
  gap: 1rem 1.5rem;
  align-items: start;
}
.author-row + .author-row {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}
.author-row-alt {
  grid-template-columns: minmax(0, 1fr) 120px;
  grid-template-areas:
    "name   name"
    "text   photo"
    "covers photo";
}
.author-row .author-name { grid-area: name; margin-bottom: 0; }
.author-row-photo { grid-area: photo; }
.author-row-text { grid-area: text; }
.author-row-covers { grid-area: covers; }

.author-row-photo img,
.author-profile-photo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--border);
  display: block;
}
.author-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--copper-dark), #1a0f04);
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  color: var(--cream);
}
.author-featured {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream-dim);
  border: 1px solid var(--border);
  padding: 0.1rem 0.5rem;
  vertical-align: middle;
}
.author-row-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.9rem;
}
.author-row-covers {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.author-row-covers li { width: 84px; }
.author-row-covers a { display: block; color: var(--cream); text-decoration: none; }
.author-row-covers img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  display: block;
  border: 1px solid var(--border);
}
.author-row-covers .no-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2/3;
  padding: 0.3rem;
  font-size: 0.7rem;
  text-align: center;
  background: linear-gradient(135deg, var(--copper-dark), #1a0f04);
}

/* One author's page */
.breadcrumb {
  margin-bottom: 1.5rem;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.author-profile {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2rem;
  align-items: start;
  margin-bottom: 3rem;
}
.author-profile:not(:has(.author-profile-photo)) { grid-template-columns: 1fr; }
.author-section-title {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  color: var(--copper-light);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
}
.author-books,
.author-blog,
.author-message { margin-bottom: 3rem; }

@media (max-width: 600px) {
  .author-row,
  .author-row-alt {
    grid-template-columns: 90px minmax(0, 1fr);
    grid-template-areas:
      "name   name"
      "photo  text"
      "covers covers";
    grid-template-rows: auto;
  }
  .author-profile { grid-template-columns: 1fr; }
  .author-profile-photo { max-width: 200px; }
}

/* Responsive */
@media (max-width: 768px) {
  /* Phones: the menu is a drawer that slides in from the menu button. */
  :root, html.sb-collapsed { --sbw: 0px; }

  .site-menu-toggle { width: 56px; }
  .site-menu-toggle .icon-fold { display: none; }
  .site-menu-toggle .icon-menu { display: block; }

  .site-top {
    justify-content: flex-start;
    padding-left: 66px;
    padding-right: 64px;
  }

  .site-brand { gap: 0.45rem; }

  .site-brand img { height: 28px; }

  .site-brand span {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    white-space: normal;
    line-height: 1.25;
  }

  .site-nav {
    width: 260px;
    transform: translateX(-100%);
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }

  /* Closed, the drawer is hidden from screen readers too. */
  html.js .site-nav { visibility: hidden; }

  html.drawer-open .site-nav {
    transform: none;
    visibility: visible;
    transition: transform 0.3s ease;
  }

  /* The cookie notice is out of reach while the drawer is open: out of sight too. */
  html.drawer-open #cookie-banner { visibility: hidden; }

  html.drawer-open .site-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.55);
  }

  /* Without scripts the drawer cannot open, so the menu sits at the top. */
  html:not(.js) .site-nav {
    position: static;
    width: auto;
    transform: none;
    margin-top: var(--top-h);
  }

  html:not(.js) .site-page { padding-top: 0; }

  .cn-bg[data-place="corner"] img { width: 100vw; }

  .cookie-inner {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .newsletter-fields {
    grid-template-columns: 1fr;
  }
}

/* Very short screens (a phone on its side, or zoomed to 400%): the top bar
   scrolls away with the page instead of covering it. */
@media (max-height: 480px) {
  .site-top { position: absolute; }
  .site-nav { top: 0; padding-top: calc(var(--top-h) + 1rem); }
  html { scroll-padding-top: 1rem; }
}

/* ── One book (site_book_entry()): cover, details, blurb and ways to buy ──
   The cover with the buy buttons under it on the left, the words on the
   right; the buttons come last in the page for screen readers. */
.book-entry {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  grid-template-areas: "media info" "buy info";
  grid-template-rows: auto 1fr;
  column-gap: 1.75rem;
  row-gap: 0.9rem;
  align-items: start;
}

.book-entry + .book-entry {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}

.book-entry-media { grid-area: media; }
.book-entry-info { grid-area: info; }

.book-entry-media img,
.book-entry-media .no-cover {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid var(--border);
}

.book-entry-media .no-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: linear-gradient(135deg, var(--copper-dark), #1a0f04);
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--copper);
  text-align: center;
}

.book-trailer {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--border);
}

.book-entry-title {
  font-family: 'Cinzel', serif;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  color: var(--copper-light);
  margin-bottom: 0.3rem;
}

.book-entry-meta {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--cream-dim);
  margin-bottom: 1rem;
}

.book-entry-meta a { color: var(--copper-light); }

/* Each fact moves to the next line whole, rather than breaking in the middle. */
.book-entry-fact { display: inline-block; }

.book-entry-sep { margin: 0 0.15em 0 0.5em; color: var(--copper); }

.book-entry-blurb {
  color: var(--cream);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

/* The ways to buy: buttons of one width under the cover; the first, straight
   from us, stands out. */
.book-buy {
  grid-area: buy;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.book-buy .buy-link {
  display: block;
  text-align: center;
  font-size: 0.72rem;
  padding: 0.65rem 0.5rem;
}

.book-buy li:first-child .buy-link {
  background: var(--copper);
  color: var(--black);
}

.book-buy li:first-child .buy-link:hover,
.book-buy li:first-child .buy-link:focus-visible {
  background: var(--copper-light);
  border-color: var(--copper-light);
}

/* With a trailer: the video across the top, the buttons in a row under it,
   all one width, then the words. */
.book-entry.has-trailer {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "media" "buy" "info";
  grid-template-rows: auto;
}

.book-entry.has-trailer .book-buy {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

.book-list { margin-top: 1.5rem; }

.feature-panel .book-entry { margin-bottom: 1.5rem; }

@media (max-width: 600px) {
  .book-entry {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "buy" "info";
    grid-template-rows: auto;
  }
  .book-entry-media { max-width: 200px; }
  .book-entry.has-trailer .book-entry-media { max-width: none; }
  .book-buy { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}

/* ── EBOOK SHOP (/ebook/{code}, includes/shop.php) ── */
.ebook-offer-grid {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.ebook-offer-cover img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
}

.ebook-price {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
  color: var(--copper-light);
  margin-bottom: 1rem;
}

.ebook-blurb,
.ebook-offer p {
  color: var(--cream);
  margin-bottom: 1rem;
}

.ebook-form {
  margin-top: 1.5rem;
}

.ebook-newsletters {
  border: 1px solid var(--border);
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
}

.ebook-newsletters legend {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
  padding: 0 0.4rem;
}

.ebook-check {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: 0.9rem;
}

.ebook-check input {
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.15rem;
  flex: 0 0 auto;
  accent-color: var(--copper);
}

.ebook-check label {
  color: var(--cream);
  cursor: pointer;
}

.ebook-newsletters .hint {
  margin-left: 2.15rem;
}

.ebook-pay,
.ebook-download {
  display: inline-block;
  font-size: 0.9rem;
  padding: 1rem 2rem;
  text-decoration: none;
}

.ebook-download:focus-visible,
.ebook-pay:focus-visible {
  outline: 2px solid var(--copper-light);
  outline-offset: 3px;
}

.ebook-heading,
.error-summary h2 {
  font-family: 'Cinzel', serif;
  color: var(--copper);
  letter-spacing: 0.1em;
}

.ebook-heading {
  font-size: 1rem;
  text-transform: uppercase;
  margin: 2rem 0 0.75rem;
}

.error-summary h2 {
  font-size: 0.9rem;
  color: #e06a6a;
  margin-bottom: 0.5rem;
}

.error-summary h2:focus,
.ebook-offer .page-title:focus {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}

.ebook-points {
  padding-left: 1.2rem;
  color: var(--cream);
}

.ebook-points li {
  margin-bottom: 0.5rem;
}

.ebook-offer a:not(.form-submit) {
  color: var(--copper-light);
}

.ebook-small {
  font-size: 0.9rem;
  color: var(--cream-dim);
}

.ebook-consent {
  margin: 0 0 1.5rem;
}

#ebook-cancelled {
  display: block;
  margin-bottom: 1.5rem;
}

@media (max-width: 600px) {
  .ebook-offer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ebook-offer-cover {
    max-width: 180px;
  }

  .ebook-pay {
    width: 100%;
  }
}

/* ── Stall sales (pages/ebook-stall.php), a bare page on the sellers' phones ── */
.bare-page {
  position: relative;
  z-index: 1;
}

.stall {
  max-width: 560px;
  margin: 0 auto;
  padding: 1.5rem 16px 3rem;
}

.stall-title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--copper);
  margin: 0 0 1.25rem;
}

.stall .form-group {
  margin-bottom: 1.25rem;
}

.stall .form-submit,
.stall-next {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1rem;
  padding: 1rem;
  text-decoration: none;
  box-sizing: border-box;
}

.stall .stall-send {
  margin: 0.5rem 0 1.75rem;
  padding: 1.4rem 1rem;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  background: var(--copper);
  color: var(--black);
  border: 2px solid var(--copper-light);
}

.stall .stall-send:hover {
  background: var(--copper-light);
}

.stall-options {
  border: 0;
  padding: 0;
  margin: 0 0 1.25rem;
}

.stall-options legend {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
  padding: 0;
}

.stall-options .ebook-check {
  display: inline-flex;
  margin-right: 1.5rem;
}

.stall-amount input {
  max-width: 8rem;
}

.stall-button-form {
  margin: 0 0 1rem;
}

.stall-lock-button {
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: 1px solid var(--border);
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream-dim);
  cursor: pointer;
}

.stall .form-message {
  display: block;
  margin: 0 0 1.25rem;
  font-size: 1rem;
}

.stall .form-submit:focus-visible,
.stall-lock-button:focus-visible,
.stall-next:focus-visible,
#stall-outcome:focus,
#stall-title:focus {
  outline: 2px solid var(--copper-light);
  outline-offset: 3px;
}

/* ── Log in / Log out, top right of the top bar (index.php) ── */
.site-account {
  position: absolute;
  top: 50%;
  right: 1.25rem;
  transform: translateY(-50%);
  z-index: 3;
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream-dim);
  text-decoration: none;
  padding: 0.25rem 0.4rem;
}

.site-account:hover,
.site-account:focus-visible {
  color: var(--copper-light);
}

.site-account:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .site-account {
    right: 0.5rem;
    font-size: 0.62rem;
  }
}

/* ── The boxes round each page's text: 15% dark, with a thin copper line ── */
.text-block {
  background: rgba(15, 10, 5, 0.15);
  border: 1px solid var(--border);
  padding: 2rem 2.25rem;
}

.text-block > :last-child,
.text-block > :last-child > :last-child { margin-bottom: 0; }

.text-block > .news-article:last-child { padding-bottom: 0; }

/* Home: the box under the title is as wide as the panels below it. */
.home-hero .text-block {
  width: 100%;
  max-width: 736px;
}

.home-hero .text-block p + p,
.feature-panel p + p { margin-top: 1rem; }

/* A set margin left and right, so the boxes never run up against the menu
   or the edge of the window. */
@media (min-width: 769px) {
  .site-page > main { padding: 0 clamp(1.5rem, 5vw, 4rem); }
}

@media (max-width: 600px) {
  .about-content, .books-content, .news-content, .contact-content,
  .home-hero, .home-features, .home-social {
    padding-left: 16px;
    padding-right: 16px;
  }

  .text-block { padding: 1.5rem 1.25rem; }
}

/* ── Terms of Service, Cookie Policy, Accessibility (pages/terms.php ...) ── */
.legal-content h2 {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--copper);
  margin: 2rem 0 1rem;
}

.legal-content a { color: var(--copper-light); }

.legal-content ul {
  padding-left: 1.2rem;
  margin-bottom: 1.5rem;
}

.legal-content li {
  margin-bottom: 0.75rem;
  font-size: 1.05rem;
}

.legal-updated {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--cream-dim);
  font-style: italic;
}

/* News: the line about the terms, after Sign up. */
.newsletter-terms {
  margin-top: 1rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--cream-dim);
}

.newsletter-terms a { color: var(--copper-light); }

/* The 404 page, centred. */
.notfound-content { text-align: center; }

/* ── Landing page (/, pages/landing.php) ── */
body.landing {
  min-height: 100vh;
  overflow-x: hidden;
}

/* The screen's full height (lvh), like the pictures behind the pages, so
   the video doesn't zoom on a phone as the address bar shrinks and grows. */
.landing-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  object-fit: cover;
  z-index: 0;
}

/* Darker towards the edges of the video. */
.landing-shade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 30%, rgba(0, 0, 0, 0.6) 100%);
}

.landing-stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 16px;
}

.landing-emblem {
  width: 120px;
  height: auto;
  filter: drop-shadow(0 0 18px rgba(196, 120, 48, 0.5));
  margin-bottom: 1rem;
}

.landing-stage h1 {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 5rem);
  letter-spacing: 0.08em;
  color: var(--copper-light);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8), 0 0 30px rgba(196, 120, 48, 0.3);
  line-height: 1.1;
}

.landing-tag {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.8rem, 1.8vw, 1.05rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 1rem 0 2.2rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}

.landing-begin {
  display: inline-block;
  padding: 0.95rem 2.4rem;
  border: 1px solid var(--copper);
  background: rgba(10, 8, 4, 0.55);
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper-light);
  text-decoration: none;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

.landing-begin:hover,
.landing-begin:focus-visible {
  background: var(--copper);
  color: var(--black);
  box-shadow: 0 0 22px rgba(196, 120, 48, 0.55);
}

.landing-social {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  margin-top: 2rem;
}

.landing-social a { color: var(--cream-dim); }

.landing-social a:hover,
.landing-social a:focus-visible { color: var(--copper-light); }

/* "Begin your journey": the page fades to black, then the home page opens
   (assets/js/main.js). */
.landing-video,
.landing-shade,
.landing-stage { transition: opacity 1s ease; }

body.landing-leaving .landing-video,
body.landing-leaving .landing-shade,
body.landing-leaving .landing-stage { opacity: 0; }

/* ── Soft fade from one page to the next ── */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.45s; }

/* ── Reduce Motion: no fog, no fades, no sliding (the landing video plays on) ── */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }

  .cn-fog { display: none; }

  .site-nav,
  html.drawer-open .site-nav,
  .site-page,
  .site-menu-toggle svg,
  .landing-video,
  .landing-shade,
  .landing-stage { transition: none; }
}