/* [slyr] SOILS visual system | seed 693824387 | original build 2026 */

:root {
  --slyr-bedrock: #1b1229;
  --slyr-humus: #2c1a63;
  --slyr-humus-deep: #22114d;
  --slyr-teal: #1f5f57;
  --slyr-teal-deep: #174740;
  --slyr-moss: #3f6b4a;
  --slyr-ochre: #b06a1f;
  --slyr-ochre-deep: #8a4f12;
  --slyr-straw: #e9b96e;
  --slyr-straw-pale: #f5dfb8;
  --slyr-silt: #f6f1e8;
  --slyr-sand: #fbf8f2;
  --slyr-clay: #efe3d4;
  --slyr-clay-deep: #e4d2bd;
  --slyr-sandstone: #a96332;
  --slyr-fog: #5d5a6b;
  --slyr-letterpress: #221a2e;
  --slyr-rule: #d9cfc0;
  --slyr-paper: #ffffff;
  --slyr-mint: #8fd0c4;
  --slyr-alert: #9b1c1c;
  --slyr-gap-pip: 0.375rem;
  --slyr-gap-twig: 0.75rem;
  --slyr-gap-row: 1.25rem;
  --slyr-gap-plot: 2rem;
  --slyr-gap-acre: 3.5rem;
  --slyr-gap-ridge: 5.5rem;
  --slyr-edge: 3px;
  --slyr-lift: 0 18px 44px rgba(27, 18, 41, 0.12);
  --slyr-measure: 76rem;
  --slyr-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --slyr-font-head: "Raleway", "Inter", system-ui, sans-serif;
  --slyr-font-mark: "Lato", "Inter", system-ui, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--slyr-silt);
  color: var(--slyr-letterpress);
  font-family: var(--slyr-font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
svg {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--slyr-straw);
  color: var(--slyr-bedrock);
}

h1,
h2,
h3,
h4 {
  font-family: var(--slyr-font-head);
  color: var(--slyr-humus);
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0 0 1rem;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--slyr-ochre);
  outline-offset: 2px;
}

.slyr-skip {
  position: absolute;
  top: -6rem;
  left: 1rem;
  z-index: 120;
  background: var(--slyr-humus);
  color: var(--slyr-sand);
  padding: 0.8rem 1.1rem;
  border-radius: var(--slyr-edge);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}

.slyr-skip:focus {
  top: 0.75rem;
}

.slyr-wrap {
  width: 100%;
  max-width: var(--slyr-measure);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 3rem);
}

.slyr-main {
  display: block;
}

.slyr-ground {
  background: var(--slyr-silt);
}

#slyr-contact-form,
#slyr-register-form,
#slyr-library {
  scroll-margin-top: 7.5rem;
}

/* ------------------------------ top ridge ------------------------------ */

.slyr-ridge {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--slyr-sand);
  border-bottom: 1px solid var(--slyr-rule);
}

.slyr-ridge__tape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem clamp(1.1rem, 4vw, 3rem);
  background: var(--slyr-teal);
  color: var(--slyr-sand);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.slyr-ridge__tape p {
  margin: 0;
}

.slyr-ridge__place {
  font-weight: 700;
}

.slyr-ridge__motto {
  opacity: 0.8;
}

.slyr-ridge__bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.7rem clamp(1.1rem, 4vw, 3rem);
}

.slyr-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--slyr-humus);
  text-decoration: none;
  flex-shrink: 0;
}

.slyr-mark__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.slyr-mark__word {
  font-family: var(--slyr-font-mark);
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  line-height: 1;
}

.slyr-trails {
  display: flex;
  align-items: center;
  gap: clamp(0.45rem, 1.4vw, 1.25rem);
  margin-left: auto;
}

