/* Clay & Air breath library.

   The design system's own token and base files are used verbatim from
   assets/tokens/. Nothing below redefines a colour, a size or a spacing step:
   this file is only the pieces the library needs that the system does not
   already ship, built from its tokens and its component specs.

   Header and footer follow ui_kits/website/Chrome.jsx.
   Pills follow ui_kits/website/Protocols.jsx.
   Cards follow components/surfaces/Card.jsx.
   Steps follow ui_kits/website/Protocol.jsx.
*/

@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/borders.css");
@import url("tokens/motion.css");
@import url("tokens/base.css");

/* DESIGN.md > Components: focus-visible is a 1px soot outline at 2px offset.
   On soot sections the same rule inverts so the ring stays visible. */
:focus-visible { outline: var(--hairline) solid var(--soot); outline-offset: 2px; }
.ca-invert :focus-visible { outline-color: var(--bone); }

/* ---------- shared type helpers ---------- */

.label {
  font: var(--weight-medium) var(--size-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 var(--eyebrow-gap);
  display: block;
  max-width: none;
}
.label--tertiary { color: var(--text-tertiary); }
.body-lg { font-size: var(--size-body-lg); line-height: var(--lh-body-lg); }
.small { font-size: var(--size-small); line-height: var(--lh-small); }
.muted { color: var(--text-secondary); }
.tertiary { color: var(--text-tertiary); }
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

.dot { opacity: 0.5; }

/* A reading column. The measure lives on the container, so every paragraph
   inside shares one right edge. Put it on each element instead and 68ch
   resolves against that element's own font size, so a 19px lead and a 17px
   paragraph end at different places. */
.copy { max-width: var(--measure-prose); }
.copy > * { max-width: none; }
.lead {
  font-size: var(--size-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--text-secondary);
  margin: var(--space-4) 0 var(--space-4);
}
.cards--spaced { margin-top: var(--space-5); }
.tech-list--spaced { margin-top: var(--space-7); }
.label--gap { margin-top: var(--space-7); }
.section--pad { padding-top: var(--space-8); }

/* ---------- layout ---------- */

.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-gap) 0; }
.section--tight { padding: var(--space-8) 0; }
.section--paper { background: var(--surface-card); }
.rule { border: 0; border-top: var(--hairline) solid var(--border-hairline); margin: 0; }

/* ---------- header (Chrome.jsx) ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bone);
  border-bottom: var(--hairline) solid var(--border-hairline);
}
.site-header .wrap {
  height: 76px;
  display: flex;
  align-items: center;
  gap: var(--space-9);
}
.lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--soot);
  text-decoration: none;
}
/* the compact lockup carries the wordmark, so no live text beside it.
   60px tall puts the disc at 60px and the wordmark at ~22px, matching
   Chrome.jsx, and sits inside the compact cut's 40-167px range. */
.lockup img { height: 60px; width: auto; display: block; }
.lockup:hover { color: var(--soot); }

.site-nav { display: flex; gap: var(--space-6); margin-left: auto; }
.site-nav a {
  font: var(--weight-medium) var(--size-label) / 1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-secondary);
  border-bottom: var(--hairline) solid transparent;
  padding-bottom: 3px;
  transition: var(--transition-color);
  white-space: nowrap;
}
.site-nav a:hover { color: var(--soot); }
/* WCAG 2.2 target size. A pseudo-element grows the hit area to 44px without
   moving the label or the active underline. */
.site-nav a { position: relative; }
.site-nav a::after { content: ""; position: absolute; inset: -14px 0; }
.site-nav a[aria-current="page"] {
  color: var(--soot);
  border-bottom-color: var(--border-accent);
}

/* Pillars: the three pillar pages grouped under one nav item. A <details>
   so it opens on tap as well as click, with no framework. */
