/* Header-specific design values. Keep these custom properties isolated from
 * the rest of the legacy application until each surface is migrated. */

:root {
  --coak-color-brand: #cf4242;
  --coak-color-brand-hover: #b73535;
  --coak-color-on-brand: #fff;
  --coak-color-accent: #a9632d;
  --coak-color-accent-hover: #85491d;
  --coak-color-accent-soft: #fbf4ee;
  --coak-color-text: #2e2722;
  --coak-color-text-muted: #6f6258;
  --coak-color-surface: #fff;
  --coak-color-surface-muted: #f5f1ed;
  --coak-color-border: #ded6cf;
  --coak-color-border-strong: #cbbdb2;
  --coak-color-focus: #1268d3;
  --coak-color-marker-underline: #247c9f;
  --coak-color-craft-ink: #382b22;
  --coak-color-craft-on-dark: #fff;
  --coak-color-craft-wood: #dfad7e;
  --coak-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --coak-font-comic: "LintMcCreeIntlBBRegular", "Comic Sans MS", cursive;
  --coak-control-size: 44px;
  --coak-space-1: 4px;
  --coak-space-2: 8px;
  --coak-space-3: 12px;
  --coak-space-4: 16px;
  --coak-space-5: 24px;
  --coak-space-6: 32px;
  --coak-radius-md: 8px;
  --coak-radius-lg: 12px;
  --coak-shadow-sm: 0 1px 2px rgb(46 39 34 / 12%);
  --coak-shadow-md: 0 4px 16px rgb(46 39 34 / 14%);
  --coak-shadow-inset-sm: 0 3px 6px rgb(46 39 34 / 10%) inset;

  /* The source texture is colour-neutral; themes own its ink treatment here. */
  --coak-marker-underline-filter: sepia(100%) saturate(520%) hue-rotate(145deg) brightness(72%);
  --coak-content-width: 1272px;
  --coak-content-gutter: clamp(16px, 3vw, 32px);
  --site-nav-secondary-size: 63px;
}
/* Keep Rails asset resolution isolated so component styles remain plain CSS. */

:root {
  --coak-image-wood: url("https://assets.coplusk.net/assets/layout/background-47dc3fcdc598e6e2f6803b989a044c1e6f5eec3a143d01a594d49f30842f7e6d.jpg");
  --coak-image-ribbon: url("https://assets.coplusk.net/assets/textures/ribbon-grosgrain-52577d139ed53836ecd55019cf7921395217b2fbdc87805844fffcba41bfa018.png");
  --coak-image-ribbon-stitches: url("https://assets.coplusk.net/assets/textures/ribbon-stitches-7307a32e7af5291006dc73ee00475ee4a25c03ef3d97adbea3b27da608d16c27.svg");
  --coak-image-marker-underline: url("https://assets.coplusk.net/assets/textures/felt-tip-underline-3ea69b41da623dcded351900714d4cb2a650e1a05077566466d41572e6ce98bc.png");
  --coak-image-zigzag-mask: url("https://assets.coplusk.net/assets/zigzag-392df8d6b7605c64eac73264b2f3709a67c065ca22832176c47c60cb633ff19d.svg");
}
/*
 * Web Fonts from fontspring.com
 *
 * All OpenType features and all extended glyphs have been removed.
 * Fully installable fonts can be purchased at http://www.fontspring.com
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Fontspring. The fonts are protected under domestic and international trademark and 
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2010-2014 Fontspring
 *
 *
 *
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * Vendor:      Blambot
 * License URL: http://www.fontspring.com/fflicense/blambot
 *
 *
 */


