/* ── The footer: hueylightshop.com's footer group, cloned from their theme
   (refs/huey/home.html: power_footer_NN46Nb, lines 11068–11922, and
   utility_bar_gbD4zx, 11923–12081; section-footer.css, component-newsletter.css,
   custom.css, base.css) and box-checked at 1905, 1024 and 390.
     main     a 9-column grid, 1vw apart, 38 px in from the sides: NEWSLETTER over
              three columns (text, an email field on a drawn line with 【 SUBMIT 】
              at its right end, a small consent line), then SHOP / DISCOVER /
              CUSTOMER CARE one column each. A link turns to the italic on hover.
              Below 769 two columns, the newsletter last and full width.
     bar      their utility bar (it shows on the page, under the footer, 13vh
              down): four groups of small caps and a crest in the middle,
              2fr 1fr .5fr 1fr 2fr from 1200 up, a centred stack below 991.
     pop-up   their Klaviyo banner "FROM THE STUDIO" (form R4ix6m, read from
              static-forms.klaviyo.com/forms/api/v7/W4dSCR/full-forms), fixed to
              the bottom of the screen. js/ft.js shows, closes and remembers it.
   Their ink #374454 -> our navy #2a4254; their slate #636B7C (the drawn line, the
   SIGN UP button) -> our taupe #7a5034 (palette, 2026-11-02). Their cream
   page under the banner -> our #f7f3ee with the same paper (css/huey.css).
   Their rem is 10 px; every rem here is written out in px.
   Stand-ins (need his artwork): the crest (our logo, img/ft/crest.svg, navy, in
   their crest's 65x60 box) and the banner's ornament (three of our flourishes in
   their 100x16 box). Their drawn underline path is reused, recoloured. */

/* their body, as the footer inherits it: 16 px (15 under 750), line-height 1.8, .6 px tracking */
.ft, .ft-pop { --ft-ink: #2a4254; --ft-slate: #7a5034; }
.ft { color: var(--ft-ink); font: 400 16px / 1.8 var(--f-body); letter-spacing: .6px; }
@media (max-width: 749px) { .ft { font-size: 15px; } }

/* ── main ─────────────────────────────────────────────────────────────────── */
.ft-main { padding: 36px 0; }
.ft-wrap { padding: 0 38px; }
@media (max-width: 749px) { .ft-wrap { padding: 15px; } }
.ft-grid { display: grid; grid-template-columns: 1fr 1fr; }
@media (min-width: 750px) { .ft-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 1vw; } }
.ft-nl { grid-column: auto / span 3; }
.ft-col { grid-column: auto / span 1; }
@media (max-width: 768px) {
  .ft-grid { grid-template-columns: 1fr 1fr; }
  .ft-nl { grid-column: span 2; order: 4; }
}

/* the headings: their .footer-block__heading, h3 for the newsletter, h2 for the lists */
.ft-head {
  margin: 5px 0; padding: 0 0 15px; text-align: left;
  font: 400 14px / 100% var(--f-head); letter-spacing: 10%; text-transform: uppercase;
}

/* the newsletter block: a column, 10% short of the right edge */
.ft-nl-block { display: flex; flex-direction: column; margin-right: 10%; text-align: center; }
.ft-nl-text {
  width: 68%; margin: 5px 0; text-align: left;
  font: 400 15px / 105% var(--f-body); letter-spacing: 0;   /* theirs: clamp(12px, 2vw, 15px), 15 under 991: always 15 */
}
.ft-nl-text em { font-style: italic; }

.ft-form { display: flex; flex-direction: column; align-items: flex-start; width: 100%; box-sizing: border-box; margin: 0; padding: 20px 0 10%; }
@media (min-width: 750px) { .ft-form { max-width: 360px; margin: 0 auto 0 0; } }
.ft-form-wrap { width: 100%; max-width: 360px; }
.ft-field { position: relative; display: flex; }
.ft-input {
  -webkit-appearance: none; appearance: none; flex-grow: 1; box-sizing: border-box; width: 100%; min-width: 70px; height: 45px; margin: 0;
  padding: 1px 0; border: 0; border-radius: 0; background: transparent; color: inherit; text-align: left;
  font: 400 16px / 1.5 var(--f-body); letter-spacing: 0; outline: none;
}
.ft-input::placeholder { opacity: 0; }
.ft-input:focus, .ft-input:not(:placeholder-shown) { padding: 22px 15px 18px 0; }
.ft-label {
  position: absolute; left: 0; top: 10px; margin: 0; pointer-events: none;
  font: 400 16px / 1.5 var(--f-body); letter-spacing: 0; color: inherit;
  transition: top .1s ease, font-size .1s ease;
}
.ft-input:focus ~ .ft-label, .ft-input:not(:placeholder-shown) ~ .ft-label { top: -12px; font-size: 10px; }
.ft-line { position: absolute; left: 0; right: 0; bottom: 0; display: block; line-height: 0; pointer-events: none; }
.ft-line svg { display: block; width: 100%; height: auto; }

