/* =====================================================================
   SITE FOOT · the studio footer, one standard for every page (4 Nov 2026, the visual identity QA)
   ---------------------------------------------------------------------
   Her words: "this kind of footer [the Websites footer] is meant to be the standard for all the pages."
   Copied rule for rule from lab/journey-v2/r/websites.html (.wp-foot, .wf-*, .site-standards, .pay-marks) with its lab/family.css
   corners (the standards 12 px, USDT 9 px). Not reinvented: only scoped under #smFoot, so a Lab guide's own rules for footer, ul,
   li, a or p never reach it. The footer's own letter is the Websites page's (Satoshi 15 px / 1.4), so its lines keep that rhythm.
   Colours: the approved paper footer of /contact (ground #F6F3EE, ink #2A201A, grey #6E6159, rose #8C5268). Open question for
   Susana (4 Nov): cream like /studio and /lab, or the Websites night (#0B1A22 · #EFE6D6 · #A9A7A2 · #FFE7B8). The four tokens below
   are the one place to change it.
   Used by lab/contact, lab/studio, lab/free-lab and the eight Lab guides: <link rel="stylesheet" href="/lab/site-foot.css?v=1">,
   the markup is <footer class="foot" id="smFoot"> (the Websites footer's own markup).
   ===================================================================== */
#smFoot{--wbg:#F6F3EE;--wink:#2A201A;--wmute:#6E6159;--wgold:#8C5268;
  --sf-ui:'Satoshi',-apple-system,BlinkMacSystemFont,sans-serif;--sf-serif:'Stardom','Erode',Georgia,serif;
  position:relative;z-index:2;display:block;box-sizing:border-box;width:auto;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;
  padding:clamp(40px,4.5vw,64px) clamp(20px,5.5vw,88px) calc(24px + env(safe-area-inset-bottom,0px));
  background:var(--wbg);color:var(--wink);font:400 15px/1.4 var(--sf-ui);font-style:normal;letter-spacing:normal;text-transform:none;text-align:left;
  -webkit-font-smoothing:antialiased;opacity:1;transform:none}
#smFoot *,#smFoot *::before,#smFoot *::after{box-sizing:border-box}
#smFoot :is(div,nav,p,ul,li,b,span,a,img,svg):where(:not(.gl-layer,.gl-layer *)){margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;max-width:none;min-height:0;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:none;text-align:left;text-decoration:none;opacity:1;transform:none;float:none}
#smFoot :is(div,nav,p,ul,li,b,span,a,img,svg):where(:not(.gl-layer,.gl-layer *)){position:static;inset:auto;z-index:auto;width:auto;height:auto;min-width:0;overflow:visible;visibility:visible;
  -webkit-backdrop-filter:none;backdrop-filter:none;filter:none;animation:none;justify-content:normal;align-items:normal;gap:normal;flex:initial;grid-column:auto}   /* a guide's own nav{position:fixed} or li{display:flex} stays out */
#smFoot :is(div,nav,p,ul):where(:not(.gl-layer,.gl-layer *)){display:block} #smFoot li{display:list-item} #smFoot :is(b,span,a){display:inline} #smFoot :is(img,svg):where(:not(.gl-layer *)){display:inline-block;vertical-align:middle}
/* (/contact's gold light, lab/contact/gold-light.js, lays its own .gl-layer inside the footer: the reset leaves it alone) */
#smFoot :is(li,a,p,span)::before,#smFoot :is(li,a,p,span)::after{content:none}
#smFoot ul{list-style:none}
#smFoot .wf-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;max-width:1320px;margin:0 auto;padding-top:clamp(32px,3.5vw,48px);border-top:1px solid color-mix(in srgb,var(--wink) 16%,transparent)}   /* 4 Nov, her QA ("this is the end, the footer"): the phone's thin line, at the page's own width */
#smFoot .wf-name{margin:0 0 8px;font:italic 400 22px/1.1 'Erode',Georgia,serif;letter-spacing:-.03em;white-space:nowrap;color:var(--wink)}   /* 4 Nov, her QA ("it just looks giant"): a sign-off, not a headline: the logo's own letter, one size at every width (as the journey's footer) */
#smFoot .wf-note{margin:0;max-width:280px;font:400 14px/1.55 var(--sf-ui);color:var(--wmute);text-wrap:pretty}
#smFoot .wf-label{margin:0 0 12px;font:500 11px/1 var(--sf-ui);letter-spacing:.22em;text-transform:uppercase;color:var(--wgold)}
#smFoot .wf-list{display:grid;gap:8px}
#smFoot .wf-list a{font:400 15px/1.4 var(--sf-ui);color:var(--wink);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--wink) 25%,transparent);padding-bottom:2px;transition:border-color .2s ease,color .2s ease}
#smFoot .wf-list a:hover,#smFoot .wf-list a:focus-visible,#smFoot .wf-list a[aria-current="page"]{color:var(--wgold);border-bottom-color:var(--wgold)}   /* the page you are on, as /contact marks it */
#smFoot .wf-list a.soc{display:inline-flex;align-items:center;gap:9px}
#smFoot .soc-i{display:block;flex:none;width:18px;height:18px}
#smFoot .wf-pay{margin:16px 0 0;max-width:34ch;font:400 14px/1.55 var(--sf-ui);color:var(--wmute)}
#smFoot .pay-marks{display:flex;flex-wrap:wrap;gap:10px 18px}
#smFoot .pay-marks li{display:inline-flex;align-items:center;gap:8px;font:500 13px/1 var(--sf-ui);letter-spacing:.04em}
#smFoot .pay-marks svg{display:block;width:22px;height:22px;flex:none;overflow:visible}
#smFoot .pay-marks circle{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.75}
#smFoot .pay-marks path{fill:currentColor}
#smFoot .pay-marks text{fill:currentColor;font:600 12.5px/1 system-ui,-apple-system,sans-serif}
#smFoot .pay-marks .pm-usdt span{display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid currentColor;border-radius:9px;font:600 11px/1 var(--sf-ui);letter-spacing:.08em;opacity:.85}
#smFoot .site-standards{margin:32px auto 0;padding:0;gap:10px;max-width:1320px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
#smFoot .site-standards li{display:flex;flex-direction:column;gap:5px;padding:12px 14px 10px;border:1px solid color-mix(in srgb,var(--wink) 14%,transparent);border-radius:12px;background:color-mix(in srgb,var(--wink) 3%,transparent)}   /* 4 Nov, her QA: all four the same, the phone's tiles */
#smFoot .site-standards b{font:400 18px/1.1 var(--sf-serif);color:var(--wink)}
#smFoot .site-standards span{font:500 10px/1.2 var(--sf-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--wgold)}
#smFoot .wf-base{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;max-width:1320px;margin:24px auto 0}
#smFoot .wf-sig{display:inline-flex;align-items:center;gap:12px;font:500 13px/1 var(--sf-ui);color:var(--wink)}
#smFoot .wf-sig img{display:block;width:40px;height:40px;flex:none}
#smFoot .wf-fine{margin:0;font:400 12px/1.4 var(--sf-ui);letter-spacing:.02em;color:var(--wmute)}
#smFoot a:focus-visible{outline:2px solid var(--wink);outline-offset:4px}
@media (max-width:980px){ #smFoot .wf-top{grid-template-columns:1fr 1fr;gap:36px} #smFoot .wf-mark{grid-column:1 / -1} }
@media (max-width:560px){ #smFoot .wf-top{grid-template-columns:1fr} }
/* ---------- the phone: the phone Websites footer (lab/phone-journey/index.html footer.pfoot, in its cream work page of 4 Nov), ported rule
   for rule (4 Nov QA, second phone pass). Measured on it at 390 and 375: 16 px from each side, 34 px under its line; the sigil and the
   name small; each group under a hairline with its label; Explore wrapping in rows; the four standards as 2 x 2 tiles; the sigil row
   in italic with the address, the © line under it; 34 px below. Its quiet words are ink at an opacity (.66, .75, .6), as there.
   Its top line and every group's hairline are ink on the paper (4 Nov: they were the night cream and hardly showed). ---------- */
@media (max-width:700px){
  #smFoot{padding:34px 16px calc(env(safe-area-inset-bottom,0px) + 34px);border-top:1px solid rgba(42,32,26,.16);font-size:16px;line-height:normal}
  #smFoot .wf-top{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0;padding-top:0;border-top:0}   /* the phone's line is on the footer itself */
  #smFoot .wf-mark{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:0;align-items:center;padding:0 0 26px}
  #smFoot .wf-mark::before{content:"";grid-row:1 / span 2;width:34px;height:34px;background:url(/assets/sigil-gold.svg) center/contain no-repeat}
  #smFoot .wf-name{margin:0;font:italic 400 22px/1.1 'Erode',Georgia,serif;letter-spacing:-.03em}
  #smFoot .wf-note{margin:4px 0 0;max-width:32ch;font:400 13.5px/1.5 var(--sf-ui);color:var(--wink);opacity:.66}
  #smFoot .wf-col{padding:16px 0 10px;border-top:1px solid rgba(42,32,26,.12)}
  #smFoot .wf-top > .wf-col:last-child{margin:6px 0 26px;padding:16px 0 0;border-top:1px solid rgba(42,32,26,.12)}   /* We accept (.ppay) */
  #smFoot .wf-label{margin:0 0 4px;font:500 11px/1 var(--sf-ui);letter-spacing:.3em;opacity:.9}
  #smFoot .wf-top > .wf-col:last-child .wf-label{margin:0 0 12px;color:var(--wink)}   /* its label is in ink there */
  #smFoot .wf-list{display:grid;gap:0}
  #smFoot nav.wf-col .wf-list{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:0}
  #smFoot .wf-list a,#smFoot .wf-list a.soc{display:block;width:100%;min-height:44px;padding:12px 0 8px;border-bottom:0;font:400 16px/1.3 var(--sf-ui);
    text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(42,32,26,.3);text-underline-offset:5px}
  #smFoot nav.wf-col .wf-list a{width:auto;min-width:44px}
  #smFoot .wf-list a.soc{display:flex;align-items:center;gap:10px}
  #smFoot .wf-list a:hover,#smFoot .wf-list a:focus-visible,#smFoot .wf-list a[aria-current="page"]{text-decoration-color:var(--wgold)}
  #smFoot .pay-marks{justify-content:flex-start}
  #smFoot .wf-pay{margin:12px 0 0;max-width:30ch;font:400 13px/1.5 var(--sf-ui);color:var(--wink);opacity:.75}
  #smFoot .site-standards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;border:0}
  #smFoot .site-standards li,#smFoot .site-standards li:first-child{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:84px;padding:14px 14px 12px;
    border:1px solid color-mix(in srgb,var(--wink) 16%,transparent);border-radius:12px;background:color-mix(in srgb,var(--wink) 5%,transparent)}
  #smFoot .site-standards b{font:400 18px/1.1 var(--sf-serif)}
  #smFoot .site-standards span{font:600 10px/1.2 var(--sf-ui);letter-spacing:.16em}
  /* the sigil row and the © line: one centred row (sigil, italic name, the address), the © line under it, as .sig and .fine there.
     .wf-sig and .wf-fine step aside (display:contents) so the address (span.wf-url, in the © line on a laptop) can join the sigil row */
  #smFoot .wf-base{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:9px;row-gap:0;margin:28px 0 0;font:400 11px/1.4 var(--sf-ui)}   /* the © line's letter (its text sits in an anonymous box of this row) */
  #smFoot .wf-base::after{content:"";flex-basis:100%;height:10px;order:-1}
  #smFoot .wf-sig,#smFoot .wf-fine{display:contents}
  #smFoot .wf-sig{font:500 12px/1.3 var(--sf-ui)}
  #smFoot .wf-sig img{order:-4;width:22px;height:22px;opacity:.75}
  #smFoot .wf-sig > span{order:-3;font:italic 400 15px/1 var(--sf-serif);color:color-mix(in srgb,var(--wink) 75%,transparent)}
  #smFoot .wf-url{order:-2;font:500 12px/1.3 var(--sf-ui);letter-spacing:normal;color:color-mix(in srgb,var(--wink) 75%,transparent)}
  #smFoot .wf-fine{font:400 11px/1.4 var(--sf-ui);letter-spacing:normal;text-align:center;color:color-mix(in srgb,var(--wink) 60%,transparent)}
}
@media print{ #smFoot{display:none} }