.slyr-trail {
  position: relative;
  padding: 0.35rem 0;
  color: var(--slyr-letterpress);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.slyr-trail:hover {
  color: var(--slyr-teal);
  border-bottom-color: var(--slyr-straw);
}

.slyr-trail[aria-current="page"] {
  color: var(--slyr-humus);
  font-weight: 700;
  border-bottom-color: var(--slyr-ochre);
}

.slyr-ridge__acts {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

.slyr-gate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--slyr-font-body);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.slyr-gate--solid {
  background: var(--slyr-humus);
  border-color: var(--slyr-humus);
  color: var(--slyr-sand);
}

.slyr-gate--solid:hover {
  background: var(--slyr-humus-deep);
  border-color: var(--slyr-humus-deep);
  transform: translateY(-1px);
}

.slyr-gate--line {
  background: transparent;
  border-color: var(--slyr-humus);
  color: var(--slyr-humus);
}

.slyr-gate--line:hover {
  background: var(--slyr-humus);
  color: var(--slyr-sand);
}

.slyr-gate--straw {
  background: var(--slyr-straw);
  border-color: var(--slyr-straw);
  color: var(--slyr-bedrock);
}

.slyr-gate--straw:hover {
  background: var(--slyr-straw-pale);
  border-color: var(--slyr-straw-pale);
  transform: translateY(-1px);
}

.slyr-gate--ghost {
  background: transparent;
  border-color: rgba(251, 248, 242, 0.55);
  color: var(--slyr-sand);
}

.slyr-gate--ghost:hover {
  background: var(--slyr-sand);
  border-color: var(--slyr-sand);
  color: var(--slyr-humus);
}

.slyr-burrow {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  background: transparent;
  border: 1px solid var(--slyr-rule);
  border-radius: 2px;
  color: var(--slyr-humus);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.slyr-burrow__bars {
  width: 18px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
}

.slyr-burrow__text {
  display: inline;
}

.slyr-burrow[aria-expanded="true"] .slyr-burrow__bars {
  background: transparent;
  box-shadow: none;
  position: relative;
}

.slyr-burrow[aria-expanded="true"] .slyr-burrow__bars::before,
.slyr-burrow[aria-expanded="true"] .slyr-burrow__bars::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.slyr-burrow[aria-expanded="true"] .slyr-burrow__bars::before {
  transform: rotate(45deg);
}

.slyr-burrow[aria-expanded="true"] .slyr-burrow__bars::after {
  transform: rotate(-45deg);
}

.slyr-drawer {
  padding: 0.75rem clamp(1.1rem, 4vw, 3rem) 1.25rem;
  background: var(--slyr-sand);
  border-top: 1px solid var(--slyr-rule);
}

.slyr-drawer__trails {
  display: grid;
  margin-bottom: 0.75rem;
}

.slyr-drawer__trails a {
  display: block;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--slyr-rule);
  color: var(--slyr-letterpress);
  font-weight: 600;
  text-decoration: none;
}

.slyr-drawer__trails a[aria-current="page"] {
  color: var(--slyr-humus);
}

.slyr-drawer .slyr-gate {
  width: 100%;
}

/* ------------------------------ hero plot ------------------------------ */

.slyr-plot {
  position: relative;
  overflow: hidden;
  background: var(--slyr-silt);
  border-bottom: 1px solid var(--slyr-rule);
}

.slyr-plot::before {
  content: "";
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 34%;
  background: var(--slyr-clay);
  border-left: 1px solid var(--slyr-rule);
}

.slyr-plot__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6rem);
}

.slyr-plot__words {
  min-width: 0;
  max-width: 41rem;
}

