/* norn.group site-wide footer (markup: tools/footer.html, applied by tools/apply-footer.mjs).
   Loaded last on every page so it wins over the footer rules in Martin's style-*.css,
   norn-polish.css, norn-landing.css and careers.css. Only layout lives here: the wood
   background, scene join, button texture and input styling come from each page's stylesheet.

   Wide screens: one line (emblem + mission, socials, Support, newsletter), copyright line below.
   Tablets (<= 1240px): emblem + mission on top, socials left and Support + newsletter right.
   Phones (<= 700px): emblem + mission, Support + newsletter, socials, copyright line. */

html body footer#footer.nf{
  --nf-paper:#F5EEDB;
  --nf-soft:rgba(245,238,219,.78);
  --nf-line:rgba(245,238,219,.2);
  --nf-ring:rgba(245,238,219,.45);
  --nf-gutter:max(clamp(20px,3.34vw,48px),calc((100vw - 1440px)/2));
  display:flex;flex-direction:column;align-items:stretch;justify-items:initial;
  gap:16px;margin-top:0;
  padding:36px var(--nf-gutter) 0;
  text-align:left;color:var(--nf-paper);
  font:400 16px/1.6 "Proza Libre",Arial,sans-serif;
}
html body footer#footer.nf *{box-sizing:border-box}

/* ---------- main line ---------- */
html body #footer.nf .nf-row{display:flex;flex-wrap:nowrap;align-items:center;gap:16px 22px;min-width:0}
html body #footer.nf .nf-brand{display:flex;align-items:center;gap:18px;flex:1 1 auto;min-width:0;max-width:600px;margin-right:auto}
html body #footer.nf a.nf-emblem{flex:none;display:block;width:52px;height:52px;min-height:0;padding:0;border-radius:50%}
html body #footer.nf a.nf-emblem img{display:block;width:100%;height:100%}
html body #footer.nf .footer-mission{flex:1 1 auto;min-width:0;max-width:52ch;margin:0;font-size:14px;line-height:1.5;text-align:left}

html body #footer.nf .footer-actions{display:flex;flex:none;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:12px;width:auto;min-width:0}
html body #footer.nf .button{min-height:44px;height:44px}
html body #footer.nf a.footer-support{display:inline-flex;flex:none;align-items:center;justify-content:center;width:auto;padding:0 20px;border-radius:22px;font-size:14px}
html body #footer.nf .footer-signup{position:relative;width:360px;max-width:100%;min-width:0;margin:0}
html body #footer.nf .footer-signup h2{position:absolute;left:0;right:0;bottom:calc(100% + 6px);margin:0;font:400 18px/1.25 "Marcellus",Georgia,serif;text-align:center;white-space:nowrap;color:var(--nf-paper)}
html body #footer.nf .footer-signup-fields{display:flex;min-width:0;width:100%}
html body #footer.nf #footer-email{flex:1 1 0;width:auto;min-width:0;height:44px;border-radius:22px 0 0 22px}
html body #footer.nf .footer-signup .button{flex:none;padding:0 16px;border-radius:0 22px 22px 0}
html body #footer.nf .footer-sr-only,html body #footer.nf .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html body #footer.nf .nf-signup-status{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--nf-paper);text-align:left}
html body #footer.nf .nf-signup-status.is-error{color:#F2C9A8}
html body #footer.nf .nf-signup-status a{display:inline;min-height:0;padding:0;color:var(--nf-paper);text-decoration:underline;text-underline-offset:3px}
html body #footer.nf .footer-signup .button:disabled{opacity:.75;cursor:progress}

/* ---------- social icons ---------- */
html body #footer.nf .nf-social{display:flex;flex:none;flex-wrap:nowrap;gap:8px;margin:0;padding:0;list-style:none}
html body #footer.nf .nf-social li{margin:0;padding:0}
html body #footer.nf .nf-social a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:0;padding:0;border:1px solid var(--nf-ring);border-radius:50%;color:var(--nf-paper);font:600 13px/1 "Proza Libre",Arial,sans-serif;text-decoration:none;transition:background-color .2s,border-color .2s}
html body #footer.nf .nf-social a:hover{background:rgba(245,238,219,.1);border-color:var(--nf-paper);text-decoration:none}
html body #footer.nf .nf-social svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- copyright line ---------- */
html body #footer.nf .nf-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 24px;border-top:1px solid var(--nf-line);font-size:13px;color:var(--nf-soft)}
html body #footer.nf .nf-copy{margin:0;padding:10px 0;font-size:13px;line-height:1.5;color:var(--nf-soft)}
html body #footer.nf .nf-nowrap{white-space:nowrap}
html body #footer.nf .nf-legal{display:flex;flex-wrap:wrap;align-items:center;gap:0 24px}
html body #footer.nf .nf-legal a,html body #footer.nf .nf-totop{display:inline-flex;align-items:center;width:auto;min-height:44px;padding:0;margin:0;border:0;background:none;color:var(--nf-soft)!important;font:400 13px/1.5 "Proza Libre",Arial,sans-serif;text-decoration:none;cursor:pointer}
html body #footer.nf .nf-legal a:hover,html body #footer.nf .nf-totop:hover{color:var(--nf-paper)!important;text-decoration:underline;text-underline-offset:4px}
html body #footer.nf .nf-totop span{margin-left:4px}
html body #footer.nf :is(a,button,input):focus-visible{outline:2px solid #E6BA37;outline-offset:4px}

/* ---------- tablets ---------- */
@media (max-width:1240px){
  html body #footer.nf .nf-row{flex-wrap:wrap}
  html body #footer.nf .nf-brand{flex:1 1 100%;max-width:none;margin-right:0}
  html body #footer.nf .footer-mission{max-width:70ch}
  html body #footer.nf .footer-actions{margin-left:auto}
}

/* ---------- phones ---------- */
@media (max-width:700px){
  html body footer#footer.nf{padding:22px 20px 0;gap:14px}
  html body #footer.nf .nf-row{flex-direction:column;align-items:stretch;gap:14px}
  html body #footer.nf .nf-brand{gap:14px}
  html body #footer.nf a.nf-emblem{width:48px;height:48px}
  html body #footer.nf .footer-mission{font-size:13px;max-width:none}
  html body #footer.nf .footer-actions{order:2;width:100%;margin-left:0;gap:8px}
  html body #footer.nf .footer-actions{position:relative;margin-top:28px}
  html body #footer.nf .footer-signup{position:static}
  html body #footer.nf .footer-signup h2{font-size:17px}
  html body #footer.nf .footer-signup{flex:1 1 auto;width:auto}
  html body #footer.nf .nf-social{order:3;justify-content:center;gap:10px}
  html body #footer.nf .nf-signup-status{text-align:center}
  html body #footer.nf .nf-bottom{flex-direction:column;justify-content:center;padding-top:6px}
  html body #footer.nf .nf-copy{padding:2px 0 0;font-size:12px;text-align:center}
  html body #footer.nf .nf-legal{justify-content:center;gap:0 20px}
  html body #footer.nf .nf-legal a,html body #footer.nf .nf-totop{font-size:12px;min-height:40px}
}
@media (max-width:360px){
  html body footer#footer.nf{padding-inline:14px}
  html body #footer.nf a.footer-support{padding:0 14px}
  html body #footer.nf .footer-signup .button{padding:0 12px}
  html body #footer.nf .nf-legal{gap:0 14px}
}
@media print{html body footer#footer.nf{display:none}}