.nav-group { position: relative; }
.nav-group summary {
  list-style: none;
  cursor: pointer;
  font: var(--weight-medium) var(--size-label) / 1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: var(--hairline) solid transparent;
  padding-bottom: 3px;
  transition: var(--transition-color);
  white-space: nowrap;
  position: relative;
}
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after { content: ""; position: absolute; inset: -14px 0; }
.nav-group summary::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: var(--hairline) solid currentColor;
  border-bottom: var(--hairline) solid currentColor;
  transform: rotate(45deg);
  float: right;
  margin: 1px 0 0 8px;
}
.nav-group[open] summary::before { transform: rotate(-135deg); margin-top: 4px; }
.nav-group summary:hover,
.nav-group[open] summary { color: var(--soot); }
.nav-group summary.is-current { color: var(--soot); border-bottom-color: var(--border-accent); }
.nav-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: -20px;
  z-index: 11;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius);
  padding: var(--space-2) 20px;
}
.site-nav .nav-menu a {
  display: block;
  padding: 14px 0 11px;
  border-bottom: var(--hairline) solid var(--border-hairline);
}
.site-nav .nav-menu a:last-child { border-bottom: 0; }
.site-nav .nav-menu a::after { display: none; }
.site-nav .nav-menu a[aria-current="page"] { color: var(--text-accent); }

/* ---------- pills (Protocols.jsx) ---------- */

.pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-6); }
.pill {
  font: var(--weight-medium) var(--size-label) / 1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 9px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  background: transparent;
  color: var(--text-secondary);
  border: var(--hairline) solid var(--border-hairline);
  transition: var(--transition-color);
}
.pill:hover { color: var(--soot); border-color: var(--border-strong); }
.pill[aria-pressed="true"] {
  background: var(--soot);
  color: var(--bone);
  border-color: var(--soot);
}
.pill[aria-pressed="true"]:hover {
  background: var(--terracotta-deep);
  border-color: var(--terracotta-deep);
  color: var(--bone);
}
.pill--clear { color: var(--text-tertiary); }

.library-empty { margin: var(--space-8) 0 0; color: var(--text-secondary); }

/* non-interactive tags on a technique page */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-8); max-width: none; }
.tag {
  font: var(--weight-medium) var(--size-label) / 1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 9px 14px;
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius);
  color: var(--text-secondary);
}

/* ---------- cards (Card.jsx) ---------- */

.card {
  display: block;
  background: var(--surface-card);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius);
  padding: var(--card-padding);
  text-decoration: none;
  color: var(--text-body);
  transition: var(--transition-color);
}
a.card:hover { border-color: var(--border-strong); color: var(--text-body); }
.card h3 { font: var(--weight-display) var(--size-h3) / var(--lh-h3) var(--font-display); margin: 0 0 var(--space-3); }
.card p { font-size: var(--size-body); color: var(--text-secondary); margin: 0; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }

/* ---------- the library grid ---------- */

.library { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-2); }
.tech-card { display: flex; flex-direction: column; }
.tech-card[hidden] { display: none; }
.tech-card > .label { margin-bottom: var(--eyebrow-gap); }
.tech-card h3 { margin: 0 0 var(--space-3); }
.tech-card .use {
  font-size: var(--size-small);
  line-height: var(--lh-small);
  color: var(--text-secondary);
  margin: 0 0 var(--space-5);
  flex: 1 1 auto;
}
.tech-card .card-meta {
  font: var(--weight-medium) var(--size-label) / 1.4 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: auto 0 0;
  padding-top: var(--space-4);
  border-top: var(--hairline) solid var(--border-hairline);
}

/* ---------- technique page ---------- */

.technique { padding: var(--space-9) 0 0; }
.technique--index { padding-bottom: var(--section-gap); }
.technique h1 {
  font: var(--weight-display) var(--size-h1) / var(--lh-h1) var(--font-display);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
}
/* A page's opening paragraph runs the full content width, as on Sessions.
   tokens/base.css caps every p at the prose measure, so this has to say
   none explicitly. Body copy further down the page keeps the cap. */
.technique .purpose {
  font-size: var(--size-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--text-secondary);
  max-width: none;
  margin: 0 0 var(--space-5);
}

/* at a glance, under the heading */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-4) 0;
  border-top: var(--hairline) solid var(--border-hairline);
  border-bottom: var(--hairline) solid var(--border-hairline);
  margin: var(--space-5) 0 var(--space-6);
  max-width: none;
}
.meta-items {
  font: var(--weight-medium) var(--size-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* before you start */
.before {
  background: var(--surface-card);
  border: var(--hairline) solid var(--border-hairline);
  border-left: var(--rule-accent-width) solid var(--border-accent);
  border-radius: var(--radius);
  padding: var(--card-padding);
  margin: 0 0 var(--space-8);
  max-width: var(--measure-prose);
}
.before ul { list-style: none; margin: 0; padding: 0; }
.before li { padding: var(--space-3) 0; border-bottom: var(--hairline) solid var(--border-hairline); }
.before li:first-child { border-top: var(--hairline) solid var(--border-hairline); }
.before li:last-child { border-bottom: 0; padding-bottom: 0; }

/* the basics, start-here card only */
.basics {
  background: var(--surface-card);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius);
  padding: var(--card-padding);
  margin: 0 0 var(--space-8);
  max-width: var(--measure-prose);
}
.basics-intro { font-size: var(--size-body); line-height: var(--lh-body); margin: 0 0 var(--space-2); }
.basics-list { margin-top: var(--space-5); }
.basic { padding: var(--space-5) 0; border-top: var(--hairline) solid var(--border-hairline); }
.basic:last-child { padding-bottom: 0; }
.basic .label { color: var(--text-body); margin-bottom: var(--space-2); }
.basic p:not(.label) { font-size: var(--size-body); line-height: var(--lh-body); margin: 0; }

/* how to run it (Protocol.jsx) */
.pattern { margin: 0 0 var(--space-7); max-width: var(--measure-prose); }
.steps { list-style: none; margin: 0; padding: 0; border-top: var(--hairline) solid var(--border-hairline); }
.steps li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: var(--hairline) solid var(--border-hairline);
  align-items: baseline;
}
.steps .num {
  font: var(--weight-medium) var(--size-cadence) / 1 var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--text-accent);
}
.steps .text { font-size: var(--size-body); line-height: var(--lh-body); }

.note { max-width: var(--measure-prose); margin: 0 0 var(--space-7); }
.block { max-width: var(--measure-prose); margin: 0 0 var(--space-8); }
.block p:not(.label) { font-size: var(--size-body-lg); line-height: var(--lh-body-lg); }
.block--tight { margin: calc(var(--space-4) * -1) 0 var(--space-7); }
.block--tight p:not(.label) { font-size: var(--size-small); line-height: var(--lh-small); }

.benefits { max-width: var(--measure-prose); margin: 0 0 var(--space-7); }
.benefits ul { list-style: none; margin: 0; padding: 0; }
.benefits li {
  font-size: var(--size-body);
  line-height: var(--lh-body);
  padding: var(--space-3) 0;
  border-bottom: var(--hairline) solid var(--border-hairline);
}
.benefits li:first-child { border-top: var(--hairline) solid var(--border-hairline); }

/* video */
.video { margin: 0 0 var(--space-9); max-width: var(--measure-prose); }
.video-plate {
  background: var(--surface-well);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: flex-end;
  padding: var(--space-5);
}
.video-plate .label { margin: 0; color: var(--text-tertiary); }
.video-plate--embed { position: relative; padding: 0; display: block; background: var(--soot); }
.video-plate--embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video figcaption { margin-top: var(--space-3); }
.video-pending {
  font: var(--weight-medium) var(--size-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  border-top: var(--hairline) solid var(--border-hairline);
  border-bottom: var(--hairline) solid var(--border-hairline);
  padding: var(--space-4) 0;
  margin: 0 0 var(--space-7);
  max-width: var(--measure-prose);
}

/* ---------- pillar and sibling lists ---------- */

.tech-list { border-top: var(--hairline) solid var(--border-hairline); margin: 0; padding: 0; list-style: none; }
.tech-list li { border-bottom: var(--hairline) solid var(--border-hairline); }
.tech-list a,
.tech-list .pending {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) auto;
  gap: var(--space-4) var(--space-6);
  align-items: baseline;
  padding: var(--space-5) 0;
  text-decoration: none;
  color: var(--text-body);
  transition: var(--transition-color);
}
.tech-list a:hover { background: var(--surface-well); color: var(--text-body); }
.tech-list .dur {
  font: var(--weight-medium) var(--size-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-body);
}
.tech-list .body { display: block; min-width: 0; }
.tech-list .name {
  display: block;
  font: var(--weight-display) var(--size-h3) / var(--lh-h3) var(--font-display);
}
.tech-list .use {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--size-small);
  color: var(--text-secondary);
  max-width: var(--measure-prose);
}
.tech-list .aside { text-align: right; white-space: nowrap; }
.tech-list .pending { color: var(--text-tertiary); }
.tech-list .pending .name, .tech-list .pending .dur { color: var(--text-tertiary); }

.state-meta {
  font: var(--weight-medium) var(--size-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: block;
}

/* ---------- footer (Chrome.jsx) ---------- */

.site-footer { padding: var(--space-10) 0 var(--space-8); }
/* the lockup column stays at its 475px minimum; the link columns divide what
   is left, so adding a fourth never squeezes the mark below legibility */
.footer-top {
  display: grid;
  grid-template-columns: minmax(475px, 2fr) repeat(3, 1fr);
  gap: var(--space-8);
}
/* full lockup at its minimum legible width: 475px puts BREATHWORK's cap
   height at the 6.5px floor. The column is 476px. */
.footer-lockup { width: 100%; max-width: 475px; height: auto; display: block; margin-bottom: var(--space-4); }
.site-footer .lockup-line { margin-top: var(--space-2); }
.site-footer .bio { margin-top: var(--space-4); color: var(--text-secondary); font-size: var(--size-small); max-width: 34ch; }
.footer-col ul { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a { color: var(--bone); font-size: var(--size-small); text-decoration: none; position: relative; }
.footer-col a::after { content: ""; position: absolute; inset: -4px 0; }
.footer-col a:hover { color: var(--ochre); }
.footer-bottom {
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: var(--hairline) solid var(--border-hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.site-footer .disclaimer { color: var(--text-tertiary); font-size: var(--size-small); max-width: 62ch; margin: 0; }
.site-footer .copyright {
  font: var(--weight-medium) var(--size-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.site-footer a { color: var(--bone); }
.site-footer a:hover { color: var(--ochre); }

/* ---------- mobile ---------- */

@media (max-width: 1100px) {
  .library { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  :root { --gutter: var(--gutter-mobile); --section-gap: var(--section-gap-mobile); }
  .technique h1, .lede { font-size: 34px; }
  .library, .cards { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: var(--space-7); }
  .tech-list a, .tech-list .pending {
    grid-template-columns: 1fr auto;
    gap: var(--space-2) var(--space-4);
  }
  .tech-list .body { order: -1; grid-column: 1 / -1; }
  .tech-list .dur { grid-column: 1; }
  .tech-list .aside { grid-column: 2; }
  .steps li { grid-template-columns: 36px 1fr; gap: var(--space-3); }
  .technique { padding-top: var(--space-7); }
}

@media (max-width: 760px) {
  .site-header .wrap {
    height: auto;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-3);
    padding-top: var(--space-4);
  }
  .lockup img { height: 48px; }
  .site-nav {
    width: 100%;
    margin-left: 0;
    gap: var(--space-5);
    flex-wrap: wrap;
    border-top: var(--hairline) solid var(--border-hairline);
    padding: var(--space-3) 0;
  }
}

/* ---------- library lede ---------- */

.lede {
  font: var(--weight-display) var(--size-h1) / var(--lh-h1) var(--font-display);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.lede-sub {
  margin-top: var(--space-5);
  color: var(--text-secondary);
  font-size: var(--size-body-lg);
  line-height: var(--lh-body-lg);
  max-width: none;
}

/* duration as the left column, per DESIGN.md > Iconography rule 1:
   type first, "8 MIN" over a clock. */

/* ---------- buttons, fields, checkbox ----------
   Ported from the design system's core/Button, forms/Field and
   forms/Checkbox. Same tokens, same geometry, no new decisions. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* DESIGN.md > Components: Plex Sans 500 at 17px. Button.jsx says 14px,
     which drifted from the spec and left the label smaller than the body
     text beside it. The doc wins. */
  font: var(--weight-medium) var(--size-body) / 1 var(--font-body);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--radius);
  border: var(--hairline) solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  /* casing and tracking are inherited properties: a button inside a mono
     label wrapper would otherwise pick up uppercase and letter spacing */
  text-transform: none;
  letter-spacing: normal;
  transition: var(--transition-color);
}
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn--primary:hover { background: var(--btn-primary-bg-hover); color: var(--btn-primary-fg); }
.btn--secondary {
  background: transparent;
  color: var(--btn-secondary-fg);
  border-color: var(--btn-secondary-border);
}
.btn--secondary:hover { background: var(--btn-secondary-bg-hover); color: var(--btn-secondary-fg); }
.btn--full { width: 100%; }

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field > label {
  font: var(--weight-medium) var(--size-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--field-bg);
  color: var(--text-body);
  border: var(--hairline) solid var(--field-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font: var(--weight-regular) var(--size-body) / 1.4 var(--font-body);
  outline: none;
  box-shadow: none;
  transition: var(--transition-color);
}
.field textarea { resize: vertical; min-height: 108px; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--field-border-focus); }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-tertiary); }
.field .hint { font-size: var(--size-small); color: var(--text-tertiary); }

.check { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; }
.check input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  background: var(--field-bg);
  border: var(--hairline) solid var(--field-border);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: var(--transition-color);
}
.check input:checked { background: var(--soot); border-color: var(--soot); }
.check input:checked::after { content: ""; width: 8px; height: 8px; background: var(--bone); }
.check input:focus-visible { outline: var(--hairline) solid var(--soot); outline-offset: 2px; }
.check .check-body { font-size: var(--size-body); line-height: 1.4; }
.check .hint { display: block; font-size: var(--size-small); color: var(--text-tertiary); margin-top: 2px; }

/* the intake layout: facts on the left, the form in a paper card on the right */
/* the opening runs the full content width, out to the right edge of the form,
   so the prose measure cap is lifted here too */
.intake-open { margin-bottom: var(--space-9); }
.intake-open .purpose,
.intake-open .why { max-width: none; }
.intake { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); align-items: start; }
.intake-facts { border-top: var(--hairline) solid var(--border-hairline); }
.intake-facts > div { padding: var(--space-7) 0; border-bottom: var(--hairline) solid var(--border-hairline); }
/* an offer is a section of its own: mono eyebrow over a serif heading, per
   DESIGN.md's core pairing rule, not a run of mono metadata. */
.intake-facts h2 {
  font: var(--weight-display) var(--size-h2) / var(--lh-h2) var(--font-display);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
}
.intake-facts p {
  margin: 0 0 var(--space-4);
  color: var(--text-secondary);
  font-size: var(--size-body);
  max-width: var(--measure-prose);
}
.intake-facts p:last-child { margin-bottom: 0; }
.why { color: var(--text-secondary); max-width: var(--measure-prose); }
.why + .why { margin-top: var(--space-4); }
.intake-form { display: flex; flex-direction: column; gap: var(--space-5); }
.form-card {
  background: var(--surface-raised);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius);
  padding: var(--space-7);
}
.why { color: var(--text-secondary); max-width: var(--measure-prose); }
.pot { position: absolute; left: -9999px; }