.slyr-kick {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.85rem;
  color: var(--slyr-ochre-deep);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.slyr-kick::before {
  content: "";
  display: inline-block;
  width: 1.4rem;
  height: 2px;
  background: var(--slyr-ochre);
  flex-shrink: 0;
}

.slyr-kick--light {
  color: var(--slyr-straw);
}

.slyr-kick--light::before {
  background: var(--slyr-straw);
}

.slyr-plot__title {
  max-width: 13ch;
  margin-bottom: 1.1rem;
  color: var(--slyr-humus);
  font-size: clamp(2.5rem, 5vw, 4.15rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.slyr-plot__lede {
  max-width: 38rem;
  margin-bottom: 1.7rem;
  color: var(--slyr-fog);
  font-size: clamp(1.02rem, 1.3vw, 1.16rem);
}

.slyr-plot__acts,
.slyr-opening__acts,
.slyr-call__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.slyr-plot__aside {
  margin: 1.4rem 0 0;
  padding-left: 0.8rem;
  border-left: 3px solid var(--slyr-straw);
  color: var(--slyr-fog);
  font-size: 0.84rem;
  max-width: 34rem;
}

.slyr-profile {
  min-width: 0;
  margin: 0;
}

.slyr-profile__art {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--slyr-rule);
  background: var(--slyr-sand);
  box-shadow: 16px 16px 0 var(--slyr-straw-pale);
}

.slyr-profile__cap {
  display: grid;
  gap: 0.25rem;
  margin-top: 1.15rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--slyr-rule);
  color: var(--slyr-fog);
  font-size: 0.82rem;
}

.slyr-profile__tag {
  color: var(--slyr-teal);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.slyr-microbe {
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .slyr-microbe--a,
  .slyr-microbe--e {
    animation: slyr-drift 9s ease-in-out infinite alternate;
  }
  .slyr-microbe--b,
  .slyr-microbe--f {
    animation: slyr-drift 11s ease-in-out 0.8s infinite alternate-reverse;
  }
  .slyr-microbe--c,
  .slyr-microbe--g {
    animation: slyr-drift 10s ease-in-out 0.4s infinite alternate;
  }
  .slyr-microbe--d,
  .slyr-microbe--h {
    animation: slyr-drift 12s ease-in-out 1.2s infinite alternate-reverse;
  }
}

@keyframes slyr-drift {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(5px, -7px);
  }
  100% {
    transform: translate(-4px, 5px);
  }
}

/* ------------------------------ shared beds ------------------------------ */

.slyr-bed {
  padding-block: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid var(--slyr-rule);
}

.slyr-bed--tight {
  padding-block: clamp(2.5rem, 4.5vw, 4rem);
}

.slyr-bed--clay {
  background: var(--slyr-clay);
}

.slyr-bed__head {
  max-width: 48rem;
  margin-bottom: clamp(1.8rem, 3vw, 2.8rem);
}

.slyr-bed__title {
  margin-bottom: 0.75rem;
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  font-weight: 700;
}

.slyr-bed__lede {
  max-width: 46rem;
  color: var(--slyr-fog);
  font-size: 1.04rem;
}

.slyr-bed__foot {
  margin-top: 1.8rem;
  font-size: 0.94rem;
}

.slyr-linkarrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--slyr-teal);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.slyr-linkarrow:hover {
  color: var(--slyr-teal-deep);
  border-bottom-color: var(--slyr-teal);
}

