/* ==========================================================================================
   Shaker Square Advisors | mockup 4 "Cover" | one-page cover landing page
   Brand reference: Brand Assets/Templates/Shaker Square Slide Master (WIP).pptx, theme
   "Shaker Square" (Georgia; navy #002E6D; pale rule #E1E1E1; sky #5EA2FF; pale blue #DEECFE)
   and its first title layout: full-bleed faded aerial, navy bands top and bottom, a title
   panel on the photograph.
   Font policy: working/research/typography-and-fonts.md (Georgia from the device, Gelasio
   downloaded only where Georgia is absent; nothing from a third-party host).
   ========================================================================================== */

/* ---- 1. Fonts (two faces: the page sets nothing in bold) --------------------------------- */
@font-face {
  font-family: "Shaker Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Georgia"), url("../assets/fonts/gelasio-regular.woff2") format("woff2");
  ascent-override: 91.70%;
  descent-override: 21.92%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Shaker Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local("Georgia Italic"), local("Georgia-Italic"), url("../assets/fonts/gelasio-italic.woff2") format("woff2");
  ascent-override: 91.70%;
  descent-override: 21.92%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Shaker Serif Fallback";
  font-style: normal;
  font-weight: 400;
  src: local("Noto Serif"), local("NotoSerif"), local("NotoSerif-Regular"), local("Droid Serif"), local("DroidSerif");
  size-adjust: 91.76%;
  ascent-override: 99.93%;
  descent-override: 23.89%;
  line-gap-override: 0%;
}

/* ---- 2. Tokens ----------------------------------------------------------------------------- */
:root {
  --navy: #002E6D;          /* theme dk2: text, bands, logo frame, rule */
  --sky: #5EA2FF;           /* theme lt2 / hyperlink */
  --pale: #DEECFE;          /* theme accent2: hover colour on navy */
  --white: #FFFFFF;

  /* The background clip and its poster already carry a 50% white fade (baked in at encode time so
     the files stay small). This veil sits on top. Total whiteness = 1 - 0.5 x (1 - veil):
     0.30 here gives the 65% Josh asked for; 0.20 gives 60%; 0.50 gives 75%. */
  --veil: 0.30;

  /* The title panel: frosted glass over the clip. --panel is its white, --panel-blur its blur. */
  --panel: 0.4;
  --panel-blur: 8px;

  /* The footer band's height, measured by main.js; the top band is two thirds of it (Josh). The
     fallback is the footer's height on a desktop screen without JavaScript. */
  --foot-h: 88px;

  --font-serif: "Shaker Serif", "Shaker Serif Fallback", Georgia, "Times New Roman", Times, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif;

  --gutter: 80px;                    /* fixed, not viewport-relative, so browser zoom scales the whole composition (revision 10) */
  --mark: 144px;
}

/* ---- 3. Base ------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  background: var(--navy);          /* anything beyond the document (overscroll, a collapsing browser bar) is navy, never the clip */
  overscroll-behavior: none;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;               /* follows the mobile browser bar as it collapses, so the footer stays at the bottom */
  display: grid;
  grid-template-rows: auto 1fr auto;
  font-family: var(--font-serif);
  color: var(--navy);
  background: transparent;   /* the fixed .bg (z-index -1) paints between the html canvas and the body's content */
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img, video, svg { display: block; }

/* ---- 4. Background: poster, clip, veil ------------------------------------------------------ */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #DADADA;      /* mid grey until the poster paints: the faded aerial's average tone */
}
.bg__poster,
.bg__poster img,
.bg__video,
.bg__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.bg__poster img,
.bg__video { object-fit: cover; object-position: center; }
.bg__video {
  opacity: 0;
  transition: opacity 900ms ease;
}
.bg__video.is-playing { opacity: 1; }
.bg__veil { background: rgba(255, 255, 255, var(--veil)); }

/* ---- 5. Bands: the slide's navy top and bottom bars, each with a white hairline on its inner edge --- */
.band { background: var(--navy); color: var(--white); }
.band--top {
  height: var(--foot-h);             /* header and footer bands are equal (Josh, revision 5) */
  box-shadow: 0 2px 0 var(--white);
}
.band--foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
  flex-wrap: wrap;
  padding: 20px var(--gutter) 22px;
  box-shadow: 0 -2px 0 var(--white);
}

