/* ============================================================================
 * FAMILYHUB — main.css   ·   "CHRONICLE" — ANTIQUE / EXPEDITION REVISION
 * A family archive in the key of an old American expedition journal — antique
 * Midwest/Northeast type, aged paper with darkened papyrus edges, faint old-map
 * & compass scenery (Indiana-Jones archaeology), with one cool ANTIQUE BLUE
 * woven into the trim. THE FOUNDATION STYLESHEET.
 *   -> WGU: Front-End Web Development (D278/D279), UI Design (D281)
 * ==========================================================================*/

/* ----------------------------------------------------------------------------
 * 1) DESIGN TOKENS
 * Warm parchment + espresso ink + archival red, now with an ANTIQUE BLUE
 * (the blue of old map water/rivers) as the cool trim accent. -> WGU: UI (D281)
 * --------------------------------------------------------------------------*/
:root {
  --paper:    #efe1c6;  --paper-2:  #e6d6b6;  --card:    #f6edd6;  /* golden-brown aged stock (per the antique world-map) */
  --frame:    #211a13;  --frame-2:  #2c2419;

  --ink:       #2a2014;  --ink-soft:  #5f5037;  --ink-faint: #6f5b40;
  --on-frame:  #f0e4cf;  --on-frame-soft: #c9b896;

  --rust:    #9d3b2c;  --rust-dk: #7d2c20;   /* archival red — primary accent + the map "route" */
  --amber:   #bd7a2a;  --amber-dk: #8a5618;  /* sepia gold (decorative / small labels)          */
  --sepia:   #a9763f;
  --blue:    #355e7c;  /* ANTIQUE MAP BLUE — cool trim accent on light stock (AA)               */
  --blue-lt: #7ea9c6;  /* lighter, for text/lines ON dark frames                                */

  --line:    rgba(42, 32, 20, 0.18);  --line-hi: rgba(42, 32, 20, 0.34);
  --line-frame: rgba(240, 228, 207, 0.18);
  --danger:  #b3372a;  --ok: #4d7c4a;

  /* --- Typography ---
   * Old Standard TT: an antique 1800s book/diploma serif — reads "expedition
   *   document," and has a real 700 weight (no wavy Fraunces f/j).
   * Special Elite: a worn typewriter face — the field-journal / map-label voice.
   * Spectral: an editorial body serif, readable for elders. */
  --font-display: 'Old Standard TT', 'Times New Roman', serif;
  --font-body:    'Spectral', Georgia, serif;
  --font-mono:    'Special Elite', 'Courier New', monospace;

  --space-1: 0.5rem;  --space-2: 1rem;    --space-3: 1.5rem;
  --space-4: 2rem;    --space-6: 3rem;    --space-8: 4rem;
  --space-12: 6rem;   --space-16: 8rem;

  --max-width: 1180px;  --radius: 4px;  --radius-sm: 3px;  --nav-h: 80px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);  --dur: 0.5s;
}

/* ----------------------------------------------------------------------------
 * 2) RESET  -> WGU: Front-End (D278)
 * --------------------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body); font-size: 18px; line-height: 1.7;
  color: var(--ink); background-color: var(--paper);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.skip-link {
  position: absolute; left: var(--space-2); top: -100px; z-index: 400;
  background: var(--frame); color: var(--on-frame);
  padding: 0.7rem 1.1rem; font-family: var(--font-mono); font-size: 0.85rem;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-2); }

/* ----------------------------------------------------------------------------
 * 3) BACKGROUND ATMOSPHERE — grain, aged papyrus EDGES, and a faint old-map /
 * compass watermark (the Indiana-Jones archaeology cue). All fixed, pure CSS,
 * pointer-events:none. -> WGU: UI Design (D281).
 * --------------------------------------------------------------------------*/
.grain {
  position: fixed; inset: -50%; z-index: 1; pointer-events: none; width: 200%; height: 200%;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.6s steps(4) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(3%,3%)} }

