/* ---------- shared site footer: paper-slip skyline, contact + page links, the sign-off ----------
 * Used on every page: add <footer class="site-footer"></footer> and load shared/footer.js.
 * Colours and fonts repeat the homepage tokens so the footer also works on its own. */
.site-footer{
  --paper:#F3E8DA; --ink:#3E2723; --ink-soft:#75605A; --hair:rgba(62,39,35,.2); --raspberry:#B4265B;
  --type:"Special Elite","Courier New",monospace; --sans:"Instrument Sans",system-ui,sans-serif;
  position:relative;color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;overflow-x:clip}
.site-footer *{box-sizing:border-box;margin:0}
.site-footer .sf-wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.site-footer .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* skyline */
.site-footer .sky{padding-top:80px}
.site-footer .sky-tag{text-align:right;font-weight:600;font-size:15px;letter-spacing:.42em;margin-right:-.42em}
.site-footer .strips{position:relative;margin-top:clamp(40px,7vw,96px);height:var(--H,620px);width:100%}
.site-footer .strip{position:absolute;bottom:0;background:var(--ink);clip-path:inset(var(--top) 0 0 0);will-change:clip-path}
.site-footer .strip:nth-child(4n+1){background:#4A302A}
.site-footer .slip{position:absolute;background:var(--paper);display:flex;justify-content:center;
  padding:12px 0;will-change:transform;transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.site-footer .slip span{writing-mode:vertical-rl;white-space:nowrap;
  font-weight:500;font-size:var(--fs,14px);letter-spacing:.12em;color:var(--ink);line-height:1}
.site-footer .slip.lift{translate:0 -10px}
.site-footer .slip.motto span{color:var(--raspberry);font-weight:600}

/* link row: contact on the left, pages on the right */
.site-footer .sf-row{display:flex;justify-content:space-between;align-items:center;gap:16px 40px;flex-wrap:wrap;
  padding:22px 0;border-bottom:1px solid var(--hair)}
.site-footer .sf-row nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;font-size:15px;font-weight:500}
.site-footer .sf-row a{text-decoration:none;border-bottom:1px solid transparent;padding:2px 0}
.site-footer .sf-row a:hover{border-bottom-color:var(--ink)}
.site-footer .sf-row a:focus-visible{outline:2px solid var(--raspberry);outline-offset:4px;border-radius:2px}
.site-footer .sf-row .dot{color:var(--ink-soft);padding:0 12px}

/* sign-off */
.site-footer .sf-end{text-align:center;padding:72px 0 60px}
.site-footer .end{font-family:var(--type);font-size:14px;letter-spacing:.2em;color:var(--ink-soft);min-height:1.5em}
.site-footer .end .caret{display:inline-block;width:.55em;border-bottom:2px solid var(--raspberry);animation:sf-blink 1s steps(1) infinite;margin-left:2px}
@keyframes sf-blink{50%{opacity:0}}
.site-footer .copy{font-size:13px;color:var(--ink-soft);margin-top:14px}

@media (max-width:900px){
  .site-footer .sf-wrap{padding:0 20px}
  .site-footer .sky{padding-top:64px}
  .site-footer .sky-tag{letter-spacing:.28em;margin-right:-.28em;white-space:nowrap}
  .site-footer .strips{margin-top:60px}
  .site-footer .sf-row{flex-direction:column;align-items:flex-start;gap:10px}
  .site-footer .sf-end{padding:56px 0 48px}
}
@media (max-width:350px){ .site-footer .sf-row nav{font-size:14px} .site-footer .sf-row .dot{padding:0 8px} }
@media (prefers-reduced-motion:reduce){
  .site-footer .slip{transition:none}
  .site-footer .end .caret{animation:none}
}