/* Site footer, shared by all eight pages, 01/10/2026.
   One file so the footers cannot drift apart again, which is how they ended
   up with four different phone layouts before. Every selector starts with
   .site-footer so the pages' own broad h2, p and a rules cannot reach in.
   Colours are the page's :root tokens; each page defines the same set. */

.site-footer{border-top:1px solid var(--sand);background:var(--white);color:var(--mid);font-family:"DM Sans",sans-serif;line-height:1.6}
.site-footer .ft-inner{max-width:1320px;margin:0 auto;padding:0 var(--gutter)}

/* Top band: signup on the left, photo on the right. */
.site-footer .ft-signup{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(40px,6vw,96px);align-items:center;padding:clamp(56px,7vw,96px) 0 clamp(48px,6vw,80px)}
.site-footer .ft-signup h2{max-width:none;margin:0;color:var(--ink);font-size:clamp(32px,3.4vw,46px);font-weight:500;line-height:1.05;letter-spacing:-.05em}
.site-footer .ft-intro{max-width:560px;margin:18px 0 0;font-size:17px}
.site-footer .ft-form{display:flex;flex-wrap:wrap;gap:12px;max-width:560px;margin-top:28px}
.site-footer .ft-form input[type=email]{flex:1 1 220px;min-width:0;min-height:52px;padding:0 22px;border:1px solid var(--sand);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:16px}
.site-footer .ft-form input[type=email]::placeholder{color:var(--mid);opacity:.8}
.site-footer .ft-form input[type=email]:focus{outline:2px solid var(--mauve-text);outline-offset:2px;border-color:var(--mauve-text)}
.site-footer .ft-form input[type=email][aria-invalid=true]{border-color:var(--mauve-text)}
.site-footer .ft-form button{flex:0 0 auto;min-height:52px;margin:0;padding:0 26px;border:0;border-radius:999px;background:var(--green);color:var(--white);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}
.site-footer .ft-form button:hover{transform:translateY(-2px);box-shadow:0 10px 28px #2d50162d}
.site-footer .ft-form button:focus-visible{outline:2px solid var(--mauve-text);outline-offset:3px}
.site-footer .ft-form button:disabled{opacity:.7;cursor:default;transform:none;box-shadow:none}
.site-footer .ft-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.site-footer .ft-consent{max-width:560px;margin:14px 0 0;font-size:13px}
.site-footer .ft-consent a{color:var(--mid);text-underline-offset:3px}
.site-footer .ft-status{max-width:560px;margin:14px 0 0;color:var(--ink);font-size:15px;font-weight:500}
.site-footer .ft-status[hidden]{display:none}
.site-footer .ft-success{max-width:560px;margin:28px 0 0;padding:20px 24px;border-radius:20px;background:var(--parchment);color:var(--ink);font-size:16px}
.site-footer .ft-success p{margin:0}
.site-footer .ft-success p+p{margin-top:10px}
.site-footer .ft-success .ft-success-head{color:var(--ink);font-size:19px;font-weight:600;line-height:1.35}
.site-footer .ft-success p:not(.ft-success-head){color:var(--mid);font-size:16px}
/* The step most people miss: Kit's confirmation email lands in spam,
   and nothing arrives until it is clicked. Kylie lost workshop signups
   this way, so it is set apart rather than left in the paragraph. */
.site-footer .ft-success .ft-spam{margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--white);color:var(--ink)}
.site-footer .ft-success .ft-spam b{color:var(--ink);font-weight:600}
.site-footer .ft-success:focus{outline:none}
.site-footer .ft-success[hidden]{display:none}

/* The photo sits as a slightly turned card with a sand card behind it,
   the same "stack" idea as the About carousel. Nothing moves. */
