/* ============================================================================
   Introspect — counselling practice, 14 Ruthven Road, Kingston.
   Site 33. Class prefix: ip-. Nothing here is shared with another template.

   PALETTE — "dusk": a violet-grey paper with one fountain-pen iris.
   The two defaults for this trade are both wrong for the person reading it.
   Clinical white-and-blue makes a counselling practice look like a laboratory,
   which frightens exactly the people who are already frightened of being
   diagnosed; spa beige and sage make it look like a treatment you buy, which
   makes the fees feel like a con. So the ground is a paper with a violet-grey
   cast — quiet, slightly dim, the colour of a room with the shutters half
   closed — and the single accent is a saturated writing-ink violet, used the
   way ink is used: for the figure, the verdict and the one live number in a
   row, never as a wash. A muted fern green appears in exactly one role, "there
   is a place open", so that availability can be read without reading. No warm
   orange, amber, terracotta, beige or parchment anywhere, and no shadows and
   no rounded corners at all: every edge in here is a hairline, because the
   whole argument of the page is that the practice will show you the figures.

   COMPOSITION — the device itself is the first thing on the page; there is no
   hero at all. Rule 8: headline-left-with-a-photograph and
   headline-left-with-a-data-panel are both crowded, and neither is honest here
   anyway. This practice's whole argument is that the two questions a frightened
   person stops at are answered on the page rather than behind a form, so the
   page opens on the question itself and the board that answers it — masthead,
   one line of address, the question as the h1, and then the chips. The
   photographs of the rooms come after the figures, not before them, which is
   the opposite of every other counselling site.

   TYPE — Faustina for everything that is read, Commissioner for everything
   that is counted. Faustina is a text serif with a slightly narrow, unfussy
   cut that holds up at 17px over long paragraphs, which matters because this
   site is mostly sentences a nervous person has to get through. Commissioner
   carries the fees, the waits, the minute ranges and the labels, with tabular
   figures throughout so a column of money lines up. Neither face, and neither
   role, is used by any other template in this project.
   ========================================================================= */

:root {
  /* the one margin line */
  --gutter: clamp(1.25rem, 5.5vw, 6.5rem);
  --max: 72rem;
  --shell: min(100% - 2 * var(--gutter), var(--max));

  --paper:    #f3f1f7;
  --paper-2:  #e8e5f0;
  --paper-3:  #fbfaFd;
  --ink:      #241f33;
  --ink-2:    #564f6a;
  --ink-3:    #7b7390;
  --rule:     #d5d0e1;
  --rule-2:   #bcb5cd;
  --iris:     #543ca8;
  --iris-ink: #3d2b7d;
  --iris-soft:#e0d9f3;
  --fern:     #2f6b52;
  --fern-soft:#dcebe3;
  --dark:     #221c38;
  --dark-2:   #2f2749;
  --dark-rule:#43395f;

  --serif: 'Faustina', Georgia, 'Times New Roman', serif;
  --sans:  'Commissioner', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t1: clamp(2.5rem, 1.5rem + 3.3vw, 4.25rem);
  --t2: clamp(1.8rem, 1.25rem + 1.8vw, 2.6rem);
  --t3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);

  --step: clamp(3.5rem, 2rem + 4vw, 6rem);
}

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

/* Rule 5: without this a confirmation panel never disappears. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

/* Photographs carry explicit width/height so the space is reserved; without
   height:auto those attributes win over aspect-ratio and every plate renders
   at its intrinsic height. */
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -0.012em; }
h1 { font-size: var(--t1); letter-spacing: -0.021em; }
h2 { font-size: var(--t2); letter-spacing: -0.016em; }
h3 { font-size: var(--t3); }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
em { font-style: italic; color: var(--iris-ink); }
strong { font-weight: 600; }
a { color: inherit; }

.ip-shell { width: var(--shell); margin-inline: auto; }

.ip-skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: var(--paper); padding: .7rem 1.1rem;
  font-family: var(--sans); font-size: .9rem;
}
.ip-skip:focus { left: .5rem; top: .5rem; }

:focus-visible { outline: 2px solid var(--iris); outline-offset: 3px; }

/* ---------------------------------------------------------------- masthead */

