/* ==========================================================================
   Aria Labs — additions to styles.css
   styles.css is the original build and stays untouched apart from its token
   layer. This file loads after it and carries the brandbook token corrections
   plus the whole v3 page. v3 replaced the earlier multi-section layout, so the
   rules for those sections are gone from here; the ones still in styles.css
   are dead but left in place, since that file is not to be restructured.
   ========================================================================== */

:root {
  /* --- Type scale -------------------------------------------------------
     v3 sets its own display sizes inline with the design's clamps. These
     tokens remain the source for the Label role and body defaults. */
  --fs-subhead:  20px;                       /* Archivo 700 */
  --fs-body:     15px;                       /* Archivo 400 */
  --fs-small:    13px;                       /* Archivo 400 */
  --fs-label:    10px;                       /* Space Mono 700, caps */
  --track-body:   0;
  --track-label:  0.14em;

  /* --- Functional colours ----------------------------------------------
     Lime and yellow both carry brand meaning, so neither can signal status.
     The bare token is the dark-surface value; -on-light is for paper bands.
     Never mix the two sets. */
  --error:            #F2453D;
  --error-on-light:   #C9322B;
  --warning:          #FF8A00;
  --warning-on-light: #A35800;
  --success:          #17B26A;
  --success-on-light: #0B7B47;
  --info:             #4EA8FF;
  --info-on-light:    #2F6FAD;
  --disabled:         #6B6B73;

  /* --- Data series ------------------------------------------------------
     Three maximum, separated by luminance so they survive greyscale and
     colourblindness. Unused until there is a real series to plot. */
  --data-prediction: #C6F832;
  --data-comparison: #7FB2E8;
  --data-baseline:   #6E727B;

  /* --- v3 greys ---------------------------------------------------------
     Taken from the v3 design file rather than invented. */
  --v3-sub:         #D4D3CE;              /* lead copy on ink */
  --v3-label:       #6E727B;              /* mono labels, both grounds */
  --v3-rule-paper:  #C9C8C2;              /* hairlines on paper */
  --v3-muted-paper: #55555C;              /* secondary copy on paper */
  --v3-link-ink:    #9B9BA1;              /* quiet links on ink */
  --v3-hairline:    #26262E;              /* 1px boxes on ink */
  --v3-photo-bg:    #121216;              /* portrait ground before load */
  --v3-ink-hover:   #22222A;              /* ink button hover */
  --v3-legal-body:  #2E2E33;              /* running text on the legal pages */
  --v3-rule-inner:  #DAD9D3;              /* rules nested inside a legal row */

  /* Sticky-header height: the mark at 128px is 70.7px tall, plus 16px of
     padding top and bottom and the 1px rule. */
  --header-h: 104px;
}

/* --- Global adjustments -------------------------------------------------- */

/* Clear the sticky header when an anchor is jumped to. */
html { scroll-padding-top: calc(var(--header-h) + 12px); }

body {
  font-size: var(--fs-body);
  line-height: 1.55;
  letter-spacing: var(--track-body);
}

/* styles.css hovers links to paper for the ink ground. On a paper band that
   would be paper on paper, and inside it lime would be 1.07:1. */
.band--paper a:hover { color: var(--ink); }
.band--paper :focus-visible { outline-color: var(--ink); }

/* --- The Label role -----------------------------------------------------
   Space Mono 700, caps, +14% tracking. Machine output and labels only. */

.label {
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--v3-label);
}

/* --- The marker ---------------------------------------------------------
   A lime block behind dark type, slightly off-square so it reads as a drawn
   highlight. This is the only shape lime may take on a paper ground: as type
   there it would be 1.07:1. */

.marker {
  position: relative;
  display: inline-block;
}
.marker::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  right: -2px;
  bottom: 0;
  background: var(--lime);
  clip-path: polygon(0.6% 16%, 99.1% 2%, 100% 82%, 0.2% 98%);
}
.marker > span {
  position: relative;
  display: inline-block;
  padding: 6px 11px 7px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
}