/* A faint compass rose + map graticule, low in one corner like a chart legend. */
.mapbg {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.09;
  background-repeat: no-repeat, repeat;
  background-position: right 5% top 96px, 0 0;
  background-size: 400px 400px, 84px 84px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%232a2014' stroke-width='0.7'%3E%3Ccircle cx='50' cy='50' r='46'/%3E%3Ccircle cx='50' cy='50' r='34'/%3E%3Ccircle cx='50' cy='50' r='4'/%3E%3C/g%3E%3Cg fill='%232a2014'%3E%3Cpath d='M50 4 L56 50 L50 60 L44 50 Z'/%3E%3Cpath d='M50 96 L44 50 L50 40 L56 50 Z' opacity='0.6'/%3E%3Cpath d='M4 50 L50 44 L60 50 L50 56 Z' opacity='0.6'/%3E%3Cpath d='M96 50 L50 56 L40 50 L50 44 Z' opacity='0.6'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg stroke='%232a2014' stroke-width='0.5' fill='none'%3E%3Cpath d='M0 0 H90 M0 0 V90'/%3E%3C/g%3E%3C/svg%3E");
}

/* AGED PAPYRUS EDGES — darkened, mottled corners + a soft inset vignette, like
 * the burned edges of an old map or the faded border of a Western photograph. */
.edges {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 130px 24px rgba(46, 30, 12, 0.5), inset 0 0 46px 8px rgba(46, 30, 12, 0.32);
  background:
    radial-gradient(ellipse 30% 26% at 0% 0%,     rgba(44, 28, 12, 0.5), transparent 60%),
    radial-gradient(ellipse 30% 26% at 100% 0%,   rgba(44, 28, 12, 0.5), transparent 60%),
    radial-gradient(ellipse 32% 30% at 0% 100%,   rgba(40, 24, 10, 0.55), transparent 60%),
    radial-gradient(ellipse 32% 30% at 100% 100%, rgba(40, 24, 10, 0.55), transparent 60%);
}

/* PAPER WASH — a fixed parchment veil that fades the antique-map background so
 * it reads as calm texture and EVERY text colour keeps WCAG-AA contrast over it
 * (verified against the actual image's darkest pixels). -> WGU: UI Design (D281). */
/* THE VINTAGE-MAP BACKGROUND.
 * Drop the chosen royalty-free image at  img/world-map-vintage.jpg  and it takes
 * over automatically; until then the code-drawn  img/antique-map.jpg  shows as a
 * graceful 2nd-layer fallback. A very slow horizontal pan gives quiet life, and
 * the fixed layer parallaxes as the page scrolls (JS adds a gentle vertical
 * drift). All stilled under prefers-reduced-motion. -> WGU: UI Design (D281). */
.mapscene { position: fixed; left: 0; right: 0; top: -26vh; height: 152vh; z-index: 0;
  overflow: hidden; pointer-events: none; will-change: transform; }
.mapscene__img {
  position: absolute; top: 0; bottom: 0; left: -16%; width: 132%;
  background: url("../img/world-map-vintage.jpg") center center / cover no-repeat,
              url("../img/antique-map.jpg") center center / cover no-repeat;
  animation: mappan 95s ease-in-out infinite alternate;
}
@keyframes mappan { from { transform: translateX(-5.5%); } to { transform: translateX(5.5%); } }

/* The fixed parchment veil that fades the map so it stays calm texture and every
 * text colour keeps WCAG-AA over it (re-tune this alpha once the real image is in). */
.paperwash { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: rgba(239, 225, 198, 0.28); }

/* A dashed tick-mark BORDER FRAME around the whole viewport — the signature
 * edge of an old chart (see the antique world-map reference). Fixed, like a
 * matte the page sits inside. */
.mapframe {
  position: fixed; inset: 11px; z-index: 4; pointer-events: none;
  border: 2px solid rgba(42, 32, 20, 0.5); border-radius: 2px;
}
.mapframe::before { content: ""; position: absolute; inset: 5px; border: 1px dashed rgba(42, 32, 20, 0.42); }

/* A CARTOUCHE — the ornate double-ruled plate (like the map's "The World" box).
 * Add the class to any panel to frame it with engraved inner rules. */
.cartouche::before { content: ""; position: absolute; inset: 12px; border: 1px solid var(--on-frame-soft); opacity: 0.55; pointer-events: none; }
.cartouche::after  { content: ""; position: absolute; inset: 16px; border: 1px solid var(--on-frame-soft); opacity: 0.32; pointer-events: none; }