.slyr-inline {
  color: var(--slyr-teal);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.slyr-inline:hover {
  color: var(--slyr-teal-deep);
}

.slyr-triads {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.slyr-triad {
  min-width: 0;
  padding-top: 1.15rem;
  border-top: 3px solid var(--slyr-humus);
}

.slyr-triad:nth-child(2) {
  border-top-color: var(--slyr-teal);
}

.slyr-triad:nth-child(3) {
  border-top-color: var(--slyr-ochre);
}

.slyr-triad__num {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--slyr-ochre-deep);
  font-family: var(--slyr-font-head);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.slyr-triad__name {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  font-weight: 700;
}

.slyr-triad p {
  color: var(--slyr-fog);
  font-size: 0.95rem;
}

.slyr-split {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.slyr-split--reverse {
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
}

.slyr-split--even {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.slyr-split--form {
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
}

.slyr-split--faq {
  grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.32fr);
}

.slyr-split__text {
  min-width: 0;
}

.slyr-split__text p {
  color: var(--slyr-fog);
}

.slyr-split__text h2 {
  margin-bottom: 1rem;
}

.slyr-split__text .slyr-linkarrow {
  margin-top: 0.5rem;
}

.slyr-callout {
  padding: clamp(1.3rem, 2.5vw, 1.8rem);
  background: var(--slyr-sand);
  border: 1px solid var(--slyr-rule);
  border-left: 5px solid var(--slyr-ochre);
  border-radius: 2px;
}

.slyr-callout--teal {
  border-left-color: var(--slyr-teal);
}

.slyr-callout__label {
  margin-bottom: 0.6rem;
  color: var(--slyr-teal);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.slyr-callout__line {
  margin-bottom: 0.75rem;
  color: var(--slyr-humus);
  font-family: var(--slyr-font-head);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.slyr-callout__note {
  margin: 0;
  color: var(--slyr-fog);
  font-size: 0.9rem;
}

/* ------------------------------ card fields ------------------------------ */

.slyr-tilth {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--slyr-gap-row);
}

.slyr-tilth--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.slyr-tilth--format {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.slyr-crust {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--slyr-sand);
  border: 1px solid var(--slyr-rule);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.slyr-crust:hover {
  border-color: var(--slyr-humus);
  transform: translateY(-2px);
}

.slyr-crust__top {
  display: flex;
  align-items: center;
  padding-inline: 1.25rem;
  height: 54px;
  background: var(--slyr-humus);
  color: var(--slyr-sand);
}

.slyr-crust__top--moss {
  background: var(--slyr-moss);
}

.slyr-crust__top--ochre {
  background: var(--slyr-ochre);
}

.slyr-crust__top--teal {
  background: var(--slyr-teal);
}

.slyr-crust__top--violet {
  background: var(--slyr-humus);
}

.slyr-crust__top--clay {
  background: var(--slyr-sandstone);
}

.slyr-crust__top--straw {
  background: var(--slyr-straw);
  color: var(--slyr-bedrock);
}

.slyr-crust__name {
  margin: 0;
  padding: 1.05rem 1.25rem 0.45rem;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.25;
}

.slyr-crust p {
  padding: 0 1.25rem 1.25rem;
  margin: 0;
  color: var(--slyr-fog);
  font-size: 0.93rem;
}

.slyr-crust--plain {
  padding: 1.35rem;
  background: var(--slyr-sand);
}

.slyr-crust--plain:hover {
  transform: none;
}

.slyr-crust--plain .slyr-crust__name {
  padding: 0.35rem 0 0.5rem;
}

.slyr-crust--plain p {
  padding: 0;
}

.slyr-crust__num {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--slyr-ochre-deep);
  font-family: var(--slyr-font-head);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.slyr-crust__tag {
  display: block;
  padding: 1rem 1.25rem 0;
  color: var(--slyr-teal);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.slyr-crust--session .slyr-crust__name {
  padding-top: 0.4rem;
}

.slyr-crust--session {
  padding-bottom: 1.15rem;
}

.slyr-crust--session p {
  padding-bottom: 0;
}

.slyr-stack {
  border-top: 2px solid var(--slyr-humus);
}

.slyr-stack__row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1.2rem;
  align-items: baseline;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--slyr-rule);
}

.slyr-stack__tag {
  color: var(--slyr-teal);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.slyr-stack__row p {
  margin: 0;
  color: var(--slyr-fog);
  font-size: 0.95rem;
}

.slyr-pips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 1.1rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.slyr-pips li {
  position: relative;
  padding-left: 1.3rem;
  color: var(--slyr-fog);
  font-size: 0.95rem;
}

.slyr-pips li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--slyr-ochre);
}

.slyr-pips--boxed {
  grid-template-columns: 1fr;
  margin-top: 0;
  padding: 1.4rem;
  background: var(--slyr-sand);
  border: 1px solid var(--slyr-rule);
  border-top: 4px solid var(--slyr-teal);
}

.slyr-expect {
  padding-top: 0.9rem;
  border-top: 2px solid var(--slyr-humus);
}

.slyr-expect__head {
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
}

.slyr-expect__item {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--slyr-rule);
}

.slyr-expect__item h4 {
  margin-bottom: 0.25rem;
  font-size: 1rem;
}

.slyr-expect__item p {
  margin: 0;
  color: var(--slyr-fog);
  font-size: 0.92rem;
}

/* ------------------------------ folds ------------------------------ */

.slyr-folds {
  border-top: 2px solid var(--slyr-humus);
}

.slyr-fold {
  border-bottom: 1px solid var(--slyr-rule);
}

.slyr-fold__tab {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
  background: transparent;
  border: 0;
  color: var(--slyr-humus);
  font-family: var(--slyr-font-head);
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.slyr-fold__sign {
  position: relative;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.slyr-fold__sign::before,
.slyr-fold__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1rem;
  height: 2px;
  background: var(--slyr-ochre);
  transition: transform 0.2s ease;
}

.slyr-fold__sign::after {
  transform: rotate(90deg);
}

.slyr-fold__tab[aria-expanded="true"] .slyr-fold__sign::after {
  transform: rotate(0deg);
}

.slyr-fold__panel {
  padding: 0 0 1.15rem;
  max-width: 46rem;
}

.slyr-fold__panel p {
  margin: 0;
  color: var(--slyr-fog);
  font-size: 0.96rem;
}

/* ------------------------------ call band ------------------------------ */

.slyr-call {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  background: var(--slyr-humus);
  border-top: 6px solid var(--slyr-straw);
  color: var(--slyr-sand);
}

.slyr-call__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.slyr-call__title {
  margin-bottom: 0.55rem;
  color: var(--slyr-sand);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.slyr-call__lede {
  max-width: 44rem;
  color: rgba(251, 248, 242, 0.82);
  font-size: 1rem;
}

/* ------------------------------ footer ------------------------------ */

.slyr-loam {
  padding-block: 2.8rem 1.4rem;
  background: var(--slyr-bedrock);
  color: var(--slyr-sand);
}

.slyr-loam__top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 2rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid rgba(251, 248, 242, 0.16);
}

.slyr-mark--light {
  color: var(--slyr-sand);
}

.slyr-loam__sign p {
  max-width: 23rem;
  margin-top: 0.85rem;
  color: rgba(251, 248, 242, 0.68);
  font-size: 0.9rem;
}

.slyr-loam__map {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-self: end;
  min-width: 20rem;
}

.slyr-loam__map > div {
  min-width: 8rem;
}

.slyr-loam__head {
  margin-bottom: 0.7rem;
  color: var(--slyr-straw);
  font-family: var(--slyr-font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.slyr-loam__map a {
  display: block;
  padding: 0.2rem 0;
  color: rgba(251, 248, 242, 0.76);
  font-size: 0.9rem;
  text-decoration: none;
}

.slyr-loam__map a:hover {
  color: var(--slyr-paper);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.slyr-loam__base {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.2rem;
  color: rgba(251, 248, 242, 0.52);
  font-size: 0.78rem;
}

.slyr-loam__base p {
  margin: 0;
}

/* ------------------------------ page opening ------------------------------ */

.slyr-opening {
  padding-block: clamp(2.6rem, 6vw, 4.8rem);
  background: var(--slyr-silt);
  border-bottom: 6px solid var(--slyr-clay-deep);
}

.slyr-depthline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
  color: var(--slyr-fog);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.slyr-depthline a {
  color: var(--slyr-teal);
  text-decoration: none;
}

.slyr-depthline a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.slyr-opening__title {
  max-width: 20ch;
  margin-bottom: 1rem;
  font-size: clamp(2.1rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.slyr-opening__lede {
  max-width: 47rem;
  color: var(--slyr-fog);
  font-size: 1.06rem;
}

.slyr-opening__acts {
  margin-top: 1.5rem;
}

/* ------------------------------ tracks and timeline ------------------------------ */

.slyr-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--slyr-gap-row);
}

.slyr-track--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.slyr-track__step {
  min-width: 0;
  padding-top: 1rem;
  border-top: 3px solid var(--slyr-rule);
}

.slyr-track__step:nth-child(1) {
  border-top-color: var(--slyr-teal);
}

.slyr-track__step:nth-child(2) {
  border-top-color: var(--slyr-ochre);
}

.slyr-track__step:nth-child(3) {
  border-top-color: var(--slyr-humus);
}

.slyr-track__step:nth-child(4) {
  border-top-color: var(--slyr-moss);
}

.slyr-track__num {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--slyr-ochre-deep);
  font-family: var(--slyr-font-head);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.slyr-track__step h3 {
  margin-bottom: 0.4rem;
  font-size: 1.06rem;
}

.slyr-track__step p {
  color: var(--slyr-fog);
  font-size: 0.92rem;
}

.slyr-timeline {
  margin: 0;
  padding: 0 0 0 1.5rem;
  border-left: 2px solid var(--slyr-rule);
  list-style: none;
  display: grid;
  gap: 1.25rem;
}

.slyr-timeline li {
  position: relative;
}

.slyr-timeline__mark {
  position: absolute;
  left: -1.9rem;
  top: 0.35rem;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--slyr-ochre);
  border: 2px solid var(--slyr-silt);
}

.slyr-timeline h3 {
  margin-bottom: 0.25rem;
  font-size: 1.02rem;
}

.slyr-timeline p {
  margin: 0;
  color: var(--slyr-fog);
  font-size: 0.93rem;
}

/* ------------------------------ filters and search ------------------------------ */

.slyr-sift {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1.4rem 0 0.7rem;
}

.slyr-sift__tab {
  padding: 0.48rem 0.8rem;
  background: transparent;
  border: 1px solid var(--slyr-rule);
  border-radius: 2px;
  color: var(--slyr-fog);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.slyr-sift__tab:hover {
  border-color: var(--slyr-humus);
  color: var(--slyr-humus);
}

.slyr-sift__tab[aria-pressed="true"] {
  background: var(--slyr-humus);
  border-color: var(--slyr-humus);
  color: var(--slyr-sand);
}

.slyr-sift__count {
  margin: 0 0 1.5rem;
  color: var(--slyr-fog);
  font-size: 0.8rem;
}

.slyr-sieve {
  margin-bottom: 1.6rem;
}

.slyr-sieve__label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--slyr-humus);
  font-size: 0.84rem;
  font-weight: 600;
}

.slyr-sieve__input {
  width: 100%;
  max-width: 34rem;
  padding: 0.72rem 0.9rem;
  background: var(--slyr-sand);
  border: 1px solid var(--slyr-rule);
  border-radius: 2px;
  color: var(--slyr-letterpress);
  font: inherit;
  font-size: 0.95rem;
}

/* ------------------------------ checklist and rafts ------------------------------ */

.slyr-checklist {
  min-width: 0;
  padding: 1.4rem;
  background: var(--slyr-sand);
  border: 1px solid var(--slyr-rule);
  border-top: 4px solid var(--slyr-teal);
}

.slyr-checklist__head {
  font-size: 1.1rem;
}

.slyr-checklist .slyr-pips {
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

.slyr-checklist .slyr-gate {
  width: 100%;
  margin-top: 1.2rem;
}

.slyr-raft {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--slyr-gap-row);
}

.slyr-raft__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.35rem;
  background: var(--slyr-sand);
  border: 1px solid var(--slyr-rule);
  border-radius: 2px;
}

.slyr-raft__item h3 {
  margin-bottom: 0.45rem;
  font-size: 1.04rem;
}

.slyr-raft__item p {
  color: var(--slyr-fog);
  font-size: 0.91rem;
}

.slyr-raft__item .slyr-linkarrow {
  margin-top: auto;
  padding-top: 0.6rem;
}

/* ------------------------------ forms ------------------------------ */

.slyr-form {
  display: grid;
  gap: 1rem;
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--slyr-sand);
  border: 1px solid var(--slyr-rule);
  border-top: 5px solid var(--slyr-humus);
  border-radius: 2px;
}

.slyr-form__row {
  display: grid;
  gap: 0.32rem;
}

.slyr-form__label {
  color: var(--slyr-humus);
  font-size: 0.87rem;
  font-weight: 600;
}

.slyr-form__input {
  width: 100%;
  padding: 0.68rem 0.8rem;
  background: var(--slyr-paper);
  border: 1px solid var(--slyr-rule);
  border-radius: 2px;
  color: var(--slyr-letterpress);
  font: inherit;
  font-size: 0.95rem;
}

.slyr-form__input--tall {
  resize: vertical;
  min-height: 7rem;
}

.slyr-form__error {
  margin: 0;
  color: var(--slyr-alert);
  font-size: 0.8rem;
  font-weight: 500;
}

.slyr-form__note {
  margin: 0;
  color: var(--slyr-fog);
  font-size: 0.8rem;
}

.slyr-form__check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--slyr-fog);
  font-size: 0.88rem;
}

