/* ============================================================
   Several — red theme toggle
   Turns all black text / lines red (#DD0404) when active.
   Toggle switch parks bottom-left, aligned to the sidebar,
   and stops above the footer / index-next controls.
   ============================================================ */

:root { --several-red: #DD0404; }

/* ---- Typography: no widows/orphans ----
   Avoid a lone word on the last line of any text block. text-wrap is
   inherited, so body covers everything; browsers without support
   simply wrap as before. */
body { text-wrap: pretty; }

/* ---- Recolour: everything black -> red when the theme is on ----
   Backgrounds and raster media (img/video) are left untouched;
   only foreground colour + borders/lines flip. Inline SVGs that use
   currentColor follow automatically; hard-coded black paths are
   caught by the fill/stroke rules below. */
html.red-theme,
html.red-theme body,
html.red-theme #content {
  color: var(--several-red);
}
html.red-theme *:not(img):not(video):not(picture) {
  color: var(--several-red) !important;
  border-color: var(--several-red) !important;
}
html.red-theme [fill="#000"],
html.red-theme [fill="#000000"],
html.red-theme [fill="black"] { fill: var(--several-red) !important; }
html.red-theme [stroke="#000"],
html.red-theme [stroke="#000000"],
html.red-theme [stroke="black"] { stroke: var(--several-red) !important; }

/* The hamburger / close icons are <img>-loaded SVGs, out of reach of
   the color rules above — a filter maps their black lines to the red. */
html.red-theme .open-menu,
html.red-theme .close-menu {
  /* renders [224,4,0] — measured to match #DD0404 (the earlier chain
     overshot to pure [255,0,0], visibly redder than the text) */
  filter: brightness(0) saturate(100%) invert(11%) sepia(94%) saturate(6552%) hue-rotate(6deg) brightness(88%) contrast(108%);
}

/* ---- The toggle switch ---- */
.theme-toggle {
  position: fixed;
  left: 1rem;            /* JS overrides to line up with the sidebar */
  bottom: 1rem;          /* JS raises this to park above the footer  */
  z-index: 1000;
  width: 46px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: 1px solid currentColor;
  border-radius: 2rem;
  background: transparent;
  color: #000;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
html.red-theme .theme-toggle { color: var(--several-red); }

.theme-toggle .theme-toggle-knob {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  box-sizing: border-box;
  transition: transform .15s ease;
}
.theme-toggle[aria-pressed="true"] .theme-toggle-knob {
  /* symmetric: right gap when on == left gap when off (46 - 16 - 3 - 3) */
  transform: translateX(22px);
}

/* Keyboard focus */
.theme-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Below 992px (Webflow's tablet breakpoint) the nav collapses into a
   hamburger and the link list is hidden until it is opened. The toggle
   lives inside that list, so here we drop it back into flow (under the
   links) — it then shows only while the menu is open. JS clears its
   inline coords at this width so these rules win.
   NOTE: position must be relative (not static) so the absolutely-
   positioned knob stays anchored inside the pill. */
@media (max-width: 991px) {
  .theme-toggle {
    position: relative;
    /* neutralize the desktop fixed-mode coords — with position:relative
       the base left/bottom would otherwise shift the pill 1rem right/up,
       leaving it misaligned with the links above it */
    left: auto;
    bottom: auto;
    margin-top: 0.5rem;
    align-self: flex-start;
  }

  /* Bigger tap target for the hamburger — the icon is only ~23x12px.
     The Webflow click interaction is bound to the container, so widening
     it widens the clickable area. */
  .hamburger-container {
    width: 5rem;
    min-height: 3rem;
    cursor: pointer;
  }

  /* Breathing room between the menu links — they used to sit edge to
     edge (22px rows, 0 gap), making mis-taps easy. The padding grows
     each link's tap target and yields a 0.625rem visual gap, the same
     small-spacing step used elsewhere on the site. */
  .flex-vertical.sub-menu .collection-div a {
    padding: 0.3125rem 0;
  }

  /* Webflow sizes the open hamburger menu to calc(100vh - 3/4rem), but
     the menu starts right under the ~1.3rem brand row, so the white
     overlay stops short and page content peeks through at the bottom.
     The overlay is position:fixed, so oversizing is simply clipped at
     the viewport edge — 100dvh also tracks mobile URL bars. */
  .flex-vertical.sub-menu,
  .flex-vertical.sub-menu.big-gap {
    height: 100vh;
    height: 100dvh;
    /* top-align the links (Webflow centered them on tablet) and pad so
       the first link's text lands where page content starts — level
       with the homepage tagline */
    justify-content: flex-start;
    padding-top: 0.8125rem;
    /* left-align the link groups too: Webflow centers them, and since
       the two .collection-divs have different natural widths, Shop /
       Contact sat ~1px right of Work / Services / About and off the
       content start line */
    align-items: flex-start;
  }

  /* Keep the brand bar's layout identical whether the menu is open or
     closed. Webflow centers the bar's flex column, so the logo's
     offset depended on the bar's height — which balloons to 100dvh+
     when the menu opens. iOS Safari resolves that overflow centering
     against the closed state and the logo visibly jumped up on open.
     Start-align the column and center the logo inside a fixed-height
     brand row instead (3rem = the bar's content box, so the resting
     position is unchanged). */
  .div-block-31 {
    justify-content: flex-start;
  }

  .brand {
    display: flex;
    align-items: center;
    /* = the bar's 4rem min-height, so the logo centers exactly where
       Webflow's bar-centering used to put it, level with the icon */
    min-height: 4rem;
  }
}

@media (max-width: 767px) {
  /* phone bar is shorter than the tablet one, so the menu needs more
     padding to reach the same content start line */
  .flex-vertical.sub-menu,
  .flex-vertical.sub-menu.big-gap {
    padding-top: 1.5625rem;
  }
}

@media (max-width: 479px) {
  /* phone bar is 3rem min with the logo's 3.25rem line box driving the
     height — mirror that on the brand row so nothing shifts */
  .brand {
    min-height: 3.25rem;
  }
}

/* The rem base (html font-size) is set per breakpoint as fixed px in
   each page's inline head style — no vw scaling. The phone bump to
   16px lives there too. */