/* ---- 6. The cover: mark above a frosted title panel, centred between the bands ---------------- */
.cover {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  padding: 24px var(--gutter);        /* symmetric, so the panel is centred in the page between two equal bands */
}
.cover__mark {
  position: absolute;                 /* parked in the top right of the clip area, below the header band (Josh) */
  top: calc(var(--foot-h) - 8px);     /* a few pixels up from the header-height gap (Josh) */
  right: calc(max(var(--gutter), env(safe-area-inset-right)) + 24px);
  width: var(--mark);
  height: var(--mark);
}
.cover__panel {
  width: min(100%, 896px);           /* revision 9: a tenth wider than revision 8 */
  padding: 72px 60px 50px;           /* text sits lower, nearer the rule */
  text-align: center;
  background: rgba(255, 255, 255, var(--panel));
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(1.05);
  backdrop-filter: blur(var(--panel-blur)) saturate(1.05);
  border: 0;
  outline: 3px solid var(--navy);              /* the inset navy line, as thick as the rule under the text */
  outline-offset: -18px;             /* the inset line sits further in, more space around it */
  box-shadow: 0 32px 64px -36px rgba(0, 46, 109, 0.45);
}
.cover__rule {
  display: block;
  width: 66%;                         /* under the text, a quarter shorter than the text width */
  height: 4.5px;
  margin: 18px auto 0;
  background: var(--navy);
}
.cover__tagline {
  margin: 0;
  font-weight: 400;
  font-size: 1.75rem;                /* 28 px; smaller steps below by breakpoint, never by viewport fraction */
  line-height: 1.38;
  letter-spacing: -0.002em;
  color: var(--navy);
  text-wrap: balance;
}
/* 404 only */
.cover__home { display: block; }
.cover__home:focus-visible { outline: 2px solid var(--navy); outline-offset: 6px; }
.cover__note { margin: 14px 0 0; font-size: 1.0625rem; line-height: 1.5; }
.cover__note a { color: var(--navy); text-underline-offset: 0.18em; }
.cover__note a:hover { color: #1D4F9C; }
.cover__note a:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* ---- 7. Footer band: the address, then the copyright line ------------------------------------ */
.foot__email {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;           /* 44 px tall */
  font-size: 0.9375rem;      /* 15 px, the same as the copyright line */
  line-height: 1.3;
  color: var(--white);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  transition: color 200ms ease, text-decoration-color 200ms ease;
}
.foot__email:hover { color: var(--pale); text-decoration-color: var(--pale); }
.foot__email:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; border-radius: 2px; }
.foot__email span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: inherit; }
.foot__email { text-decoration: none; }
.foot__icon { flex: none; opacity: 0.9; width: 22px; height: 22px; }
.foot__legal {
  margin: 0;
  font-size: 0.9375rem;      /* 15 px */
  line-height: 1.5;
  color: var(--white);               /* identical to the address */
}

/* ---- 8. Motion control: a quiet round button in the bottom right corner of the clip area ------ */
.motion {
  position: absolute;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: 22px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(0, 46, 109, 0.55);
  color: var(--white);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 200ms ease, background-color 200ms ease;
}
.motion:hover { opacity: 1; background: var(--navy); }
.motion:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; opacity: 1; }
.motion svg { fill: currentColor; }
.motion[data-state="playing"] .motion__play { display: none; }
.motion[data-state="paused"] .motion__pause { display: none; }

/* ---- 9. Media and modes --------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  :root { --gutter: 48px; --mark: 120px; }
  .cover__panel { padding: 56px 44px 40px; }
  .cover__tagline { font-size: 1.5rem; }
}
@media (max-width: 599.98px) {
  :root { --foot-h: 112px; --mark: 84px; --gutter: 28px; }
  .cover__tagline { font-size: 1.125rem; }
  .band--foot { padding: 12px var(--gutter) 14px; flex-direction: column; align-items: flex-start; gap: 0; }
  .cover { padding: calc(var(--foot-h) + var(--mark) + 12px) var(--gutter) 72px; }   /* phones: clears the mark above, room for the control below; exact centring is not possible here */
  .cover__mark { right: calc(var(--gutter) + 12px); }
  .cover__panel { padding: 22px 18px 24px; }
  .cover__rule { margin-top: 16px; }
  .motion { right: var(--gutter); bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .bg__video { display: none; transition: none; }
  .bg__video.is-playing { display: block; opacity: 1; }   /* only after the visitor presses play */
  .foot__email, .motion { transition: none; }
}
@media (forced-colors: active) {
  .cover__mark { forced-color-adjust: none; background: #FFFFFF; padding: 6px; }
  .band--top, .band--foot { border-top: 1px solid CanvasText; border-bottom: 1px solid CanvasText; }
  .cover__panel { border-color: CanvasText; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cover__rule { background: CanvasText; }
  .motion { border-color: ButtonText; }
}
@media print {
  .bg, .band--top, .motion { display: none; }
  body { display: block; }
  .cover { padding: 24mm 0 12mm; }
  .cover__panel { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .band--foot { background: none; color: #000; box-shadow: none; text-align: left; padding: 0; }
  .foot__email, .foot__legal { color: #000; }
  .foot__email { padding-left: 0; }
}