/* ==========================================================================
   Cryptography Castle — base.css
   Design tokens, reset, typography
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Light theme (default) — sampled from the teal-gold cover ---- */
  --color-bg:            #F5F3EA;
  --color-bg-raised:     #FBFAF3;
  --color-ink:           #16292B;   /* deep teal-charcoal from cover shadows */
  --color-ink-soft:      #405458;
  --color-rule:          #D6D7CF;
  --color-accent:        #2A6068;   /* cover's turquoise sea & sky teal */
  --color-accent-soft:   #DAE7E6;
  --color-brass:         #9C7529;   /* warm antique gold from title lettering */
  --color-brass-soft:    #E9DCBB;
  --color-link:          #2A6068;

  /* ---- Header/footer frame (deep teal, matching cover's darker tones) ---- */
  --color-header-bg:     #143138;   /* deep teal — cover castle stone in shadow */
  --color-header-bg-2:   #0E262C;
  --color-header-ink:    #EBE8DC;
  --color-header-ink-soft: #9DB6B7;
  --color-header-rule:   rgba(255,255,255,0.1);
  --color-header-accent: #CFA646;   /* luminous cover gold */

  /* ---- Type ---- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Source Serif 4', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---- Scale ---- */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 1.9rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.6vw, 2.6rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2.6vw, 3.6rem);

  --space-1: 0.5rem;
  --space-2: 0.85rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --content-width: 42rem;
  --page-width: 78rem;
  --radius: 3px;

  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
  /* Sticky footer: body is a full-height flex column so the footer
     always sits at the bottom of the viewport on short pages, instead
     of floating partway down with empty space beneath it. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* The header include wrapper and footer include wrapper should not
   grow; main (between them) takes up all remaining space. */
body > div[data-include="header"],
body > div[data-include="footer"] {
  flex-shrink: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--step-4); font-weight: 500; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-family: var(--font-body); font-weight: 600; }

p { margin: 0 0 var(--space-3); max-width: 68ch; }

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover { text-decoration-thickness: 2px; }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

img { max-width: 100%; display: block; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: var(--space-2);
}

.eyebrow::before {
  content: "";
  width: 1.4em;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

hr, .rule {
  border: none;
  border-top: 1px solid var(--color-rule);
  margin: var(--space-4) 0;
}

::selection {
  background: var(--color-accent);
  color: var(--color-bg-raised);
}

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

/* ---- Cover lightbox ---- */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);   /* standard lightbox overlay — heavy but not solid */
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-overlay[hidden] {
  display: none;
}

.lightbox-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lightbox-img {
  max-width: min(92vw, 560px);
  max-height: 92vh;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  object-fit: contain;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  /* Light backing so images with transparent backgrounds (e.g. figure
     diagrams saved as transparent PNGs) don't appear to vanish into the
     dark lightbox overlay. Opaque images (like the cover) simply cover
     this entirely, so it has no visible effect on them. */
  background: var(--color-bg-raised);
}

.lightbox-close {
  position: absolute;
  top: 1.2rem;
  right: 1.6rem;
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  z-index: 1;
  transition: color 0.15s;
}

.lightbox-close:hover {
  color: #fff;
}