:root {
  --ha-cream: #faf7ef;
  --ha-paper: #fffdf8;
  --ha-sage: #aebba0;
  --ha-sage-soft: #e4eadc;
  --ha-forest: #52634d;
  --ha-graphite: #343834;
  --ha-muted: #687068;
  --ha-line: #dfe3d7;
  --ha-on-dark: #ffffff;
  --ha-shadow: 0 18px 52px rgba(61, 70, 55, 0.11);
}

body[data-site="How Argiles"] {
  background: var(--ha-cream);
  color: var(--ha-graphite);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

body[data-site="How Argiles"] h1,
body[data-site="How Argiles"] h2,
body[data-site="How Argiles"] h3,
body[data-site="How Argiles"] .preview__title,
body[data-site="How Argiles"] .entry__title {
  color: var(--ha-graphite);
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -0.025em;
}

body[data-site="How Argiles"] a {
  color: inherit;
}
body[data-site="How Argiles"] .main {
  background: var(--ha-cream);
}
body[data-site="How Argiles"] .header {
  background: rgba(255, 253, 248, 0.97);
  border-bottom: 1px solid var(--ha-line);
}
body[data-site="How Argiles"] .header__main {
  background: transparent;
}
body[data-site="How Argiles"] .header__wrapper {
  min-height: 86px;
  gap: 28px;
}
body[data-site="How Argiles"] .header__brand--text {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  text-decoration: none;
}
body[data-site="How Argiles"] .header__brand--text .logo {
  height: 58px;
  object-fit: contain;
  width: 58px;
}
body[data-site="How Argiles"] .header__wordmark {
  display: grid;
  line-height: 1;
}
body[data-site="How Argiles"] .header__wordmark strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.04em;
}
body[data-site="How Argiles"] .header__wordmark small {
  color: var(--ha-muted);
  font-size: 10px;
  letter-spacing: 0.14em;
  margin-top: 7px;
  text-transform: uppercase;
}
body[data-site="How Argiles"] .header__wrapper > .social {
  display: none;
}
body[data-site="How Argiles"] .header__menu--grouped {
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
body[data-site="How Argiles"] .header__menu-item--group {
  display: block;
  position: relative;
}
body[data-site="How Argiles"] .header__dropdown {
  position: relative;
}
body[data-site="How Argiles"] .header__dropdown summary {
  align-items: center;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  font-weight: 700;
  gap: 7px;
  list-style: none;
  padding: 12px 17px;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
body[data-site="How Argiles"]
  .header__dropdown
  summary::-webkit-details-marker {
  display: none;
}
body[data-site="How Argiles"] .header__dropdown[open] summary {
  background: var(--ha-sage);
  color: var(--ha-forest);
}
body[data-site="How Argiles"] .header__dropdown summary:focus-visible {
  outline: 3px solid var(--ha-forest);
  outline-offset: 3px;
}
body[data-site="How Argiles"] .offcanvas__dropdown summary:focus-visible {
  outline: 3px solid #e4eadc;
  outline-offset: 3px;
}
body[data-site="How Argiles"] .dropdown-chevron {
  display: block;
  flex: 0 0 16px;
  height: 16px;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 180ms ease;
  width: 16px;
}
body[data-site="How Argiles"]
  .header__dropdown[open]
  > summary
  .dropdown-chevron,
body[data-site="How Argiles"]
  .offcanvas__dropdown[open]
  > summary
  .dropdown-chevron {
  transform: rotate(180deg);
}
body[data-site="How Argiles"] .header__dropdown-menu {
  background: var(--ha-paper);
  border: 1px solid var(--ha-line);
  border-radius: 18px;
  box-shadow: var(--ha-shadow);
  display: none;
  left: 0;
  list-style: none;
  margin: 0;
  min-width: 245px;
  padding: 10px;
  position: absolute;
  top: calc(100% + 9px);
  z-index: 50;
}
body[data-site="How Argiles"] .header__dropdown[open] > .header__dropdown-menu {
  display: block;
}
body[data-site="How Argiles"] .header__dropdown-menu a {
  border-radius: 11px;
  display: block;
  font-size: 15px;
  font-weight: 600;
  padding: 11px 12px;
  text-decoration: none;
}
body[data-site="How Argiles"] .header__dropdown-menu a:hover,
body[data-site="How Argiles"] .header__dropdown-menu a.selected {
  background: var(--ha-sage-soft);
  color: var(--ha-forest);
}

/* The shared navigation switches at its existing xl breakpoint. Native
   details state is synchronized by JavaScript only for fine mouse pointers;
   touch-first devices retain tap/click disclosure behavior. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  /* Preserve the visual 9px offset while making the pointer path from the
     trigger into the submenu continuous and flicker-free. */
  body[data-site="How Argiles"]
    .header__dropdown--responsive
    > .header__dropdown-menu::before {
    bottom: 100%;
    content: "";
    height: 10px;
    inset-inline: 0;
    position: absolute;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-site="How Argiles"] .dropdown-chevron {
    transition: none;
  }
}
body[data-site="How Argiles"] .header__menu .icon-wrapper {
  border-radius: 999px;
  font-weight: 650;
  padding: 12px 14px;
}

body[data-site="How Argiles"] .og-kicker {
  color: var(--ha-forest);
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
body[data-site="How Argiles"] .og-section-head {
  align-items: end;
  display: flex;
  justify-content: space-between;
  margin-bottom: 28px;
}
body[data-site="How Argiles"] .og-section-head h1,
body[data-site="How Argiles"] .og-section-head h2 {
  font-size: clamp(31px, 4vw, 48px);
  line-height: 1.05;
  margin: 0;
}
body[data-site="How Argiles"] .og-section-head > a[href]:last-child,
body[data-site="How Argiles"] .og-section-head > a[href]:last-child:link,
body[data-site="How Argiles"] .og-section-head > a[href]:last-child:visited,
body[data-site="How Argiles"] .og-section-head > a[href]:last-child:hover,
body[data-site="How Argiles"] .og-section-head > a[href]:last-child:focus,
body[data-site="How Argiles"] .og-section-head > a[href]:last-child:focus-visible,
body[data-site="How Argiles"] .og-section-head > a[href]:last-child:active {
  border-bottom: 1px solid var(--ha-forest);
  color: var(--ha-forest);
  font-size: 14px;
  font-weight: 750;
  padding-bottom: 4px;
  text-decoration: none;
}

body[data-site="How Argiles"] .og-popular {
  background: linear-gradient(180deg, #dce5d4 0%, #edf1e8 100%);
  padding: 46px 0 58px;
}
body[data-site="How Argiles"] .og-popular__grid,
body[data-site="How Argiles"] .og-entry-grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body[data-site="How Argiles"] .og-popular .preview {
  background: var(--ha-paper);
  border: 1px solid rgba(82, 99, 77, 0.18);
  border-radius: 22px;
  box-shadow: 0 12px 34px rgba(61, 70, 55, 0.08);
  overflow: hidden;
  padding-bottom: 20px;
}
body[data-site="How Argiles"] .og-popular .preview__link,
body[data-site="How Argiles"] .og-popular .preview__content,
body[data-site="How Argiles"] .og-popular .preview__rating {
  margin-left: 20px;
  margin-right: 20px;
}
body[data-site="How Argiles"] .preview__img img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}
body[data-site="How Argiles"] .preview__cat {
  color: var(--ha-forest);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-site="How Argiles"] .og-intro {
  background: var(--ha-paper);
  padding: 74px 0;
  text-align: center;
}
body[data-site="How Argiles"] .og-intro__inner {
  max-width: 850px;
}
body[data-site="How Argiles"] .og-intro h2 {
  font-size: clamp(40px, 6vw, 70px);
  line-height: 1.02;
  margin: 0 auto 22px;
}
body[data-site="How Argiles"] .og-intro p {
  color: var(--ha-muted);
  font-size: 19px;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 720px;
}
body[data-site="How Argiles"] .og-intro__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}
body[data-site="How Argiles"] .og-intro__links a {
  background: var(--ha-graphite);
  border-radius: 999px;
  color: white;
  font-size: 14px;
  font-weight: 750;
  padding: 13px 21px;
  text-decoration: none;
}
body[data-site="How Argiles"] .og-intro__links a + a {
  background: transparent;
  border: 1px solid var(--ha-graphite);
  color: var(--ha-graphite);
}

/* HA-1.8 contrast: the shared redesign theme uses a four-:not() anchor
   selector, so keep the dark primary CTA readable in every link state with a
   later selector that wins by specificity rather than !important. */
body[data-site="How Argiles"]
  .og-intro
  .og-intro__links
  > a:first-child,
body[data-site="How Argiles"]
  .og-intro
  .og-intro__links
  > a:first-child:link,
body[data-site="How Argiles"]
  .og-intro
  .og-intro__links
  > a:first-child:visited,
body[data-site="How Argiles"]
  .og-intro
  .og-intro__links
  > a:first-child:hover,
body[data-site="How Argiles"]
  .og-intro
  .og-intro__links
  > a:first-child:focus,
body[data-site="How Argiles"]
  .og-intro
  .og-intro__links
  > a:first-child:focus-visible,
body[data-site="How Argiles"]
  .og-intro
  .og-intro__links
  > a:first-child:active {
  color: var(--ha-on-dark);
}
body[data-site="How Argiles"]
  .og-intro
  .og-intro__links
  > a:focus-visible,
body[data-site="How Argiles"]
  .og-section-head
  > a[href]:focus-visible {
  outline: 3px solid var(--ha-forest);
  outline-offset: 4px;
}

body[data-site="How Argiles"] .og-topic-group,
body[data-site="How Argiles"] .og-latest {
  padding: 70px 0;
}
body[data-site="How Argiles"] .og-topic-group:nth-of-type(even),
body[data-site="How Argiles"] .og-latest--guides {
  background: #fffdf8;
}
body[data-site="How Argiles"] .og-category-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
body[data-site="How Argiles"] .og-category-grid .category {
  min-width: 0;
  width: auto;
}
body[data-site="How Argiles"] .og-category-grid .category__body {
  background: white;
  border: 1px solid var(--ha-line);
  border-radius: 20px;
  box-shadow: 0 8px 26px rgba(61, 70, 55, 0.06);
  display: block;
  overflow: hidden;
}
body[data-site="How Argiles"] .og-category-grid .category__img {
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  width: 100%;
}
body[data-site="How Argiles"] .og-category-grid .category__title {
  background: var(--ha-paper);
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  padding: 17px 18px 19px;
  position: static;
}

/* Category cards use the shared dark image gradient. Its important overlay
   rules require these two important declarations so the white label is
   positioned above—not underneath—the gradient. */
body[data-site="How Argiles"]
  .og-topic-group
  .og-category-grid
  .category
  .category__body
  .category__title {
  color: var(--ha-on-dark) !important;
  position: absolute !important;
  z-index: 2 !important;
}
body[data-site="How Argiles"]
  .og-topic-group
  .og-category-grid
  .category
  .category__body:focus-visible {
  outline: 3px solid var(--ha-forest) !important;
  outline-offset: 3px !important;
}

@media (max-width: 699px) {
  /* Mobile labels occupy a taller bottom band. Darken that band early enough
     to keep white text readable over even the lightest category photographs. */
  body[data-site="How Argiles"]
    .og-topic-group
    .og-category-grid
    .category
    .category__body::after {
    background: linear-gradient(
      180deg,
      rgba(10, 10, 14, 0) 24%,
      rgba(10, 10, 14, 0.72) 55%,
      rgba(10, 10, 14, 0.92) 100%
    ) !important;
  }
}
body[data-site="How Argiles"] .og-entry-grid .preview {
  min-width: 0;
}

body[data-site="How Argiles"] .og-about-band {
  background: var(--ha-graphite);
  color: #f6f3e9;
  padding: 66px 0;
}
body[data-site="How Argiles"] .og-about-band__inner {
  align-items: center;
  display: grid;
  gap: 36px;
  grid-template-columns: 1.2fr 1fr auto;
}
body[data-site="How Argiles"] .og-about-band h2 {
  color: var(--ha-on-dark);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
  margin: 0;
}
body[data-site="How Argiles"] .og-about-band .og-kicker {
  color: var(--ha-sage-soft);
}
body[data-site="How Argiles"] .og-about-band p {
  color: #dce2d5;
  line-height: 1.7;
  margin: 0;
}
body[data-site="How Argiles"]
  .og-about-band
  .og-about-band__inner
  > a:last-child,
body[data-site="How Argiles"]
  .og-about-band
  .og-about-band__inner
  > a:last-child:link,
body[data-site="How Argiles"]
  .og-about-band
  .og-about-band__inner
  > a:last-child:visited,
body[data-site="How Argiles"]
  .og-about-band
  .og-about-band__inner
  > a:last-child:hover,
body[data-site="How Argiles"]
  .og-about-band
  .og-about-band__inner
  > a:last-child:focus,
body[data-site="How Argiles"]
  .og-about-band
  .og-about-band__inner
  > a:last-child:focus-visible,
body[data-site="How Argiles"]
  .og-about-band
  .og-about-band__inner
  > a:last-child:active {
  background: var(--ha-sage);
  border-radius: 999px;
  color: #293128;
  font-weight: 800;
  padding: 14px 20px;
  text-decoration: none;
  white-space: nowrap;
}

body[data-site="How Argiles"] .landing {
  background: linear-gradient(180deg, #dce5d4, #faf7ef);
}
body[data-site="How Argiles"] .separator__title {
  font-family: Georgia, "Times New Roman", serif;
}
body[data-site="How Argiles"] .og-category-section + .og-category-section {
  margin-top: 58px;
}
body[data-site="How Argiles"] .footer {
  background: #2f342f;
  color: #edf0e8;
}
body[data-site="How Argiles"] .footer__logo {
  align-items: center;
  display: flex;
  gap: 12px;
  text-decoration: none;
}
body[data-site="How Argiles"] .footer__logo img {
  height: 62px;
  object-fit: contain;
  width: 62px;
}
body[data-site="How Argiles"] .footer__wordmark {
  color: white;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
}
body[data-site="How Argiles"] .footer__tagline {
  color: #cdd4c7;
}
body[data-site="How Argiles"] .footer a {
  color: inherit;
}

body[data-site="How Argiles"] .offcanvas__menu-group {
  display: block;
  padding: 15px 0;
}
body[data-site="How Argiles"] .offcanvas__menu-group > strong {
  color: var(--ha-forest);
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  margin-bottom: 10px;
}
body[data-site="How Argiles"] .offcanvas__dropdown > summary {
  align-items: center;
  border-radius: 10px;
  color: var(--ha-forest);
  cursor: pointer;
  display: flex;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 700;
  gap: 12px;
  justify-content: space-between;
  list-style: none;
  min-height: 44px;
  padding: 8px 10px;
}
body[data-site="How Argiles"]
  .offcanvas__dropdown
  > summary::-webkit-details-marker {
  display: none;
}
body[data-site="How Argiles"] .offcanvas__dropdown[open] > summary {
  background: rgba(174, 187, 160, 0.12);
  color: #e4eadc;
}
body[data-site="How Argiles"] .offcanvas__menu-group ul {
  display: grid;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
body[data-site="How Argiles"] .offcanvas__dropdown:not([open]) > ul {
  display: none;
}
body[data-site="How Argiles"] .offcanvas__menu-group a {
  border-radius: 10px;
  display: block;
  padding: 9px 10px;
  text-decoration: none;
}
body[data-site="How Argiles"] .offcanvas__menu-group .selected a {
  background: var(--ha-sage);
  color: #293128;
}

/* Plain submenu anchors are not excluded from the shared global link rule.
   Keep them light on the dark drawer while retaining dark text for the
   selected item on its light sage surface. */
body[data-site="How Argiles"]
  .offcanvas
  .offcanvas__menu
  .offcanvas__menu-group
  a,
body[data-site="How Argiles"]
  .offcanvas
  .offcanvas__menu
  .offcanvas__menu-group
  a:link,
body[data-site="How Argiles"]
  .offcanvas
  .offcanvas__menu
  .offcanvas__menu-group
  a:visited,
body[data-site="How Argiles"]
  .offcanvas
  .offcanvas__menu
  .offcanvas__menu-group
  a:hover,
body[data-site="How Argiles"]
  .offcanvas
  .offcanvas__menu
  .offcanvas__menu-group
  a:focus,
body[data-site="How Argiles"]
  .offcanvas
  .offcanvas__menu
  .offcanvas__menu-group
  a:focus-visible,
body[data-site="How Argiles"]
  .offcanvas
  .offcanvas__menu
  .offcanvas__menu-group
  a:active {
  color: var(--ha-sage-soft);
}
body[data-site="How Argiles"]
  .offcanvas
  .offcanvas__menu
  .offcanvas__menu-group
  .selected
  > a,
body[data-site="How Argiles"]
  .offcanvas
  .offcanvas__menu
  .offcanvas__menu-group
  .selected
  > a:hover,
body[data-site="How Argiles"]
  .offcanvas
  .offcanvas__menu
  .offcanvas__menu-group
  .selected
  > a:focus,
body[data-site="How Argiles"]
  .offcanvas
  .offcanvas__menu
  .offcanvas__menu-group
  .selected
  > a:focus-visible,
body[data-site="How Argiles"]
  .offcanvas
  .offcanvas__menu
  .offcanvas__menu-group
  .selected
  > a:active {
  color: #293128;
}

body[data-site="How Argiles"] .search--local {
  display: grid;
  width: min(100%, 720px);
  min-height: 0;
  margin-top: 20px;
  padding: 16px;
  gap: 8px;
  border: 1px solid var(--ha-line);
  border-radius: 16px;
  outline: 0;
  background: var(--ha-paper);
  box-shadow: 0 6px 20px rgba(61, 70, 55, 0.06);
  text-align: left;
}

body[data-site="How Argiles"] .search--local .search__label {
  color: var(--ha-graphite);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.35;
}

body[data-site="How Argiles"] .search--local .search__input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid #adb7a6;
  border-radius: 11px;
  outline: 0;
  background: #fff;
  color: var(--ha-graphite);
  font: inherit;
  font-size: 16px;
}

body[data-site="How Argiles"] .search--local .search__input:focus-visible {
  border-color: var(--ha-forest);
  box-shadow: 0 0 0 3px rgba(82, 99, 77, 0.2);
}

body[data-site="How Argiles"] .search--local .search__status {
  margin: 0;
  color: var(--ha-muted);
  font-size: 13px;
  line-height: 1.35;
}

body[data-site="How Argiles"] .search-collection[hidden],
body[data-site="How Argiles"] .search-collection .chip[hidden],
body[data-site="How Argiles"] .search--local .search__status[hidden] {
  display: none !important;
}

@media (max-width: 1039px) {
  body[data-site="How Argiles"] .header__wrapper {
    min-height: 74px;
  }
  body[data-site="How Argiles"] .header__brand--text .logo {
    height: 50px;
    width: 50px;
  }
  body[data-site="How Argiles"] .header__wordmark strong {
    font-size: 23px;
  }
  body[data-site="How Argiles"] .header__wordmark small {
    display: none;
  }
  body[data-site="How Argiles"] .header__menu-item--group {
    display: none !important;
  }
  body[data-site="How Argiles"] .og-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body[data-site="How Argiles"] .og-popular__grid,
  body[data-site="How Argiles"] .og-entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body[data-site="How Argiles"] .og-about-band__inner {
    grid-template-columns: 1fr 1fr;
  }
  body[data-site="How Argiles"] .og-about-band__inner > a {
    justify-self: start;
  }
}

@media (max-width: 699px) {
  body[data-site="How Argiles"] .header__wordmark strong {
    font-size: 20px;
  }
  body[data-site="How Argiles"] .header__brand--text .logo {
    height: 44px;
    width: 44px;
  }
  body[data-site="How Argiles"] .og-popular,
  body[data-site="How Argiles"] .og-topic-group,
  body[data-site="How Argiles"] .og-latest {
    padding: 44px 0;
  }
  body[data-site="How Argiles"] .og-intro {
    padding: 54px 0;
  }
  body[data-site="How Argiles"] .og-section-head {
    align-items: flex-start;
    gap: 18px;
  }
  body[data-site="How Argiles"] .og-section-head > a {
    display: none;
  }
  body[data-site="How Argiles"] .og-popular__grid,
  body[data-site="How Argiles"] .og-entry-grid,
  body[data-site="How Argiles"] .og-category-grid,
  body[data-site="How Argiles"] .og-about-band__inner {
    grid-template-columns: 1fr;
  }
  body[data-site="How Argiles"] .og-category-grid .category__title {
    font-size: 19px;
  }
}

@media (min-width: 700px) and (max-width: 899px) {
  body[data-site="How Argiles"]
    .og-popular__grid
    > .preview:last-child:nth-child(odd),
  body[data-site="How Argiles"]
    .og-entry-grid
    > .preview:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 13px);
    justify-self: center;
  }
}