/* 【 SUBMIT 】, flush with the right end of the line (their .button: 122 x 47 at the least) */
.ft-submit {
  position: absolute; top: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end;
  box-sizing: border-box; min-width: 122px; min-height: 47px; margin: 0 0 0 -1px; padding: 0; border: 0; background: transparent;
  color: inherit; cursor: pointer; font: 400 12px / 1.2 var(--f-head); letter-spacing: 1.4px; text-transform: uppercase;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
}
.ft-submit:hover { opacity: .5; }
.ft-submit::before { content: "【"; position: relative; z-index: 1; padding-right: 1ch; }
.ft-submit::after { content: "】"; position: relative; padding-left: 1ch; }

.ft-consent { margin: 5px 0; text-align: left; font: 400 10px / 105% var(--f-body); letter-spacing: 0; }
.ft-thanks { margin: 5px 0; text-align: left; font: 400 15px / 105% var(--f-body); letter-spacing: 0; }
.ft-thanks a, .ft-pop-done a { color: inherit; }

/* the three lists */
.ft-col ul { margin: 0 0 40px; padding: 0; list-style: none; }
@media (min-width: 750px) { .ft-col ul { margin-bottom: 0; } .ft-col li:not(:last-child) { margin-right: 15px; } }
.ft-col li { line-height: 1.3; }
.ft-col a {
  display: flex; align-items: center; width: 100%; padding: 1px 0; color: inherit; text-decoration: none;
  font: 400 13px / 1.3 var(--f-head); letter-spacing: 0;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
}
@media (min-width: 769px) { .ft-col a { font-size: 14px; } }
@media (min-width: 750px) { .ft-col a { display: inline-block; } }
@media (min-width: 990px) { .ft-col a { padding: 0; } }
.ft-col a:hover { font-style: italic; }   /* theirs: font-family "Herbik Italic" */

/* ── the bar under it (their .utility-bar) ──────────────────────────────── */
.ft-bar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-top: 13vh; padding: 30px 24px;
  font-size: clamp(8px, 1vw, 10px); letter-spacing: .05em; text-transform: uppercase;
}
.ft-bar * { color: var(--ft-ink); font-family: var(--f-head); font-size: clamp(8px, 1vw, 10px); letter-spacing: 1px; }
.ft-bar a { text-decoration: none; transition: all .4s ease; }
.ft-bar a:hover { opacity: .5; }
.ft-bar-col { flex: 1; }
.ft-bar-line { margin: 0; line-height: 1.6; white-space: nowrap; }
.ft-bar-tag, .ft-bar-contact { text-align: center; }
.ft-bar-crest { position: relative; display: flex; flex: 0 0 auto; justify-content: center; align-items: center; margin-bottom: -1%; padding: 0; }
.ft-crest { display: block; width: 65.17px; height: 60px; margin-bottom: -1%; object-fit: contain; }   /* their crest is 63:58 at 60 tall */
.ft-bar-credits { text-align: right; }
@media (min-width: 1200px) { .ft-bar { display: grid; grid-template-columns: 2fr 1fr .5fr 1fr 2fr; } }
@media (max-width: 998px) { .ft-bar { padding-bottom: 8vh; } }
@media (max-width: 990px) {
  .ft-bar { flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 0; text-align: center; }
  .ft-bar-col { flex: 1 1 100%; }
  .ft-bar-credits, .ft-bar-tag, .ft-bar-contact { text-align: center; }
}

