/* Website only. Shared brand basics are in base.css.
   Sections are separated by space alone; no divider lines (the Q&A keeps its own). */

:root {
  --site-max: 1200px;
  --site-pad: 16px;
}
@media (min-width: 860px) {
  :root { --site-pad: 32px; }
}

/* Short pages (404, the order page): the main part grows, so the footer reaches the bottom of
   the screen instead of stopping halfway. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > main { flex: 1 0 auto; }

/* ---------- Header: big logo and links, scrolls away with the page ---------- */

.site-masthead {
  width: 100%; /* a flex item of body: keeps its full width, still centred by the margins */
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 60px var(--site-pad) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-logo { display: block; }
.site-logo img { display: block; height: 37px; width: auto; }

.site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 24px; }
.site-nav a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  text-underline-offset: 5px;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { text-decoration: underline; }
.site-logo:focus-visible,
.site-nav a:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
@media (min-width: 860px) {
  /* Logo centred on one row, two links on each side. */
  .site-masthead { display: grid; grid-template-columns: 1fr auto 1fr; padding-top: 64px; padding-bottom: 24px; }
  .site-logo { grid-column: 2; }
  .site-logo img { height: 64px; }
  .site-nav { grid-column: 3; justify-content: flex-end; } /* to the right edge; the left group starts at the left edge */
  .site-nav-left { grid-column: 1; grid-row: 1; justify-content: flex-start; }
  .site-nav-phone { display: none; }
}
/* Phones: only the links on the right (Learn more, Swatches, Design); the logo is the way home. */
@media (max-width: 859px) { .site-nav-left { display: none; } }

/* ---------- Buttons and links ---------- */

.site-cta {
  display: inline-block;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}