@font-face {
    font-family: 'LintMcCreeIntlBBRegular';
    src: url('https://assets.coplusk.net/assets/lmintlbb_r-webfont-7aeacd1348729f1c34c76965b99f5d09450a156838e66c59c88eab387e1fb5ff.eot');
    src: url('https://assets.coplusk.net/assets/lmintlbb_r-webfont-7aeacd1348729f1c34c76965b99f5d09450a156838e66c59c88eab387e1fb5ff.eot?#iefix') format('embedded-opentype'),
         url('https://assets.coplusk.net/assets/lmintlbb_r-webfont-f662cb57cb5711231b6212ceeaa48d97dd0086ef060139b75d8206d67e40d6dc.woff') format('woff'),
         url('https://assets.coplusk.net/assets/lmintlbb_r-webfont-a2ec1e77cca921eec2a2aacc452680920e0c2b4eff872d396555d1d099ca05cf.ttf') format('truetype'),
         url('https://assets.coplusk.net/assets/lmintlbb_r-webfont-1729978a4988ccaa6eb4a76e65b9aca5a4365266b5e672f4ad5999040debd770.svg#LintMcCreeIntlBBRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}



.comic {
	font-family:'LintMcCreeIntlBBRegular', 'Comic Sans MS', cursive;
	font-weight:normal !important;
	font-style: normal !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* Generated felt-tip ink becomes a reusable border-image underline. Components
 * can tune its inset, thickness and colour filter without owning the texture. */

.coak-marker-underline-trigger,
.coak-marker-underline-trigger:hover,
.coak-marker-underline-trigger:focus-visible,
.coak-marker-underline-trigger[aria-current] {
  text-decoration: none;
}

.coak-marker-underline {
  --coak-marker-underline-cap-size: 10px;
  --coak-marker-underline-size: 7px;
  --coak-marker-underline-top-size: 1px;

  position: relative;
  display: inline-block;
  padding-inline: 2px;
  text-decoration: none;
}

.coak-marker-underline::after {
  position: absolute;
  inset-block-end: -7px;
  inset-inline: -2px;
  z-index: 1;
  block-size: 0;
  border-color: transparent;
  border-style: solid;
  border-width:
    var(--coak-marker-underline-top-size)
    var(--coak-marker-underline-cap-size)
    calc(var(--coak-marker-underline-size) - var(--coak-marker-underline-top-size));
  border-image:
    var(--coak-image-marker-underline)
    4 48 28 48 /
    var(--coak-marker-underline-top-size)
    var(--coak-marker-underline-cap-size)
    calc(var(--coak-marker-underline-size) - var(--coak-marker-underline-top-size)) /
    0
    stretch;
  content: "";
  filter: var(--coak-marker-underline-filter);
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px) rotate(-0.35deg) scaleX(0.72);
  transform-origin: center;
  transition: opacity 120ms ease, transform 160ms ease;
}

.coak-marker-underline-trigger:hover > .coak-marker-underline::after,
.coak-marker-underline-trigger:focus-visible > .coak-marker-underline::after,
.coak-marker-underline-trigger[aria-current] > .coak-marker-underline::after {
  opacity: 0.96;
  transform: translateY(0) rotate(-0.35deg) scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .coak-marker-underline::after {
    transition: none;
  }
}
/* A soft cast shadow for the edge of paper, ribbon and other craft materials. */

.coak-edge-shadow {
  --coak-edge-shadow-inline-size: min(100%, var(--coak-content-width));
  --coak-edge-shadow-origin: center top;

  position: absolute;
  inset-inline: 0;
  inline-size: var(--coak-edge-shadow-inline-size);
  block-size: 12px;
  margin-inline: auto;
  background: radial-gradient(
    ellipse at var(--coak-edge-shadow-origin),
    color-mix(in srgb, var(--coak-color-craft-ink) 18%, transparent) 0,
    color-mix(in srgb, var(--coak-color-craft-ink) 7%, transparent) 48%,
    transparent 82%
  );
  content: "";
  filter: blur(2px);
  pointer-events: none;
}

.coak-edge-shadow--full {
  --coak-edge-shadow-inline-size: 100%;
}

.coak-edge-shadow--top {
  --coak-edge-shadow-origin: center bottom;

  inset-block-end: calc(100% - 1px);
}

.coak-edge-shadow--bottom {
  inset-block-start: calc(100% - 8px);
}
:root {
  --site-header-mobile-masthead-size: 60px;
  --site-header-mobile-ribbon-size: 48px;
  --site-header-mobile-base-size: calc(
    var(--site-header-mobile-masthead-size) +
    var(--site-header-mobile-ribbon-size)
  );
}

.site-header {
  --site-header-brand-track: 372px;
  --site-header-character-track: 133px;
  --site-header-character-half-track: 66.5px;
  --site-header-masthead-gap: var(--coak-space-5);
  --site-nav-second-row-min-size: 56px;
  --site-safe-area-top: env(safe-area-inset-top, 0px);
  --site-safe-area-right: env(safe-area-inset-right, 0px);
  --site-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --site-safe-area-left: env(safe-area-inset-left, 0px);

  position: relative;
  z-index: 1000;
  display: grid;
  grid-template-areas:
    "utility"
    "masthead"
    "primary"
    "secondary";
  color: var(--coak-color-craft-on-dark, var(--coak-color-on-brand));
  background: transparent;
  box-shadow: none;
  font-family: var(--coak-font-sans);
}

.site-header,
.site-header *,
.site-header *::before,
.site-header *::after {
  box-sizing: border-box;
}

.site-header .coak-container {
  inline-size: min(100%, var(--coak-content-width));
  margin-inline: auto;
  padding-inline-start: max(var(--coak-content-gutter), var(--site-safe-area-left));
  padding-inline-end: max(var(--coak-content-gutter), var(--site-safe-area-right));
}

.site-header .coak-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.site-header :where(a) {
  color: inherit;
  text-decoration: none;
}

.site-header a:focus-visible,
.site-header button:focus-visible,
.site-header input:focus-visible {
  outline: 3px solid var(--coak-color-focus);
  outline-offset: 2px;
}

.site-header__masthead {
  grid-area: masthead;
  background-color: var(--coak-color-craft-wood, var(--coak-color-accent));
  background-image: var(--coak-image-wood);
  background-position: center -54px;
  background-repeat: repeat;
}

.site-header__main {
  display: grid;
  grid-template-areas: "brand character spacer account";
  grid-template-columns:
    var(--site-header-brand-track)
    var(--site-header-character-track)
    minmax(64px, 1fr)
    auto;
  gap: var(--site-header-masthead-gap);
  align-items: center;
  justify-content: space-between;
  min-block-size: 92px;
}

.site-header__menu-toggle,
.site-header__search-toggle {
  display: none;
  cursor: pointer;
}

.mobile-ribbon {
  display: none;
}

.site-header__mobile-navigation {
  display: none;
}

.site-header__desktop-navigation {
  display: contents;
}

.site-header__menu-toggle .coak-icon,
.site-header__search-toggle .coak-icon {
  inline-size: 24px;
  block-size: 24px;
}

.site-header__brand {
  position: relative;
  grid-area: brand;
  min-inline-size: 0;
  padding-block: var(--coak-space-3);
}

.site-header__brand-link,
.site-header__brand-picture,
.site-header__brand-image {
  display: block;
}

.site-header__brand-image {
  inline-size: min(100%, 372px);
  block-size: auto;
}

.site-header__tagline {
  margin: var(--coak-space-1) 0 0;
  color: var(--coak-color-craft-ink, var(--coak-color-text));
  font-family: var(--coak-font-comic, var(--coak-font-sans));
  font-size: 13px;
  line-height: 13px;
  white-space: nowrap;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--coak-color-surface) 45%, transparent);
}

.site-header__character-stage {
  position: relative;
  grid-area: character;
  display: grid;
  place-items: end center;
  align-self: stretch;
  min-inline-size: 0;
}

.site-header__character {
  align-self: end;
  justify-self: center;
  block-size: 92px;
}

.site-header__character-image {
  inline-size: auto;
  block-size: 100%;
}

.site-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  min-inline-size: 0;
  border: 1px solid var(--coak-color-border-strong);
  border-radius: 999px;
  background: var(--coak-color-surface);
  box-shadow: var(--coak-shadow-inset-sm);
  overflow: hidden;
}

.site-search--subnav {
  display: none;
  inline-size: min(720px, calc(100% - (2 * var(--coak-content-gutter))));
  margin-inline: auto;
}

.site-header[data-search-open] .site-search--subnav {
  display: grid;
}

.site-search:focus-within {
  border-color: var(--coak-color-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--coak-color-focus) 20%, transparent);
}

.site-search__input,
.site-search__submit {
  min-block-size: var(--coak-control-size);
  border: 0;
  font: inherit;
}

.site-search__input {
  min-inline-size: 0;
  padding-inline: var(--coak-space-4);
  color: var(--coak-color-text);
  background: transparent;
}

