/* CosLoom footer reference layout. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.cosloom-site .site-footer--atelier {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  background:
    linear-gradient(90deg, rgba(35, 33, 30, 0.025) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--page) 86%, transparent), color-mix(in srgb, var(--page-soft) 22%, var(--page)));
  background-size: 96px 100%, auto;
  font-size: 0.92rem;
}

.site-footer--atelier p,
.site-footer--atelier h2,
.site-footer--atelier h3 {
  margin: 0;
}

.site-footer--atelier a {
  color: inherit;
  font-weight: 600;
}

.site-footer__statement {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(420px, 640px) minmax(220px, 1fr);
  gap: clamp(28px, 5vw, 86px);
  align-items: center;
  min-height: 380px;
  padding: clamp(58px, 6vw, 92px) clamp(48px, 4.8vw, 92px);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.site-footer__statement-copy {
  display: grid;
  justify-items: center;
  gap: 18px;
}

.site-footer__statement-copy > p,
.site-footer__body h3 {
  color: color-mix(in srgb, var(--ink) 78%, var(--accent));
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  line-height: 1.5;
  text-transform: uppercase;
}

.site-footer__statement-copy h2 {
  max-width: 600px;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 3.6vw, 4.5rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.96;
}

.site-footer__statement-copy span {
  display: block;
  max-width: 620px;
  color: color-mix(in srgb, var(--ink-soft) 82%, var(--ink));
  font-size: 0.98rem;
  line-height: 1.72;
}

.site-footer__sketch {
  min-height: 240px;
  opacity: 0.24;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: grayscale(1);
}

.site-footer__sketch--left {
  background-image: url("data:image/svg+xml,%3Csvg width='420' height='300' viewBox='0 0 420 300' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%237d746a' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M122 45c38 16 85 15 121 0 17 39 25 80 20 124-13 13-28 22-45 28-23 8-48 7-72-1-15-5-29-13-42-24-2-47 4-89 18-127Z'/%3E%3Cpath d='M151 56c-4 31-5 61-2 91 21 10 45 12 72 4 3-32 0-65-8-98'/%3E%3Cpath d='M134 83c25 18 56 20 91 6M130 120c31 14 68 15 111 1M145 179c23 18 52 21 86 8'/%3E%3Cpath d='M82 64c-28 24-37 61-27 111M295 61c24 24 33 59 26 105M72 182c15 32 40 54 75 65M289 181c-14 31-39 51-75 62'/%3E%3Cpath d='M277 36l44-17M291 53l61-12M63 55 25 34M76 75 29 76M105 218l-52 45M250 219l47 44' opacity='.65'/%3E%3Cpath d='M333 86c23 28 32 62 26 103M347 199c-11 25-30 43-57 55' opacity='.45'/%3E%3C/svg%3E");
}

.site-footer__sketch--right {
  background-image: url("data:image/svg+xml,%3Csvg width='420' height='300' viewBox='0 0 420 300' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%237d746a' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M80 54c31 14 68 13 98-2 12 38 17 80 14 126-28 18-61 22-99 10-8-46-12-91-13-134Z'/%3E%3Cpath d='M106 62c-4 38-3 75 2 112M151 58c9 35 13 72 12 111M97 110c24 10 50 11 78 2M96 150c25 9 52 9 82-1'/%3E%3Cpath d='M245 51h90c6 58 5 116-3 174-30 10-59 10-87 0-7-58-7-116 0-174Z'/%3E%3Cpath d='M269 55c-5 55-5 112 0 170M306 54c5 55 5 112 0 170M246 96h88M244 143h91M244 190h88'/%3E%3Cpath d='M74 218c29 26 70 35 122 27M236 247c33 12 69 11 108-2M63 37l-34-20M365 45l34-20M360 230l40 30' opacity='.55'/%3E%3C/svg%3E");
}

.site-footer__body {
  display: grid;
  grid-template-columns: minmax(320px, 1.25fr) minmax(150px, 0.52fr) minmax(170px, 0.58fr) minmax(330px, 1.18fr);
  gap: clamp(42px, 6.4vw, 132px);
  max-width: 1720px;
  margin: 0 auto;
  padding: clamp(54px, 5vw, 82px) clamp(48px, 4.8vw, 92px);
  border-bottom: 1px solid var(--line);
}

.site-footer__brand {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.site-footer__mark {
  color: color-mix(in srgb, var(--accent) 24%, transparent);
  font-family: var(--font-heading);
  font-size: clamp(5.2rem, 5.2vw, 7rem);
  line-height: 0.76;
}

.site-footer__brand strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 1.48rem;
  font-weight: 650;
  line-height: 1;
}

.site-footer__brand p,
.site-footer__updates p {
  max-width: 250px;
  margin-top: 18px;
  color: color-mix(in srgb, var(--ink-soft) 74%, transparent);
  font-size: 0.82rem;
  line-height: 1.75;
}

.site-footer__social {
  display: flex;
  gap: 18px;
  margin-top: 30px;
}

.site-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: color-mix(in srgb, var(--ink-soft) 72%, transparent);
  transition: color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  color: color-mix(in srgb, var(--accent) 78%, var(--ink));
  opacity: 1;
  transform: translateY(-1px);
}

.site-footer__social svg {
  width: 19px;
  height: 19px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-footer__social a[aria-label="Pinterest"] svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
}

.site-footer__nav {
  display: grid;
  align-content: start;
  gap: 10px;
}

.site-footer__nav h3,
.site-footer__updates h3 {
  margin-bottom: 12px;
}

.site-footer__nav a {
  color: color-mix(in srgb, var(--ink-soft) 88%, var(--ink));
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
}

.site-footer__updates {
  display: grid;
  align-content: start;
  border-left: 1px solid var(--line);
  padding-left: clamp(38px, 4.6vw, 84px);
}

.site-footer__signup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  width: min(100%, 380px);
  margin-top: 26px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 52%, transparent);
}

.site-footer__signup label {
  min-width: 0;
}

.site-footer__signup input {
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.78rem;
  outline: 0;
}

.site-footer__signup input:-webkit-autofill,
.site-footer__signup input:-webkit-autofill:hover,
.site-footer__signup input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #eee7dc inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
}

.site-footer__signup button {
  display: grid;
  place-items: center;
  border: 0;
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 62%, var(--accent));
  color: var(--cream);
  cursor: pointer;
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1720px;
  margin: 0 auto;
  padding: 28px clamp(48px, 4.8vw, 92px) 34px;
  color: color-mix(in srgb, var(--muted) 78%, transparent);
  font-size: 0.7rem;
}

.site-footer__bottom nav {
  display: flex;
  gap: 48px;
}

.site-footer__bottom a {
  color: color-mix(in srgb, var(--ink-soft) 72%, var(--ink));
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (max-width: 1180px) {
  .site-footer__statement {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-footer__sketch {
    display: none;
  }

  .site-footer__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__updates {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 760px) {
  .site-footer__statement {
    min-height: 0;
    padding: 48px 24px;
  }

  .site-footer__statement-copy h2 {
    font-size: 2.55rem;
  }

  .site-footer__body {
    grid-template-columns: 1fr;
    padding: 42px 24px;
  }

  .site-footer__brand {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .site-footer__mark {
    font-size: 4.5rem;
  }

  .site-footer__bottom {
    display: grid;
    padding: 24px 24px calc(96px + env(safe-area-inset-bottom, 0px));
  }
}