/* Inside a heading the marker inherits the heading's type instead. */
.marker--head::before {
  left: -4px;
  right: -4px;
  clip-path: polygon(0.4% 14%, 99.4% 2%, 100% 86%, 0.2% 97%);
}
.marker--head > span {
  padding: 2px 10px 4px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: var(--ink);
}

/* --- The annotation frame ------------------------------------------------
   Corner brackets in the logo's geometry. Eight background slices on one
   pseudo-element rather than four corner divs, so any box can carry it. */

.frame {
  --stem: 14px;
  --frame-w: calc(var(--stem) * 0.30);
  --frame-arm: calc(var(--stem) * 1.65);
  position: relative;
}
.frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--lime), var(--lime)), linear-gradient(var(--lime), var(--lime)),
    linear-gradient(var(--lime), var(--lime)), linear-gradient(var(--lime), var(--lime)),
    linear-gradient(var(--lime), var(--lime)), linear-gradient(var(--lime), var(--lime)),
    linear-gradient(var(--lime), var(--lime)), linear-gradient(var(--lime), var(--lime));
  background-repeat: no-repeat;
  background-position:
    left top, left top, right top, right top,
    left bottom, left bottom, right bottom, right bottom;
  background-size:
    var(--frame-arm) var(--frame-w), var(--frame-w) var(--frame-arm),
    var(--frame-arm) var(--frame-w), var(--frame-w) var(--frame-arm),
    var(--frame-arm) var(--frame-w), var(--frame-w) var(--frame-arm),
    var(--frame-arm) var(--frame-w), var(--frame-w) var(--frame-arm);
}

/* --- Bands --------------------------------------------------------------
   --air is the design's space multiplier, exposed so vertical rhythm can be
   tuned in one place as it was on the canvas. */

.band {
  --air: 1;
  padding: calc(var(--air) * clamp(100px, 13vw, 180px)) clamp(24px, 5vw, 80px);
}
.band--paper { background: var(--paper); color: var(--ink); }
.band--contact { padding-block: calc(var(--air) * clamp(104px, 13vw, 184px)); }
.band__inner { max-width: 1240px; margin: 0 auto; }

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

.hero-v3 {
  --hero: 100svh;
  position: relative;
  min-height: calc(var(--hero) - var(--header-h));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3.2vw, 42px) clamp(24px, 5vw, 80px) clamp(56px, 7vw, 100px);
}
.hero-v3__top {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px 32px;
}
/* height:auto is load-bearing on every sized image here: the height attribute
   survives as a presentational hint and would otherwise beat the CSS box. */
.hero-v3__logo {
  width: clamp(164px, 13vw, 196px);
  height: auto;
  display: block;
}
.hero-v3__air {
  position: relative;
  flex: 1;
  min-height: clamp(150px, 19vw, 250px);
}
.hero-v3__title { position: relative; }
.hero-v3__serif {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(58px, 9.7vw, 152px);
  line-height: 0.84;
  letter-spacing: -0.015em;
  color: var(--lime);
}
.hero-v3__flat {
  display: block;
  font-weight: 900;
  font-size: clamp(41px, 6.9vw, 108px);
  line-height: 0.94;
  letter-spacing: -0.042em;
  margin-top: 0.05em;
}
.hero-v3__sub {
  margin-top: clamp(32px, 3.8vw, 50px);
  max-width: 44ch;
  font-size: clamp(21px, 2.3vw, 32px);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--v3-sub);
}
.hero-v3__actions {
  display: flex;
  margin-top: clamp(30px, 3.4vw, 44px);
}

/* --- Buttons ----------------------------------------------------------- */

