/* LB Task 14: the two-door root and the business practice.

   The family resemblance is deliberate: this sheet declares no palette and
   no typeface of its own. Every colour, face and step of space comes from
   the tokens in pattern-shell.css, so these pages are siblings of the health
   practice rather than a second design.

   What separates the two practices is linework and one accent apiece, never
   a card and never a gradient. A door is a plate of paper with a rule above
   it. The business accent is a deepened iodine, dark enough to carry text on
   chalk; the health accent is the mineral the health practice already uses.

   Every transition sits inside prefers-reduced-motion: no-preference, so the
   reduced-motion pass finds nothing animating. Every action clears 44px. */

:root {
  --practice-amber: #8A5A17;
  --practice-amber-rule: #F2A65A;
  --practice-mineral: #0F5450;
  --practice-mineral-rule: #16716C;
  --practice-rule: rgba(37, 26, 44, 0.14);
  --practice-measure: 62ch;
}

.practice-page {
  background: var(--pattern-chalk);
  color: var(--pattern-aubergine);
}

.practice-page .practice-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 900px) {
  .practice-page .practice-wrap { padding: 0 40px; }
}

/* ---------- shared editorial furniture ---------- */

.practice-page .practice-index {
  font-family: var(--pattern-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pattern-ink-66);
  margin: 0 0 var(--pattern-space-2);
}

.practice-page .practice-eyebrow {
  font-family: var(--pattern-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pattern-ink-66);
  margin: 0 0 var(--pattern-space-2);
}

.practice-page .practice-display {
  font-family: var(--pattern-display);
  font-weight: 800;
  font-size: clamp(30px, 6.2vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  /* Wide enough that each approved sentence keeps its own line at desktop.
     The owner emits the headline as sentence blocks, and a measure that
     wrapped them again would put the break back where it came from. */
  max-width: 30ch;
}

.practice-page .practice-lede {
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.6;
  max-width: var(--practice-measure);
  margin: var(--pattern-space-3) 0 0;
}

.practice-page .practice-body {
  max-width: var(--practice-measure);
  margin: var(--pattern-space-3) 0 0;
}

.practice-page .practice-heading {
  font-family: var(--pattern-display);
  font-weight: 700;
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0;
}

.practice-page .practice-section {
  padding-block: var(--pattern-space-5);
  border-top: 1px solid var(--practice-rule);
}

.practice-page .practice-section:first-of-type { border-top: 0; }

@media (min-width: 900px) {
  .practice-page .practice-section { padding-block: var(--pattern-space-6); }
}

.practice-page .practice-note {
  font-family: var(--pattern-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--pattern-ink-66);
  max-width: 56ch;
}

/* ---------- the root masthead ---------- */

.practice-page .masthead {
  padding-block: var(--pattern-space-5) var(--pattern-space-4);
}

@media (min-width: 900px) {
  .practice-page .masthead { padding-block: var(--pattern-space-6) var(--pattern-space-5); }
}

.practice-page .masthead__name {
  font-family: var(--pattern-mono);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pattern-ink-72);
  margin: 0 0 var(--pattern-space-3);
}

.practice-page .masthead__umbrella {
  font-size: clamp(17px, 2.3vw, 21px);
  line-height: 1.55;
  max-width: 54ch;
  margin: var(--pattern-space-4) 0 0;
  color: var(--pattern-ink-82);
}

/* ---------- the two doors ---------- */

.practice-page .doorway {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--practice-rule);
}

@media (min-width: 860px) {
  .practice-page .doorway {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--pattern-space-5);
  }
}

.practice-page .door {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block: var(--pattern-space-4) var(--pattern-space-5);
  border-bottom: 1px solid var(--practice-rule);
}

@media (min-width: 860px) {
  .practice-page .door {
    border-bottom: 0;
    padding-bottom: var(--pattern-space-6);
  }
  .practice-page .door + .door {
    padding-left: var(--pattern-space-5);
    border-left: 1px solid var(--practice-rule);
  }
}

/* The one accent each practice owns: a short rule that sits on the plate's
   own top edge, drawn over the shared hairline rather than beside it. */
.practice-page .door::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 64px;
  height: 3px;
}

@media (min-width: 860px) {
  .practice-page .door + .door::before { left: var(--pattern-space-5); }
}

.practice-page .door--business::before { background: var(--practice-amber-rule); }
.practice-page .door--health::before { background: var(--practice-mineral-rule); }

.practice-page .door__index {
  font-family: var(--pattern-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--pattern-ink-66);
  margin: 0 0 var(--pattern-space-2);
}

.practice-page .door__label {
  font-family: var(--pattern-mono);
  font-size: clamp(12px, 1.5vw, 13px);
  line-height: 1.5;
  letter-spacing: 0.16em;
  margin: 0;
}

.practice-page .door--business .door__label { color: var(--practice-amber); }
.practice-page .door--health .door__label { color: var(--practice-mineral); }

.practice-page .door__summary {
  font-family: var(--pattern-display);
  font-weight: 700;
  font-size: clamp(21px, 3.1vw, 28px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: var(--pattern-space-2) 0 0;
  max-width: 22ch;
}

.practice-page .door__action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: auto;
  padding-top: var(--pattern-space-4);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  align-self: flex-start;
}

.practice-page .door--business .door__action { color: var(--practice-amber); }
.practice-page .door--health .door__action { color: var(--practice-mineral); }

.practice-page .door__action::after {
  content: "\2192";
  font-family: var(--pattern-mono);
}

@media (prefers-reduced-motion: no-preference) {
  .practice-page .door__action::after { transition: transform 160ms ease-out; }
  .practice-page .door__action:hover::after { transform: translateX(4px); }
}

/* ---------- the root's quiet identity note ---------- */

.practice-page .root-note {
  padding-block: var(--pattern-space-5);
  border-top: 1px solid var(--practice-rule);
}

.practice-page .root-note p {
  max-width: 56ch;
  margin: var(--pattern-space-2) 0 0;
  color: var(--pattern-ink-82);
}

/* ---------- business: what I take on ---------- */

.practice-page .takes-on {
  list-style: none;
  margin: var(--pattern-space-4) 0 0;
  padding: 0;
  max-width: var(--practice-measure);
}

.practice-page .takes-on__item {
  padding-block: var(--pattern-space-3);
  border-top: 1px solid var(--practice-rule);
  display: grid;
  grid-template-columns: 2.4em 1fr;
  gap: var(--pattern-space-2);
  align-items: baseline;
}

.practice-page .takes-on__item:last-child { border-bottom: 1px solid var(--practice-rule); }

.practice-page .takes-on__mark {
  font-family: var(--pattern-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--practice-amber);
}

/* ---------- business: how the work runs ---------- */

.practice-page .runs {
  list-style: none;
  margin: var(--pattern-space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--pattern-space-4);
}

@media (min-width: 860px) {
  .practice-page .runs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--pattern-space-3);
  }
}

.practice-page .runs__step {
  padding-top: var(--pattern-space-3);
  border-top: 2px solid var(--practice-amber-rule);
}

.practice-page .runs__num {
  font-family: var(--pattern-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--pattern-ink-66);
  display: block;
}

.practice-page .runs__name {
  font-family: var(--pattern-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  margin: var(--pattern-space-1) 0 var(--pattern-space-2);
}

.practice-page .runs__body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--pattern-ink-82);
  margin: 0;
}

/* ---------- business: the first engagement ---------- */

.practice-page .engagement {
  margin: var(--pattern-space-4) 0 0;
  padding: var(--pattern-space-4);
  background: var(--pattern-surface);
  border-left: 3px solid var(--practice-amber-rule);
  max-width: var(--practice-measure);
}

.practice-page .engagement__name {
  font-family: var(--pattern-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--practice-amber);
  margin: 0 0 var(--pattern-space-2);
}

.practice-page .engagement p { margin: 0 0 var(--pattern-space-2); }
.practice-page .engagement p:last-child { margin-bottom: 0; }

/* ---------- business: the worked sample ---------- */

.practice-page .sample {
  margin: var(--pattern-space-4) 0 0;
  background: var(--pattern-surface);
  border: 1px solid var(--practice-rule);
  padding: var(--pattern-space-3);
}

@media (min-width: 720px) {
  .practice-page .sample { padding: var(--pattern-space-4); }
}

.practice-page .sample__disclosure {
  font-family: var(--pattern-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--pattern-ink-66);
  margin: 0 0 var(--pattern-space-3);
  padding-bottom: var(--pattern-space-3);
  border-bottom: 1px solid var(--practice-rule);
}

.practice-page .sample__part { padding-block: var(--pattern-space-3); }
.practice-page .sample__part + .sample__part { border-top: 1px solid var(--practice-rule); }

.practice-page .sample__label {
  font-family: var(--pattern-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--practice-amber);
  display: block;
  margin-bottom: var(--pattern-space-2);
}

.practice-page .sample__question {
  font-family: var(--pattern-display);
  font-weight: 700;
  font-size: clamp(18px, 2.6vw, 22px);
  line-height: 1.3;
  margin: 0;
}

.practice-page .sample__list {
  margin: 0;
  padding-left: 1.1em;
  display: grid;
  gap: var(--pattern-space-2);
}

.practice-page .sample__list li { line-height: 1.6; }

.practice-page .sample__body { margin: 0; line-height: 1.6; }

/* ---------- business: the enquiry ---------- */

.practice-page .enquiry {
  margin: var(--pattern-space-4) 0 0;
  max-width: 46rem;
}

.practice-page .enquiry__field { margin: 0 0 var(--pattern-space-3); }

.practice-page .enquiry label {
  display: block;
  font-weight: 700;
  margin-bottom: var(--pattern-space-1);
}

.practice-page .enquiry input[type="text"],
.practice-page .enquiry input[type="email"],
.practice-page .enquiry textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--pattern-aubergine);
  background: var(--pattern-surface);
  border: 1px solid var(--pattern-ink-66);
  border-radius: 2px;
}

.practice-page .enquiry textarea { min-height: 132px; resize: vertical; }

.practice-page .enquiry__consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  margin: 0 0 var(--pattern-space-3);
}

.practice-page .enquiry__consent input { width: 24px; height: 24px; margin-top: 4px; }
.practice-page .enquiry__consent label { font-weight: 400; }

.practice-page .enquiry__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  font: inherit;
  font-weight: 700;
  color: var(--pattern-chalk);
  background: var(--pattern-aubergine);
  border: 2px solid var(--pattern-aubergine);
  border-radius: 2px;
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .practice-page .enquiry__submit { transition: background-color 160ms ease-out; }
}

.practice-page .enquiry__submit:hover { background: var(--practice-amber); border-color: var(--practice-amber); }

.practice-page .enquiry__hint {
  font-size: 15px;
  line-height: 1.6;
  color: var(--pattern-ink-72);
  max-width: 56ch;
  margin: var(--pattern-space-2) 0 0;
}

/* ---------- the receipt ---------- */

.practice-page .receipt { padding-block: var(--pattern-space-5); }
.practice-page .receipt__list { margin: var(--pattern-space-3) 0 0; padding-left: 1.1em; max-width: var(--practice-measure); }
.practice-page .receipt__list li { line-height: 1.6; margin-bottom: var(--pattern-space-2); }

/* The headline's own line breaks. The shell styles no span, so one class is
   enough here; the sentences are emitted as blocks by the page owner. */
.practice-page .practice-display__line { display: block; }

/* The identity, said plainly under the headline, and the reserved statement
   of what the work is. Both are quieter than the lede they sit beside: the
   identity is a label, and the statement is a boundary, not a pitch. */
.practice-page .practice-identity {
  font-family: var(--pattern-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--practice-amber);
  margin: var(--pattern-space-3) 0 0;
}

.practice-page .practice-stance {
  margin: var(--pattern-space-4) 0 0;
  padding-left: var(--pattern-space-3);
  border-left: 2px solid var(--practice-rule);
  max-width: var(--practice-measure);
  font-size: 16px;
  line-height: 1.65;
  color: var(--pattern-ink-72);
}

/* The shared footer is a two column grid whose first column takes whatever
   the navigation leaves it. The neutral footer names both practices in
   full, so at the tablet width that column fell to 100px and broke the
   wordmark mid-word. Below the desktop step the footer stacks instead, and
   the wordmark never wraps at any width. Scoped to the practice pages, so
   the health journey's own footer is untouched. */
.practice-page .pattern-footer__inner .pattern-wordmark { white-space: nowrap; }

@media (max-width: 899px) {
  .practice-page .pattern-footer__inner { grid-template-columns: 1fr; }
}

/* The shell hyphenates headings on a handset because clinical vocabulary is
   longer than the column a 320px screen leaves. This headline is short words
   set large, and every one of them fits, so hyphenation only ever broke a
   word that never needed breaking: "Independ-ent consul-tant." The element
   selector raises this above the shell's own rule, which loads after this
   sheet, so it wraps at spaces alone. */
.practice-page h1.practice-display {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

/* With hyphenation off the longest word has to fit the column on its own.
   "Independent" at 30px is 18px wider than a 320px screen leaves, so the
   narrowest band takes one step down. Every wider band keeps its scale. */
@media (max-width: 359px) {
  .practice-page h1.practice-display { font-size: 26px; }
}