/* ----------------------------------------------------------------------------
 * INTRO SPLASH — the tree animation blooms, then the logo flies up to seat
 * itself in the nav (a FLIP onto the real nav logo). -> WGU: JavaScript (D280).
 * --------------------------------------------------------------------------*/
.splash { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; }
.splash__bg { position: fixed; inset: 0; background: radial-gradient(120% 120% at 50% 40%, #2c352b, #1d231c); transition: opacity 0.9s ease; }
.splash__stage { position: relative; z-index: 1; width: min(56vmin, 430px); aspect-ratio: 768 / 1152; }
.splash__vid, .splash__logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.splash__vid { box-shadow: 0 40px 90px -24px rgba(0, 0, 0, 0.8); transition: opacity 0.5s ease; }
.splash__logo { opacity: 0; box-shadow: 0 40px 90px -24px rgba(0, 0, 0, 0.8); transform-origin: center center; will-change: transform, opacity;
  transition: opacity 0.5s ease, transform 0.95s cubic-bezier(0.5, 0, 0.15, 1); }
.splash.is-crossfade .splash__vid { opacity: 0; }
.splash.is-crossfade .splash__logo { opacity: 1; }
.splash.is-bg-out .splash__bg { opacity: 0; }
.splash__skip { position: fixed; right: 22px; bottom: 20px; z-index: 2; font-family: var(--font-mono); font-size: 0.76rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: #d8c8a6; background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(216, 200, 166, 0.45); border-radius: 4px; padding: 0.45rem 1rem; cursor: pointer; }
.splash__skip:hover { background: rgba(0, 0, 0, 0.45); color: #fff; }
@media (prefers-reduced-motion: reduce) { .splash { display: none !important; } }

.site-header, main, .site-footer { position: relative; z-index: 3; }

/* ----------------------------------------------------------------------------
 * 4) TYPOGRAPHY
 * --------------------------------------------------------------------------*/
h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 700; line-height: 1.06;
  letter-spacing: 0; color: var(--ink);
}
h1 { font-size: clamp(2.7rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.35rem, 2.3vw, 1.75rem); }
h4 { font-size: 1.05rem; }
p  { color: var(--ink-soft); max-width: 64ch; }

/* The archival "slug" / metadata label — typewriter, tracked-out, with a tick. */
.slug {
  font-family: var(--font-mono); font-weight: 400; font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--rust); display: inline-flex; align-items: center; gap: 0.6rem;
}
.slug::before { content: ""; width: 22px; height: 2px; background: var(--rust); display: inline-block; }
.slug--blue { color: var(--blue); }
.slug--blue::before { background: var(--blue); }

.rust-text { color: var(--rust); }
.ink-link { color: var(--rust-dk); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ink-link:hover { color: var(--rust); }

/* ----------------------------------------------------------------------------
 * 5) LAYOUT PRIMITIVES
 * --------------------------------------------------------------------------*/
.container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-3); }
.section { padding-block: var(--space-16); position: relative; }
.section--tight { padding-block: var(--space-8); }
.section--band { background: var(--paper-2); border-block: 1px solid var(--line); }
.section-head { max-width: 62ch; margin-bottom: var(--space-8); }
.section-head h2 { margin: var(--space-2) 0; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .slug { justify-content: center; }
.section-head--center p { margin-inline: auto; }
/* AGED-PAPER PLAQUES — section titles and the hero copy sit on a near-opaque
 * parchment label so they keep WCAG-AA over the bolder map, while the map shows
 * vividly in the margins and gutters around them (fits the archive look). */
.section-head, .hero__copy {
  background: rgba(244, 231, 205, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  box-shadow: 5px 7px 0 -3px rgba(42, 32, 20, 0.10);
}
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* ----------------------------------------------------------------------------
 * 6) MASTHEAD / NAV
 * --------------------------------------------------------------------------*/
.site-header {
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 100;
  display: flex; align-items: center; border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(243, 233, 216, 0.9); backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%); border-bottom-color: var(--blue);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; }
.brand__mark { width: auto; height: 66px; flex: none; display: block; border-radius: 4px; box-shadow: 0 1px 5px rgba(33, 26, 19, 0.45); }
.brand__word { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; letter-spacing: 0; color: var(--ink); line-height: 1; }
.brand__tag { font-family: var(--font-mono); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-faint); display: block; margin-top: 2px; }
.nav__links { display: flex; gap: var(--space-4); align-items: center; }
.nav__links a {
  font-family: var(--font-mono); font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-soft); position: relative; padding-block: 0.4rem; transition: color var(--dur) var(--ease);
}
.nav__links a:not(.btn):hover, .nav__links a:not(.btn):focus-visible { color: var(--ink); }
/* At the very top the header is transparent over the map; make the menu pop:
 * bigger, bold, antique-blue, with a parchment halo so it reads against the chart. */