/* the quiet close on a technique page. Not a sticky bar, not a banner. */
/* padding-bottom matches the following section's padding-top, so the button
   sits centred in the gap rather than flush on the rule below it. */
.next-step { border-top: var(--hairline) solid var(--border-hairline); padding: var(--space-6) 0 var(--space-8); }
/* The label keeps its original 24px gap; only the copy-to-button gap opens up
   so the button reads as an action, not as the end of the sentence. */
.next-step p { color: var(--text-secondary); max-width: var(--measure-prose); margin: var(--space-3) 0 var(--space-5); }
.next-step p:not(.label) { margin-bottom: var(--space-6); }

@media (max-width: 900px) {
  .intake { grid-template-columns: 1fr; gap: var(--space-7); }
  .intake-open { margin-bottom: var(--space-7); }
  .form-card { padding: var(--space-6); }
}

/* ---------- the offer ladder on /workshops ----------
   One card per workshop, built the same way every time, so each has a clear
   edge. Left: the name, the heading, the lead, the format as a mono meta row,
   and the button. Right: the specs and the safety line. Stacks on a phone. */

.offers { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
.offer {
  background: var(--surface-card);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius);
  padding: var(--card-padding);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-8);
}
/* the photo runs edge to edge across the top of the card */
.offer-img {
  grid-column: 1 / -1;
  display: block;
  width: calc(100% + 2 * var(--card-padding));
  height: auto;
  aspect-ratio: 5 / 2;
  object-fit: cover;
  margin: calc(var(--card-padding) * -1) calc(var(--card-padding) * -1) 0;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: var(--hairline) solid var(--border-hairline);
}
.offer-name {
  font: var(--weight-medium) var(--size-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-accent);
  margin: 0 0 var(--eyebrow-gap);
}
/* the workshop name is the title; the line under it is the hook */
.offer h2 {
  font: var(--weight-display) var(--size-h2) / var(--lh-h2) var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--text-body);
  margin: 0 0 var(--space-4);
}
.offer-head {
  font: var(--weight-display) var(--size-body-lg) / var(--lh-body-lg) var(--font-display);
  color: var(--text-body);
  margin: 0 0 var(--space-2);
}
.offer-lead {
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  margin: 0 0 var(--space-5);
}
.offer-meta {
  font: var(--weight-medium) var(--size-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-body);
  padding: var(--space-3) 0;
  border-top: var(--hairline) solid var(--border-hairline);
  border-bottom: var(--hairline) solid var(--border-hairline);
  margin: 0;
}
.offer-meta .dot { color: var(--text-tertiary); padding: 0 4px; }
.offer-meta span:not(.dot) { white-space: nowrap; }
.offer-specs {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  margin: 0 0 var(--space-4);
}
.offer-specs dt {
  font: var(--weight-medium) var(--size-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: var(--space-3) 0;
  border-bottom: var(--hairline) solid var(--border-hairline);
}
.offer-specs dd {
  margin: 0;
  padding: var(--space-3) 0;
  color: var(--text-secondary);
  font-size: var(--size-small);
  line-height: var(--lh-small);
  border-bottom: var(--hairline) solid var(--border-hairline);
}
.offer-specs dt:last-of-type,
.offer-specs dd:last-of-type { border-bottom: 0; }
.offer-safety {
  font-size: var(--size-small);
  line-height: var(--lh-small);
  color: var(--text-tertiary);
  margin: 0;
}
.offer-go { margin: var(--space-6) 0 0; }
.intake-why .why + .why { margin-top: var(--space-4); }

/* stacked, the button goes to the bottom of the card, after the details */
@media (max-width: 800px) {
  .offer { display: flex; flex-direction: column; gap: 0; }
  .offer-img { aspect-ratio: 3 / 2; margin-bottom: var(--space-6); }
  .offer-main { display: contents; }
  .offer-detail { order: 1; margin-top: var(--space-5); }
  .offer-go { order: 2; }
}
@media (max-width: 700px) {
  .offer-specs { grid-template-columns: 1fr; }
  .offer-specs dt { padding: var(--space-3) 0 0; border-bottom: 0; }
  .offer-specs dd { padding-top: var(--space-1); }
  .offer-specs dt:last-of-type { border-bottom: 0; }
}

/* ---------- flashcard faces ----------
   DESIGN.md > Motion bans transform, so this is a turn rather than a flip.
   The card is three rows: a head and a foot that never move, and a body that
   swaps. Only the middle changes, so the name stays put, the footer rule
   stays put, and the control never chases the text down the card. */

.tech-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.tech-card .card-head h3 { margin: 0; }
.badge {
  flex: 0 0 auto;
  font: var(--weight-medium) var(--size-label) / 1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  border: var(--hairline) solid transparent;
  white-space: nowrap;
}
/* filled outranks outlined, so the entry point reads first */
.badge--start { background: var(--soot); color: var(--bone); }
.badge--signature { color: var(--text-accent); border-color: var(--border-accent); }
.tech-card .card-body {
  display: grid;
  grid-template-rows: 1fr auto;      /* faces, then the badge line */
  min-height: 400px;                 /* the tallest face, so the card never resizes */
  padding: var(--space-5) 0;
}
.tech-card .face { grid-area: 1 / 1; }
/* the badge sits outside both faces, so a turn never takes it away */
.card-badge { grid-row: 2; justify-self: end; margin: var(--space-5) 0 0; }
.tech-card .face[data-off] { display: none; }

/* the whole card is the link target, as it was before */
.card-link { color: inherit; text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; }
a.card-link:hover { color: var(--text-body); }
.tech-card:hover { border-color: var(--border-strong); }

.tech-card .use { margin: 0 0 var(--space-4); }
.lands {
  font-size: var(--size-small);
  line-height: var(--lh-small);
  color: var(--text-secondary);
  margin: 0 0 var(--space-5);
}
.for { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.for span {
  font: var(--weight-medium) var(--size-label) / 1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
}

.flash {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--size-small);
  line-height: var(--lh-small);
  color: var(--text-body);
}
.flash li {
  padding: var(--space-2) 0;
  border-top: var(--hairline) solid var(--border-hairline);
}
.flash li:first-child { border-top: 0; padding-top: 0; }

.card-foot {
  display: flex;
  white-space: nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--hairline) solid var(--border-hairline);
}