.site-search__submit {
  display: inline-flex;
  gap: var(--coak-space-1);
  align-items: center;
  padding-inline: var(--coak-space-4);
  color: var(--coak-color-on-brand);
  background: var(--coak-color-brand);
  cursor: pointer;
}

.site-search__submit:hover {
  background: var(--coak-color-brand-hover);
}

.site-account {
  position: relative;
  grid-area: account;
  display: grid;
  place-items: center;
  min-inline-size: 72px;
}

.site-account__login {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--coak-control-size);
  padding-inline: var(--coak-space-4);
  color: var(--coak-color-on-brand);
  background: var(--coak-color-brand);
  border-radius: var(--coak-radius-md);
  font-weight: 700;
  white-space: nowrap;
}

.site-account__profile-menu {
  position: relative;
  margin: 0;
}

.site-account__profile {
  display: block;
  cursor: pointer;
  list-style: none;
}

.site-account__profile::marker {
  content: "";
}

.site-account__avatar {
  display: block;
  inline-size: 64px;
  block-size: 64px;
  border: 3px solid var(--coak-color-surface);
  border-radius: 50%;
  box-shadow: var(--coak-shadow-sm);
}

.site-account__notification-count {
  position: absolute;
  inset-inline-end: -4px;
  inset-block-end: 0;
  min-inline-size: 22px;
  padding: 2px 6px;
  color: var(--coak-color-on-brand);
  background: var(--coak-color-brand);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.site-header__utility {
  grid-area: utility;
  min-inline-size: 0;
  padding-block-start: var(--site-safe-area-top);
  color: var(--coak-color-craft-on-dark, var(--coak-color-on-brand));
  background-color: var(--coak-color-craft-wood, var(--coak-color-accent));
  background-image: var(--coak-image-wood);
  background-position: center top;
  background-repeat: repeat;
}

.site-header__utility-inner {
  display: grid;
  grid-template-columns:
    var(--site-header-brand-track)
    var(--site-header-character-track)
    minmax(0, 1fr);
  gap: var(--site-header-masthead-gap);
  align-items: center;
  min-block-size: 52px;
}

.site-header__announcement {
  position: relative;
  z-index: 2;
  grid-column: 1 / 3;
  align-self: end;
  justify-self: end;
  inline-size: max-content;
  margin-block-end: var(--coak-space-1);
  margin-inline-end: calc(var(--site-header-character-half-track) - 24px);
  padding: var(--coak-space-2) var(--coak-space-4);
  overflow: visible;
  color: var(--coak-color-craft-ink, var(--coak-color-text));
  background: var(--coak-color-surface);
  border: 1px solid color-mix(in srgb, var(--coak-color-craft-ink) 18%, transparent);
  border-radius: 999px;
  box-shadow: var(--coak-shadow-sm);
  font-family: var(--coak-font-comic, var(--coak-font-sans));
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.site-header__announcement::after {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-end: 24px;
  inline-size: 0;
  block-size: 0;
  border: 7px solid transparent;
  border-block-start-color: var(--coak-color-surface);
  content: "";
}

.site-header__announcement strong {
  margin-inline-start: var(--coak-space-2);
  color: var(--coak-color-accent-hover);
}

.utility-nav {
  grid-column: 3;
  min-inline-size: 0;
  inline-size: 100%;
  container: utility-navigation / inline-size;
}

.utility-nav__heading {
  display: none;
}

.utility-nav__list,
.site-primary-nav__submenu,
.site-secondary-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.utility-nav__list {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  inline-size: max-content;
  max-inline-size: 100%;
  margin-inline-start: auto;
  padding-inline: var(--coak-space-1);
  color: var(--coak-color-craft-on-dark, var(--coak-color-on-brand));
  background: color-mix(in srgb, var(--coak-color-craft-ink) 24%, transparent);
  border: 1px solid color-mix(in srgb, var(--coak-color-surface) 18%, transparent);
  border-radius: 999px;
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--coak-color-surface) 12%, transparent) inset,
    0 1px 3px color-mix(in srgb, var(--coak-color-craft-ink) 14%, transparent);
}

.utility-nav__link {
  display: flex;
  align-items: center;
  min-block-size: 36px;
  padding-inline: var(--coak-space-2);
  font-size: 13px;
  font-weight: 650;
  text-shadow: 0 1px 1px color-mix(in srgb, var(--coak-color-craft-ink) 45%, transparent);
}

.utility-nav__link:hover,
.utility-nav__link:focus-visible {
  color: inherit;
  background: color-mix(in srgb, var(--coak-color-surface) 16%, transparent);
}

@container utility-navigation (max-width: 528px) {
  .utility-nav__list {
    display: none;
  }
}

.site-header__navigation {
  display: contents;
}

.site-primary-nav {
  --site-nav-tab-bridge: 12px;
  --site-nav-tab-offset: 6px;

  position: relative;
  grid-area: primary;
  z-index: 2;
  isolation: isolate;
  min-inline-size: 0;
  color: var(--coak-color-on-brand);
  background-color: var(--coak-color-brand);
  background-image: var(--coak-image-ribbon);
  background-position: center;
  background-repeat: repeat;
  background-size: 128px 128px;
  background-blend-mode: overlay;
  border-style: solid;
  border-width: 4px 0;
  border-image-source: var(--coak-image-ribbon-stitches);
  border-image-slice: 4 0;
  border-image-width: 4px 0;
  border-image-repeat: round;
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--coak-color-surface) 12%, transparent) inset,
    0 -1px 0 color-mix(in srgb, var(--coak-color-brand-hover) 18%, transparent) inset;
}

.site-primary-nav::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(
      106deg,
      transparent 3%,
      color-mix(in srgb, var(--coak-color-surface) 7%, transparent) 17%,
      transparent 29%,
      color-mix(in srgb, var(--coak-color-brand-hover) 5%, transparent) 43%,
      transparent 55%,
      color-mix(in srgb, var(--coak-color-surface) 6%, transparent) 70%,
      transparent 81%,
      color-mix(in srgb, var(--coak-color-brand-hover) 4%, transparent) 92%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--coak-color-surface) 5%, transparent),
      transparent 42%,
      color-mix(in srgb, var(--coak-color-brand-hover) 6%, transparent)
    );
  content: "";
  pointer-events: none;
}

