/* ============================================================
   Fonts - from house-of-epochs
   ============================================================ */
@font-face {
  font-family: "Bellefair";
  src: url("../fonts/bellefair/bellefair-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DMMono";
  src: url("../fonts/dm-mono/dm-mono-light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DMMono";
  src: url("../fonts/dm-mono/dm-mono-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DMMono";
  src: url("../fonts/dm-mono/dm-mono-medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Palace";
  src: url("../fonts/palace/palace-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Palace";
  src: url("../fonts/palace/palace-italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   Tokens + base - from house-of-epochs globals.css
   ============================================================ */
:root {
  --base-100: #faf2e1;
  --base-200: #e6dfcf;
  --base-300: #ffae00;
  --base-400: #171717;
  --base-500: #0f0f0f;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* Only the decorative furniture resists selection - the scrolling arc
   text and the SVG chart marks. Real copy stays selectable. */
.footer-arc,
.page-arc,
.chart svg {
  user-select: none;
  -webkit-user-select: none;
}

::-webkit-scrollbar {
  display: none;
}

body {
  /* white page background, per request */
  background-color: #ffffff;
  color: var(--base-500);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Palace";
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: -3%;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(5rem, 10vw, 10rem);
}

p {
  font-family: "Bellefair";
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: -2%;
}

p.sm {
  font-size: 1.2rem;
}

p.mono {
  font-family: "DMMono";
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
}

p.mono.sm {
  font-size: 0.8rem;
}

/* ============================================================
   Footer - from house-of-epochs Footer.css
   ============================================================ */
.footer {
  position: relative;
  width: 100%;
  height: 100svh;
  padding: 0.75rem;
  overflow: hidden;
  background-color: #ffffff;
  color: var(--base-500);
}

/* Mirrors .page::before at the top of the page - same accent green
   (#abff02, the animated-copy reveal's COLOR_ACCENT) as two soft,
   blurred radial pools anchored left and right, bleeding in from the
   bottom edge instead of the top so the two bookend sections read as
   a matched pair. */
.footer::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: radial-gradient(
      ellipse 45% 100% at 0% 100%,
      rgba(171, 255, 2, 0.32) 0%,
      rgba(171, 255, 2, 0.22) 20%,
      rgba(171, 255, 2, 0.12) 40%,
      rgba(171, 255, 2, 0.05) 60%,
      transparent 80%
    ),
    radial-gradient(
      ellipse 45% 100% at 100% 100%,
      rgba(171, 255, 2, 0.32) 0%,
      rgba(171, 255, 2, 0.22) 20%,
      rgba(171, 255, 2, 0.12) 40%,
      rgba(171, 255, 2, 0.05) 60%,
      transparent 80%
    );
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.footer-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 5000px;
  height: 100%;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 0 0.75rem;
}

/* Mirrors .page-arc at the top of the page: both arcs are centred on
   their own section, and in both cases it is the CONTENT that carries
   the offset keeping it clear of the curve - not the arc.

   The flipped arc dips lowest at mid-span, exactly where the wordmark
   sits, so the gap between them is what has to be protected. Centring
   the arc alone would close that gap, so .footer-content takes the
   matching push - see the margin note there.

   The clearance is held in vh, the axis the collision happens on: the
   brand is sized from `clamp(5rem, 10vw, 10rem)`, so on a short-and-wide
   viewport (1280x720) it grows with WIDTH while a percentage offset
   shrinks with HEIGHT, and the two close on each other. The overlap test
   guards this at 1440x900, 1280x720 and 390x844. */
.footer-arc {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.footer-arc-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.footer-arc-text {
  font-family: "Palace", serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 5px;
  text-transform: uppercase;
  fill: var(--base-400);
}

/* The separator dot between repeats, matching the darker green dots in
   the top arc for visual consistency across the page. */
.footer-arc-dot {
  fill: #7a9d1a;
  /* Matches .page-arc-dot in problem-statement.css - see the note there
     on why the star is stepped down from the surrounding text size, and
     on the fallback font this glyph actually renders in. */
  font-size: 0.70em;
}

/* The mirror of .page-title's `margin: 52vh auto 0`, capped.

   The top section pushes its title BELOW the centred arc's descending
   tail; the footer is flipped, so its content clears the arc's ASCENDING
   tail by being pushed down past it. But the two boxes are not
   symmetrical in what they carry: the top section holds only the arc and
   a short title, while the footer holds brand, nav, socials AND the
   bottom bar inside a fixed 100svh. A flat 52vh overflows it.

   So the push is expressed as `margin-top: auto` rather than a fixed
   52vh: in a column flex container it absorbs exactly the free space
   left after brand, nav, socials and the bottom bar are laid out. That
   is the same "sit below the arc's tail" result the top section gets
   from 52vh, but self-limiting - it can never drive the bottom bar past
   the footer's edge the way a flat vh value does. Guarded by the overlap
   test at 1440x900, 1280x720 and 390x844. */
.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
  max-width: 2000px;
  margin: auto auto 0 auto;
  padding: 0.75rem;
}

/* Lifts the wordmark up into the arc's bowl so it sits INSIDE the curve
   rather than well below it - the mirror of how .page-title nests under
   the top arc's trough.

   This uses `transform`, not a negative margin. A margin here does
   nothing: .footer-content sits on `margin-top: auto`, so the free space
   above it simply grows to re-absorb any negative margin on its first
   child and the wordmark never actually moves. A transform is applied
   after layout, so it shifts the mark without feeding back into the
   flex distribution - which also means it cannot push the bottom bar
   past the footer's edge, keeping the no-overflow guarantee intact.

   vh-anchored because the bowl's depth scales with viewport height, and
   clamped so the mark never rides up through the crown on short
   viewports or barely moves on tall ones. */
.footer-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  transform: translateY(clamp(-38rem, -58vh, -12.5rem));
}

.footer-brand {
  text-align: center;
}

/* Bellefair AND size - must stay identical to .page-title h1 in
   problem-statement.css. Both override the global h1 rule (Palace), so
   if one moves the other has to move with it.

   The size is set explicitly rather than inherited from the global h1
   (`clamp(5rem, 10vw, 10rem)`): at that scale the mark is wider and
   taller than the arc's bowl, so the arc lettering cut straight through
   it on desktop and no vertical offset could separate the two - moving
   up drove the mark into the curve's descending middle, moving down
   drove it into the bottom bar. The top of the page never had this
   problem because .page-title h1 is ~35% smaller against the same arc
   geometry. Matching that scale is what opens the bowl up, and it also
   makes the two "Epochs" marks read as one mark at one size. */
.footer-brand h1 {
  font-family: "Bellefair", "Palace", serif;
  font-size: clamp(2.75rem, 6.5vw, 6.5rem);
  line-height: 1.02;
}

/* Sits under the wordmark. Sohne medium, matching .footer-bottom p below
   and the body copy in every section above, rather than the DM Mono this
   used to inherit from p.mono - the strapline sat directly under the
   wordmark in a face used nowhere else on the page, which read as a
   third typeface rather than a deliberate accent.

   font-family is restated here (not just the class swapped) because
   p.mono in the utilities block above sets the family, size, weight and
   uppercasing; those win over a bare class on specificity, so the
   override has to name each one it replaces. See the note on
   .footer-bottom p for why the weight comes from the "sohne-medium"
   family name rather than font-weight. */
/* Selector deliberately carries .mono.sm as well as the element: the
   utilities block above sets p.mono.sm { font-size: 0.8rem } at
   specificity (0,2,1), which outranks a plain p.footer-brand-subtitle
   (0,1,1) and silently pinned this line to 12.8px. Matching those classes
   here takes it to (0,3,1) so the overrides below actually apply. */
p.mono.sm.footer-brand-subtitle {
  margin-top: 0.5rem;
  /* The regular cut, not "sohne-medium". The Sohne weights are declared
     as SEPARATE families (sohne / sohne-medium / sohne-bold), not as
     weights of one, so lightening this means naming the lighter family -
     dropping font-weight alone would still load the medium file and just
     render it at its own weight. */
  font-family: "sohne", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* A step up from the 0.95rem of .footer-bottom p, which it otherwise
     matches: this one sits directly under a 10rem wordmark rather than in
     a row of small print, so the same size read undersized against it. */
  font-size: 1.1rem;
  font-weight: 400;
  text-transform: none;
  color: var(--base-400);
  opacity: 0.7;
  /* Eased off from 2px: that tracking was compensating for DM Mono's
     narrow uppercase: on a mixed-case humanist sans it reads as gappy. */
  letter-spacing: 0.04em;
}

/* Short viewports (720-tall and under) have a shallow bowl in absolute
   px while a vh-based lift is still large, so the full desktop pull
   drives the wordmark up through the crown. Eased off for them. */
@media (max-height: 800px) {
  .footer-center {
    transform: translateY(clamp(-22rem, -34vh, -7rem));
  }
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
  padding: 1.125rem 0;
  border-top: 1px solid var(--base-500);
}

/* Sohne, the body-copy face from the sections above, in its medium cut.
   The weight comes from naming the "sohne-medium" FAMILY rather than
   setting font-weight: the heavier Sohne files are declared as separate
   families in problem-statement.css (sohne / sohne-medium / sohne-bold),
   not as weights of one, so a font-weight bump on "sohne" would only get
   the browser's synthetic smear. Those @font-face rules are document
   scope, so they resolve here even though they are declared elsewhere.

   Medium (500) rather than the extrabold (800) cut: at this size the
   heaviest weight overpowered a line of small print. */
.footer-bottom p {
  font-family: "sohne-medium", "sohne", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--base-500);
}

@media (max-width: 1000px) {
  /* Mobile only: the footer's 100svh matches the hero, but at phone width
     the same shallower arc bowl leaves excess empty space below the
     wordmark and bottom bar. Desktop keeps the full-height treatment. */
  .footer {
    height: 65svh;
  }

  /* The strapline is sized against the wordmark above it, and that mark
     shrinks with the viewport - so the 1.1rem that reads as a caption on
     desktop reads as body copy here, nearly spanning the column. Carries
     the same .mono.sm classes as the base rule: without them p.mono.sm
     (0,2,1) outranks a plain descendant and the size silently stays put. */
  p.mono.sm.footer-brand-subtitle {
    font-size: 0.9rem;
    letter-spacing: 0.03em;
  }

  /* Mirrors .page::before's mobile override - narrowed so the two glow
     pools stay visually distinct instead of merging into one wash at
     phone width. */
  .footer::before {
    background: radial-gradient(
        ellipse 28% 100% at 0% 100%,
        rgba(171, 255, 2, 0.32) 0%,
        rgba(171, 255, 2, 0.22) 20%,
        rgba(171, 255, 2, 0.12) 40%,
        rgba(171, 255, 2, 0.05) 60%,
        transparent 80%
      ),
      radial-gradient(
        ellipse 28% 100% at 100% 100%,
        rgba(171, 255, 2, 0.32) 0%,
        rgba(171, 255, 2, 0.22) 20%,
        rgba(171, 255, 2, 0.12) 40%,
        rgba(171, 255, 2, 0.05) 60%,
        transparent 80%
      );
  }

  /* Width widens on narrow screens so the curve still spans the viewport,
     but the anchor stays centred to hold the mirror with .page-arc, which
     uses the same 180% / centred pairing at this breakpoint. */
  .footer-arc {
    top: 50%;
    width: 180%;
  }

  .footer-arc-text {
    font-size: 2rem;
  }

  /* Smaller on mobile - "Designed by Ahsan Latif" and "#DesignAthon2026"
     sit close together on a narrow bar and read as too heavy against the
     phone-sized wordmark above them at the desktop size. */
  .footer-bottom p {
    font-size: 0.8rem;
  }

  .footer-content {
    gap: 3rem;
  }

  /* The mobile arc is wider (180%) but its bowl is shallower in absolute
     px, so the desktop -13vh lift overshoots and pulls the wordmark up
     through the crown. Scaled back to sit inside the shallower curve.

     -41vh was tuned against the old 100svh footer height; now that
     .footer is 65svh on mobile (see above), that same vh value is a much
     bigger fraction of the box and pulls VOUCH up far enough to clip
     against the footer's own top edge. Eased off so the wordmark sits
     lower in the now-shorter box - the arc itself is untouched. */
  .footer-center {
    transform: translateY(clamp(-16rem, -24vh, -7rem));
  }

}