/* ── the banner: "FROM THE STUDIO" (their Klaviyo form, rebuilt) ──────────── */
.ft-pop {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: center;
  color: var(--ft-ink); font: 400 16px / normal var(--f-body); letter-spacing: normal;
}
.ft-pop[hidden], .ft-pop [hidden], .ft [hidden] { display: none; }
.ft-pop-form {
  position: relative; display: flex; justify-content: center; box-sizing: border-box; width: 100%; margin: 0; padding: 10px;
  background: #d6bdaf;
}
.ft-pop-form::before {   /* their banner: the page colour + their paper, cover */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/paper-texture.webp?v=3") center / cover no-repeat; opacity: .7;
}
.ft-pop-col { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; }
.ft-pop-row { display: flex; justify-content: center; }

.ft-pop-title { box-sizing: border-box; width: 100%; margin: 0; padding: 10px 20px 0; text-align: center; letter-spacing: 2px; text-transform: uppercase; }
.ft-pop-title span { font-size: 18px; letter-spacing: 2px; }
@media (hover: none) and (pointer: coarse) { .ft-pop-title span { font-size: 20px; } }   /* their MOBILE heading, shown to phones */

.ft-pop-orn { display: flex; justify-content: space-between; align-items: center; box-sizing: content-box; width: 100px; height: 16.11px; margin: 0 auto; padding: 10px 6px; }
.ft-pop-orn svg { display: block; width: 16px; height: 16.11px; }
.ft-pop-orn svg:first-child { transform: scaleX(-1); }

.ft-pop-textcell { box-sizing: content-box; max-width: 28vw; padding: 0 20px 10px; }
.ft-pop-text { margin: 0; text-align: center; font-size: 16px; line-height: 1; }
.ft-pop-text span { font-size: 13px; }

.ft-pop-fieldcell { box-sizing: content-box; display: flex; max-width: 28vw; padding: 0 10px 10px; flex: 1 1 auto; }
.ft-pop-field { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; }
.ft-pop-field::before {   /* their drawn line, a 322 px tile, 1 px off the bottom */
  content: ""; position: absolute; left: 0; bottom: 1px; width: 100%; height: 2px; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg width='322' height='2' viewBox='0 0 322 2' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M321.726 0.999737C322.359 1.46215 321.801 1.79218 321.009 1.82594C314.435 2.10515 306.792 2.00044 300.176 1.84492C290.448 1.61428 282.01 1.13819 272.133 1.40831C239.443 2.30394 206.276 0.766467 173.422 0.976254C167.953 1.01115 162.474 1.31499 157.043 1.37154C140.343 1.54528 123.421 1.84232 106.702 1.80666C90.0356 1.77137 73.4409 1.57186 56.8693 1.84457C37.9295 2.15673 18.9379 1.57369 0 1.82212C0.188402 1.06648 0.937278 1.04411 1.67173 0.979232C3.92853 0.779717 6.60499 1.09608 8.95521 1.00199C24.4857 0.380648 40.234 1.05205 55.9023 1.01413C71.2968 0.979232 86.7373 0.721676 102.347 0.976215C112.935 1.14996 123.752 0.735728 134.251 0.576002C157.023 0.229284 179.816 -0.245275 202.493 0.148867C226.656 0.571839 250.922 0.841538 275.036 0.167082C283.298 -0.0643177 291.497 0.816909 299.692 1.01757C307.022 1.197 314.399 0.843065 321.726 0.999737' fill='%23486574' fill-opacity='0.7'/></svg>");
}
.ft-pop-input {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 100%; height: 40px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; color: var(--ft-ink); text-align: left;
  font: 400 16px / normal var(--f-body); letter-spacing: normal; outline: none;
}
.ft-pop-input::placeholder { color: var(--ft-ink); opacity: 1; }
.ft-pop-btncell { display: flex; align-items: flex-end; padding: 10px; }
.ft-pop-btn {
  box-sizing: border-box; height: 28px; margin: 0; padding: 0 15px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--ft-slate); color: #f7f3ee; font: 400 14px / 14px var(--f-body); letter-spacing: 2px; text-transform: uppercase;
}
.ft-pop-btn:hover { background: #2a4254; }

.ft-pop-close {
  position: absolute; top: 0; right: 0; z-index: 2; width: 22px; height: 22px; margin: 8px 8px 0 0; padding: 0;
  border: 0; background: none; color: var(--ft-ink); cursor: pointer;
}
.ft-pop-close svg { display: block; }

/* after SIGN UP: their second view, one centred line */
.ft-pop-done { padding: 10px 6px; text-align: center; }
.ft-pop-done p { margin: 0; }

.ft-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }