/*
  EnsouWorks — Page composition.
  Layout of the site's own sections. Components live one file up.
*/

/* ---- Sections ------------------------------------------------------------ */

.section {
  padding-block: var(--section);
}

.section--sunk {
  background-color: var(--c-ground-sunk);
  border-block: 1px solid var(--c-line-soft);
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 46rem;
  margin-bottom: var(--s-8);
}

.section__title {
  font-size: var(--t-2xl);
  max-width: 20ch;
}

/* The three verbs, set as a stacked triad rather than a sentence. */
.section__title--triad {
  display: flex;
  flex-direction: column;
  max-width: none;
  color: var(--c-ink-soft);
  line-height: 1.08;
}

.section__title--triad em {
  font-style: normal;
  color: var(--c-ink);
}

@media (min-width: 62rem) {
  .section__title--triad {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 0.5em;
  }
}

/* ---- Where the names come from -----------------------------------------------
   An editorial list rather than cards: this is reading material, and it should
   look like something written rather than something merchandised. */

.names {
  display: flex;
  flex-direction: column;
}

.name {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--s-4) var(--s-8);
  padding-block: var(--s-7);
  border-top: 1px solid var(--c-line-soft);
  align-items: start;
}

.name:last-child {
  border-bottom: 1px solid var(--c-line-soft);
}

@media (max-width: 62rem) {
  .name {
    grid-template-columns: 1fr;
    gap: var(--s-4);
    padding-block: var(--s-6);
  }
}

.name__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  position: sticky;
  top: 7rem;
}

@media (max-width: 62rem) {
  .name__head {
    position: static;
  }
}

.name__term {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP",
    "MS Mincho", serif;
  font-size: var(--t-xl);
  line-height: 1.1;
  letter-spacing: 0.06em;
  color: var(--c-ink-mute);
}

.name__title {
  font-size: var(--t-xl);
  line-height: 1.1;
}

.name__title a {
  text-decoration: none;
}

.name__title a:hover {
  color: var(--c-accent);
}

.name__literal {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-mute);
}

.name__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: var(--measure);
}

.name__tradition {
  color: var(--c-ink-soft);
}

/* The reason it earned its place here, set apart from the history above it. */
.name__lesson {
  padding-left: var(--s-5);
  border-left: 2px solid var(--c-accent);
  color: var(--c-ink);
}

/* ---- Products that answer back --------------------------------------------- */

.answer-back {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-7) var(--s-9);
  align-items: start;
}

@media (max-width: 62rem) {
  .answer-back {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
}

.answer-back__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.answer-back .section__title {
  max-width: 22ch;
}

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

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(34rem, 82vh, 52rem);
  padding-block: var(--s-9) var(--s-8);
  overflow: hidden;
  border-bottom: 1px solid var(--c-line-soft);
}

.hero__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
  pointer-events: none;
}

/* The sand takes a mark from the pointer, so the field must stay reachable
   underneath the copy. Only the controls take pointer events back. */
.hero__inner a,
.hero__inner button {
  pointer-events: auto;
}

.hero__eyebrow {
  color: var(--c-ink-mute);
}

.hero__headline {
  font-size: var(--t-3xl);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--c-ink-soft);
  max-width: 15ch;
}

.hero__line {
  display: block;
}

.hero__line em {
  font-style: normal;
  color: var(--c-ink);
}

.hero__lede {
  max-width: 44ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-3);
}

@media (max-width: 56rem) {
  .hero {
    min-height: auto;
    padding-block: var(--s-8) var(--s-9);
  }

  .hero__lede {
    max-width: 52ch;
  }
}

/* ---- Practice cards ------------------------------------------------------- */

.practices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}

@media (max-width: 62rem) {
  .practices {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
}

.practice-card {
  --card-tint: var(--c-accent);
  display: flex;
}

.practice-card[data-practice="ikigai"] {
  --card-tint: var(--c-ikigai);
}

.practice-card[data-practice="kintsugi"] {
  --card-tint: var(--c-kintsugi);
}

.practice-card[data-practice="kaizen"] {
  --card-tint: var(--c-kaizen);
}

.practice-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  color: inherit;
  background-color: var(--c-ground-raised);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color var(--d-base) var(--ease-sand),
    transform var(--d-base) var(--ease-sand);
}

.practice-card__link:hover {
  border-color: var(--card-tint);
  transform: translateY(-3px);
  color: inherit;
}

.practice-card__plate {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  border-bottom: 1px solid var(--c-line-soft);
}

.practice-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  flex: 1;
}

.practice-card__condition {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--card-tint);
}

.practice-card__name {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--card-tint);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line-soft);
}

.practice-card__origin {
  font-family: var(--f-display);
  font-size: var(--t-base);
  line-height: 1.4;
  color: var(--c-ink-soft);
  padding-top: var(--s-3);
}

.practice-card__lede {
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
  line-height: 1.6;
  padding-top: var(--s-2);
}

.practice-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-5);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--card-tint);
}

.practice-card__link:hover .btn__arrow {
  transform: translateX(3px);
}

/* ---- Situations ------------------------------------------------------------ */

.situations {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8) var(--s-9);
  align-items: start;
}

@media (max-width: 62rem) {
  .situations {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
}

.situations__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.paths {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.path {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-block: var(--s-4);
  border-top: 1px solid var(--c-line-soft);
}

.path:last-child {
  border-bottom: 1px solid var(--c-line-soft);
}

.path__move {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--f-display);
  font-size: var(--t-lg);
}

.path__arrow {
  color: var(--c-ink-mute);
  font-size: var(--t-base);
}

.path__node--entry::before {
  content: "→ ";
  color: var(--c-ink-mute);
}

.path__note {
  font-size: var(--t-sm);
  color: var(--c-ink-mute);
}

/* ---- Care list -------------------------------------------------------------- */

.care {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8) var(--s-9);
  align-items: start;
}

@media (max-width: 62rem) {
  .care {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
}

.care__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.care__list {
  list-style: none;
  padding: 0;
  counter-reset: care;
  display: flex;
  flex-direction: column;
}

.care__list li {
  counter-increment: care;
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-top: 1px solid var(--c-line-soft);
  font-family: var(--f-display);
  font-size: var(--t-lg);
  color: var(--c-ink);
}

.care__list li:last-child {
  border-bottom: 1px solid var(--c-line-soft);
}

.care__list li::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--r-circle);
  background-color: var(--c-accent);
  opacity: 0.5;
  transform: translateY(-0.25em);
}

.practice-card__situation {
  font-size: var(--t-lg);
  line-height: 1.2;
  color: var(--c-ink);
}

.practice-card__discipline {
  color: var(--c-ink-mute);
}

.care__coda {
  grid-column: 1 / -1;
  max-width: 62ch;
  padding-top: var(--s-6);
  margin-top: var(--s-6);
  border-top: 1px solid var(--c-line-soft);
  color: var(--c-ink-soft);
}

.care__coda strong {
  color: var(--c-ink);
  font-weight: 500;
}

/* ---- How an engagement starts --------------------------------------------------- */

.starts {
  list-style: none;
  padding: 0;
  counter-reset: start;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--s-5);
}

.start {
  counter-increment: start;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 2px solid var(--c-accent);
}

.start::before {
  content: counter(start);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  color: var(--c-ink-mute);
}

.start__step {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  letter-spacing: var(--ls-tight);
  line-height: 1.2;
}

.start__detail {
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
  line-height: 1.6;
}

/* ---- Engagement shape ------------------------------------------------------------ */

.engagement {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: var(--s-8) var(--s-9);
  align-items: start;
}

