/* ========================================
   THE ANNIE INN | secondary pages
   Shared by privacy.html and 404.html. The home page keeps its styles inline.
   Tokens mirror index.html. See DESIGN.md, and change both together.
   ======================================== */

@font-face {
  font-family: 'ZT Formom';
  src: url('/assets/fonts/ZTFormom-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('/assets/fonts/NunitoSans-latin.woff2') format('woff2');
  font-weight: 200 400; font-style: normal; font-display: swap;
}

:root {
  --linen: #FAF7F1;
  --heritage: #34485F;
  --cottage: #5D7589;
  --cobblestone: #5a6c7b;
  --label: #566a4d;
  --rule: rgba(52, 72, 95, 0.14);
  --on-dark: rgba(250, 247, 241, 0.86);
  --rule-dark: rgba(250, 247, 241, 0.16);

  --font-serif: 'ZT Formom', Georgia, serif;
  --font-body: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; }
body {
  font-family: var(--font-body); font-weight: 400;
  font-size: 1.0625rem; line-height: 1.7;
  color: var(--heritage); background: var(--linen);
  min-height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2 { font-family: var(--font-serif); font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--cottage); outline-offset: 3px; border-radius: 2px; }
footer :focus-visible { outline-color: var(--linen); }
::selection { background: rgba(125, 143, 116, 0.22); color: var(--heritage); }

.page-nav { padding: 1.25rem 3rem; }
.nav-brand {
  display: inline-block; padding: .5rem 0;
  font-family: var(--font-serif); font-size: 1.2rem; letter-spacing: .08em;
  color: var(--heritage); text-decoration: none;
}

main { flex: 1; padding: 4rem 3rem 6.5rem; }
.page { max-width: 38rem; margin: 0 auto; }
.label { font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: var(--label); margin-bottom: 1.1rem; }
h1 { font-size: clamp(2.1rem, 3.8vw, 3.1rem); line-height: 1.1; margin-bottom: 1.6rem; }
h2 { font-size: 1.6rem; line-height: 1.2; border-top: 1px solid var(--rule); margin-top: 2.4rem; padding-top: 1.6rem; margin-bottom: .6rem; }
.page p + p { margin-top: 1.1rem; }
.fine { margin-top: 2.6rem; font-size: .95rem; color: var(--cobblestone); }

.text-link { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: opacity .3s ease; }
.text-link:hover { opacity: .7; }
.btn {
  display: inline-block; font-family: var(--font-body); font-size: .75rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; text-decoration: none; text-align: center;
  color: var(--linen); background: var(--heritage);
  padding: 1.05rem 2.2rem; border: none; border-radius: 2px; cursor: pointer;
  transition: background .3s ease, color .3s ease, transform .25s ease;
}
.btn:hover { background: var(--cottage); transform: translateY(-1px); }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 2.2rem; }

footer { background: var(--heritage); color: var(--on-dark); text-align: center; padding: 3.5rem 2rem 3rem; border-top: 1px solid var(--rule-dark); }
.footer-brand { font-family: var(--font-serif); font-size: 1.5rem; letter-spacing: .08em; color: var(--linen); margin-bottom: .6rem; }
.footer-addr { font-style: normal; margin-bottom: 1.2rem; }
footer a { color: inherit; text-decoration: none; display: inline-block; padding: .5rem .3rem; transition: color .3s ease; }
footer a:hover { color: var(--linen); text-decoration: underline; text-underline-offset: 4px; }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: .2rem 1.6rem; margin-bottom: 1.2rem; }
.footer-copy { font-size: .85rem; opacity: .8; }

@media (max-width: 640px) {
  .page-nav { padding: .8rem 1.25rem; }
  .nav-brand { font-size: 1.1rem; letter-spacing: .06em; }
  main { padding: 2.5rem 1.25rem 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}