.site-primary-nav > .coak-edge-shadow {
  z-index: 4;
}

.site-primary-nav__subnav-shadow {
  z-index: 4;
  display: none;
}

.site-primary-nav__layout {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr);
  align-items: stretch;
}

.site-primary-nav__badge {
  position: relative;
  z-index: 5;
  align-self: center;
  justify-self: center;
  inline-size: 60px;
  block-size: 60px;
  margin-block: -8px;
  border-radius: 50%;
  box-shadow: var(--coak-shadow-sm);
  object-fit: cover;
  pointer-events: none;
}

.site-primary-nav__list {
  z-index: 2;
  display: grid;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-primary-nav__list--left {
  grid-template-columns: max-content repeat(3, minmax(0, 1fr));
}

.site-primary-nav__list--right {
  grid-template-columns: repeat(4, minmax(0, 1fr)) max-content;
}

.site-primary-nav--section .site-primary-nav__list {
  display: flex;
}

.site-primary-nav--section .site-primary-nav__layout {
  grid-template-columns: minmax(0, 1fr) max-content;
}

.site-primary-nav--section .site-primary-nav__item {
  flex: 1 1 auto;
}

.site-primary-nav--section .site-primary-nav__badge {
  display: none;
}

.site-primary-nav__item {
  --site-nav-tab-shape: polygon(
    2px 1px,
    calc(100% - 3px) 0,
    100% 2px,
    calc(100% - 1px) 100%,
    0 100%
  );

  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-inline-size: 0;
}

.site-primary-nav__item:nth-child(3n + 2) {
  --site-nav-tab-shape: polygon(
    0 3px,
    calc(100% - 2px) 0,
    100% 4px,
    calc(100% - 3px) 100%,
    2px calc(100% - 1px)
  );
}

.site-primary-nav__item:nth-child(3n) {
  --site-nav-tab-shape: polygon(
    3px 0,
    100% 2px,
    calc(100% - 1px) calc(100% - 2px),
    calc(100% - 4px) 100%,
    0 calc(100% - 1px),
    1px 3px
  );
}

.site-primary-nav__link {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  min-inline-size: 0;
  min-block-size: var(--coak-control-size);
  padding-inline: var(--coak-space-2);
  overflow: hidden;
  font-family: var(--coak-font-sans);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-primary-nav__label--compact {
  display: none;
}

.site-primary-nav__home-link .coak-icon,
.site-primary-nav__search-toggle .coak-icon {
  inline-size: 22px;
  block-size: 22px;
}

.site-primary-nav__home-link {
  inline-size: 100%;
  min-inline-size: var(--coak-control-size);
  justify-self: stretch;
}

.site-primary-nav__home-link--labeled {
  grid-auto-flow: column;
  gap: var(--coak-space-2);
  inline-size: 100%;
  padding-inline: var(--coak-space-3);
}

.site-primary-nav__search-toggle {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  inline-size: 100%;
  min-inline-size: var(--coak-control-size);
  min-block-size: var(--coak-control-size);
  padding: var(--coak-space-2);
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.site-primary-nav__search-item {
  --site-nav-tab-shape: polygon(
    2px 1px,
    calc(100% - 3px) 0,
    100% 2px,
    calc(100% - 1px) 100%,
    0 100%
  );

  position: relative;
  z-index: 3;
  display: grid;
  min-inline-size: 0;
}

/* The active paper tab crosses the stitched ribbon edge into the row below. */
.site-primary-nav__item.is-current .site-primary-nav__link,
.site-primary-nav__item.is-previewing .site-primary-nav__link,
.site-primary-nav__link:hover,
.site-primary-nav__link:focus,
.site-primary-nav__link:focus-visible,
.site-primary-nav__link:active,
.site-primary-nav__search-toggle:hover,
.site-primary-nav__search-toggle:focus-visible,
.site-header[data-search-open] .site-primary-nav__search-toggle {
  z-index: 5;
  min-block-size: calc(var(--coak-control-size) + var(--site-nav-tab-bridge));
  margin-block-end: calc(-1 * var(--site-nav-tab-bridge));
  color: var(--coak-color-brand-hover);
  background: var(--coak-color-surface);
  border-radius: 0;
  box-shadow: 0 -2px 5px color-mix(in srgb, var(--coak-color-text) 12%, transparent);
  clip-path: var(--site-nav-tab-shape);
  text-decoration: none;
  transform: translateY(calc(-1 * var(--site-nav-tab-offset)));
}

.site-primary-nav__layout:has(.site-primary-nav__item:hover)
  .site-primary-nav__item.is-current:not(:hover)
  .site-primary-nav__link,
.site-primary-nav__layout:has(.site-primary-nav__item:focus-within)
  .site-primary-nav__item.is-current:not(:focus-within)
  .site-primary-nav__link,
.site-primary-nav__layout:has(.site-primary-nav__search-toggle:hover)
  .site-primary-nav__item.is-current
  .site-primary-nav__link,
.site-primary-nav__layout:has(.site-primary-nav__search-toggle:focus-visible)
  .site-primary-nav__item.is-current
  .site-primary-nav__link,
.site-header[data-subnav-preview]
  .site-primary-nav__item.is-current:not(.is-previewing)
  .site-primary-nav__link,
.site-header[data-search-open]
  .site-primary-nav__item.is-current
  .site-primary-nav__link {
  z-index: 3;
  min-block-size: var(--coak-control-size);
  margin-block-end: 0;
  color: var(--coak-color-on-brand);
  background: transparent;
  box-shadow: none;
  clip-path: none;
  transform: none;
}

.site-primary-nav__disclosure {
  display: none;
}

.site-primary-nav__submenu {
  display: none;
}

.site-primary-nav__submenu-link,
.site-primary-nav__submenu-link:visited {
  display: grid;
  place-items: center;
  min-block-size: var(--site-nav-second-row-min-size);
  padding: var(--coak-space-2) var(--coak-space-3);
  overflow: hidden;
  color: var(--coak-color-text-muted);
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: center;
  text-wrap: balance;
  white-space: normal;
}

.site-primary-nav__submenu-item + .site-primary-nav__submenu-item,
.site-secondary-nav__item + .site-secondary-nav__item {
  border-inline-start: 1px dashed color-mix(in srgb, var(--coak-color-border-strong) 72%, transparent);
}

.site-primary-nav__submenu-link:hover,
.site-primary-nav__submenu-link:focus-visible {
  color: var(--coak-color-marker-underline);
  background: color-mix(in srgb, var(--coak-color-marker-underline) 8%, var(--coak-color-surface));
}

.site-secondary-nav {
  position: relative;
  z-index: 1;
  grid-area: secondary;
  min-inline-size: 0;
  min-block-size: var(--site-nav-secondary-size);
  padding-block-end: 6px;
  background: transparent;
}

.site-secondary-nav > .coak-edge-shadow {
  z-index: 0;
}

.site-secondary-nav--empty > .coak-edge-shadow {
  display: none;
}

.site-header[data-search-open] .site-secondary-nav--empty > .coak-edge-shadow {
  display: block;
}

.site-secondary-nav--empty .site-secondary-nav__list {
  display: none;
}

.site-header[data-subnav-preview] .site-secondary-nav__list {
  display: flex;
}

.site-header[data-search-open] .site-secondary-nav__list {
  display: none;
}

.site-header[data-search-open] .site-secondary-nav__search-panel {
  display: grid;
  place-items: center;
}

.site-secondary-nav__list {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  min-inline-size: 0;
  margin-inline: auto;
  overflow: visible;
}

.site-secondary-nav__list,
.site-secondary-nav__search-panel {
  background-color: var(--coak-color-surface);
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--coak-color-surface) 82%, transparent),
      color-mix(in srgb, var(--coak-color-surface-muted) 62%, transparent)
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 7px,
      color-mix(in srgb, var(--coak-color-text-muted) 3%, transparent) 8px
    );
  border: 1px solid var(--coak-color-border);
  border-block-start: 0;
  border-radius: 0 0 2px 3px;
  box-shadow: none;
}