.btn-v3 {
  display: inline-flex;
  align-items: center;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  padding: 16px 28px;
  border: none;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.btn-v3:hover { background: var(--lime); color: var(--ink); }

.btn-v3--ink {
  background: var(--ink);
  color: var(--paper);
  padding: 16px 30px;
}
.btn-v3--ink:hover { background: var(--v3-ink-hover); color: var(--paper); }
.btn-v3[disabled] {
  background: var(--disabled);
  color: var(--paper);
  cursor: not-allowed;
}

/* --- 02 What you'd know ------------------------------------------------ */

.know__list { margin-top: clamp(44px, 5.2vw, 78px); }
.know__row {
  border-top: 1px solid var(--v3-rule-paper);
  padding: clamp(17px, 1.9vw, 25px) clamp(10px, 1.2vw, 18px);
  margin-inline: calc(-1 * clamp(10px, 1.2vw, 18px));
  transition: background 180ms ease;
}
.know__row--last { border-bottom: 1px solid var(--v3-rule-paper); }
.know__row:hover { background: rgba(10, 10, 11, 0.04); }
.know__row p {
  font-size: clamp(15px, 2.3vw, 31px);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.032em;
}

.know__note {
  margin-top: clamp(26px, 3vw, 42px);
  max-width: 64ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--v3-muted-paper);
}

.know__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(26px, 3vw, 52px);
  margin-top: clamp(40px, 4.4vw, 64px);
  max-width: min(100%, 1160px);
}
/* The rule sits on each cell rather than across the whole block, so stacking
   at narrow widths keeps the structure instead of losing it. */
.know__meta > div {
  border-top: 1px solid var(--v3-rule-paper);
  padding-top: clamp(16px, 1.8vw, 22px);
}
.know__meta .label { color: var(--ink); }
.know__meta p:not(.label) {
  margin-top: 12px;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--v3-legal-body);
}

/* --- 03 What we're running -------------------------------------------- */

.running__stmt {
  /* The design draws these brackets at 28px arms and 3px thickness, which is
     a heavier ratio than the brandbook's 0.30/1.65. Design values kept. */
  --frame-w: 3px;
  --frame-arm: 28px;
  /* block + fit-content, not inline-block: the marker above is inline-block, so
     an inline-block box here flowed onto the same line as it. */
  display: block;
  width: fit-content;
  max-width: 930px;
  margin-top: clamp(34px, 4vw, 56px);
  padding: clamp(26px, 3vw, 40px) clamp(28px, 3.2vw, 44px);
}
.running__stmt p {
  font-size: clamp(20px, 2.3vw, 30px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.running__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 28px;
  margin-top: clamp(24px, 2.8vw, 36px);
}
.running__link {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--lime);
  border-bottom: 1px solid rgba(198, 248, 50, 0.35);
  padding-bottom: 2px;
}

/* --- Team ---------------------------------------------------------------
   No frame and no label over these photos. The face rule is absolute: it is
   the line between reading a market and watching people. */

.team-v3 { margin-top: clamp(72px, 9vw, 138px); }
.team-v3__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 28px;
}
.team-v3__grid {
  list-style: none;
  margin: clamp(28px, 3.2vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(16px, 2.2vw, 28px);
  max-width: min(100%, 1100px);
}
.person__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: var(--v3-photo-bg);
}
.person__name {
  margin-top: 16px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.person__foot {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 7px;
}
/* margin-left:auto rather than space-between, so the arrow still sits right
   when a role is missing. */
.person__link {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--v3-hairline);
  color: var(--v3-link-ink);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  transition: border-color 150ms ease, color 150ms ease;
}
.person__link:hover { border-color: var(--lime); color: var(--lime); }

/* --- 04 Get in touch -------------------------------------------------- */

.contact__title {
  font-size: clamp(29px, 3.9vw, 52px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.045em;
  max-width: 24ch;
}
.contact__sub {
  margin-top: clamp(20px, 2.2vw, 28px);
  max-width: 40ch;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.5;
  color: rgba(10, 10, 11, 0.72);
}
.contact__cols {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(40px, 6vw, 92px);
  margin-top: clamp(44px, 5.4vw, 76px);
}
.band--contact .label { color: rgba(10, 10, 11, 0.65); }

.form-v3 {
  flex: 1 1 420px;
  max-width: 680px;
  display: grid;
  gap: clamp(26px, 2.8vw, 36px);
}
.form-v3 label { display: block; }
.form-v3__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(28px, 3vw, 40px);
}