@media (min-width: 900px) and (max-width: 1039px) {
  body[data-site="How Argiles"] .og-popular__grid,
  body[data-site="How Argiles"] .og-entry-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Responsive polish

   The shared redesign stylesheet contains several late, high-specificity
   rules. Keep the corrections tenant-scoped so other COS sites retain their
   own layout, and use !important only where the shared cascade requires it.
   -------------------------------------------------------------------------- */

/* The desktop navigation must never compete with the hamburger. The shared
   theme force-displays every menu item, which previously caused overlap from
   700px through common tablet widths. */
@media (max-width: 1199px) {
  body[data-site="How Argiles"] .header,
  body[data-site="How Argiles"] .header__main,
  body[data-site="How Argiles"] .header > .container,
  body[data-site="How Argiles"] .header .header__wrapper {
    height: 78px !important;
    min-height: 78px !important;
  }

  body[data-site="How Argiles"] .header > .container {
    max-width: calc(100% - 32px) !important;
  }

  body[data-site="How Argiles"] .header .header__wrapper {
    justify-content: space-between !important;
    gap: 12px !important;
  }

  body[data-site="How Argiles"] .header .header__brand--text {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 64px) !important;
    height: 72px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 11px !important;
  }

  body[data-site="How Argiles"] .header .header__brand--text .logo {
    flex: 0 0 52px !important;
    width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    object-position: center !important;
  }

  body[data-site="How Argiles"] .header__wordmark strong {
    font-size: 25px !important;
    line-height: 0.96 !important;
  }

  body[data-site="How Argiles"] .header__wordmark small {
    display: none !important;
  }

  body[data-site="How Argiles"] .header .header__menu--grouped {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 0 0 auto !important;
    gap: 0 !important;
  }

  body[data-site="How Argiles"]
    .header
    .header__menu--grouped
    > .header__menu-item.d-xl-block,
  body[data-site="How Argiles"]
    .header
    .header__menu--grouped
    > .header__menu-item--group {
    display: none !important;
  }

  body[data-site="How Argiles"]
    .header
    .header__menu--grouped
    > .header__menu-item:not(.d-xl-block):not(.header__menu-item--group),
  body[data-site="How Argiles"] .header .header__menu--grouped .d-xl-none {
    display: flex !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
  }

  body[data-site="How Argiles"]
    .header
    .header__menu--grouped
    button#offcanvas-toggle {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  body[data-site="How Argiles"] .offcanvas {
    width: 100% !important;
    max-width: none !important;
    background: rgba(31, 37, 31, 0.72) !important;
    box-shadow: none !important;
  }

  body[data-site="How Argiles"] .offcanvas .offcanvas__navigation,
  body[data-site="How Argiles"] .offcanvas .offcanvas__menu {
    width: min(90vw, 360px) !important;
  }

  body[data-site="How Argiles"] .offcanvas .offcanvas__navigation {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background: #202620 !important;
  }

  body[data-site="How Argiles"] .offcanvas .offcanvas__exit {
    top: 6px !important;
    right: auto !important;
    left: calc(min(90vw, 360px) - 56px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  body[data-site="How Argiles"] .offcanvas .offcanvas__menu {
    margin-top: 54px !important;
    padding: 0 14px 22px !important;
  }

  body[data-site="How Argiles"] .offcanvas__menu-group {
    padding: 8px 0 10px !important;
  }

  body[data-site="How Argiles"] .offcanvas__menu-group > strong {
    color: #c8d2be !important;
    margin: 0 0 4px !important;
    font-size: 19px !important;
    line-height: 1.25 !important;
  }

  body[data-site="How Argiles"] .offcanvas__dropdown > summary {
    color: #c8d2be !important;
    margin: 0 !important;
    font-size: 19px !important;
    line-height: 1.25 !important;
  }

  body[data-site="How Argiles"] .offcanvas__dropdown[open] > summary {
    color: #e4eadc !important;
  }

  body[data-site="How Argiles"] .offcanvas__menu-group ul {
    gap: 0 !important;
  }

  body[data-site="How Argiles"]
    .offcanvas
    .offcanvas__menu
    .offcanvas__menu-item
    > a,
  body[data-site="How Argiles"]
    .offcanvas
    .offcanvas__menu
    .offcanvas__menu-group
    a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
}

@media (max-width: 699px) {
  body[data-site="How Argiles"] {
    --ha-mobile-gutter: 16px;
  }

  /* Header: keep the mark, wordmark, and 48px menu target balanced even at
     320px, without letting the shared fixed-width logo rules win. */
  body[data-site="How Argiles"] .header,
  body[data-site="How Argiles"] .header__main,
  body[data-site="How Argiles"] .header > .container,
  body[data-site="How Argiles"] .header .header__wrapper {
    height: 72px !important;
    min-height: 72px !important;
  }

  body[data-site="How Argiles"] .header > .container {
    max-width: calc(100% - 24px) !important;
  }

  body[data-site="How Argiles"] .header .header__brand--text {
    height: 66px !important;
    max-width: calc(100% - 58px) !important;
    gap: 8px !important;
  }

  body[data-site="How Argiles"] .header .header__brand--text .logo {
    flex-basis: 42px !important;
    width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
  }

  body[data-site="How Argiles"] .header__wordmark strong {
    font-size: clamp(18px, 5.7vw, 21px) !important;
  }

  /* Mobile page headers and breadcrumb rhythm. */
  body[data-site="How Argiles"] .landing > .container {
    max-width: calc(100% - 32px) !important;
  }

  body[data-site="How Argiles"] .landing,
  body[data-site="How Argiles"] .landing .landing__wrapper {
    padding-bottom: 22px !important;
  }

  body[data-site="How Argiles"] .landing .breadcrumb,
  body[data-site="How Argiles"] .breadcrumb {
    margin: 14px 0 18px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  body[data-site="How Argiles"] .landing .landing__title,
  body[data-site="How Argiles"] .landing h1,
  body[data-site="How Argiles"] h1.landing__title,
  body[data-site="How Argiles"] .wiki-head h1.landing__title {
    max-width: 100% !important;
    font-size: clamp(27px, 8.1vw, 30px) !important;
    hyphens: auto !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere !important;
    text-wrap: balance;
  }

  body[data-site="How Argiles"] .landing__tldr {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  /* Homepage: reduce inherited desktop padding and make the content easy to
     scan. Featured stories are a deliberate snap row; latest entries become
     compact media cards; category tiles remain a readable two-column grid. */
  body[data-site="How Argiles"] .og-popular,
  body[data-site="How Argiles"] .og-topic-group,
  body[data-site="How Argiles"] .og-latest {
    padding: 34px 0 38px !important;
  }

  body[data-site="How Argiles"] .og-section-head {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
    margin-bottom: 20px !important;
  }

  body[data-site="How Argiles"] .og-section-head > div {
    min-width: 0 !important;
  }

  body[data-site="How Argiles"] .og-section-head h1,
  body[data-site="How Argiles"] .og-section-head h2 {
    font-size: clamp(27px, 8vw, 31px) !important;
    hyphens: auto !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
    text-wrap: balance;
  }

  body[data-site="How Argiles"] .og-section-head > a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    margin-top: 2px !important;
    padding: 7px 0 5px !important;
    font-size: 13px !important;
  }

  body[data-site="How Argiles"] .og-popular__grid {
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: min(82vw, 320px) !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
    scroll-snap-type: inline mandatory !important;
    scroll-padding-inline: 2px !important;
    padding: 2px 2px 10px !important;
    scrollbar-color: rgba(82, 99, 77, 0.45) transparent;
    scrollbar-width: thin;
  }

  body[data-site="How Argiles"] .og-popular__grid .preview {
    scroll-snap-align: start !important;
    scroll-snap-stop: normal !important;
  }

  body[data-site="How Argiles"] .og-popular .preview {
    position: relative !important;
    border-radius: 18px !important;
    padding: 10px 10px 17px !important;
  }

  body[data-site="How Argiles"] .og-popular .preview__link {
    position: static !important;
  }

  body[data-site="How Argiles"] .og-popular .preview__link::after {
    position: absolute !important;
    inset: 0 !important;
    content: "" !important;
  }

  body[data-site="How Argiles"] .og-popular .preview__link,
  body[data-site="How Argiles"] .og-popular .preview__content,
  body[data-site="How Argiles"] .og-popular .preview__rating {
    margin-inline: 11px !important;
  }

  body[data-site="How Argiles"] .og-intro {
    padding: 42px 0 44px !important;
  }

  body[data-site="How Argiles"] .og-intro h2 {
    max-width: 14ch !important;
    margin-bottom: 17px !important;
    font-size: clamp(33px, 9.7vw, 40px) !important;
    hyphens: auto !important;
    line-height: 1.06 !important;
    text-wrap: balance;
  }

  body[data-site="How Argiles"] .og-intro p {
    font-size: 16px !important;
    line-height: 1.62 !important;
  }

  body[data-site="How Argiles"] .og-intro__links {
    gap: 10px !important;
    margin-top: 23px !important;
  }

  body[data-site="How Argiles"] .og-intro__links a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    padding: 11px 18px !important;
  }

  body[data-site="How Argiles"] .og-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body[data-site="How Argiles"] .og-category-grid .category,
  body[data-site="How Argiles"] .og-category-grid .category__body {
    height: 100% !important;
    min-height: 0 !important;
  }

  body[data-site="How Argiles"] .og-category-grid .category__body {
    border-radius: 15px !important;
  }

  body[data-site="How Argiles"] .og-category-grid .category__img {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    object-position: center !important;
  }

  body[data-site="How Argiles"] .og-category-grid .category__title,
  body[data-site="How Argiles"]
    .og-category-grid
    .category
    .category__body
    .category__title {
    display: flex !important;
    align-items: center !important;
    min-height: 62px !important;
    max-width: none !important;
    padding: 10px 11px 12px !important;
    font-size: 16px !important;
    hyphens: auto !important;
    line-height: 1.18 !important;
    text-align: left !important;
  }

  body[data-site="How Argiles"] .og-entry-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body[data-site="How Argiles"] .og-entry-grid .preview {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr !important;
    align-items: stretch !important;
    min-height: 118px !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--ha-line) !important;
    border-radius: 15px !important;
    background: var(--ha-paper) !important;
    box-shadow: 0 6px 20px rgba(61, 70, 55, 0.06) !important;
    text-align: left !important;
  }

  body[data-site="How Argiles"] .og-entry-grid .preview__img {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 112px !important;
    height: 100% !important;
    min-height: 118px !important;
    border-radius: 0 !important;
  }

  body[data-site="How Argiles"] .og-entry-grid .preview__img img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }

  body[data-site="How Argiles"] .og-entry-grid .preview__save {
    display: none !important;
  }

  body[data-site="How Argiles"] .og-entry-grid .preview__meta {
    right: auto !important;
    bottom: 7px !important;
    left: 7px !important;
    margin: 0 !important;
    padding: 4px 6px !important;
    font-size: 10px !important;
  }

  body[data-site="How Argiles"] .og-entry-grid .preview__link {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end !important;
    margin: 0 !important;
    padding: 12px 12px 4px !important;
  }

  body[data-site="How Argiles"] .og-entry-grid .preview__link::after {
    position: absolute !important;
    inset: 0 !important;
    content: "" !important;
  }

  body[data-site="How Argiles"] .og-entry-grid .preview__cat {
    font-size: 9px !important;
    line-height: 1.25 !important;
  }

  body[data-site="How Argiles"] .og-entry-grid .preview__title {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    font-size: 17px !important;
    hyphens: auto !important;
    line-height: 1.18 !important;
  }

  body[data-site="How Argiles"] .og-entry-grid .preview__content {
    display: -webkit-box !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 3px 12px 11px !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    color: var(--ha-muted) !important;
    font-size: 13px !important;
    line-height: 1.38 !important;
  }

  body[data-site="How Argiles"] .og-about-band {
    padding: 42px 0 !important;
  }

  body[data-site="How Argiles"] .og-about-band__inner {
    gap: 20px !important;
  }

  body[data-site="How Argiles"] .og-about-band h2 {
    font-size: 29px !important;
    line-height: 1.1 !important;
    text-wrap: balance;
  }

  body[data-site="How Argiles"] .og-about-band a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
  }

  /* Recipe hero actions: Jump remains the primary full-width action, while
     secondary actions use a compact 2x2 grid instead of five tall rows. */
  body[data-site="How Argiles"] .landing .landing__content .actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }

  body[data-site="How Argiles"]
    .landing
    .landing__content
    .actions
    > a.icon-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 10px !important;
    border-radius: 13px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  body[data-site="How Argiles"]
    .landing
    .landing__content
    .actions
    > a.icon-wrapper[href="#recipe"] {
    grid-column: 1 / -1 !important;
    order: -1 !important;
  }

  /* Recipe card: the full article hero already shows the dish, so avoid a
     duplicate image on narrow screens. Facts are easier to compare as 2x2. */
  body[data-site="How Argiles"] .recipe-card__summary {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 18px 14px !important;
  }

  body[data-site="How Argiles"] .recipe-card__image {
    display: none !important;
  }

  body[data-site="How Argiles"] .recipe-card__title,
  body[data-site="How Argiles"]
    .template-main-sidebar
    .template-main-sidebar__main
    > section#recipe.recipe
    .recipe-card__title {
    margin-top: 13px !important;
    font-size: 27px !important;
    line-height: 1.08 !important;
  }

  body[data-site="How Argiles"] .recipe-card__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body[data-site="How Argiles"] .recipe-card__fact {
    min-width: 0 !important;
    padding: 10px !important;
  }

  body[data-site="How Argiles"] .recipe-card__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 14px 14px 20px !important;
  }

  body[data-site="How Argiles"] .recipe-card__action {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 0 5px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body[data-site="How Argiles"] .recipe-card__description {
    padding: 18px 14px 22px !important;
  }

  body[data-site="How Argiles"]
    .template-main-sidebar
    .template-main-sidebar__main
    > section#recipe.recipe
    .recipe__separator,
  body[data-site="How Argiles"] #recipe-ingredients.recipe__interact-list,
  body[data-site="How Argiles"] #recipe-instructions.recipe__interact-list,
  body[data-site="How Argiles"] #recipe-equipments,
  body[data-site="How Argiles"] #recipe-notes.recipe__static-list,
  body[data-site="How Argiles"] #recipe-allergies,
  body[data-site="How Argiles"] #recipe-nutrition {
    margin-inline: 14px !important;
  }

  /* Restore safe reading gutters removed by `.pi-sm-none`. Wiki media stays
     visually strong inside the same consistent content edge. */
  body[data-site="How Argiles"] main > .container.container--compact.pi-sm-none,
  body[data-site="How Argiles"] main > .container.pi-sm-none:has(.wiki-layout) {
    padding-inline: var(--ha-mobile-gutter) !important;
  }

  body[data-site="How Argiles"]
    main
    > .container.container--compact.pi-sm-none
    .template-main {
    margin-block: 40px !important;
  }

  body[data-site="How Argiles"]
    main
    > .container.container--compact.pi-sm-none
    .article__wrapper
    > h2 {
    font-size: 24px !important;
    line-height: 1.18 !important;
  }

  body[data-site="How Argiles"] .wiki-head {
    margin-bottom: 17px !important;
  }

  body[data-site="How Argiles"] .wiki-head .meta {
    gap: 10px !important;
    margin-top: 12px !important;
  }

  body[data-site="How Argiles"] .wiki-head .meta__img {
    width: 48px !important;
    height: 48px !important;
  }

  body[data-site="How Argiles"] .wiki-head .meta__content {
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  body[data-site="How Argiles"] .article figure.pin-wrapper {
    position: relative !important;
    display: block !important;
    margin: 0 0 20px !important;
    overflow: hidden !important;
    border-radius: 14px !important;
  }

  body[data-site="How Argiles"] .article figure.pin-wrapper > img {
    border-radius: 14px !important;
  }

  body[data-site="How Argiles"]
    .article
    figure.pin-wrapper
    > .pin.icon-wrapper {
    position: absolute !important;
    top: 10px !important;
    right: auto !important;
    bottom: auto !important;
    left: 10px !important;
    z-index: 2 !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  body[data-site="How Argiles"] .article figure.pin-wrapper > figcaption {
    padding: 7px 8px 0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  body[data-site="How Argiles"] .wiki-main .article__wrapper > p:first-child {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  body[data-site="How Argiles"] .wiki-step,
  body[data-site="How Argiles"] .wiki-card {
    margin-bottom: 16px !important;
    border-color: var(--ha-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(61, 70, 55, 0.05) !important;
  }

  body[data-site="How Argiles"] .wiki-step__body {
    padding: 15px !important;
  }

  body[data-site="How Argiles"] .wiki-step__num {
    font-size: 26px !important;
  }

  body[data-site="How Argiles"] .wiki-step__title {
    font-size: 18px !important;
    line-height: 1.18 !important;
  }

  body[data-site="How Argiles"] .wiki-card {
    padding: 18px 16px 20px !important;
  }

  /* Collection headings must wrap at 320px instead of being silently clipped
     by the shared section overflow. */
  body[data-site="How Argiles"] .main > .categories .separator__title,
  body[data-site="How Argiles"] .separator__title {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: clamp(25px, 8vw, 29px) !important;
    hyphens: auto !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere !important;
    text-wrap: balance;
    white-space: normal !important;
  }

  body[data-site="How Argiles"] .main > .categories .categories__wrapper {
    gap: 14px 12px !important;
  }

  /* Search/index chips become full-width, consistent results instead of a
     ragged collection of differently sized pills. */
  body[data-site="How Argiles"] .chips {
    margin-block: 40px !important;
  }

  body[data-site="How Argiles"] .chips .chips__wrapper {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body[data-site="How Argiles"] .chips .chip {
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 56px !important;
    padding: 7px 11px !important;
    border: 1px solid var(--ha-line) !important;
    border-radius: 14px !important;
    background: var(--ha-paper) !important;
    box-shadow: 0 3px 12px rgba(61, 70, 55, 0.05) !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    text-align: left !important;
  }

  body[data-site="How Argiles"] .chips .chip-img {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
  }

  /* Contact cards: replace the inherited dashed, oversized treatment with a
     calmer card that matches the How Argiles design language. */
  body[data-site="How Argiles"] .contacts {
    margin-block: 40px !important;
  }

  body[data-site="How Argiles"] .contacts .contacts__wrapper {
    gap: 14px !important;
  }

  body[data-site="How Argiles"] .contact {
    padding: 0 !important;
    border: 1px solid var(--ha-line) !important;
    border-radius: 16px !important;
    outline: 0 !important;
    background: var(--ha-paper) !important;
    box-shadow: 0 6px 20px rgba(61, 70, 55, 0.06) !important;
  }

  body[data-site="How Argiles"] .contact .contact__body {
    gap: 11px !important;
    padding: 20px !important;
  }

  body[data-site="How Argiles"] .contact .contact__title {
    font-size: 21px !important;
    line-height: 1.2 !important;
  }

  body[data-site="How Argiles"] .contact a {
    overflow-wrap: anywhere !important;
  }

  body[data-site="How Argiles"] .contact .contact__link {
    display: inline-flex !important;
    min-height: 44px !important;
    align-items: center !important;
    color: var(--ha-berry-strong) !important;
    font-weight: 700 !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
  }

  /* Footer: preserve all navigation while reducing almost a full screen of
     avoidable padding. Legal links share one compact row beneath two columns. */
  body[data-site="How Argiles"] .footer {
    margin-top: 36px !important;
  }

  body[data-site="How Argiles"] .footer__main-wrapper {
    gap: 28px !important;
    padding-block: 34px !important;
  }

  body[data-site="How Argiles"] .footer__logo img {
    width: 50px !important;
    height: 50px !important;
  }

  body[data-site="How Argiles"] .footer__wordmark {
    font-size: 23px !important;
  }

  body[data-site="How Argiles"] .footer__tagline {
    max-width: 34ch !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  body[data-site="How Argiles"] .footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 18px !important;
  }

  body[data-site="How Argiles"] .footer__col:last-child {
    grid-column: 1 / -1 !important;
  }

  body[data-site="How Argiles"] .footer__col:last-child .footer__col-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 16px !important;
  }

  body[data-site="How Argiles"] .footer__col-list a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  body[data-site="How Argiles"] .footer__bottom-wrapper {
    align-items: center !important;
    gap: 12px !important;
    min-height: 78px !important;
    padding-block: 14px !important;
  }

  body[data-site="How Argiles"] .footer__copyright {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    text-align: left !important;
  }

  body[data-site="How Argiles"] .footer__top {
    flex: 0 0 auto !important;
    min-height: 44px !important;
  }
}

@media (max-width: 359px) {
  body[data-site="How Argiles"] {
    --ha-mobile-gutter: 14px;
  }

  body[data-site="How Argiles"] .og-category-grid {
    gap: 10px !important;
  }

  body[data-site="How Argiles"] .og-category-grid .category__title,
  body[data-site="How Argiles"]
    .og-category-grid
    .category
    .category__body
    .category__title {
    min-height: 60px !important;
    padding-inline: 9px !important;
    font-size: 15px !important;
  }

  body[data-site="How Argiles"] .og-entry-grid .preview {
    grid-template-columns: 100px minmax(0, 1fr) !important;
  }

  body[data-site="How Argiles"] .og-entry-grid .preview__img {
    width: 100px !important;
  }

  body[data-site="How Argiles"]
    .landing
    .landing__content
    .actions
    > a.icon-wrapper {
    font-size: 13px !important;
  }

  body[data-site="How Argiles"] .recipe-card__action {
    font-size: 11px !important;
  }
}

/* HA-1.4 wide masthead preview. The previous square mark remains in R2 and
   favicons remain unchanged, so this branding trial is fully reversible. */
body[data-site="How Argiles"] .header .header__brand {
  display: inline-flex !important;
  flex: 0 1 auto !important;
  align-items: center !important;
  width: min(300px, 28vw) !important;
  max-width: 300px !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
}

body[data-site="How Argiles"] .header .header__brand .logo {
  display: block !important;
  flex: 0 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 96px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

body[data-site="How Argiles"] .header .header__wrapper {
  min-height: 106px !important;
}

body[data-site="How Argiles"] .footer__logo {
  width: min(300px, 100%) !important;
  max-width: 300px !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(223, 227, 215, 0.8) !important;
  border-radius: 16px !important;
  background: var(--ha-paper) !important;
}

body[data-site="How Argiles"] .footer__logo img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  filter: none !important;
  opacity: 1 !important;
  object-fit: contain !important;
}

@media (max-width: 1199px) {
  body[data-site="How Argiles"] .header,
  body[data-site="How Argiles"] .header__main,
  body[data-site="How Argiles"] .header > .container,
  body[data-site="How Argiles"] .header .header__wrapper {
    height: 90px !important;
    min-height: 90px !important;
  }

  body[data-site="How Argiles"] .header .header__brand {
    width: min(250px, calc(100vw - 100px)) !important;
    max-width: calc(100% - 62px) !important;
    height: 84px !important;
  }

  body[data-site="How Argiles"] .header .header__brand .logo {
    max-height: 82px !important;
  }
}

@media (max-width: 479px) {
  body[data-site="How Argiles"] .header,
  body[data-site="How Argiles"] .header__main,
  body[data-site="How Argiles"] .header > .container,
  body[data-site="How Argiles"] .header .header__wrapper {
    height: 82px !important;
    min-height: 82px !important;
  }

  body[data-site="How Argiles"] .header .header__brand {
    width: min(218px, calc(100vw - 92px)) !important;
    max-width: calc(100% - 58px) !important;
    height: 76px !important;
  }

  body[data-site="How Argiles"] .header .header__brand .logo {
    max-height: 74px !important;
  }

  body[data-site="How Argiles"] .footer__logo {
    width: min(260px, 100%) !important;
  }
}