@media (max-width: 62rem) {
  .engagement {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
}

.engagement__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.engagement__list {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.engagement__item {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: var(--s-2) var(--s-5);
  padding-block: var(--s-4);
  border-top: 1px solid var(--c-line-soft);
}

.engagement__item:last-child {
  border-bottom: 1px solid var(--c-line-soft);
}

@media (max-width: 40rem) {
  .engagement__item {
    grid-template-columns: 1fr;
  }
}

.engagement__label {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-mute);
  padding-top: 0.2em;
}

.engagement__text {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
  line-height: 1.6;
}

.engagement__note {
  margin-top: var(--s-5);
  padding-left: var(--s-5);
  border-left: 2px solid var(--c-accent);
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
  line-height: 1.6;
  max-width: 62ch;
}

/* ---- Extra narrative sections (agents) ---------------------------------------------- */

.extra {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-6) var(--s-9);
  align-items: start;
  padding-block: var(--s-7);
  border-top: 1px solid var(--c-line-soft);
}

.extra:first-of-type {
  border-top: 0;
  padding-top: 0;
}

@media (max-width: 62rem) {
  .extra {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
}

.extra__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.extra__title {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  line-height: 1.18;
  letter-spacing: var(--ls-tight);
  max-width: 22ch;
}

/* ---- FAQ ------------------------------------------------------------------------- */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  gap: var(--s-7) var(--s-9);
  align-items: start;
}

@media (max-width: 62rem) {
  .faq {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
}

.faq__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.faq__list {
  display: flex;
  flex-direction: column;
}

/* ---- Practice page additions ------------------------------------------------------ */

.practice-hero__headline {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  line-height: 1.08;
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
  max-width: 20ch;
}

.practice-hero__body {
  gap: var(--s-4);
}

.practice-states {
  padding-left: var(--s-5);
  border-left: 2px solid var(--card-tint, var(--c-accent));
  color: var(--c-ink);
}

.etymology {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background-color: var(--c-ground-raised);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  line-height: 1.6;
}

.etymology__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.etymology__term {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP",
    "MS Mincho", serif;
  font-size: var(--t-lg);
  color: var(--c-ink);
  letter-spacing: 0.08em;
}

.etymology__literal {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-mute);
}

.etymology__lesson {
  padding-left: var(--s-4);
  border-left: 2px solid var(--card-tint, var(--c-accent));
  color: var(--c-ink);
}

/* ---- Approach additions ------------------------------------------------------------ */

.who {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: var(--s-7) var(--s-9);
  align-items: start;
}

@media (max-width: 62rem) {
  .who {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
}

.who__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.approach__coda {
  max-width: 60ch;
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line-soft);
  font-family: var(--f-display);
  font-size: var(--t-lg);
  line-height: 1.35;
  letter-spacing: var(--ls-tight);
  color: var(--c-ink-soft);
}

/* ---- Signpost ---------------------------------------------------------------------------
   A single cross-link for readers whose situation is more specific than the page
   they landed on. */

.signpost {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-6);
  text-decoration: none;
  color: inherit;
  background-color: var(--c-ground-raised);
  border: 1px solid var(--c-line-soft);
  border-left: 2px solid var(--c-seam);
  border-radius: var(--r-sm);
  transition: border-color var(--d-base) var(--ease-sand),
    transform var(--d-base) var(--ease-sand);
}

.signpost:hover {
  color: inherit;
  transform: translateY(-2px);
  border-color: var(--c-seam);
}

.signpost__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.signpost__title {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  letter-spacing: var(--ls-tight);
  line-height: 1.2;
}

.signpost__note {
  font-size: var(--t-sm);
  color: var(--c-ink-mute);
}

.signpost__arrow {
  flex: none;
  font-size: var(--t-lg);
  color: var(--c-seam);
}

/* ---- Verdict (keep / discard) ------------------------------------------------------------- */

.verdict {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--s-5);
}

.verdict__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-6);
  background-color: var(--c-ground-raised);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
}

.verdict__item p:last-child {
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
  line-height: 1.6;
}

.verdict__lead {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
}