.site-footer .ft-photo{position:relative;margin:0;justify-self:end;width:100%;max-width:360px}
.site-footer .ft-photo:before{content:"";position:absolute;inset:0;border-radius:24px;background:var(--sand);transform:rotate(4deg) translate(10px,10px);opacity:.75}
.site-footer .ft-photo img{position:relative;display:block;width:100%;height:auto;aspect-ratio:760/950;object-fit:cover;border-radius:24px;transform:rotate(-1.5deg);box-shadow:0 18px 40px #2a272414}

/* Lower band: wordmark and three link columns. */
.site-footer .ft-main{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px clamp(24px,4vw,64px);padding:clamp(44px,5vw,64px) 0;border-top:1px solid var(--sand)}
.site-footer .ft-wordmark{display:inline-flex;flex-direction:column;line-height:.8;text-decoration:none;color:var(--ink)}
.site-footer .ft-wordmark b{font-size:10px;letter-spacing:.32em;color:var(--mauve-text)}
.site-footer .ft-wordmark em{font:italic 300 32px "Cormorant Garamond",serif}
.site-footer .ft-brand p{max-width:300px;margin:20px 0 0;font-size:15px}
.site-footer .ft-social{display:flex;gap:8px;margin:18px 0 0 -10px;padding:0;list-style:none}
.site-footer .ft-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--ink)}
.site-footer .ft-social a:hover{color:var(--mauve-text);background:var(--parchment)}
.site-footer .ft-social svg{width:22px;height:22px}
.site-footer .ft-col h2{max-width:none;margin:0 0 10px;color:var(--ink);font-size:15px;font-weight:600;line-height:1.4;letter-spacing:normal}
.site-footer .ft-col ul{margin:0;padding:0;list-style:none}
.site-footer .ft-col a{display:inline-block;padding:9px 0;color:var(--mid);font-size:15px;line-height:1.4;text-decoration:none}
.site-footer a:not(.ft-wordmark):hover{color:var(--mauve-text)}
.site-footer .ft-col a[aria-current=page]{color:var(--ink);font-weight:500}

/* Bottom bar. */
.site-footer .ft-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;padding:18px 0 26px;border-top:1px solid var(--sand);font-size:13px}
.site-footer .ft-legal ul{display:flex;flex-wrap:wrap;gap:0 22px;margin:0;padding:0;list-style:none}
.site-footer .ft-legal a{display:inline-block;padding:12px 0;color:var(--mid);text-decoration:none}
.site-footer .ft-legal>span{padding:12px 0}

@media(max-width:900px){
  .site-footer .ft-main{grid-template-columns:repeat(3,minmax(0,1fr))}
  .site-footer .ft-brand{grid-column:1/-1}
}

/* Phones: the photo goes, because the QA flagged page length and it adds
   little at this size. Link columns pair up; Get in touch runs full width. */
@media(max-width:650px){
  .site-footer .ft-signup{grid-template-columns:minmax(0,1fr);padding:52px 0 44px}
  .site-footer .ft-photo{display:none}
  .site-footer .ft-signup h2{font-size:32px}
  .site-footer .ft-intro{font-size:16px}
  .site-footer .ft-form button{flex:1 1 auto}
  .site-footer .ft-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px;padding:44px 0 36px}
  .site-footer .ft-contact{grid-column:1/-1}
  .site-footer .ft-legal{flex-direction:column;gap:0;padding:8px 0 20px}
  .site-footer .ft-legal>span{padding:10px 0 0}
}

/* Workshop bar, 01/10/2026. Sits above the header on every page except the
   workshop page itself. Lives here because footer.css is the one stylesheet
   every page shares. footer.js removes it once the workshop has finished, so
   a past date never shows; with scripting off it stays, which is harmless. */
.ws-bar{padding:10px var(--gutter);background:var(--ink);color:var(--white);font-family:"DM Sans",sans-serif;font-size:13px;line-height:1.45;text-align:center}
.ws-bar a{color:var(--white);font-weight:600;text-underline-offset:3px;white-space:nowrap}
.ws-bar a:hover{color:var(--sand)}
.ws-bar a:focus-visible{outline:2px solid var(--lilac);outline-offset:3px}