.site-header .site-secondary-nav__list,
.site-header .site-secondary-nav__search-panel {
  padding-inline-start: var(--site-safe-area-left);
  padding-inline-end: var(--site-safe-area-right);
}

.site-secondary-nav__search-panel {
  position: relative;
  z-index: 1;
  display: none;
  min-block-size: calc(var(--site-nav-secondary-size) - 6px);
  margin-inline: auto;
}

.site-secondary-nav__item {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.site-secondary-nav__link,
.site-secondary-nav__link:visited {
  position: relative;
  display: grid;
  place-items: center;
  block-size: 100%;
  min-block-size: var(--site-nav-second-row-min-size);
  padding: var(--coak-space-2) var(--coak-space-3);
  overflow: hidden;
  color: var(--coak-color-text-muted);
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: center;
  text-wrap: balance;
  white-space: normal;
}

.site-secondary-nav__link:hover,
.site-secondary-nav__link:focus-visible {
  color: var(--coak-color-marker-underline);
  background: color-mix(in srgb, var(--coak-color-marker-underline) 8%, var(--coak-color-surface));
}

.site-secondary-nav__item.is-current .site-secondary-nav__link {
  color: var(--coak-color-marker-underline);
  background: var(--coak-color-surface);
  font-weight: 700;
}

.site-header__mask {
  position: fixed;
  z-index: 9998;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--coak-color-text) 42%, transparent);
  cursor: pointer;
}

.site-header__mask[hidden] {
  display: none;
}

.site-account-menu {
  position: absolute;
  inset-block-start: calc(100% + var(--coak-space-2));
  inset-inline-end: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(80px, 1fr));
  inline-size: min(448px, calc(100vw - (2 * var(--coak-space-4))));
  padding: var(--coak-space-2);
  background: var(--coak-color-surface);
  border: 1px solid var(--coak-color-border);
  border-radius: var(--coak-radius-md);
  box-shadow: var(--coak-shadow-md);
}

.site-account-menu__link {
  display: grid;
  place-items: center;
  min-block-size: 64px;
  padding: var(--coak-space-2);
  border: 0;
  background: transparent;
  text-align: center;
}