/* The salvageable half is the one the gold belongs to. */
.verdict__item--keep {
  border-left: 2px solid var(--c-seam);
}

.verdict__item--keep .verdict__lead {
  color: var(--c-seam);
}

/* ---- Contact additions --------------------------------------------------------------- */

.promise {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--c-ink);
  line-height: 1.55;
}

.promise__mark {
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--r-circle);
  background-color: var(--c-accent);
}

/* Off-screen rather than display:none — bots skip hidden inputs but happily
   fill anything that is merely out of view. */
.decoy {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__progress {
  display: none;
  list-style: none;
  padding: 0;
  gap: var(--s-4);
  counter-reset: progress;
}

.form--stepped .form__progress {
  display: flex;
}

.form__progress-item {
  counter-increment: progress;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-mute);
  padding-top: var(--s-3);
  border-top: 2px solid var(--c-line-soft);
  flex: 1;
  transition: color var(--d-base) var(--ease-sand),
    border-color var(--d-base) var(--ease-sand);
}

.form__progress-item::before {
  content: counter(progress);
}

.form__progress-item.is-current,
.form__progress-item.is-done {
  color: var(--c-ink);
  border-top-color: var(--c-accent);
}

.form__step {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.form__step[hidden] {
  display: none;
}

.form__optional summary {
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-mute);
  padding-block: var(--s-2);
}

.form__optional summary:hover {
  color: var(--c-ink);
}

.form__optional summary span {
  text-transform: none;
  letter-spacing: 0;
}

.form__optional-body {
  padding-top: var(--s-4);
}

/* ---- Sticky call to action ---------------------------------------------------------------
   Phones only, and never on the contact page itself, where the form is the page. */

.sticky-cta {
  display: none;
}

@media (max-width: 46rem) {
  .sticky-cta {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    display: block;
    padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
    background-color: color-mix(in srgb, var(--c-ground) 92%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--c-line-soft);
  }

  .sticky-cta .btn {
    width: 100%;
    justify-content: center;
    padding-block: 0.9em;
  }

  body:has(.contact) .sticky-cta {
    display: none;
  }

  .site-footer {
    padding-bottom: var(--s-9);
  }
}

.contact__after {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background-color: var(--c-ground-raised);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
  line-height: 1.6;
}

/* ---- Commitments --------------------------------------------------------------
   Standing in for case studies until there are case studies. Set as a ledger
   rather than a sales panel — these are things someone can check, not claims. */

.commitments {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: var(--s-7) var(--s-9);
  align-items: start;
}

@media (max-width: 62rem) {
  .commitments {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
}

.commitments__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.commitments__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.commitment {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-block: var(--s-5);
  border-top: 1px solid var(--c-line-soft);
}

.commitment:last-child {
  border-bottom: 1px solid var(--c-line-soft);
}

.commitment__what {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--f-display);
  font-size: var(--t-lg);
  line-height: 1.25;
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
}

.commitment__what::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--r-circle);
  background-color: var(--c-accent);
  transform: translateY(-0.2em);
}

.commitment__how {
  padding-left: calc(0.45rem + var(--s-3));
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
  line-height: 1.6;
  max-width: 58ch;
}

/* ---- Closing ----------------------------------------------------------------- */

.closing {
  padding-block: var(--section);
  border-top: 1px solid var(--c-line-soft);
  background-color: var(--c-ground-sunk);
}

.closing__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}

.closing__title {
  font-size: var(--t-2xl);
  max-width: 22ch;
}

.closing__lede {
  max-width: 48ch;
}

.closing__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  margin-top: var(--s-3);
}

/* ---- Practice page -------------------------------------------------------------- */

.practice-hero {
  --card-tint: var(--c-accent);
  position: relative;
  padding-block: var(--s-9) var(--section);
  border-bottom: 1px solid var(--c-line-soft);
  overflow: hidden;
}

.practice-hero[data-practice="ikigai"] {
  --card-tint: var(--c-ikigai);
}

.practice-hero[data-practice="kintsugi"] {
  --card-tint: var(--c-kintsugi);
}

.practice-hero[data-practice="kaizen"] {
  --card-tint: var(--c-kaizen);
}

.practice-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--s-8) var(--s-9);
  align-items: center;
}

@media (max-width: 62rem) {
  .practice-hero__grid {
    grid-template-columns: 1fr;
  }
}

.practice-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}

.practice-hero__kicker {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
}

.practice-hero__condition {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-mute);
}

.practice-hero__name {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--card-tint);
}

.practice-hero__verb {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  color: var(--c-ink-soft);
}

.practice-hero__tagline {
  font-size: var(--t-md);
  color: var(--c-ink-mute);
}

.practice-hero__plate {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
}

.practice-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8) var(--s-9);
  align-items: start;
}

@media (max-width: 62rem) {
  .practice-body {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
}

.moves {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.move {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-block: var(--s-5);
  border-top: 1px solid var(--c-line-soft);
}

.move:last-child {
  border-bottom: 1px solid var(--c-line-soft);
}

.move__name {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  letter-spacing: var(--ls-tight);
}

.move__detail {
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
  line-height: 1.6;
  max-width: 52ch;
}

.fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--s-5);
}

.fit__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background-color: var(--c-ground-raised);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
}

.fit__item p {
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
  line-height: 1.6;
}

.outcome {
  padding: var(--s-6);
  border-left: 2px solid var(--card-tint, var(--c-accent));
  background-color: var(--c-ground-raised);
}

.outcome p {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  line-height: 1.35;
  letter-spacing: var(--ls-tight);
  max-width: 34ch;
}

/* ---- Elsewhere (cross links) ------------------------------------------------------ */

.practice-others {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin-top: var(--s-8);
}

.elsewhere {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--s-5);
}

.elsewhere__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
  background-color: var(--c-ground-raised);
  transition: border-color var(--d-base) var(--ease-sand);
}

.elsewhere__card:hover {
  border-color: var(--c-accent);
  color: inherit;
}

.elsewhere__name {
  font-family: var(--f-display);
  font-size: var(--t-lg);
}

.elsewhere__note {
  font-size: var(--t-sm);
  color: var(--c-ink-mute);
}

/* ---- Contact ------------------------------------------------------------------------ */

.contact {
  padding-block: var(--s-9) var(--section);
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: var(--s-8) var(--s-9);
  align-items: start;
}

@media (max-width: 62rem) {
  .contact__grid {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
}

.contact__intro {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: sticky;
  top: 7rem;
}

@media (max-width: 62rem) {
  .contact__intro {
    position: static;
  }
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--s-5);
}

.form__actions {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.form__errors {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.form__errors ul {
  margin: 0;
  padding-left: var(--s-5);
}

/* ---- Received -------------------------------------------------------------------------- */

.received {
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding-block: var(--s-9);
}

.received__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  max-width: 40rem;
}

/* ---- Design system page ------------------------------------------------------------------ */

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: var(--s-4);
}

.swatch {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.swatch__chip {
  height: 4.5rem;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
}

.swatch__name {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-ink);
}

.swatch__use {
  font-size: var(--t-xs);
  color: var(--c-ink-mute);
  line-height: 1.5;
}

.specimen {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.specimen__row {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-line-soft);
}

.specimen__meta {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-ink-mute);
}

.specimen__sample {
  letter-spacing: var(--ls-tight);
}

.system-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-block: var(--s-7);
  border-top: 1px solid var(--c-line-soft);
}

.system-block__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-width: 46rem;
}

.system-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}

/* ---- Page header (secondary pages) ---------------------------------------------------------- */

.page-head {
  padding-block: var(--s-9) var(--s-8);
  border-bottom: 1px solid var(--c-line-soft);
}

.page-head__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 46rem;
}

.page-head__title {
  font-size: var(--t-2xl);
}