/* Shared styles for the /<project> pages — same brand as the hub */
:root {
  --bg:        #fafafa;   /* the seal's own off-white */
  --ink:       #211e18;
  --body:      #5f584c;
  --muted:     #8c8475;
  --faint:     #a89f8e;
  --blue:      #004996;
  --hair:      rgba(33, 30, 24, 0.12);
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
}
@font-face {
  font-family: 'EB Garamond Fallback';
  src: local('Georgia');
  size-adjust: 98.5%; ascent-override: 92%; descent-override: 25%; line-gap-override: 0%;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
::selection { background: rgba(0, 73, 150, 0.14); }
body {
  font-family: 'EB Garamond', 'EB Garamond Fallback', Georgia, serif;
  background: var(--bg);
  background-image: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, var(--bg) 55%, #f2f2f3 100%);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-ligatures: common-ligatures contextual;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2.5rem, 8vh, 6rem) clamp(1.5rem, 6vw, 3rem);
  line-height: 1.5;
}

/* masthead — top-left, links home */
.home {
  position: fixed;
  top: clamp(1.4rem, 3.5vh, 2.4rem);
  left: clamp(1.5rem, 5vw, 3rem);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--muted);
  font-size: 1.06rem;
  letter-spacing: -0.01em;
  transition: color 0.25s var(--ease);
}
.home:hover { color: var(--ink); }
.home img { width: 30px; height: auto; display: block; }
.home .dot { color: var(--blue); }

.wrap {
  max-width: 620px;
  width: 100%;
  animation: rise 0.9s var(--ease) 0.05s both;
}
.wm {
  font-size: clamp(2.9rem, 10vw, 4.2rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.92;
  color: var(--ink);
}
.wm .dot { color: var(--blue); }
.desc {
  font-size: clamp(1.1rem, 2.8vw, 1.35rem);
  font-style: italic;
  color: var(--body);
  margin-top: 1.1rem;
  text-wrap: pretty;
}
.teaser {
  font-size: clamp(1rem, 2.3vw, 1.12rem);
  color: var(--body);
  margin-top: 1.6rem;
  max-width: 46ch;
  text-wrap: pretty;
}
.epigraph {
  font-size: clamp(1.02rem, 2.4vw, 1.15rem);
  font-style: italic;
  color: var(--muted);
  margin-top: clamp(2.4rem, 5vh, 3.2rem);
  line-height: 1.45;
  max-width: 48ch;
  text-wrap: pretty;
}
.status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: clamp(2.8rem, 6vh, 3.8rem);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.status .dot-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }

.footer-rule {
  margin-top: 2.6rem;
  border: 0;
  border-top: 1px solid var(--hair);
  width: 100%;
}
.back {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: 0.98rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}
.back:hover { color: var(--blue); }
.back .arrow { display: inline-block; transition: transform 0.25s var(--ease); }
.back:hover .arrow { transform: translateX(-3px); }

@keyframes rise {
  from { opacity: 0.001; transform: translateY(12px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .wrap { animation: none; opacity: 1; }
  * { transition-duration: 0.01ms !important; }
}

.epigraph .cite {
  display: block;
  font-style: normal;
  font-size: 0.82rem;
  color: var(--faint);
  margin-top: 0.45rem;
  letter-spacing: 0.02em;
}

/* revisit (back/forward nav): render settled, no entrance replay */
.revisit .wrap { animation: none; }