.site-account-menu__button {
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.site-account-menu__label {
  color: var(--coak-color-text-muted);
  font-size: 12px;
}

.site-account-menu__count {
  font-size: 18px;
  font-weight: 700;
}

@media (min-width: 1280px) {
  .site-header {
    --site-header-brand-track: 400px;
    --site-header-character-track: 144px;
    --site-header-character-half-track: 72px;
    --site-header-masthead-gap: var(--coak-space-6);
  }

  .site-header__main {
    min-block-size: 104px;
  }

  .site-header__brand-image {
    inline-size: min(100%, 400px);
  }

  .site-header__character {
    block-size: 104px;
  }
}

@media (min-width: 833px) {
  .site-primary-nav__item:has(> .site-primary-nav__subnav-shadow) {
    position: relative;
  }

  .site-header:not([data-subnav-preview], [data-search-open]):has(
      .site-secondary-nav:not(.site-secondary-nav--empty)
    )
    .site-primary-nav__item.is-current
    > .site-primary-nav__subnav-shadow,
  .site-header[data-subnav-preview]:not([data-search-open])
    .site-primary-nav__item.is-previewing
    > .site-primary-nav__subnav-shadow {
    display: block;
  }

  .site-secondary-nav {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    inline-size: 100%;
  }

  .site-header + .site-main-layer {
    padding-block-start: var(--site-nav-secondary-size);
  }
}

@media (min-width: 833px) and (max-width: 1120px) {
  .site-primary-nav__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .site-primary-nav__badge {
    display: none;
  }
}

@media (min-width: 833px) and (max-width: 1024px) {
  .site-primary-nav__label--full {
    display: none;
  }

  .site-primary-nav__label--compact {
    display: inline;
  }

  .site-header__utility {
    display: none;
  }
}

@media (max-width: 1024px) {
  .site-header__utility {
    padding-block-start: 0;
  }

  .site-header__masthead {
    padding-block-start: var(--site-safe-area-top);
  }

  .site-header__main {
    grid-template-areas: "brand spacer account";
    grid-template-columns: minmax(256px, 1fr) minmax(64px, 1fr) auto;
    gap: var(--coak-space-3);
  }

  .site-header__character-stage {
    display: none;
  }

  .site-header__tagline {
    font-size: 13px;
    white-space: nowrap;
  }
}

@media (max-width: 832px) {
  .site-primary-nav > .coak-edge-shadow,
  .site-secondary-nav > .coak-edge-shadow {
    display: none;
  }

  html {
    /*
     * Chrome on iOS can keep the layout viewport inside the landscape safe
     * area even with viewport-fit=cover. Root backgrounds still paint its
     * canvas, so mirror the header bands there while controls remain inset.
     */
    min-block-size: 100%;
    background-image:
      linear-gradient(
        to bottom,
        transparent 0 var(--site-header-mobile-base-size),
        var(--coak-color-accent-soft) var(--site-header-mobile-base-size)
      ),
      linear-gradient(
        to bottom,
        transparent 0 var(--site-header-mobile-masthead-size),
        color-mix(in srgb, var(--coak-color-on-brand) 24%, transparent)
          var(--site-header-mobile-masthead-size)
          calc(var(--site-header-mobile-masthead-size) + 2px),
        transparent
          calc(var(--site-header-mobile-masthead-size) + 2px)
          calc(var(--site-header-mobile-base-size) - 2px),
        color-mix(in srgb, var(--coak-color-brand-hover) 38%, transparent)
          calc(var(--site-header-mobile-base-size) - 2px)
          var(--site-header-mobile-base-size),
        transparent var(--site-header-mobile-base-size)
      ),
      linear-gradient(
        106deg,
        transparent 10%,
        color-mix(in srgb, var(--coak-color-surface) 8%, transparent) 36%,
        transparent 58%,
        color-mix(in srgb, var(--coak-color-brand-hover) 7%, transparent) 82%
      ),
      var(--coak-image-ribbon),
      linear-gradient(
        to bottom,
        transparent 0 var(--site-header-mobile-masthead-size),
        var(--coak-color-brand)
          var(--site-header-mobile-masthead-size)
          var(--site-header-mobile-base-size),
        transparent var(--site-header-mobile-base-size)
      ),
      var(--coak-image-wood);
    background-position:
      0 0,
      0 0,
      0 var(--site-header-mobile-masthead-size),
      0 var(--site-header-mobile-masthead-size),
      0 0,
      center -54px;
    background-size:
      100% 100%,
      100% 100%,
      100% var(--site-header-mobile-ribbon-size),
      128px 128px,
      100% 100%,
      auto;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat-x, no-repeat, repeat;
    background-blend-mode: normal, normal, soft-light, overlay, normal, normal;
  }

  .site-header {
    --site-header-mobile-size: calc(
      var(--site-safe-area-top) +
      var(--site-header-mobile-base-size)
    );

    display: block;
  }

  body.site-menu-open {
    overflow: hidden;
  }

  .site-header__masthead {
    position: relative;
    z-index: 10000;
  }

  .site-header__main {
    grid-template-areas: "brand account";
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--coak-space-2);
    min-block-size: var(--site-header-mobile-masthead-size);
    padding-block: var(--coak-space-2);
  }

  .mobile-ribbon {
    position: relative;
    z-index: 10000;
    display: block;
    min-block-size: var(--site-header-mobile-ribbon-size);
    color: var(--coak-color-on-brand);
    background-color: var(--coak-color-brand);
    background-image:
      linear-gradient(
        106deg,
        transparent 10%,
        color-mix(in srgb, var(--coak-color-surface) 8%, transparent) 36%,
        transparent 58%,
        color-mix(in srgb, var(--coak-color-brand-hover) 7%, transparent) 82%
      ),
      var(--coak-image-ribbon);
    background-size: auto, 128px 128px;
    background-blend-mode: soft-light, overlay;
    border-block-start: 2px solid color-mix(in srgb, var(--coak-color-on-brand) 24%, transparent);
    border-block-end: 2px solid color-mix(in srgb, var(--coak-color-brand-hover) 38%, transparent);
    box-shadow:
      0 1px 0 color-mix(in srgb, var(--coak-color-on-brand) 10%, transparent) inset,
      0 -1px 0 color-mix(in srgb, var(--coak-color-brand-hover) 16%, transparent) inset,
      0 2px 2px -1px color-mix(in srgb, var(--coak-color-text) 20%, transparent);
  }

  .mobile-ribbon__bar {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: stretch;
    min-block-size: calc(var(--site-header-mobile-ribbon-size) - 4px);
    inline-size: 100%;
    padding-inline-start: var(--site-safe-area-left);
    padding-inline-end: var(--site-safe-area-right);
  }

  .mobile-ribbon__menu-toggle {
    grid-area: 1 / 1;
  }

  .mobile-ribbon__section-link {
    grid-area: 1 / 2;
  }

  .mobile-ribbon__search-toggle {
    grid-area: 1 / 3;
  }

  .mobile-ribbon__section-link {
    display: flex;
    align-items: center;
    min-inline-size: 0;
    padding-inline: var(--coak-space-3);
    overflow: hidden;
    color: inherit;
    font-size: 16px;
    font-weight: 700;
    text-overflow: ellipsis;
    text-shadow: 0 1px 1px color-mix(in srgb, var(--coak-color-craft-ink) 45%, transparent);
    white-space: nowrap;
  }

  .mobile-ribbon__section-link:hover,
  .mobile-ribbon__section-link:focus-visible {
    color: inherit;
    background: color-mix(in srgb, var(--coak-color-surface) 12%, transparent);
    text-decoration: none;
  }

  .mobile-ribbon__search-panel {
    display: none;
    padding-block: var(--coak-space-2);
    padding-inline-start: max(var(--coak-content-gutter), var(--site-safe-area-left));
    padding-inline-end: max(var(--coak-content-gutter), var(--site-safe-area-right));
    background-color: var(--coak-color-surface);
    background-image:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--coak-color-surface) 82%, transparent),
        color-mix(in srgb, var(--coak-color-surface-muted) 62%, transparent)
      );
    border-block-start: 1px solid color-mix(in srgb, var(--coak-color-on-brand) 22%, transparent);
  }

  .site-header[data-search-open] .mobile-ribbon__search-panel {
    display: block;
  }

  .site-header__menu-toggle,
  .site-header__search-toggle {
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    padding: var(--coak-space-2);
    border: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
    box-shadow: none;
  }

  .site-header__menu-toggle:hover,
  .site-header__menu-toggle:focus-visible,
  .site-header__search-toggle:hover,
  .site-header__search-toggle:focus-visible,
  .site-header[data-menu-open] .site-header__menu-toggle,
  .site-header[data-search-open] .site-header__search-toggle {
    color: inherit;
    background: color-mix(in srgb, var(--coak-color-surface) 14%, transparent);
  }

  .site-header__brand {
    align-self: center;
    padding: 0;
  }

  .site-header__brand-image {
    inline-size: min(100%, 176px);
  }

  .site-header__tagline {
    display: none;
  }

  .site-search {
    display: none;
    inline-size: 100%;
  }

  .site-header[data-search-open] .site-search {
    display: grid;
  }

  .site-header[data-search-open] .site-search--subnav,
  .site-primary-nav__search-toggle {
    display: none;
  }

  .site-primary-nav__search-item {
    display: none;
  }

  .site-search__input,
  .site-search__submit {
    min-block-size: var(--coak-control-size);
  }

  .site-search__submit span:first-child {
    display: none;
  }

  .site-account {
    min-inline-size: var(--coak-control-size);
  }

  .site-account__login {
    inline-size: var(--coak-control-size);
    block-size: var(--coak-control-size);
    padding: 0;
    justify-content: center;
    color: var(--coak-color-brand);
    background: color-mix(in srgb, var(--coak-color-surface) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--coak-color-surface) 72%, transparent);
    box-shadow: var(--coak-shadow-sm);
  }

  .site-account__login-text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .site-account__login-icon {
    display: grid;
    place-items: center;
  }

  .site-account__login-icon .coak-icon {
    inline-size: 24px;
    block-size: 24px;
  }

  .site-account__avatar {
    inline-size: var(--coak-control-size);
    block-size: var(--coak-control-size);
  }

  .site-header__navigation {
    position: absolute;
    z-index: 9999;
    inset-block-start: 100%;
    inset-inline-start: 0;
    display: grid;
    grid-template-areas:
      "primary"
      "secondary"
      "utility";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-content: start;
    inline-size: min(calc(320px + var(--site-safe-area-left)), 86vw);
    block-size: calc(100vh - var(--site-header-mobile-size));
    block-size: calc(100dvh - var(--site-header-mobile-size));
    padding-inline-start: var(--site-safe-area-left);
    padding-block-end: var(--site-safe-area-bottom);
    overflow-y: auto;
    background: var(--coak-color-surface);
    box-shadow: none;
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 180ms ease, visibility 0s linear 180ms;
  }

  .site-header__navigation:focus {
    outline: none;
  }

  .site-header[data-menu-open] .site-header__navigation {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }

  .site-header__utility {
    align-self: start;
    color: var(--coak-color-text-muted);
    background: var(--coak-color-surface-muted);
    border-block: 1px solid var(--coak-color-border) 0;
  }

  .site-header__utility-inner {
    display: block;
    inline-size: 100%;
    padding: var(--coak-space-4);
  }

  .site-header__announcement {
    display: none;
  }

  .utility-nav__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--coak-space-2);
    justify-content: stretch;
    inline-size: 100%;
    margin-inline-start: 0;
    padding: 0;
    color: inherit;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .utility-nav__heading {
    display: block;
    margin: 0 0 var(--coak-space-3);
    color: var(--coak-color-text-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .utility-nav__link {
    min-block-size: 40px;
    padding-inline: var(--coak-space-3);
    color: var(--coak-color-text-muted);
    background: var(--coak-color-surface);
    border: 1px solid var(--coak-color-border);
    border-radius: var(--coak-radius-md);
    text-shadow: none;
  }

  .utility-nav__link:hover,
  .utility-nav__link:focus-visible {
    color: var(--coak-color-text);
    background: var(--coak-color-accent-soft);
  }

  .site-primary-nav__badge {
    display: none;
  }

  .site-primary-nav__layout {
    display: block;
    inline-size: 100%;
    padding: 0;
  }

  .site-primary-nav__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    inline-size: 100%;
  }

  .site-primary-nav--section .site-primary-nav__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .site-primary-nav__item {
    position: relative;
    grid-column: 1;
    border-block-end: 1px solid color-mix(in srgb, var(--coak-color-border) 70%, transparent);
  }

  .site-primary-nav {
    color: var(--coak-color-text);
    background: var(--coak-color-surface);
    border: 0;
    box-shadow: none;
  }

  .site-header__mobile-navigation {
    display: block;
    grid-area: primary;
  }

  .site-header__desktop-navigation {
    display: none;
  }

  .site-primary-nav::before,
  .site-primary-nav::after {
    display: none;
  }

  .site-primary-nav__item.is-current .site-primary-nav__link,
  .site-primary-nav__link:hover,
  .site-primary-nav__link:focus,
  .site-primary-nav__link:focus-visible,
  .site-primary-nav__link:active {
    min-block-size: 48px;
    margin-block-end: 0;
    border-radius: 0;
    box-shadow: none;
    clip-path: none;
    transform: none;
  }

  .site-primary-nav__item.is-current .site-primary-nav__link {
    color: var(--coak-color-brand);
    background: transparent;
  }

  .site-primary-nav__item.is-current {
    background: var(--coak-color-accent-soft);
    box-shadow: 3px 0 0 var(--coak-color-brand) inset;
  }

  .site-primary-nav__item.is-current .site-primary-nav__disclosure {
    color: var(--coak-color-brand);
  }

  .site-primary-nav__link {
    justify-items: start;
    inline-size: 100%;
    min-block-size: 48px;
    padding-inline: var(--coak-space-4);
    text-align: start;
  }

  .site-primary-nav__disclosure {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 48px;
    border: 0;
    color: var(--coak-color-text-muted);
    background: transparent;
    font-size: 0;
  }

  .site-primary-nav__disclosure::before,
  .site-primary-nav__disclosure::after {
    position: absolute;
    inline-size: 12px;
    block-size: 2px;
    border-radius: 999px;
    background: currentColor;
    content: "";
    transition: transform 160ms ease, opacity 160ms ease;
  }

  .site-primary-nav__disclosure::after {
    transform: rotate(90deg);
  }

  .site-primary-nav__item.is-open .site-primary-nav__disclosure::after {
    opacity: 0;
    transform: rotate(0);
  }

  .site-primary-nav__submenu {
    position: static;
    grid-column: 1 / -1;
    display: none;
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    inline-size: auto;
    margin: 0;
    padding: 0;
    max-block-size: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    clip-path: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .site-primary-nav__item.is-open .site-primary-nav__submenu {
    display: grid;
  }

  .site-primary-nav__submenu-link {
    place-items: center start;
    min-block-size: 44px;
    padding-inline-start: var(--coak-space-6);
    text-align: start;
  }

  .site-secondary-nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__navigation,
  .site-primary-nav__submenu {
    transition: none;
  }
}
.site-footer {
  --site-footer-zigzag-size: 10px;
  --site-footer-zigzag-color: var(--coak-color-surface);
  --site-footer-safe-area-right: env(safe-area-inset-right, 0px);
  --site-footer-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --site-footer-safe-area-left: env(safe-area-inset-left, 0px);

  position: relative;
  z-index: 1;
  margin-block-start: calc(var(--coak-space-6) + var(--site-footer-zigzag-size));
  padding-block: var(--coak-space-6) max(var(--coak-space-5), var(--site-footer-safe-area-bottom));
  color: var(--coak-color-text-muted);
  background: var(--coak-color-surface);
  font-family: var(--coak-font-sans);
  font-size: 14px;
  line-height: 1.5;
}

.site-footer,
.site-footer *,
.site-footer *::before,
.site-footer *::after {
  box-sizing: border-box;
}

.site-footer::before {
  position: absolute;
  z-index: 1;
  inset-block-start: calc(-1 * var(--site-footer-zigzag-size));
  inset-inline: 0;
  block-size: var(--site-footer-zigzag-size);
  background: var(--site-footer-zigzag-color);
  content: "";
  mask-image: var(--coak-image-zigzag-mask);
  mask-position: left bottom;
  mask-repeat: repeat-x;
  mask-size: calc(2 * var(--site-footer-zigzag-size)) var(--site-footer-zigzag-size);
  pointer-events: none;
}

.site-footer__inner {
  position: relative;
  z-index: 2;
  inline-size: min(100%, var(--coak-content-width));
  margin-inline: auto;
  padding-inline: max(var(--coak-content-gutter), var(--site-footer-safe-area-left))
    max(var(--coak-content-gutter), var(--site-footer-safe-area-right));
}

.site-footer :where(a) {
  color: var(--coak-color-text-muted);
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}

.site-footer :where(a:hover) {
  color: var(--coak-color-brand-hover);
  text-decoration-color: currentcolor;
}

.site-footer a:focus-visible {
  border-radius: 2px;
  outline: 3px solid var(--coak-color-focus);
  outline-offset: 3px;
}

.site-footer__follow,
.site-footer__hubs {
  display: flex;
  gap: var(--coak-space-3);
  align-items: center;
}

.site-footer__section-label {
  flex: 0 0 auto;
  color: var(--coak-color-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-footer__social-list,
.site-footer__link-list,
.site-footer__hub-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-footer__social-list {
  gap: var(--coak-space-2);
}

.site-footer__social-link {
  display: grid;
  inline-size: var(--coak-control-size);
  block-size: var(--coak-control-size);
  border: 1px solid var(--coak-color-border);
  border-radius: 50%;
  place-items: center;
  background: var(--coak-color-surface);
  box-shadow: var(--coak-shadow-sm);
}

.site-footer__social-link:hover {
  border-color: currentcolor;
  text-decoration: none;
  transform: translateY(-1px);
}

.site-footer__social-link--facebook {
  color: #1877f2;
}

.site-footer__social-link--pinterest {
  color: #bd081c;
}

.site-footer__social-link--x {
  color: #111;
}

.site-footer__social-link--instagram {
  color: #c13584;
}

.site-footer__social-link--rss {
  color: #d66b00;
}

.site-footer__social-icon {
  inline-size: 22px;
  block-size: 22px;
  overflow: visible;
  fill: currentcolor;
}

.site-footer__social-link--instagram .site-footer__social-icon,
.site-footer__social-link--rss .site-footer__social-icon {
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.site-footer__social-link--instagram circle:last-child {
  fill: currentcolor;
  stroke: none;
}

.site-footer__navigation {
  margin-block-start: var(--coak-space-5);
  padding-block: var(--coak-space-4);
  border-block: 1px solid var(--coak-color-border);
}

.site-footer__link-list,
.site-footer__hub-list {
  gap: var(--coak-space-2) 0;
  align-items: center;
}

.site-footer__link-list li,
.site-footer__hub-list li {
  display: inline-flex;
  align-items: center;
}

.site-footer__link-list li:not(:last-child)::after,
.site-footer__hub-list li:not(:last-child)::after {
  margin-inline: var(--coak-space-2);
  color: var(--coak-color-border-strong);
  content: "\00b7";
}

.site-footer__hubs {
  align-items: flex-start;
  margin-block-start: var(--coak-space-4);
}

.site-footer__hub-list a {
  color: var(--coak-color-text);
  font-weight: 600;
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--coak-space-3) var(--coak-space-5);
  align-items: baseline;
  justify-content: space-between;
  margin-block-start: var(--coak-space-5);
  color: var(--coak-color-text-muted);
  font-size: 12px;
}

.site-footer__copyright {
  margin: 0;
}

.site-footer__account-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--coak-space-2);
  align-items: center;
}

@media (width <= 640px) {
  .site-footer {
    padding-block-start: var(--coak-space-5);
  }

  .site-footer__follow,
  .site-footer__hubs {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--coak-space-2);
  }

  .site-footer__social-list {
    inline-size: 100%;
    justify-content: space-between;
  }

  .site-footer__navigation {
    margin-block-start: var(--coak-space-4);
  }

  .site-footer__link-list,
  .site-footer__hub-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--coak-space-2) var(--coak-space-4);
    inline-size: 100%;
  }

  .site-footer__link-list li::after,
  .site-footer__hub-list li::after {
    display: none;
  }

  .site-footer__link-list a,
  .site-footer__hub-list a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--coak-control-size);
  }

  .site-footer__meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-footer__account-links a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--coak-control-size);
  }

  .site-footer__account-links > span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer :where(a) {
    transition: none;
  }
}
/*







 */

/* Critical desktop and mobile ribbon CSS is loaded in the document head to prevent layout shift. */