.site-header:not(.is-scrolled) .nav__links a:not(.btn) {
  color: var(--blue); font-weight: 700;
  text-shadow: 0 1px 2px rgba(244, 231, 205, 0.96), 0 0 9px rgba(244, 231, 205, 0.85);
}
/* The "Enter archive" button + the wordmark/tag also need to read over the map
 * at the very top: a parchment chip for the button, a parchment halo for the
 * logo. All revert to the normal look the moment the bar frosts on scroll. */
.site-header:not(.is-scrolled) .nav__links a.btn {
  background: rgba(244, 231, 205, 0.92); border-color: var(--blue); color: var(--blue); font-weight: 700;
  text-shadow: 0 1px 2px rgba(244, 231, 205, 0.9);
}
.site-header:not(.is-scrolled) .nav__links a.btn:hover { background: var(--blue); border-color: var(--blue); color: var(--paper); text-shadow: none; }
.site-header:not(.is-scrolled) .brand__word { text-shadow: 0 1px 2px rgba(244, 231, 205, 0.98), 0 0 7px rgba(244, 231, 205, 0.96), 0 0 18px rgba(244, 231, 205, 0.82); }
.site-header:not(.is-scrolled) .brand__tag { color: var(--blue); text-shadow: 0 1px 2px rgba(244, 231, 205, 0.98), 0 0 7px rgba(244, 231, 205, 0.96), 0 0 15px rgba(244, 231, 205, 0.8); }
.nav__links a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px;
  background: var(--rust); transition: width var(--dur) var(--ease); }
.nav__links a:not(.btn):hover::after, .nav__links a:not(.btn):focus-visible::after { width: 100%; }
.nav__toggle { display: none; background: none; border: none; cursor: pointer; color: var(--ink);
  font-size: 1.3rem; width: 44px; height: 44px; border-radius: var(--radius-sm); }
.nav__toggle:hover { background: var(--paper-2); }

/* ----------------------------------------------------------------------------
 * 7) COLOPHON / FOOTER
 * --------------------------------------------------------------------------*/
.site-footer { border-top: 2px solid var(--ink); padding-block: var(--space-8) var(--space-4); background: var(--paper-2); }
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-6); }
.footer__brand p { font-size: 0.97rem; margin-top: var(--space-2); max-width: 40ch; }
.site-footer h4 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--space-2); }
.site-footer a { color: var(--ink-soft); font-size: 0.98rem; line-height: 2.1; transition: color var(--dur) var(--ease); }
.site-footer a:hover { color: var(--rust); }
/* keep the footer logo aligned exactly like the nav (cancel the footer link's tall line-height on the brand). */
.site-footer .brand { line-height: 1.7; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  padding-top: var(--space-4); border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.04em; color: var(--ink-faint); }

/* ----------------------------------------------------------------------------
 * 8) SCROLL-REVEAL  (a slow "develop" — fade + rise)
 * --------------------------------------------------------------------------*/
.reveal { opacity: 0; transform: translateY(22px); filter: saturate(0.6);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 1.1s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); filter: saturate(1); }

/* ----------------------------------------------------------------------------
 * 9) RESPONSIVE
 * --------------------------------------------------------------------------*/
@media (max-width: 980px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (max-width: 760px) {
  .nav__toggle { display: grid; place-items: center; }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--space-2) var(--space-3) var(--space-4); background: var(--paper); border-bottom: 2px solid var(--ink);
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .nav__links.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav__links a { padding: 0.95rem 0.25rem; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
  .nav__links a:not(.btn)::after { display: none; }
  .nav__links .btn { margin-top: var(--space-2); justify-content: center; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* 10) REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
  .grain { animation: none; }
}