/* The design sets outline:none on these. Keeping the border shift as the
   design's focus cue but not removing the ring: the ring is the only cue a
   keyboard user gets, and dropping it is an accessibility failure. */
.form-v3__line,
.form-v3__area {
  width: 100%;
  box-sizing: border-box;
  margin-top: 12px;
  background: transparent;
  font-family: var(--body);
  font-size: 17px;
  color: var(--ink);
}
.form-v3__line {
  border: none;
  border-bottom: 2px solid rgba(10, 10, 11, 0.32);
  padding: 10px 0;
}
.form-v3__area {
  border: 2px solid rgba(10, 10, 11, 0.32);
  padding: 16px;
  line-height: 1.5;
  resize: vertical;
  min-height: 112px;
}
.form-v3__line:focus { border-bottom-color: var(--ink); }
.form-v3__area:focus { border-color: var(--ink); }
.form-v3__line::placeholder,
.form-v3__area::placeholder { color: rgba(10, 10, 11, 0.45); }

.form-v3__submit {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.form-v3__status { max-width: 46ch; line-height: 1.5; text-transform: none; }
.form-v3__status:empty { display: none; }
/* Light-surface values: this band is paper, so the dark-mode set would fail. */
.form-v3__status[data-kind="error"]   { color: var(--error-on-light); }
.form-v3__status[data-kind="success"] { color: var(--success-on-light); }
.form-v3__status[data-kind="info"]    { color: var(--info-on-light); }

.form-v3__fine {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: rgba(10, 10, 11, 0.7);
}

.contact__aside {
  flex: 0 1 268px;
  padding-top: 4px;
}
.contact__aside-lead {
  margin-top: 14px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.contact__social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
}
.contact__social a {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 2px solid rgba(10, 10, 11, 0.35);
  padding-bottom: 3px;
}
.contact__aside-note {
  margin-top: 16px;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: rgba(10, 10, 11, 0.7);
}
.contact__aside-note a {
  color: var(--ink);
  border-bottom: 1px solid rgba(10, 10, 11, 0.4);
  padding-bottom: 1px;
}

/* --- Footer ------------------------------------------------------------
   Sits on ink directly below the lime-free paper contact band, so the colour
   change is the boundary. */

.foot-v3 {
  padding: clamp(56px, 6.5vw, 96px) clamp(24px, 5vw, 80px) clamp(40px, 4.4vw, 60px);
}
.foot-v3__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(32px, 5vw, 80px);
}
.foot-v3__logo {
  width: 168px;
  height: auto;
  display: block;
}
.foot-v3__slogan {
  margin-top: 26px;
  font-family: var(--display);
  font-size: var(--fs-subhead);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.foot-v3__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.foot-v3__mail {
  font-size: 15px;
  color: var(--paper);
  border-bottom: 1px solid #33333B;
  padding-bottom: 2px;
}
.foot-v3__links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: var(--fs-small);
}
.foot-v3__links a { color: var(--v3-link-ink); }
.foot-v3__legal {
  max-width: 1240px;
  margin: clamp(48px, 5vw, 72px) auto 0;
  padding-top: 24px;
  border-top: 1px solid #1A1A20;
}


/* ==========================================================================
   Legal pages — /privacy and /terms
   One shell shared by both: paper ground, a two-column row per clause with the
   heading in the left rail.
   ========================================================================== */

.legal {
  background: var(--paper);
  color: var(--ink);
  min-height: 100svh;
  box-sizing: border-box;
  padding: clamp(28px, 3.4vw, 46px) clamp(24px, 5vw, 80px) clamp(64px, 7vw, 110px);
}
.legal__inner { max-width: 880px; margin: 0 auto; }

/* styles.css hovers links to paper for the ink ground, which is invisible
   here, and its focus ring is paper for the same reason. */
.legal a:hover { color: var(--v3-muted-paper); }
.legal :focus-visible { outline-color: var(--ink); }