.slyr-form__box {
  margin-top: 0.25rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--slyr-humus);
  flex-shrink: 0;
}

.slyr-form__acts {
  margin-top: 0.3rem;
}

.slyr-form__acts .slyr-gate {
  width: 100%;
}

.slyr-form__status {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  background: rgba(31, 95, 87, 0.08);
  border: 1px solid var(--slyr-teal);
  border-radius: 2px;
  color: var(--slyr-fog);
  font-size: 0.9rem;
}

.slyr-form__status-title {
  margin: 0;
  color: var(--slyr-teal);
  font-weight: 700;
}

.slyr-fineprint {
  color: var(--slyr-fog);
  font-size: 0.84rem;
}

/* ------------------------------ resource shelf ------------------------------ */

.slyr-shelf {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--slyr-gap-row);
}

.slyr-source {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.3rem;
  background: var(--slyr-sand);
  border: 1px solid var(--slyr-rule);
  border-radius: 2px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.slyr-source:hover {
  border-color: var(--slyr-teal);
  transform: translateY(-2px);
}

.slyr-source__kind {
  margin-bottom: 0.4rem;
  color: var(--slyr-teal);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.slyr-source__name {
  margin-bottom: 0.4rem;
  font-size: 1.04rem;
  line-height: 1.25;
}

.slyr-source p:not(.slyr-source__kind) {
  color: var(--slyr-fog);
  font-size: 0.89rem;
}

.slyr-source .slyr-linkarrow {
  margin-top: auto;
  padding-top: 0.55rem;
}

.slyr-shelf__empty {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--slyr-sand);
  border: 1px dashed var(--slyr-rule);
  color: var(--slyr-fog);
  font-size: 0.93rem;
}

.slyr-shelf__foot {
  margin-top: 1.5rem;
}

/* ------------------------------ responsive ------------------------------ */

@media (max-width: 1080px) {
  .slyr-plot::before {
    width: 30%;
  }
  .slyr-trails {
    gap: 0.7rem;
  }
  .slyr-trail {
    font-size: 0.84rem;
  }
  .slyr-split--reverse {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

@media (max-width: 960px) {
  .slyr-trails {
    display: none;
  }
  .slyr-burrow {
    display: inline-flex;
  }
  .slyr-plot::before {
    display: none;
  }
  .slyr-plot__inner {
    grid-template-columns: 1fr;
  }
  .slyr-plot__title {
    max-width: 16ch;
  }
  .slyr-profile {
    max-width: 34rem;
  }
  .slyr-split,
  .slyr-split--reverse,
  .slyr-split--even,
  .slyr-split--form,
  .slyr-split--faq {
    grid-template-columns: 1fr;
  }
  .slyr-split--form .slyr-split__text {
    max-width: 44rem;
  }
  .slyr-tilth {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .slyr-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .slyr-track--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .slyr-raft,
  .slyr-shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .slyr-loam__top {
    grid-template-columns: 1fr;
  }
  .slyr-loam__map {
    justify-self: start;
  }
}

@media (max-width: 680px) {
  .slyr-ridge__motto {
    display: none;
  }
  .slyr-ridge__bar {
    gap: 0.75rem;
  }
  .slyr-triads,
  .slyr-tilth,
  .slyr-tilth--two,
  .slyr-track,
  .slyr-track--three,
  .slyr-raft,
  .slyr-shelf {
    grid-template-columns: 1fr;
  }
  .slyr-pips {
    grid-template-columns: 1fr;
  }
  .slyr-stack__row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
  .slyr-call__inner {
    align-items: flex-start;
  }
  .slyr-call__acts {
    width: 100%;
  }
  .slyr-call__acts .slyr-gate {
    flex: 1 1 12rem;
  }
  .slyr-loam__map {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 520px) {
  .slyr-ridge__bar .slyr-gate {
    display: none;
  }
  .slyr-ridge__tape {
    font-size: 0.62rem;
  }
  .slyr-plot__acts .slyr-gate,
  .slyr-opening__acts .slyr-gate {
    width: 100%;
  }
  .slyr-profile__art {
    box-shadow: 9px 9px 0 var(--slyr-straw-pale);
  }
  .slyr-loam__base {
    flex-direction: column;
    gap: 0.35rem;
  }
}

@media (max-width: 380px) {
  .slyr-wrap {
    padding-inline: 1rem;
  }
  .slyr-ridge__bar {
    padding-inline: 1rem;
  }
  .slyr-ridge__tape {
    padding-inline: 1rem;
  }
  .slyr-mark__word {
    font-size: 1.25rem;
  }
  .slyr-plot__title {
    font-size: 2.25rem;
  }
  .slyr-opening__title {
    font-size: 1.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .slyr-ridge,
  .slyr-call,
  .slyr-loam {
    display: none;
  }
  body {
    background: #fff;
  }
}