.site-cta:hover { background: #333333; }

.site-link {
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.site-link::after { content: " →"; }
/* Links that go back a step point the other way. */
.site-link-back::after { content: none; }
.site-link-back::before { content: "← "; }

.site-cta:focus-visible,
.site-link:focus-visible,
.site-tile:focus-visible,
.site-faq summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Sections ---------- */

.site-section {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 48px var(--site-pad);
}

.site-eyebrow {
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-section-title {
  margin: 0 0 24px;
  font-family: var(--font-body); /* a subtitle, not a heading: Poppins capitals */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-section-lead { margin: -12px 0 24px; color: var(--muted); }

.site-prose { max-width: 60ch; font-size: 17px; line-height: 1.55; }
.site-prose p { margin: 0 0 16px; }

/* Heading on the left, content on the right on wide screens. */
@media (min-width: 860px) {
  .site-split { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; }
  .site-split > .site-section-title { margin: 0; }
}

/* ---------- Hero ---------- */

.site-hero {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 40px var(--site-pad) 64px;
  display: grid;
  gap: 40px;
  align-items: start;
}
@media (min-width: 860px) {
  .site-hero { grid-template-columns: 1fr 1fr; gap: 56px; padding-top: 48px; padding-bottom: 88px; }
  .site-hero-text { align-self: end; } /* the text ends level with the bottom of the photo */
}

.site-hero-title {
  margin: 0 0 28px;
  font-size: clamp(52px, calc(6.5vw + 18px), 76px);
  line-height: 1.12;
}
.site-lead { margin: 0 0 44px; max-width: 42ch; font-size: 18px; line-height: 1.5; color: var(--muted); }
.site-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }

/* Square crop that keeps the face and jumper; on wide screens it sits right of the text. */
.site-hero-photo { display: block; }
.site-hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 30%;
}

/* Phones: the photo takes the right part of the screen, running to its edge, beside the
   subtitle and headline; the headline runs over it. Intro text and buttons sit below on white.
   The text box is "unwrapped" (display: contents) so its pieces can sit in the grid. */
@media (max-width: 859px) {
  .site-hero {
    grid-template-columns: var(--site-pad) 1fr 42%;
    gap: 0;
    padding: 56px 0 64px;
  }
  .site-hero-text { display: contents; }
  .site-hero-photo {
    grid-column: 3;
    grid-row: 1 / 3;
    margin: -15px 0; /* reaches 15px above the subtitle and 15px below the headline */
  }
  .site-hero-photo img { height: 100%; aspect-ratio: auto; object-position: 50% 30%; }
  /* The photo spans exactly from the top of the subtitle to the bottom of the headline. */
  .site-hero .site-eyebrow { grid-column: 2 / 4; grid-row: 1; position: relative; margin: 0 0 20px; }
  .site-hero-title { grid-column: 2 / 4; grid-row: 2; position: relative; margin-bottom: 0; }
  .site-hero .site-lead { grid-column: 2 / 4; grid-row: 3; margin: 40px 0 32px; padding-right: var(--site-pad); }
  .site-hero .site-actions { grid-column: 2 / 4; grid-row: 4; }
}
/* ---------- How it works ---------- */

.site-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.site-steps li { padding: 16px 0; }
.site-steps h3 { margin: 8px 0 8px; font-size: 32px; }
.site-steps p { margin: 0; max-width: 40ch; color: var(--muted); }
/* Value props: the same columns as the steps, a smaller heading and no numbers. */
.site-values h3 { margin-top: 0; font-size: 24px; }
.site-step-num { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); }

@media (min-width: 860px) {
  .site-steps { grid-template-columns: repeat(3, 1fr); column-gap: 48px; }
  .site-steps li { padding: 0; }
}

/* ---------- Gallery ---------- */

.site-gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 860px) {
  .site-gallery { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
.site-tile {
  display: block;
  padding: 8px 8px 12px;
  border: 1px solid var(--line-soft);
  text-decoration: none;
}
.site-tile:hover { background: var(--grey-1); }
/* Flat lay (a canvas, or the line drawing) or a model photo; space is kept while it loads. */
.site-tile-photo { display: block; aspect-ratio: 1; }
.site-tile-photo > * { display: block; width: 100%; height: 100%; }
.site-tile-photo > img { object-fit: cover; }
/* Short-sleeved flat lays are shorter but framed alike, so they sit high in the square:
   moved down to the long-sleeved garments' centre and enlarged a little. */
.site-tile-short { overflow: hidden; }
.site-tile-short > * { transform: translateY(10.75%) scale(1.15); }
.site-tile-name { display: block; margin-top: 8px; font-size: 14px; }
.site-tile-price { display: block; font-size: 13px; color: var(--muted); }

/* ---------- Summary ---------- */

/* Photo and details stacked on phones, side by side on wide screens. */
.site-summary {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 32px var(--site-pad) 64px;
  display: grid;
  gap: 32px;
  align-items: start;
}
@media (min-width: 860px) {
  .site-summary { grid-template-columns: 3fr 2fr; gap: 56px; padding-top: 48px; }
}

.site-summary-figure { margin: 0; }
.site-summary-photo { aspect-ratio: 1; background: var(--grey-1); }
.site-summary-photo > * { display: block; width: 100%; height: 100%; }
.site-summary-figure figcaption { margin-top: 8px; font-size: 12px; color: var(--muted); }

.site-summary-title { margin: 0 0 28px; font-size: clamp(32px, calc(3vw + 14px), 44px); line-height: 1.15; }

.site-summary-list { margin: 0 0 32px; }
.site-summary-list div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
}
.site-summary-list dt { color: var(--muted); }
.site-summary-list dd { margin: 0; }

.site-summary-price { margin: 0 0 28px; padding-top: 16px; }
.site-summary-price p { display: flex; justify-content: space-between; gap: 16px; margin: 0; }
.site-summary-line { margin: 0 0 6px; font-size: 15px; }
#summary-lines:not(:empty) { margin-bottom: 10px; }
.site-summary-total { font-size: 18px; font-weight: 500; }
.site-summary-small { font-size: 13px; color: var(--muted); }
.site-summary-note { margin: 24px 0 0; font-size: 13px; color: var(--muted); }

/* ---------- Size & fit ---------- */

/* Same layout as the summary; on phones the photo is smaller so the form comes sooner. */
@media (max-width: 859px) {
  .site-fit .site-summary-figure { width: 70%; max-width: 320px; }
}
.site-fit-lead { margin: -12px 0 28px; color: var(--muted); }
.site-fit-group { margin: 0 0 28px; padding: 0; border: 0; min-width: 0; }
.site-fit-group legend { padding: 0; }
.site-fit-note { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.site-fit-status { margin: 16px 0 0; font-size: 14px; }
.site-fit-status:empty { display: none; }

/* Size buttons: square, filled black when chosen. */
.site-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.site-chip { position: relative; cursor: pointer; }
.site-chip input { position: absolute; opacity: 0; pointer-events: none; }
.site-chip span {
  display: block;
  min-width: 52px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  text-align: center;
  font-size: 14px;
}
.site-chip:hover span { background: var(--grey-1); }
.site-chip input:checked + span { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.site-chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Measurement fields. */
.site-fields { display: grid; gap: 14px; }
.site-field { display: grid; gap: 6px; }
.site-field-label { font-size: 14px; }
.site-field-label small { color: var(--muted); font-size: 12px; }
.site-field-unit { display: flex; align-items: stretch; gap: 6px; } /* − / + as tall as the field */
.site-field-unit > span { align-self: center; margin-left: 4px; }
.site-field-unit span { font-size: 14px; color: var(--muted); }
.site-field input {
  width: 100%;
  max-width: 120px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* 16px stops iOS zooming in on focus */
}
.site-field input:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px; }
.site-field input:user-invalid { border-color: #b3261e; }
.site-field input:disabled { border-color: var(--line-soft); background: var(--grey-1); }
/* Hide the browser's own tiny arrows; the − / + buttons replace them. */
.site-field input::-webkit-outer-spin-button,
.site-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.site-field input[type="number"] { -moz-appearance: textfield; appearance: textfield; text-align: center; max-width: 84px; }

.site-step-button {
  width: 44px;
  flex: none;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation; /* quick repeated taps press the button instead of zooming */
}
.site-step-button:hover:not(:disabled) { background: var(--grey-1); }
.site-step-button:disabled { border-color: var(--line-soft); color: var(--line-soft); cursor: default; }
.site-step-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

button.site-cta { border: 0; font-family: inherit; cursor: pointer; }
.site-link-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- Legal pages (privacy, company details) ---------- */

.site-doc {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 40px var(--site-pad) 72px;
}
.site-doc > * { max-width: 62ch; }
.site-doc-title { margin: 0 0 24px; font-size: clamp(36px, calc(4vw + 12px), 52px); line-height: 1.15; }
.site-doc-lead { margin: 0 0 32px; font-size: 18px; color: var(--muted); }
.site-doc h2 {
  margin: 36px 0 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-doc p { margin: 0 0 16px; line-height: 1.6; }
.site-doc h3 { margin: 22px 0 6px; font-family: var(--font-body); font-size: 15px; font-weight: 600; }
.site-doc code { font-size: 0.9em; }
.site-doc a { text-underline-offset: 3px; }
.site-doc .site-summary-list { margin-top: 8px; }
.site-doc-updated { margin-top: 40px; font-size: 13px; color: var(--muted); }
.site-footer-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Story pages (How it's made) ---------- */

/* Founder's letter: a pull quote and a signature under the prose. */
.site-quote {
  margin: 32px 0 20px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 26px;
  line-height: 1.35;
}
.site-prose .site-signature,
.site-signature {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A wide photo strip between sections. */
.site-band {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 var(--site-pad) 48px;
}
.site-band img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 52% 72%;
}
@media (min-width: 860px) {
  .site-band img { aspect-ratio: 21 / 9; }
}

/* Short titled blocks: one column on phones, three on wide screens. */
.site-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  column-gap: 40px;
}
@media (min-width: 860px) {
  .site-features { grid-template-columns: repeat(3, 1fr); }
}
.site-features li { padding: 0 0 36px; }
.site-features h3 { margin: 0 0 12px; font-size: 26px; line-height: 1.25; }
.site-features p { margin: 0; max-width: 44ch; color: var(--muted); }

/* Photo beside text. */
.site-media { display: grid; gap: 32px; align-items: center; }
@media (min-width: 860px) {
  .site-media { grid-template-columns: 1fr 1fr; gap: 56px; }
}
.site-media-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
}
.site-display { margin: 0 0 16px; font-family: var(--font-heading); font-size: clamp(32px, calc(3vw + 14px), 44px); line-height: 1.15; }

/* ---------- Wool: spec sheet, swatches ---------- */

/* Four short titled blocks: one column on phones, four on wide screens. */
@media (min-width: 860px) {
  .site-features-four { grid-template-columns: repeat(4, 1fr); }
}
.site-features h3 + .site-list { margin-top: 0; }

/* A plain list: short points, each on its own line. */
.site-list { list-style: none; margin: 16px 0 20px; padding: 0; max-width: 60ch; }
.site-list li { padding: 6px 0; line-height: 1.5; }
.site-list strong { font-weight: 600; }
.site-features .site-list li { color: var(--muted); font-size: 15px; }
.site-features .site-list strong { color: var(--text); }

/* Spec sheet: three columns on wide screens; on phones each row stacks (spec, value, meaning). */
.site-spec { width: 100%; border-collapse: collapse; font-size: 15px; }
.site-spec th, .site-spec td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.site-spec thead th { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.site-spec tbody th { font-weight: 600; }
.site-spec td:last-child { color: var(--muted); }
.site-spec a { color: inherit; text-underline-offset: 3px; }
@media (max-width: 859px) {
  .site-spec thead { display: none; }
  .site-spec tr { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
  .site-spec th, .site-spec td { padding: 0; border: 0; }
}

/* Swatch order: the yarn colours in their season rows; up to four can be ticked. */
.site-swatch-price { margin: 8px 0 0; font-size: 15px; color: var(--muted); }
/* The text and the colour picker: stacked on phones, side by side on wide screens. */
.site-swatch-order { display: grid; gap: 28px; }
@media (min-width: 860px) {
  .site-swatch-order { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
}
@media (max-width: 859px) {
  .site-swatch-form { margin-top: 32px; }
}
.site-swatch-rows { display: grid; gap: 8px; margin-bottom: 4px; }
.site-swatch-row { display: grid; grid-template-columns: repeat(5, minmax(40px, 56px)); gap: 8px; }
.site-swatch { position: relative; cursor: pointer; }
.site-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.site-swatch span:first-of-type { display: block; aspect-ratio: 1; border: 1px solid rgba(0, 0, 0, 0.12); }
.site-swatch input:checked + span { outline: 2px solid var(--line); outline-offset: 2px; }
.site-swatch input:checked + span::after { content: "✓"; display: grid; place-items: center; height: 100%; color: #fff; font-size: 18px; text-shadow: 0 0 3px rgba(0, 0, 0, 0.6); }
.site-swatch input:checked + span.is-light::after { color: var(--text); text-shadow: none; }
.site-swatch input:disabled + span { opacity: 0.35; cursor: not-allowed; }
.site-swatch input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.site-swatch-chosen { margin: 20px 0 24px; font-size: 14px; }
.site-swatch-chosen p { margin: 0 0 10px; }
.site-swatch-chosen small { margin-left: 6px; font-size: 13px; color: var(--muted); }
.site-swatch-chosen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-swatch-chosen li { display: flex; align-items: center; gap: 10px; }
.site-swatch-dot { width: 16px; height: 16px; flex: none; border: 1px solid rgba(0, 0, 0, 0.15); }
button.site-cta:disabled { background: var(--line-soft); color: var(--muted); cursor: not-allowed; }

/* ---------- FAQ ---------- */

.site-faq { border-top: 1px solid var(--line-soft); }
.site-faq details { border-bottom: 1px solid var(--line-soft); }
.site-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
}
.site-faq summary::-webkit-details-marker { display: none; }
.site-faq summary::after { content: "+"; font-size: 18px; line-height: 1.2; }
.site-faq details[open] summary::after { content: "−"; }
.site-faq summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-faq p { margin: 0 0 18px; max-width: 60ch; color: var(--muted); line-height: 1.55; }

/* ---------- Closing call to action ---------- */

.site-closing { text-align: center; padding-top: 64px; padding-bottom: 72px; }
.site-closing-title { margin: 0 0 28px; font-size: clamp(36px, calc(5vw + 10px), 50px); line-height: 1.2; }
.site-closing-text { max-width: 46ch; margin: -8px auto 32px; font-size: 17px; line-height: 1.55; color: var(--muted); }
.site-actions-centre { justify-content: center; }
/* The waitlist on the order page: email and button on one row, stacked on phones. */
.site-waitlist { max-width: 520px; margin: 0 auto 32px; }
.site-waitlist-row { display: flex; gap: 8px; }
.site-waitlist input {
  flex: 1; min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* 16px stops iOS zooming in on focus */
}
.site-waitlist input:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px; }
.site-waitlist input:user-invalid { border-color: #b3261e; }
.site-waitlist-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.site-waitlist-check { display: flex; align-items: center; gap: 10px; margin-top: 14px; text-align: left; font-size: 14px; cursor: pointer; }
/* A square box with sharp corners, like the rest of the site (the browser's own is rounded). */
.site-waitlist-check input {
  flex: 0 0 14px; display: grid; place-items: center;
  width: 14px; height: 14px; min-width: 14px; aspect-ratio: 1; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none;
  border: 1px solid var(--line); border-radius: 0; background: var(--bg);
  cursor: pointer;
}
.site-waitlist-check input:checked { background: var(--accent); border-color: var(--accent); }
.site-waitlist-check input:checked::after { content: "✓"; color: var(--accent-text); font-size: 10px; line-height: 1; }
.site-waitlist-check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.site-waitlist-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.site-waitlist-done { max-width: 46ch; margin: 0 auto 32px; font-size: 17px; }
@media (max-width: 520px) { .site-waitlist-row { flex-direction: column; } }
/* A closing call to action beside a photo: the closing title and text, left-aligned. */
.site-media-cta .site-closing-text { margin: -8px 0 32px; }
/* Photo beside text, square instead of 4:5. */
.site-media-square .site-media-photo { aspect-ratio: 1; }
.site-actions-split { justify-content: space-between; } /* back link on the left, button on the right */

/* ---------- Footer ---------- */

/* Desktop: logo and copyright, Instagram, then three link columns (about, order, legal).
   Phones: logo and copyright, with Instagram below, on the left; all the links in one column
   on the right. */
.site-footer {
  background: var(--grey-1);
  font-size: 13px;
}
.site-footer-inner {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 28px var(--site-pad);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "brand about" "brand shop" "social legal";
  gap: 6px 20px;
  align-items: start;
}
.site-footer-links { display: flex; flex-direction: column; gap: 6px; }
.site-footer-brand { grid-area: brand; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.site-footer-social { grid-area: social; }
.site-footer-about { grid-area: about; }
.site-footer-shop { grid-area: shop; }
.site-footer-legal { grid-area: legal; }
@media (min-width: 860px) {
  .site-footer-inner {
    grid-template-columns: 1fr auto auto auto auto;
    grid-template-areas: "brand social about shop legal";
    column-gap: 64px;
  }
}
.site-footer-logo { display: block; height: 30px; width: auto; }
.site-footer-social { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.site-footer-social:hover span { text-decoration: underline; text-underline-offset: 4px; }
.site-footer p { margin: 0; font-size: 12px; color: var(--muted); }
.site-footer-links a { text-decoration: none; }
.site-doc-link { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.site-doc-link:hover { background: none; color: inherit; }
.site-footer-cookie { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.site-footer-cookie:hover { background: none; color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.site-footer-links a:hover,
.site-footer-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }