/* The Practice page, at the geometry the original Practice shell authored. Loaded only by that
   page, so nothing here reaches the homepage, a note or a work page: every rule is under
   .practice-page. The colours and faces are the shared tokens from site.css rather than repeated
   values, so a token change still moves this page with the rest of the site.

   Defaults are set to 0 wherever the shell specifies a margin, because accumulated heading and
   paragraph defaults are what pull a measured layout out of true. */

.practice-page { background: var(--paper); color: var(--ink); }
.practice-wrap {
  max-width: 1080px; margin: 0 auto; padding: 40px 32px 140px; box-sizing: border-box;
  font-family: var(--serif); font-size: 20px; line-height: 1.55;
}
.practice-wrap h1, .practice-wrap h2, .practice-wrap p { margin: 0; }

/* Header: back link and stamp on one baseline, over the hairline. */
.practice-nav {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap;
  gap: 12px 24px; font-family: var(--mono); font-size: 12.5px; color: var(--mono-2);
  padding-bottom: 20px; border-bottom: 1px solid var(--hair);
}
.practice-nav a, .practice-nav .stamp { white-space: nowrap; color: inherit; }

/* Head */
.practice-head { padding-top: 72px; display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
.practice-head .eyebrow { font-family: var(--mono); font-size: 12.5px; color: var(--mono-2); }
.practice-head h1 {
  font-weight: 400; font-size: clamp(38px, 5vw, 58px); line-height: 1.08;
  letter-spacing: -0.01em; text-wrap: balance;
}
.practice-head .lead { font-size: 22px; color: var(--body); text-wrap: pretty; }
.practice-head .foundation {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--mono-2);
}

/* Layers: one rule above the set, one under each row. */
.layers { padding-top: 88px; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--hair); }
.layer {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px 56px;
  align-items: start; padding: 36px 0; border-bottom: 1px solid var(--hair);
}
.layer-name { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.layer-name .number { font-family: var(--mono); font-size: 11.5px; color: var(--mono-2); }
.layer-name h2 { font-size: 28px; line-height: 1.15; font-weight: 400; text-wrap: balance; }
.layer-name .subtitle {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.7; color: var(--mono-2);
}
.layer-said { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.layer-said .body { color: var(--body); text-wrap: pretty; }
.layer-said .question { font-size: 20px; font-style: italic; text-wrap: pretty; }

/* Practices in use: 2 x 2 on a desktop, one column when narrow. The minimum gives way to the
   available measure rather than pushing the page wider than the screen.

   The introduction is a paragraph in the page's own voice, at the lead's size and the page's own
   line height — not a heading over a list. The dashed rule belongs to the grid: it closes the
   collection and says it can grow, rather than being a separate mark set below it. */
.practices { padding-top: 112px; display: flex; flex-direction: column; gap: 24px; }
.practices-head { display: flex; flex-direction: column; gap: 12px; max-width: 620px; }
.practices-head .eyebrow { font-family: var(--mono); font-size: 12.5px; color: var(--mono-2); }
.practices-head .intro { font-size: 22px; text-wrap: pretty; }
.practice-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  column-gap: 56px; border-bottom: 1px dashed var(--hair); padding-bottom: 34px;
}
.practice-entry {
  display: flex; flex-direction: column; gap: 13px; min-width: 0;
  padding: 28px 0 4px; border-top: 1px solid var(--hair);
}
.practice-entry h3 { margin: 0; font-size: 23px; font-weight: 400; line-height: 1.18; text-wrap: balance; }
.practice-entry .body { font-size: 19px; line-height: 1.55; color: var(--body); text-wrap: pretty; }
/* The associations and the link sit level across a row, whatever the bodies do. */
.practice-entry .foot { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.practice-entry .assoc {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.7; color: var(--mono-2);
}
.practice-entry .go {
  font-family: var(--mono); font-size: 11.5px; color: var(--mono-2);
  align-self: flex-start; white-space: nowrap;
}

/* Returns */
.returns { padding-top: 112px; display: flex; flex-direction: column; gap: 24px; }
.returns-head { display: flex; flex-direction: column; gap: 12px; max-width: 600px; }
.returns-head .eyebrow { font-family: var(--mono); font-size: 12.5px; color: var(--mono-2); }
.returns-head h2 {
  font-size: clamp(26px, 3vw, 34px); line-height: 1.15; font-weight: 400; text-wrap: balance;
}
.returns-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 24px;
}
.return {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 20px 0; border-top: 1px solid var(--hair);
}
.return .title { font-size: 21px; }
.return .when { font-family: var(--mono); font-size: 11.5px; line-height: 1.7; color: var(--mono-2); }
.returns .closing { font-size: 24px; font-style: italic; text-wrap: pretty; }

/* The contract: rows beside the figure's caption. The drawing itself is unchanged. */
.contract {
  padding-top: 112px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 40px 64px; align-items: start;
}
.contract-said { display: flex; flex-direction: column; gap: 20px; max-width: 460px; min-width: 0; }
.contract-said .eyebrow { font-family: var(--mono); font-size: 12.5px; color: var(--mono-2); }
.contract-said h2 {
  font-size: clamp(26px, 3vw, 34px); line-height: 1.15; font-weight: 400; text-wrap: balance;
}
.contract-said .body { color: var(--body); text-wrap: pretty; }
.contract-rows { display: flex; flex-direction: column; min-width: 0; }
.contract-row {
  display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 6px 16px;
  align-items: baseline; padding: 18px 0; border-top: 1px solid var(--hair);
}
.contract-row .key {
  font-family: var(--mono); font-size: 11.5px; color: var(--mono-2); white-space: nowrap;
}
.contract-row .value { font-size: 19px; text-wrap: pretty; }
.contract-rows .caption {
  margin: 18px 0 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.7;
  color: var(--mono-2); border-top: 1px solid var(--hair); padding-top: 18px;
}

/* Footer */
.practice-foot {
  padding-top: 120px; display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 12px 32px; font-family: var(--mono); font-size: 11.5px; color: var(--mono-2);
}
.practice-foot .stamp { white-space: nowrap; }

/* Narrow: a fixed key column and a 108px label do not fit a phone, so the row stacks rather than
   pushing the page sideways. The nominal minimums above already give way through `min(100%, …)`. */
@media (max-width: 520px) {
  .practice-wrap { padding: 32px 20px 96px; }
  .contract-row { grid-template-columns: minmax(0, 1fr); }
  .contract-row .key { white-space: normal; }
}