.legal__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
/* height:auto, or the height attribute wins as a presentational hint. */
.legal__logo { width: 164px; height: auto; display: block; }
.legal__back {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--v3-muted-paper);
  border-bottom: 1px solid rgba(10, 10, 11, 0.25);
  padding-bottom: 2px;
}

.legal__eyebrow { margin-top: clamp(56px, 7vw, 116px); }
.legal__title {
  margin-top: 20px;
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.legal__lead {
  margin-top: clamp(26px, 3vw, 40px);
  max-width: 60ch;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.legal__version { margin-top: 26px; }

.legal__body {
  margin-top: clamp(56px, 6.5vw, 96px);
  border-top: 1px solid var(--v3-rule-paper);
}

.legal__row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 2.2vw, 32px);
  padding: clamp(26px, 2.8vw, 38px) 0;
  border-bottom: 1px solid var(--v3-rule-paper);
}
.legal__row h2 {
  flex: 0 0 208px;
  font-size: var(--fs-subhead);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.legal__col {
  flex: 1 1 320px;
  max-width: 58ch;
}

.legal__col p,
.legal__col li {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--v3-legal-body);
}
.legal__col p + p { margin-top: 14px; }
.legal__col .label + p { margin-top: 10px; }
.legal__col ul {
  margin: 16px 0 0;
  padding-left: 18px;
}
.legal__col li + li { margin-top: 8px; }
.legal__col p + ul { margin-top: 16px; }
.legal__col ul + p { margin-top: 18px; }
.legal__col a {
  border-bottom: 1px solid rgba(10, 10, 11, 0.4);
  padding-bottom: 1px;
}

/* "What we collect": three labelled blocks with air rather than rules. */
.legal__stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* "Why, and on what legal basis": each basis is ruled off from the next. */
.legal__basis > div {
  padding: 16px 0;
  border-bottom: 1px solid var(--v3-rule-inner);
}
.legal__basis > div:first-child { padding-top: 0; }
.legal__basis > div:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.legal__note {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--v3-muted-paper);
}
.legal__col .legal__note { margin-top: 8px; }
.legal__after { margin-top: 22px; }

/* Unfilled detail: a deliberate tripwire, not decoration. Every one has to be
   replaced before these pages can be treated as published. */
.todo {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--v3-label);
  background: rgba(10, 10, 11, 0.05);
  padding: 1px 6px;
}

.legal__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(48px, 5.5vw, 80px);
  padding-top: 24px;
  border-top: 1px solid var(--v3-rule-paper);
}
.legal__foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: var(--fs-small);
}
.legal__foot-links a { color: var(--v3-muted-paper); }


/* ==========================================================================
   Header — the original sticky nav, retargeted at v3's sections
   The .site-header, .site-nav and .nav-toggle rules all still live in
   styles.css, including the 860px mobile menu. These are the v3 adjustments.
   ========================================================================== */

/* Aligned to the hero's gutter rather than .shell's, since the hero sits
   directly beneath it and .shell would inset the logo by a further 28px. */
.site-header__inner {
  max-width: none;
  padding-inline: clamp(24px, 5vw, 80px);
}

/* The mark variant, not primary: primary needs 160px of width to keep its LABS
   tag legible, which is too tall for a sticky bar. Mark's floor is 90px. */
.site-header .logo img {
  width: 128px;
  height: auto;
}

/* Lime is spent on the CTA here, so the links signal with weight of colour
   instead: muted at rest, full paper on hover. */
.site-nav a:not(.btn) { color: var(--paper-72); }
.site-nav a:not(.btn):hover { color: var(--paper); }

/* v3 draws its buttons square. */
.site-header .btn--sm,
.site-nav .btn--sm { border-radius: 0; }

/* --- Positioning statement ---------------------------------------------- */

.know__lead {
  margin-top: clamp(34px, 4vw, 52px);
  max-width: 52ch;
  font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.know__lead + .know__list { margin-top: clamp(36px, 4vw, 58px); }

@media (max-width: 860px) {
  :root { --header-h: 94px; }
  .site-header .logo img { width: 108px; }
}