.ip-top {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.ip-top__in {
  display: grid;
  /* Three tracks, not four: a fourth for the burger keeps its column gap even
     while the burger is display:none, and the CTA then sits 40px inside the
     right margin while everything else is on the line. */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: .95rem;
}
.ip-mark {
  grid-column: 1;
  text-decoration: none;
  display: block;
  line-height: 1.05;
}
.ip-mark b {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.ip-mark b::after {
  content: '';
  display: block;
  width: 1.6rem;
  height: 2px;
  background: var(--iris);
  margin-top: .3rem;
}
.ip-mark small {
  display: block;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: .35rem;
}
.ip-nav {
  grid-column: 2; justify-self: end;
  display: flex; flex-wrap: wrap; gap: clamp(.9rem, 2vw, 1.7rem);
  font-family: var(--sans); font-size: .94rem; font-weight: 450;
}
.ip-nav a { text-decoration: none; color: var(--ink-2); padding-block: .25rem; border-bottom: 1px solid transparent; }
.ip-nav a:hover, .ip-nav a[aria-current] { color: var(--ink); border-bottom-color: var(--iris); }
.ip-top__cta { grid-column: 3; }
.ip-burger {
  grid-column: 3; display: none;
  align-items: center; gap: .5rem;
  background: none; border: 1px solid var(--rule-2); color: var(--ink);
  font-family: var(--sans); font-size: .85rem; font-weight: 500;
  padding: .55rem .7rem; cursor: pointer;
}
.ip-burger i { display: block; width: 15px; height: 9px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.ip-top[data-open] .ip-burger i { border-bottom-color: transparent; }

/* ----------------------------------------------------------------- buttons */

.ip-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: .93rem; font-weight: 500;
  padding: .72rem 1.15rem;
  border: 1px solid var(--rule-2); background: transparent; color: var(--ink);
  text-decoration: none; cursor: pointer; border-radius: 0;
}
.ip-btn:hover { border-color: var(--ink); }
.ip-btn--solid { background: var(--iris); border-color: var(--iris); color: #fff; }
.ip-btn--solid:hover { background: var(--iris-ink); border-color: var(--iris-ink); }
.ip-btn--light { background: transparent; border-color: var(--dark-rule); color: var(--paper); }
.ip-btn--light:hover { border-color: var(--paper); }
.ip-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.ip-link { color: var(--iris-ink); text-decoration: none; border-bottom: 1px solid var(--rule-2); font-weight: 500; }
.ip-link:hover { border-bottom-color: var(--iris); }

.ip-eyebrow {
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--iris-ink);
  margin: 0 0 .7rem;
}
.ip-meta { font-family: var(--sans); font-size: .86rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

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

.ip-hero {
  width: var(--shell); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  padding-block: clamp(2.75rem, 5vw, 5rem) clamp(2rem, 3vw, 3rem);
}
.ip-hero h1 { margin-bottom: 1.1rem; }
.ip-hero__lead { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); color: var(--ink-2); max-width: 34em; }
.ip-hero__cta { margin-top: 1.9rem; }

/* every photograph on this site is a plate with a written caption under it */
.ip-plate figcaption {
  font-family: var(--sans); font-size: .82rem; line-height: 1.45;
  color: var(--ink-3);
  border-top: 1px solid var(--rule);
  padding-top: .55rem; margin-top: .6rem;
}
.ip-plate img { width: 100%; object-fit: cover; background: var(--paper-2); }
.ip-plate--tall img { aspect-ratio: 3 / 4; }
.ip-plate--wide img { aspect-ratio: 16 / 10; }
.ip-plate--square img { aspect-ratio: 1 / 1; }

/* three facts on one rule, the same edges as everything else */
.ip-rail {
  width: var(--shell); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.ip-rail > div { padding: 1.1rem clamp(.9rem, 2vw, 1.6rem) 1.15rem; border-left: 1px solid var(--rule); }
.ip-rail > div:first-child { border-left: 0; padding-left: 0; }
.ip-rail dt { font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.ip-rail dd { margin: .3rem 0 0; font-size: 1.02rem; line-height: 1.4; }
.ip-rail dd b { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------- bands */

.ip-band { padding-block: var(--step); }
.ip-band--tint { background: var(--paper-2); }
.ip-band--dark { background: var(--dark); color: #d8d3e6; }
.ip-band--dark h2, .ip-band--dark h3 { color: #fff; }
.ip-band--dark .ip-eyebrow { color: #b7a9e8; }
.ip-band--dark .ip-link { color: #cdc2f0; border-bottom-color: var(--dark-rule); }
.ip-band--tight { padding-block: clamp(2.4rem, 3.5vw, 3.5rem); }

.ip-head {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.2rem, 3vw, 3rem); align-items: end;
  margin-bottom: clamp(1.8rem, 3vw, 2.8rem);
}
.ip-head > p { color: var(--ink-2); margin: 0; }
.ip-band--dark .ip-head > p { color: #b6afc9; }

/* ==========================================================================
   THE DEVICE — the start board.
   Two questions across the top (what is going on, what you can pay); the
   answer underneath in two columns: who you would see and how long you would
   wait, beside the fee ladder with your band's figure live in every row.
   ====================================================================== */

.ip-picks { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.5rem); margin-bottom: 1.6rem; }
.ip-pick { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
/* a legend sits inside the border box and throws the gaps out */
.ip-pick legend { float: left; width: 100%; padding: 0; }
.ip-pick legend + * { clear: both; }
.ip-pick__n {
  display: flex; align-items: baseline; gap: .55rem;
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: .8rem;
}
.ip-pick__n b { color: var(--iris); font-size: .95rem; }
.ip-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.ip-chip {
  font-family: var(--sans); font-size: .88rem; font-weight: 450; line-height: 1.25;
  padding: .52rem .75rem;
  border: 1px solid var(--rule-2); background: var(--paper-3); color: var(--ink-2);
  cursor: pointer; text-align: left; border-radius: 0;
}
.ip-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.ip-chip[aria-pressed="true"] { background: var(--iris); border-color: var(--iris); color: #fff; font-weight: 500; }
.ip-chip--no[aria-pressed="true"] { background: var(--dark); border-color: var(--dark); }
.ip-chip small { display: block; font-size: .75rem; color: var(--ink-3); margin-top: .15rem; font-weight: 400; }
.ip-chip[aria-pressed="true"] small { color: #cdc2f0; }

.ip-board {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.5rem);
  align-items: start;
}
/* The band's figure is rendered for all three bands and one is shown, so the
   board answers without JavaScript and the arithmetic stays on the server. */
.ip-device [data-fee] { display: none; }
.ip-device[data-band="full"]    [data-fee="full"],
.ip-device[data-band="reduced"] [data-fee="reduced"],
.ip-device[data-band="lowest"]  [data-fee="lowest"] { display: inline; }

.ip-answer { background: var(--paper-3); border: 1px solid var(--rule); padding: clamp(1.2rem, 2.5vw, 1.9rem); }
.ip-verdict {
  display: flex; gap: .6rem; align-items: baseline;
  font-family: var(--sans); font-size: .95rem; font-weight: 600;
  padding-bottom: .9rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--rule);
}
.ip-verdict b { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: .22rem .45rem; }
.ip-verdict--yes b { background: var(--fern-soft); color: var(--fern); }
.ip-verdict--yes { color: var(--fern); }
.ip-verdict--no b { background: var(--dark); color: #fff; }
.ip-verdict--no { color: var(--ink); }
.ip-answer h3 { margin-bottom: .5rem; }
.ip-answer__sub { color: var(--ink-2); }

.ip-dl { margin: 1.2rem 0 0; }
.ip-dl dt { font-family: var(--sans); font-size: .73rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-top: 1rem; }
.ip-dl dd { margin: .3rem 0 0; }
.ip-dl dd:first-of-type, .ip-dl dt:first-of-type { margin-top: 0; }

/* who you would see, with the wait drawn on an eight-week scale */
.ip-who { display: grid; gap: .9rem; margin-top: .45rem; }
.ip-person { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1rem; align-items: baseline; border-top: 1px solid var(--rule); padding-top: .75rem; }
.ip-person:first-child { border-top: 0; padding-top: 0; }
.ip-person__name { font-size: 1.08rem; font-weight: 600; text-decoration: none; }
.ip-person__name:hover { color: var(--iris-ink); }
.ip-person__free { grid-column: 1 / -1; font-family: var(--sans); font-size: .85rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ip-person__free b { color: var(--ink); font-weight: 600; }
.ip-open { font-family: var(--sans); font-size: .76rem; font-weight: 600; letter-spacing: .04em; padding: .2rem .45rem; white-space: nowrap; }
.ip-open--yes { background: var(--fern-soft); color: var(--fern); }
.ip-open--no { background: var(--paper-2); color: var(--ink-3); }

.ip-wait { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; }
.ip-wait__track { position: relative; height: 5px; background: var(--paper-2); border: 1px solid var(--rule); }
.ip-wait__fill { position: absolute; inset: 0 auto 0 0; width: calc(min(var(--w), 8) / 8 * 100%); background: var(--iris); }
.ip-wait__n { font-family: var(--sans); font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the fee ladder */
.ip-ladder { background: var(--dark); color: #d8d3e6; padding: clamp(1.2rem, 2.5vw, 1.7rem); }
.ip-ladder h3 { color: #fff; font-size: 1.15rem; }
.ip-ladder__note { font-family: var(--sans); font-size: .82rem; color: #a49bc0; margin: .4rem 0 1.2rem; }
.ip-ladder__row { display: flex; align-items: baseline; gap: .4rem; font-family: var(--sans); font-size: .93rem; padding-block: .42rem; }
.ip-ladder__row + .ip-ladder__row { border-top: 1px solid var(--dark-rule); }
.ip-ladder__name { color: #cdc7de; text-decoration: none; }
a.ip-ladder__name:hover { color: #fff; }
.ip-ladder__dots { flex: 1 1 auto; min-width: 1rem; border-bottom: 1px dotted var(--dark-rule); transform: translateY(-.28em); }
.ip-ladder__amt { font-variant-numeric: tabular-nums; font-weight: 600; color: #fff; white-space: nowrap; }
.ip-ladder__row.is-for .ip-ladder__name { color: #fff; }
.ip-ladder__row.is-for .ip-ladder__amt { color: #c3b2ff; }
.ip-ladder__free { color: var(--fern-soft); }
.ip-ladder__total { margin-top: 1.1rem; padding-top: .95rem; border-top: 1px solid var(--dark-rule); font-family: var(--sans); font-size: .93rem; color: #b6afc9; }
.ip-ladder__total b { display: block; color: #fff; font-size: 1.28rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: .25rem; letter-spacing: -0.01em; }
.ip-ladder__band { font-family: var(--sans); font-size: .82rem; color: #a49bc0; margin-top: .7rem; }

.ip-tally {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--rule); background: var(--paper-3); margin-top: 1.6rem;
}
.ip-tally > div { padding: .95rem 1.1rem; border-left: 1px solid var(--rule); }
.ip-tally > div:first-child { border-left: 0; }
.ip-tally b { display: block; font-family: var(--sans); font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ip-tally span { font-family: var(--sans); font-size: .82rem; color: var(--ink-3); }
.ip-tally .is-open b { color: var(--fern); }

.ip-noscript { font-family: var(--sans); font-size: .85rem; color: var(--ink-3); margin-top: 1.2rem; }

/* ------------------------------------------------- the first fifty minutes */

.ip-clock { border-top: 1px solid var(--rule); }
.ip-clock__row {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 1rem clamp(1rem, 2.5vw, 2rem);
  padding-block: 1.15rem; border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.ip-clock__range { font-family: var(--sans); font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--iris-ink); }
.ip-clock__t { min-width: 0; }
.ip-clock__t h3 { font-size: 1.16rem; margin-bottom: .3rem; }
.ip-clock__t h3 a { text-decoration: none; }
.ip-clock__t h3 a:hover { color: var(--iris-ink); }
.ip-clock__t p { margin: 0; color: var(--ink-2); font-size: 1rem; }
.ip-clock__bar { align-self: center; }
.ip-clock__bar i { display: block; height: 8px; background: var(--iris); width: calc(var(--m) / 25 * 100%); max-width: 100%; }
.ip-clock__bar span { display: block; font-family: var(--sans); font-size: .76rem; color: var(--ink-3); margin-top: .35rem; font-variant-numeric: tabular-nums; }
.ip-band--dark .ip-clock, .ip-band--dark .ip-clock__row { border-color: var(--dark-rule); }

/* ------------------------------------------------------------- counsellors */

.ip-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.ip-card { background: var(--paper-3); padding: clamp(1.1rem, 2vw, 1.5rem); display: flex; flex-direction: column; gap: .55rem; }
.ip-card h3 { font-size: 1.28rem; }
.ip-card h3 a { text-decoration: none; }
.ip-card h3 a:hover { color: var(--iris-ink); }
.ip-card__role { font-family: var(--sans); font-size: .82rem; color: var(--ink-3); margin: -.25rem 0 0; }
.ip-card__holds { font-size: .99rem; color: var(--ink-2); margin: 0; }
.ip-card__foot { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--rule); display: grid; gap: .45rem; }

/* -------------------------------------------------------- what we don't do */

.ip-nots { display: grid; gap: 0; border-top: 1px solid var(--dark-rule); }
.ip-not { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: .5rem clamp(1rem, 3vw, 2.5rem); padding-block: 1.2rem; border-bottom: 1px solid var(--dark-rule); }
.ip-not h3 { font-size: 1.16rem; }
.ip-not h3 a { text-decoration: none; }
.ip-not h3 a:hover { color: #cdc2f0; }
.ip-not p { margin: 0; color: #b6afc9; }
.ip-not__instead { font-family: var(--sans); font-size: .92rem; }
.ip-not__instead b { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #8d83ad; margin-bottom: .25rem; }

/* --------------------------------------------------------- notes, articles */

.ip-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.ip-note { background: var(--paper-3); padding: clamp(1.1rem, 2vw, 1.5rem); text-decoration: none; display: block; }
.ip-note:hover { background: var(--paper); }
.ip-note h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.ip-note p { color: var(--ink-2); margin: 0; font-size: 1rem; }
.ip-note span { display: inline-block; margin-top: .8rem; font-family: var(--sans); font-size: .8rem; color: var(--iris-ink); }

.ip-article { max-width: 40rem; }
.ip-article__body { font-size: 1.11rem; line-height: 1.7; }
.ip-article__body p { margin-bottom: 1.15em; }
.ip-crumbs { font-family: var(--sans); font-size: .82rem; color: var(--ink-3); margin-bottom: 1rem; }
.ip-crumbs a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--rule); }
.ip-crumbs a:hover { color: var(--ink); }

/* ------------------------------------------------------------- questions */

.ip-qa { border-top: 1px solid var(--rule); }
.ip-qa__item { border-bottom: 1px solid var(--rule); padding-block: 1.35rem; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: .5rem clamp(1rem, 3vw, 2.5rem); }
.ip-qa__q { font-size: 1.18rem; font-weight: 600; margin: 0; }
.ip-qa__q a { text-decoration: none; }
.ip-qa__q a:hover { color: var(--iris-ink); }
.ip-qa__a { margin: 0; color: var(--ink-2); }

/* ------------------------------------------------------------ afterwards */

.ip-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); }
.ip-quote { border-top: 2px solid var(--iris); padding-top: 1rem; margin: 0; }
.ip-quote blockquote { margin: 0 0 .9rem; font-size: 1.14rem; line-height: 1.55; }
.ip-quote figcaption { font-family: var(--sans); font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.ip-quote figcaption a { text-decoration: none; }

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

.ip-formwrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.6rem, 4vw, 4rem); align-items: start; }
.ip-form { background: var(--paper-3); border: 1px solid var(--rule); padding: clamp(1.2rem, 3vw, 2rem); }
.ip-set { border: 0; padding: 0; margin: 0 0 1.6rem; min-inline-size: 0; }
.ip-set:last-of-type { margin-bottom: 1.1rem; }
.ip-set legend { float: left; width: 100%; padding: 0; font-family: var(--sans); font-size: .73rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .75rem; }
.ip-set legend + * { clear: both; }
.ip-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .9rem; }
.ip-field { display: grid; gap: .3rem; margin-bottom: .9rem; min-width: 0; }
.ip-field:last-child { margin-bottom: 0; }
.ip-field label { font-family: var(--sans); font-size: .86rem; font-weight: 500; color: var(--ink-2); }
.ip-field input, .ip-field select, .ip-field textarea {
  font-family: var(--sans); font-size: .98rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-2); border-radius: 0;
  padding: .62rem .7rem; width: 100%; min-width: 0;
}
.ip-field textarea { font-family: var(--serif); font-size: 1.02rem; line-height: 1.55; resize: vertical; }
.ip-field input:focus, .ip-field select:focus, .ip-field textarea:focus { border-color: var(--iris); outline: 1px solid var(--iris); outline-offset: -2px; }
.ip-field small { font-family: var(--sans); font-size: .8rem; color: var(--ink-3); }
.ip-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ip-send { border-top: 1px solid var(--rule); padding-top: 1.1rem; display: grid; gap: .7rem; justify-items: start; }
.ip-send small { font-family: var(--sans); font-size: .83rem; color: var(--ink-3); }
.ip-msg { font-family: var(--sans); font-size: .9rem; margin: 0; }
.ip-msg[data-state="err"] { color: #8f2437; }
.ip-msg[data-state="ok"] { color: var(--fern); }
.ip-form[data-busy] { opacity: .65; }

.ip-sent { background: var(--paper-3); border: 1px solid var(--iris); border-top: 4px solid var(--iris); padding: clamp(1.3rem, 3vw, 2.1rem); }
.ip-sent h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: .8rem; }
.ip-sent__list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem 1.1rem; margin: 1.4rem 0; padding-block: 1.1rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ip-sent__list dt { font-family: var(--sans); font-size: .73rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-top: .18rem; }
.ip-sent__list dd { margin: 0; }
.ip-sent__fine { font-family: var(--sans); font-size: .87rem; color: var(--ink-2); }

.ip-aside h2 { font-size: var(--t3); margin-bottom: .6rem; }
.ip-aside__block { border-top: 1px solid var(--rule); padding-top: 1.1rem; margin-top: 1.4rem; }
.ip-aside__block:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

.ip-crisis { border: 1px solid var(--rule-2); background: var(--paper-2); padding: 1.1rem 1.2rem; }
.ip-crisis p { font-family: var(--sans); font-size: .92rem; margin: 0; }
.ip-crisis b { display: block; font-size: .73rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .35rem; }
.ip-crisis a { color: var(--iris-ink); font-weight: 600; }

/* --------------------------------------------------------------- hours dl */

.ip-hours { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 0; font-family: var(--sans); font-size: .9rem; font-variant-numeric: tabular-nums; }
.ip-hours dt { color: var(--ink-3); }
.ip-hours dd { margin: 0; }

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

.ip-foot { background: var(--dark); color: #b6afc9; margin-top: var(--step); padding-block: clamp(2.5rem, 4vw, 3.75rem) 1.6rem; }
.ip-foot__in {
  width: var(--shell); margin-inline: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem);
}
.ip-foot h2 { font-family: var(--sans); font-size: .73rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8d83ad; margin-bottom: .7rem; }
.ip-foot p { font-size: .98rem; }
.ip-foot a { color: #cdc2f0; }
.ip-foot__mark { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; color: #fff; margin-bottom: .5rem; letter-spacing: -0.02em; }
.ip-foot .ip-hours dt { color: #8d83ad; }
.ip-foot__nav { display: grid; gap: .4rem; font-family: var(--sans); font-size: .93rem; }
.ip-foot__nav a { text-decoration: none; }
.ip-foot__nav a:hover { text-decoration: underline; }
.ip-foot__fine {
  width: var(--shell); margin: clamp(2rem, 3vw, 2.8rem) auto 0;
  border-top: 1px solid var(--dark-rule); padding-top: 1.1rem;
  font-family: var(--sans); font-size: .82rem; color: #8d83ad;
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
}
.ip-foot__crisis { color: #cdc2f0; }

/* ------------------------------------------------------------ narrow rules */

@media (max-width: 1000px) {
  .ip-hero { grid-template-columns: 1fr; }
  .ip-hero .ip-plate { max-width: 30rem; }
  .ip-picks, .ip-board, .ip-formwrap { grid-template-columns: 1fr; }
  .ip-head { grid-template-columns: 1fr; align-items: start; }
  .ip-qa__item, .ip-not { grid-template-columns: 1fr; }
}

/* The five nav labels here are sentences, not words ("What we work with"), so
   the masthead runs out of room a long way above the usual phone breakpoint. */
@media (max-width: 1080px) {
  .ip-top__in { grid-template-columns: 1fr auto auto; row-gap: 0; }
  .ip-mark { grid-column: 1; grid-row: 1; }
  .ip-top__cta { grid-column: 2; grid-row: 1; }
  .ip-burger { grid-column: 3; grid-row: 1; display: inline-flex; }
  .ip-nav { display: none; grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .ip-top[data-open] .ip-nav {
    display: grid; gap: 0;
    border-top: 1px solid var(--rule); margin-top: .9rem; padding-bottom: .4rem;
  }
  .ip-top[data-open] .ip-nav a { padding-block: .75rem; border-bottom: 1px solid var(--rule); font-size: 1rem; }
  .ip-top[data-open] .ip-nav a:last-child { border-bottom: 0; }
}

@media (max-width: 640px) {
  body { font-size: 1.02rem; }
  .ip-rail { grid-template-columns: 1fr; }
  .ip-rail > div { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-right: 0; }
  .ip-rail > div:first-child { border-top: 0; }
  .ip-tally { grid-template-columns: 1fr; }
  .ip-tally > div { border-left: 0; border-top: 1px solid var(--rule); }
  .ip-tally > div:first-child { border-top: 0; }
  .ip-clock__row { grid-template-columns: 1fr; gap: .5rem; }
  .ip-clock__bar i { width: calc(var(--m) / 25 * 60%); }
  .ip-sent__list { grid-template-columns: 1fr; gap: .1rem; }
  .ip-sent__list dt { margin-top: .7rem; }
  .ip-sent__list dt:first-of-type { margin-top: 0; }
  .ip-mark b { font-size: 1.3rem; }
  .ip-person { grid-template-columns: 1fr; }
  .ip-open { justify-self: start; }
}

@media (prefers-reduced-motion: no-preference) {
  .ip-chip, .ip-btn, .ip-note { transition: background-color .12s linear, border-color .12s linear, color .12s linear; }
}

/* ==========================================================================
   Components used by the inner pages. Same vocabulary, same hairlines.
   ====================================================================== */

/* margin resets where a paragraph is doing a component's job */
.ip-verdict, .ip-person__free, .ip-wait, .ip-ladder__row, .ip-clock__bar,
.ip-clock__range, .ip-not__instead, .ip-stage__n { margin-top: 0; }
.ip-person__free, .ip-wait, .ip-ladder__row, .ip-clock__bar, .ip-clock__range { margin-bottom: 0; }

/* the fee table: three bands side by side, one row per thing we charge for */
.ip-fees { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: .95rem; }
.ip-fees caption { text-align: left; font-size: .82rem; color: var(--ink-3); padding-bottom: .8rem; }
.ip-fees th, .ip-fees td { text-align: right; padding: .85rem .7rem; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.ip-fees th[scope="row"], .ip-fees thead th:first-child { text-align: left; font-weight: 500; }
.ip-fees thead th { font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); border-bottom-color: var(--rule-2); }
.ip-fees th[scope="row"] { min-width: 0; }
.ip-fees th[scope="row"] a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.ip-fees th[scope="row"] a:hover { border-bottom-color: var(--iris); }
.ip-fees th[scope="row"] small { display: block; font-weight: 400; color: var(--ink-3); font-size: .85rem; margin-top: .2rem; }
.ip-fees td.is-free { color: var(--fern); font-weight: 600; }
.ip-fees tbody tr:hover { background: var(--paper-3); }
.ip-scroll { overflow-x: auto; }

/* .ip-fees already sits in a .ip-scroll (overflow-x:auto) wrapper, but
   `th[scope="row"] { min-width: 0 }` let the row-name column shrink to its
   narrowest wrappable word, so a 4-word session name ("Individual session,
   50 minutes") wrapped almost one word per line instead of the table
   overflowing into the scroll wrapper it already has. Give that column a
   real floor below 640px so the table overflows (and scrolls) instead. */
@media (max-width: 640px) {
  .ip-fees th[scope="row"] { min-width: 10rem; }
}

/* the list of what we take: what, how long, who, wait */
.ip-takes { border-top: 1px solid var(--rule); }
.ip-take {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 9rem;
  gap: .6rem clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.4rem; border-bottom: 1px solid var(--rule);
}
.ip-take h3 { font-size: 1.2rem; margin-bottom: .35rem; }
.ip-take h3 a { text-decoration: none; }
.ip-take h3 a:hover { color: var(--iris-ink); }
.ip-take p { margin: 0; color: var(--ink-2); }
.ip-take__looks { font-size: .99rem; }
.ip-take__looks b { display: block; font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .3rem; }
.ip-take__n { font-family: var(--sans); font-variant-numeric: tabular-nums; }
.ip-take__n b { display: block; font-size: 1.35rem; font-weight: 600; line-height: 1.1; color: var(--iris-ink); }
.ip-take__n span { display: block; font-size: .8rem; color: var(--ink-3); margin-top: .2rem; }
.ip-take__who { grid-column: 1 / -1; font-family: var(--sans); font-size: .87rem; color: var(--ink-2); margin: 0; }
.ip-take__who a { color: var(--iris-ink); text-decoration: none; border-bottom: 1px solid var(--rule-2); }

/* the first session, one stage per spread */
.ip-stages { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.ip-stage { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.4rem, 3.5vw, 3rem); align-items: start; }
.ip-stage:nth-child(even) .ip-plate { order: 2; }
.ip-stage__n { font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--iris-ink); margin-bottom: .55rem; }
.ip-stage h2 { margin-bottom: .8rem; }
.ip-stage__body { color: var(--ink-2); }
.ip-stage__bar { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: center; margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.ip-stage__bar i { display: block; height: 8px; background: var(--iris); width: calc(var(--m) / 50 * 100%); }
.ip-stage__bar span { font-family: var(--sans); font-size: .8rem; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the three bands, side by side */
.ip-bandcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.ip-bandcard { background: var(--paper-3); padding: clamp(1.1rem, 2vw, 1.6rem); }
.ip-bandcard h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.ip-bandcard p { color: var(--ink-2); margin-bottom: 1rem; }
.ip-bandcard__fig { font-family: var(--sans); font-variant-numeric: tabular-nums; border-top: 1px solid var(--rule); padding-top: .9rem; }
.ip-bandcard__fig b { display: block; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; color: var(--iris-ink); }
.ip-bandcard__fig span { display: block; font-size: .82rem; color: var(--ink-3); margin-top: .2rem; }

@media (max-width: 1000px) {
  .ip-take { grid-template-columns: minmax(0, 1fr) 8rem; }
  .ip-take__looks { grid-column: 1 / -1; }
  .ip-stage { grid-template-columns: 1fr; }
  .ip-stage:nth-child(even) .ip-plate { order: 0; }
  .ip-stage .ip-plate { max-width: 34rem; }
}

@media (max-width: 640px) {
  .ip-take { grid-template-columns: 1fr; }
  .ip-take__n { display: flex; align-items: baseline; gap: .5rem; }
  .ip-take__n span { margin-top: 0; }
}

.ip-rail { margin-block: 0; }

/* The masthead call-to-action carries the whole sentence where there is room
   and a short one on a phone; at 375 the long label wrapped to two lines and
   pushed the wordmark into three. */
.ip-cta--short { display: none; }
@media (max-width: 560px) {
  .ip-cta--long { display: none; }
  .ip-cta--short { display: inline; }
  .ip-top__cta { font-size: .86rem; padding: .6rem .8rem; }
  .ip-burger { padding: .55rem .6rem; }
  .ip-top__in { column-gap: .7rem; }
}


/* ─── the opening: the board, with no hero in front of it ──────────── */

.ip-first { padding-block: clamp(2.25rem, 4vw, 3.5rem) clamp(2rem, 3vw, 3rem); }
.ip-first__head {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: .6rem clamp(1.5rem, 4vw, 4rem); align-items: end;
  margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
}
.ip-first__head h1 { max-width: 15ch; }
.ip-first__lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem); color: var(--ink-2); margin: 0; }
.ip-first__where {
  font-family: var(--sans); font-size: .76rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--rule); padding-bottom: .9rem; margin-bottom: 1.4rem;
  display: flex; flex-wrap: wrap; gap: .35rem 1.4rem;
}
.ip-first__where b { color: var(--iris-ink); font-weight: 600; }

@media (max-width: 1000px) {
  .ip-first__head { grid-template-columns: 1fr; align-items: start; }
  .ip-first__head h1 { max-width: none; }
}