/* Shared floral footer; the existing page designs keep their first viewport. */
.shared-footer {
  position: relative;
  display: none;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(360px, 25vw, 460px);
  padding: clamp(38px, 3.2vw, 58px) clamp(22px, 2.4vw, 46px) 18px;
  background: #fff;
  color: #111;
  font-family: var(--font, 'Outfit', sans-serif);
  font-weight: 300;
  text-align: left;
  /* Scroll reveal progress (0 → 1), written by site-footer.js. */
  --sf-p: 1;
}
body:is(.page-projects, .page-project-detail, .page-about, .page-contact, .page-perspqtive) > .shared-footer { display: flex; flex-direction: column; }
.sf-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sf-art img { position: absolute; display: block; height: auto; max-width: none; }
/* Art stays inside its native resolution (1759px / 997px wide) so it renders crisp on 2x screens. */
.sf-sunflower { width: 45%; max-width: 820px; left: -11%; bottom: 0; }
.sf-lily { width: 21%; max-width: 440px; right: -5%; bottom: -8%; }
.sf-content { display: grid; grid-template-columns: 1.55fr .8fr 1fr; gap: clamp(24px, 2.3vw, 48px); width: 66%; margin-left: 12%; padding-bottom: 58px; }
.shared-footer a { color: inherit; text-decoration: none; }
.sf-wordmark { display: inline-block; font-size: clamp(22px, 1.95vw, 34px); font-weight: 300; letter-spacing: -.065em; line-height: 1.15; white-space: nowrap; }
.sf-brand p { margin: 16px 0 0; font-size: clamp(13px, 1vw, 17px); font-weight: 300; letter-spacing: -.04em; line-height: 1.45; }
.sf-links { padding-top: 4px; }
.sf-nav, .sf-social { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.sf-nav a, .sf-social a { font-size: clamp(14px, 1.15vw, 20px); font-weight: 400; line-height: 1.3; letter-spacing: -.05em; }
.sf-social { margin-top: 18px; padding-top: 17px; position: relative; color: #777; }
.sf-social::before { content: ''; position: absolute; top: 0; left: 0; width: 34px; height: 1px; background: #777; }
.sf-connect { min-width: 0; padding-top: 26px; }
.sf-connect label { display: block; font-size: clamp(14px, 1.08vw, 19px); line-height: 1.32; letter-spacing: -.04em; font-weight: 400; }
.sf-email-line { display: flex; align-items: center; margin-top: 18px; border-bottom: 1px solid #777; }
.sf-email-line input { width: 100%; min-width: 0; padding: 5px 0; border: 0; border-radius: 0; background: transparent; font: 300 clamp(13px, .92vw, 16px) var(--font, 'Outfit', sans-serif); color: #111; }
.sf-email-line input::placeholder { color: #777; opacity: 1; }
.sf-email-line input:focus { outline: none; }
.sf-email-line:focus-within { border-color: #111; box-shadow: 0 1px #111; }
.sf-email-line button { flex: 0 0 30px; min-height: 34px; padding: 0; border: 0; background: transparent; color: #111; font: 400 19px var(--font, 'Outfit', sans-serif); cursor: pointer; }
.sf-form-note { display: block; margin-top: 8px; font-size: 10.5px; color: #666; font-weight: 400; }
.sf-meta { position: relative; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 14px; border-top: 1px solid rgba(90,90,90,.3); font-size: 10.5px; font-weight: 400; }
.sf-meta > span:first-child { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.75); }
.sf-colophon { font-size: 9.5px; text-transform: uppercase; letter-spacing: .2em; }
.sf-top { white-space: nowrap; }
.sf-arrow { display: inline-block; width: .75em; height: .75em; min-width: 10px; min-height: 10px; vertical-align: .1em; }
.sf-arrow-up { transform: rotate(-45deg); }
.sf-email-line .sf-arrow { width: 18px; height: 18px; vertical-align: middle; }
.shared-footer a, .sf-email-line button { transition: opacity .35s cubic-bezier(.22,.72,.18,1); }
.shared-footer a:hover, .sf-email-line button:hover { opacity: .6; }
.shared-footer a:focus-visible, .sf-email-line button:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }

/* The document keeps its natural height. A sticky footer sits behind the page,
   which uncovers it as its bottom edge travels up the viewport. */
body > .page.sf-covered-page { position: relative; z-index: 1; background-color: var(--bg-card, #fff); }
body > #page-about.sf-covered-page { background-color: #050505; }
.shared-footer.sf-underlay { position: sticky; bottom: 0; z-index: 0; }
.shared-footer.sf-reveal { --sf-p: 0; }
.shared-footer.sf-reveal .sf-content {
  opacity: calc(.6 + var(--sf-p) * .4);
  transform: translate3d(0, calc((1 - var(--sf-p)) * 38px), 0);
  will-change: transform, opacity;
}
.shared-footer.sf-settled .sf-content { will-change: auto; }

/* Scope full-screen artwork to its page so the footer remains in document flow. */
/* html stays overflow:visible so the body keeps propagating its scroll to the
   viewport; giving html its own scroller turns body into a second scroll box,
   and body's overscroll-behavior-y:none then swallows wheel scrolling. */
html.nf-active-root { overflow: visible; }
body.nf-active, body.page-perspqtive { overflow-x: hidden; overflow-y: auto; }
#page-about .nf-nightfall { position: relative; height: 100dvh; overflow: clip; }
#page-about .nf-content { position: absolute; }
#page-about .nf-star, #page-about .nf-grain,
#page-about .nf-hint, #page-about .nf-found,
#page-about .nf-fallback { position: absolute; }
/* The torch hides the system cursor on About; the footer needs it back. */
body.nf-active .shared-footer, body.nf-active .shared-footer * { cursor: auto; }
body.nf-active .shared-footer a, body.nf-active .shared-footer button { cursor: pointer; }
#page-perspqtive .xp-dial-stage,
#page-perspqtive .xp-dial-preview,
#page-perspqtive .xp-dial-foot { position: absolute; }
#page-perspqtive .xp-dial-stage.can-scroll-to-footer { touch-action: pan-y; }
.sf-dial-next { pointer-events: auto; border: 0; padding: 10px 0 10px 10px; background: transparent; color: #555; font: 400 11px var(--font, 'Outfit', sans-serif); cursor: pointer; }

@media (max-width: 1000px) {
  .shared-footer { min-height: 420px; }
  .sf-content { width: 86%; margin-left: 4%; gap: 24px; grid-template-columns: 1.3fr .75fr 1fr; }
  .sf-sunflower { width: 58%; left: -14%; }
  .sf-lily { width: 25%; right: -8%; }
}
@media (max-width: 760px) {
  .shared-footer { min-height: 0; padding: 38px 22px 18px; }
  .sf-content { width: 100%; margin: 0; grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-bottom: 168px; }
  .sf-brand { grid-column: 1 / -1; }
  .sf-wordmark { font-size: 26px; }
  .sf-brand p { margin-top: 12px; font-size: 15px; }
  .sf-nav a, .sf-social a { font-size: 16px; }
  .sf-connect { padding-top: 4px; }
  .sf-connect label { font-size: 15px; }
  .sf-sunflower { width: 92%; left: -30%; bottom: 0; }
  .sf-lily { width: 46%; right: -14%; bottom: 46px; }
  .sf-meta { display: grid; grid-template-columns: 1fr auto; gap: 12px 10px; font-size: 10px; }
  .sf-colophon { grid-column: 1; grid-row: 2; font-size: 9px; letter-spacing: .12em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.75); }
  .sf-top { grid-column: 2; grid-row: 1 / 3; }
  .shared-footer.sf-reveal .sf-content { transform: translate3d(0, calc((1 - var(--sf-p)) * 14px), 0); }
  #page-about .nf-nightfall { height: auto; }
  #page-about .nf-content { position: relative; }
  #page-about .nf-scene, #page-about .nf-lit { position: absolute; }
}
@media (prefers-reduced-motion: reduce) {
  .shared-footer a, .sf-email-line button { transition: none; }
  /* No scroll choreography: the footer is simply there. */
  .shared-footer.sf-reveal { --sf-p: 1; }
  .shared-footer.sf-reveal .sf-content { opacity: 1; transform: none; will-change: auto; }
}