/* right aligned, so its edge is fixed whatever the label says */
.turn {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: var(--weight-medium) var(--size-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  transition: var(--transition-color);
}
.turn:hover { color: var(--text-link-hover); }
.turn::after { content: ""; position: absolute; inset: -12px 0 -12px -12px; }
.turn:focus-visible { outline: var(--hairline) solid var(--soot); outline-offset: 2px; }

/* ---------- about ----------
   Hero: words left, portrait right. The Practice: three photo cards in a row.
   Follow: one full-bleed soot band, the page's single dark moment. */
.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-9);
  align-items: start;
  margin: 0;
}
.about-story { margin-top: var(--space-8); }
.about-story .why { max-width: none; }
.about-portrait {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  border: var(--hairline) solid var(--border-hairline);
}
.about-handle {
  font: var(--weight-medium) var(--size-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: var(--space-5) 0 0;
}
.about-handle a { margin-left: var(--space-2); }
.practice-title {
  font: var(--weight-display) var(--size-h2) / var(--lh-h2) var(--font-display);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
}
.practice-intro {
  color: var(--text-secondary);
  max-width: var(--measure-prose);
  margin: 0 0 var(--space-7);
}
.practice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin: 0;
}
.practice-card {
  background: var(--surface-card);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.practice-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-bottom: var(--hairline) solid var(--border-hairline);
}
.practice-body { padding: var(--space-5) var(--space-6) var(--space-6); }
.practice-body .label { color: var(--text-accent); margin: 0 0 var(--space-2); }
.practice-body p:not(.label) {
  font-size: var(--size-small);
  line-height: var(--lh-small);
  color: var(--text-secondary);
  margin: 0;
}
.follow {
  border-top: var(--hairline) solid var(--border-hairline);
  padding: var(--space-9) 0 var(--space-10);
}
.follow-handle {
  font: var(--weight-medium) var(--size-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-accent);
}
.follow h2 {
  font: var(--weight-display) var(--size-h2) / var(--lh-h2) var(--font-display);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
}
.follow p:not(.label) {
  color: var(--text-secondary);
  max-width: var(--measure-prose);
  margin: 0 0 var(--space-6);
}
.follow-btns { display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (max-width: 800px) {
  .about-hero { grid-template-columns: 1fr; gap: var(--space-6); }
  .about-portrait { max-width: 420px; grid-row: 1; }
  .practice-grid { grid-template-columns: 1fr; }
}