/* FIELD NOTES main stylesheet. The card catalog: rail, dividers, cards, annotations.
   Tokens live in tokens.css; nothing here invents a colour or a size. */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--wght-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* the drawer bottom: a warm shadow under everything, so the page sits in a box */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  box-shadow: inset 0 0 clamp(3rem, 9vw, 8rem) rgba(46, 42, 38, 0.14);
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-display);
  margin: 0;
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

.skip-link {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: var(--z-skip);
  transform: translateY(-200%);
  background: var(--typewriter);
  color: var(--manila);
  padding: var(--s-3) var(--s-5);
  text-decoration: none;
  border-radius: var(--r-2);
}
.skip-link:focus-visible { transform: none; }

/* anchors clear the fixed rail */
:target { scroll-margin-top: calc(var(--tab-h) + 4.4rem); }
[id] { scroll-margin-top: calc(var(--tab-h) + 4.4rem); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- shared roles ---------- */
/* container */
.tray {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--edge);
  position: relative;
  z-index: 1;
}
.tray--narrow { max-width: 56rem; }

/* kicker: the call number strip on a catalog card */
.callnum {
  font-family: var(--font-display);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
}
.callnum--accent { color: var(--accent); }
.callnum::before {
  content: "";
  width: 0.85rem;
  height: 2px;
  background: currentColor;
  opacity: 0.65;
}
.callnum--bare::before { display: none; }

/* headings */
.head { font-size: var(--t-h2); }
.subhead { font-size: var(--t-h3); }

/* body copy */
.prose {
  max-width: var(--measure);
  font-size: var(--t-body);
}
.prose + .prose { margin-top: var(--s-4); }
.prose--lead {
  font-size: var(--t-lead);
  line-height: 1.5;
}

/* the pencilled aside */
.marginalia {
  font-size: var(--t-small);
  color: var(--muted);
  max-width: 30rem;
}

/* buttons: rubber stamps */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.72rem 1.35rem;
  background: var(--accent);
  color: var(--accent-ink);
  border: 2px solid var(--accent);
  border-radius: var(--r-2);
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-1) linear;
}
.stamp:hover { transform: translateY(-1px) rotate(-0.35deg); }
.stamp:active { transform: translateY(0); }
.stamp--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-strong);
}
.stamp--ghost:hover { border-color: var(--accent); color: var(--accent); }
.stamp--small { padding: 0.42rem 0.85rem; font-size: 0.85rem; }

/* sample + placeholder honesty marks */
.chip {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border: 1px dashed var(--accent);
  color: var(--accent);
  border-radius: var(--r-1);
  vertical-align: middle;
  white-space: nowrap;
}

/* ---------- sections + dividers ---------- */
.section {
  padding-block: var(--section-pad);
  position: relative;
}
.section--tight { padding-block: calc(var(--section-pad) * 0.62); }

/* a divider is a stiff sheet of stock with a cut tab riding its top edge */
.divider {
  position: relative;
  border-top: 2px solid var(--line-strong);
  padding-top: calc(var(--tab-h) + var(--s-5));
  margin-top: var(--s-8);
}
.divider-tab {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--tab-h);
  padding: 0 var(--s-5) 0 var(--s-4);
  background: var(--bg-2);
  border: 2px solid var(--line-strong);
  border-bottom: 0;
  border-radius: var(--r-2) 14px 0 0;
  font-family: var(--font-display);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 100%, 0 100%);
}
.divider-tab span { color: var(--accent); }
.divider--mid .divider-tab { left: 22%; }
.divider--far .divider-tab { left: 44%; }

.section-open {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3) var(--s-5);
  margin-bottom: var(--s-6);
}
.section-open .head { flex: 1 1 22rem; }

/* ---------- the rail (fixed header) ---------- */
.drawer-rail {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-rail);
  background: var(--manila);
  border-bottom: 2px solid var(--typewriter);
  box-shadow: 0 2px 0 rgba(46, 42, 38, 0.08);
}
.drawer-rail .tray {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 4.4rem;
  padding-block: var(--s-2);
}

/* the brand is the label slipped into the drawer's brass card holder */
.spine-label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  padding: 0.34rem 0.7rem;
  border: 2px solid var(--typewriter);
  border-radius: var(--r-1);
  background: var(--card);
  box-shadow: var(--lift-0);
  flex: 0 0 auto;
}
.spine-label svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--fig); }
.spine-label b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}
.spine-label i {
  font-style: normal;
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  border-left: 1px solid var(--line);
  padding-left: var(--s-3);
}

.rail-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

/* nav = the row of divider tabs standing in the drawer */
.tab-nav { display: none; }
.tab-nav ul {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  list-style: none;
}
.tab-nav a {
  display: block;
  padding: 0.34rem 0.8rem 0.42rem;
  background: var(--manila-2);
  border: 1.5px solid var(--line-strong);
  border-bottom: 0;
  border-radius: var(--r-2) 12px 0 0;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  transform: translateY(3px);
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-1) linear;
}
.tab-nav a:hover { transform: translateY(0); background: var(--card-2); }
.tab-nav a[aria-current="true"] {
  transform: translateY(0);
  background: var(--card);
  color: var(--accent);
  box-shadow: 0 -2px 0 var(--accent) inset;
}

.rail-ask {
  display: none;
  text-decoration: none;
}

/* without JS the drawer cannot be pulled out, so the button is never shown and
   the tabs come out to do the job instead. No dead controls, ever. */
html:not(.js) .pull-btn { display: none; }
html:not(.js) .tab-nav { display: block; }
html:not(.js) .tab-nav ul { flex-wrap: wrap; gap: 3px 4px; }

.pull-btn {
  background: var(--card);
  border: 2px solid var(--typewriter);
  border-radius: var(--r-2);
  padding: 0.4rem 0.8rem;
  font-family: var(--font-display);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: pointer;
}

/* ---------- the pulled-out drawer (mobile menu dialog) ---------- */
.pull-out {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer-out);
  background: var(--drawer);
  color: var(--manila);
  padding: var(--s-6) var(--edge) var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--dur-3) var(--ease-inout), visibility 0s linear var(--dur-3);
}
.pull-out.is-open {
  transform: none;
  visibility: visible;
  transition: transform var(--dur-3) var(--ease-inout), visibility 0s;
}
.pull-out nav ul { list-style: none; display: grid; gap: 2px; }
.pull-out nav a {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-4);
  background: var(--drawer-2);
  border-left: 4px solid var(--accent);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.35rem;
}
.pull-out nav a small {
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  color: var(--muted);
}
.pull-close {
  align-self: flex-start;
  background: transparent;
  border: 2px solid var(--line-strong);
  color: inherit;
  border-radius: var(--r-2);
  padding: 0.4rem 0.9rem;
  font-family: var(--font-display);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: pointer;
}

/* ---------- catalog cards (the index cards) ---------- */
.catalog-card {
  position: relative;
  perspective: 1400px;
}
.catalog-card-faces { display: block; }
.catalog-card-face {
  position: relative;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--line);
  border-top: 1px solid rgba(46, 42, 38, 0.08);
  border-radius: var(--r-2);
  box-shadow: var(--lift-1);
  padding: var(--s-5) var(--s-5) var(--s-6);
  /* the printed ruling: only inside a card, never on the page ground */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--rule-step) - 1px),
    var(--ruling) calc(var(--rule-step) - 1px),
    var(--ruling) var(--rule-step)
  );
  background-position: 0 calc(var(--s-5) + 0.62rem);
  background-repeat: repeat;
}
/* the red-margin rule of a filing card, in fig */
.catalog-card-face::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--s-4);
  width: 1px;
  background: var(--accent);
  opacity: 0.32;
  pointer-events: none;
}
.catalog-card-face > * { position: relative; }
.catalog-card-face .prose,
.catalog-card-face li { line-height: var(--rule-step); }

.catalog-card-title {
  font-size: var(--t-h3);
  margin-bottom: var(--s-3);
}
.catalog-card-face .callnum { margin-bottom: var(--s-3); }

.catalog-card-list {
  list-style: none;
  display: grid;
  gap: var(--s-3);
  max-width: var(--measure);
}
.catalog-card-list li {
  padding-left: 1.5rem;
  position: relative;
}
.catalog-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.7rem;
  height: 0.7rem;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  transform: rotate(-8deg);
}
.catalog-card-list--checked li::before {
  border-radius: 0;
  border: 0;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  height: 0.42rem;
  transform: rotate(-45deg);
  top: 0.6em;
}

/* the ledge under a card holds its controls */
.catalog-card-ledge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
  padding-left: var(--s-2);
}
.catalog-card-flip {
  display: none;
  align-items: center;
  gap: var(--s-2);
  background: transparent;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-pill);
  padding: 0.34rem 0.9rem;
  font-family: var(--font-display);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur-1) linear, color var(--dur-1) linear;
}
.catalog-card-flip:hover { border-color: var(--accent); color: var(--accent); }
.catalog-card-flip .flip-mark {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  position: relative;
}
.catalog-card-flip .flip-mark::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  border: 4px solid transparent;
  border-right-color: currentColor;
  border-bottom-color: currentColor;
}
.js .catalog-card-flip { display: inline-flex; }

/* no-JS + no-flip rest state: the second face simply follows the first,
   introduced by its own hairline heading. Nothing is hidden, ever. */
.catalog-card-face--verso { margin-top: var(--s-3); }
.verso-lead {
  font-family: var(--font-display);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.verso-lead::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* with JS: the two faces stack and the card turns */
.js .catalog-card-faces {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  transform-style: preserve-3d;
  transition: transform var(--dur-3) var(--ease-inout);
}
.js .catalog-card-face {
  grid-area: 1 / 1 / 2 / 2;
  min-width: 0;
  backface-visibility: hidden;
  margin-top: 0;
}
.js .catalog-card-face--verso { transform: rotateY(180deg); }
.js .catalog-card.is-turned .catalog-card-faces { transform: rotateY(180deg); }

/* trays of cards */
.catalog-cards {
  display: grid;
  gap: var(--s-5);
}
.catalog-cards > *,
.fit-pair > *,
.walk > * { min-width: 0; }
.catalog-cards--two { grid-template-columns: 1fr; }
.catalog-cards--three { grid-template-columns: 1fr; }

/* a card that leans, because a drawer is not a spreadsheet */
.catalog-card--tilt-a .catalog-card-face { transform: rotate(-0.4deg); }
.catalog-card--tilt-b .catalog-card-face { transform: rotate(0.5deg); }
.js .catalog-card--tilt-a .catalog-card-face,
.js .catalog-card--tilt-b .catalog-card-face { transform: none; }
.js .catalog-card--tilt-a .catalog-card-faces { transform: rotate(-0.4deg); }
.js .catalog-card--tilt-b .catalog-card-faces { transform: rotate(0.5deg); }
.js .catalog-card--tilt-a.is-turned .catalog-card-faces { transform: rotate(-0.4deg) rotateY(180deg); }
.js .catalog-card--tilt-b.is-turned .catalog-card-faces { transform: rotate(0.5deg) rotateY(180deg); }

/* ---------- the annotating hand ---------- */
.annot {
  position: absolute;
  pointer-events: none;
  z-index: var(--z-annot);
  color: var(--accent);
  overflow: visible;
}
.annot path,
.annot line,
.annot ellipse {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.js .annot path,
.js .annot line,
.js .annot ellipse {
  stroke-dasharray: var(--dash, 460);
  stroke-dashoffset: var(--dash, 460);
}
.js .annot.is-inview path,
.js .annot.is-inview line,
.js .annot.is-inview ellipse {
  transition: stroke-dashoffset var(--dur-4) var(--ease-out);
  stroke-dashoffset: 0;
}
/* a ring drawn round a word, scaled to whatever the word turns out to be */
.marked {
  position: relative;
  display: inline-block;
}
.marked .annot {
  left: -0.5rem;
  top: -0.35rem;
  width: calc(100% + 1rem);
  height: calc(100% + 0.7rem);
}
.annot-arrow {
  width: 3.2rem;
  height: 1.6rem;
  vertical-align: middle;
  position: static;
  display: inline-block;
  color: var(--accent);
}
.annot-note {
  font-family: var(--font-display);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- 01 opening (hero) ---------- */
#drawer-01 {
  padding-top: calc(var(--tab-h) + 7rem);
  padding-bottom: var(--section-pad);
}
#drawer-01 .opening-tray {
  display: grid;
  gap: var(--s-6);
}
#drawer-01 .opening-card { max-width: 46rem; }
#drawer-01 .opening-card .catalog-card-face { padding: var(--s-6) var(--s-6) var(--s-7); }
#drawer-01 h1 {
  font-size: clamp(1.95rem, 4.4vw, 3.35rem);
  margin: var(--s-4) 0 var(--s-5);
  max-width: 20ch;
}
#drawer-01 .opening-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
#drawer-01 .opening-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--muted);
}
#drawer-01 .opening-facts span { display: inline-flex; align-items: center; gap: var(--s-2); }
#drawer-01 .opening-facts b { color: var(--fg); font-weight: var(--wght-strong); }

/* the fan of blank cards behind the top one */
#drawer-01 .fan {
  position: absolute;
  inset: auto 0 0 0;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
#drawer-01 .fan i {
  position: absolute;
  display: block;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--lift-0);
}
#drawer-01 .fan i:nth-child(1) { inset: 6% 4% 4% 6%; transform: rotate(-1.4deg); }
#drawer-01 .fan i:nth-child(2) { inset: 3% 7% 7% 3%; transform: rotate(1.1deg); }

/* the snapshot clipped to the drawer */
.snapshot {
  margin: 0;
  position: relative;
  max-width: 30rem;
  justify-self: start;
}
.snapshot img {
  border: 8px solid var(--card);
  border-bottom-width: 44px;
  border-radius: var(--r-1);
  box-shadow: var(--lift-2);
  transform: rotate(-1.1deg);
  width: 100%;
}
.snapshot figcaption {
  position: absolute;
  left: var(--s-6);
  right: var(--s-5);
  bottom: 0.55rem;
  font-size: var(--t-small);
  color: var(--muted);
  transform: rotate(-1.1deg);
  line-height: 1.3;
}

/* ---------- 02 fit ---------- */
#fit-02 .fit-pair {
  display: grid;
  gap: var(--s-5);
}
#fit-02 .catalog-card-face { min-height: 100%; }

/* ---------- 03 first visit walk-through ---------- */
#first-03 { position: relative; }
#first-03 .walk {
  display: grid;
  gap: var(--s-6);
  counter-reset: step;
}
#first-03 .walk > .catalog-card { counter-increment: step; }
#first-03 .catalog-card-face--recto .catalog-card-title::before {
  content: counter(step, decimal-leading-zero) " ";
  color: var(--accent);
  font-size: 0.72em;
  letter-spacing: var(--track-label);
  margin-right: var(--s-2);
}
#first-03 .walk-note {
  margin-top: var(--s-6);
  padding: var(--s-5);
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-3);
}

/* ---------- 04 ways of working ---------- */
#ways-04 .ways-out {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}

/* ---------- 05 fees ---------- */
/* a wide sheet scrolls inside its own card; the page never scrolls sideways */
.sheet-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.fee-sheet {
  width: 100%;
  min-width: 21rem;
  border-collapse: collapse;
  font-size: var(--t-body);
}
.fee-sheet caption {
  text-align: left;
  padding-bottom: var(--s-3);
  color: var(--muted);
  font-size: var(--t-small);
}
.fee-sheet th,
.fee-sheet td {
  text-align: left;
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
}
.fee-sheet thead th {
  font-family: var(--font-display);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--line-strong);
}
.fee-sheet td:last-child,
.fee-sheet th:last-child { text-align: right; padding-right: 0; }
.fee-sheet .fee-num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.scale-note {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

/* ---------- 06 the room ---------- */
#room-06 .room-lay {
  display: grid;
  gap: var(--s-6);
  align-items: start;
}
#room-06 figure { margin: 0; }
#room-06 figure img {
  border: 6px solid var(--card);
  border-radius: var(--r-1);
  box-shadow: var(--lift-1);
  filter: saturate(0.86) contrast(1.02);
  transition: filter var(--dur-3) var(--ease-out);
}
#room-06 figure.is-inview img { filter: none; }
#room-06 figcaption {
  margin-top: var(--s-3);
  font-size: var(--t-small);
  color: var(--muted);
}
#room-06 .room-facts { margin-top: var(--s-5); }

/* ---------- 07 questions (accordion) ---------- */
.query-stack {
  border-top: 2px solid var(--line-strong);
  max-width: 52rem;
}
.query { border-bottom: 1px solid var(--line); }
.query-trigger {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  background: transparent;
  border: 0;
  padding: var(--s-4) 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.08rem;
}
.query-trigger .q-mark {
  flex: 0 0 auto;
  width: 1.5rem;
  color: var(--accent);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
}
.query-trigger .q-open {
  margin-left: auto;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  position: relative;
  align-self: center;
}
.query-trigger .q-open::before,
.query-trigger .q-open::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--accent);
}
.query-trigger .q-open::after {
  transform: rotate(90deg);
  transition: transform var(--dur-2) var(--ease-out);
}
.query-trigger[aria-expanded="true"] .q-open::after { transform: rotate(0deg); }
.query-answer { overflow: hidden; }
.query-answer > div { padding: 0 0 var(--s-5) calc(1.5rem + var(--s-4)); }

/* ---------- 08 the intake slip (form) ---------- */
#ask-08 .intake-lay {
  display: grid;
  gap: var(--s-6);
  align-items: start;
}
.intake-card {
  display: grid;
  gap: var(--s-4);
}
.field { display: grid; gap: var(--s-2); }
.field label {
  font-family: var(--font-display);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}
.field .hint {
  font-size: var(--t-small);
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
}
.field input,
.field select,
.field textarea {
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-2);
  padding: 0.68rem 0.8rem;
  width: 100%;
  font-size: var(--t-body);
}
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--focus); }
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: var(--accent); border-width: 2px; }
.field-err {
  font-size: var(--t-small);
  color: var(--accent);
  font-weight: var(--wght-strong);
}
.field-row {
  display: grid;
  gap: var(--s-4);
}

.intake-card-errors {
  border: 2px solid var(--accent);
  border-radius: var(--r-2);
  padding: var(--s-4);
  background: var(--card-2);
}
.intake-card-errors h3 {
  font-size: 1rem;
  margin-bottom: var(--s-2);
}
.intake-card-errors ul { padding-left: 1.1rem; }
.intake-card-errors li { margin-top: var(--s-1); }
.intake-card-errors a { color: var(--accent); }

.intake-card-status {
  font-size: var(--t-small);
  color: var(--muted);
  min-height: 1.2em;
}
.intake-card-fallback {
  border-top: 1px dashed var(--line-strong);
  padding-top: var(--s-4);
  display: grid;
  gap: var(--s-3);
}
.intake-card-fallback textarea { min-height: 9rem; }
.intake-card-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* the sure path when scripts never arrive: the form posts to mail, and the
   phone and the address are on the card, in ink, above the first field */
.intake-card-nojs { display: none; }
html:not(.js) .intake-card-nojs {
  display: block;
  border: 2px solid var(--accent);
  border-radius: var(--r-2);
  padding: var(--s-4);
  background: var(--card-2);
  color: var(--typewriter);
}
html:not(.js) .intake-card-nojs b { font-weight: var(--wght-strong); }
html:not(.js) .intake-card-nojs a { color: var(--accent); }

/* the draft only exists while the script is running, so the sentence about it
   only shows while the script is running */
.intake-card-draft { display: none; }
.js .intake-card-draft {
  display: block;
  font-size: var(--t-small);
  color: var(--muted);
}

/* honeypot: gone from sight, from the tab order, and from the AT tree */
.decoy {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.aside-notes { display: grid; gap: var(--s-5); }
.aside-notes a { color: var(--accent); }

/* the safety card is never decorative */
.safety {
  border: 2px solid var(--accent);
  border-radius: var(--r-2);
  padding: var(--s-4);
  background: var(--card-2);
  color: var(--typewriter);
}
.safety strong { font-weight: var(--wght-strong); }

/* ---------- banner (interior pages) ---------- */
.banner {
  padding-top: calc(var(--tab-h) + 6rem);
  padding-bottom: var(--s-7);
  border-bottom: 2px solid var(--line-strong);
}
.banner h1 {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  margin-top: var(--s-3);
  max-width: 22ch;
}
.crumbs {
  font-size: var(--t-small);
  color: var(--muted);
}
.crumbs a { color: inherit; }
.crumbs span { padding-inline: var(--s-2); opacity: 0.6; }

/* ---------- footer: the drawer's back board ---------- */
.back-board {
  background: var(--drawer);
  color: var(--manila);
  padding-block: var(--s-8) var(--s-6);
  border-top: 4px double var(--fig-bright);
}
.back-board a { color: var(--manila); }
.back-board .board-lay {
  display: grid;
  gap: var(--s-6);
}
.board-col h2,
.board-col h3 {
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fig-bright);
  margin-bottom: var(--s-3);
}
.board-col ul { list-style: none; display: grid; gap: var(--s-2); }
.board-col p + p { margin-top: var(--s-2); }
.board-foot {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(241, 231, 211, 0.2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  font-size: var(--t-small);
  color: #b3a894;
}
.weigh-in {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-display);
  color: #b3a894;
}
.weigh-in b { color: var(--manila); font-weight: 600; }

/* ---------- reveals ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.js .reveal.is-inview { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 70ms; }
.js .reveal[data-delay="2"] { transition-delay: 140ms; }
.js .reveal[data-delay="3"] { transition-delay: 210ms; }
/* the rescue valve: main.js failing to load removes .js and this rest state returns */

/* ---------- 404 ---------- */
.misfiled {
  min-height: 78vh;
  display: grid;
  align-content: center;
  padding-top: calc(var(--tab-h) + 5rem);
}
.misfiled .catalog-card { max-width: 40rem; }
.misfiled h1 { font-size: var(--t-h2); margin-bottom: var(--s-4); }
.misfiled .stamp-mark {
  display: inline-block;
  border: 3px solid var(--accent);
  color: var(--accent);
  border-radius: var(--r-2);
  padding: 0.3rem 0.7rem;
  font-family: var(--font-display);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transform: rotate(-4deg);
  margin-bottom: var(--s-4);
}

/* ---------- styleguide ---------- */
.sg-block { padding-block: var(--s-7); border-top: 1px solid var(--line); }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--s-4); }
.sg-swatch { border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; }
.sg-swatch i { display: block; height: 4.5rem; }
.sg-swatch p { padding: var(--s-3); font-size: var(--t-small); }
.sg-swatch code { font-size: 0.8rem; color: var(--muted); }
.sg-rows { display: grid; gap: var(--s-5); }
.sg-demo { border: 1px dashed var(--line-strong); border-radius: var(--r-2); padding: var(--s-5); }
.sg-table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.sg-table th, .sg-table td { text-align: left; padding: var(--s-2) var(--s-3) var(--s-2) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.sg-table code { font-size: 0.82rem; }

/* ---------- responsive ---------- */
@media (min-width: 40rem) {
  .catalog-cards--two { grid-template-columns: repeat(2, 1fr); }
  #fit-02 .fit-pair { grid-template-columns: repeat(2, 1fr); }
  .field-row { grid-template-columns: repeat(2, 1fr); }
  #drawer-01 .opening-tray { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; }
  .back-board .board-lay { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 60rem) {
  .catalog-cards--three { grid-template-columns: repeat(3, 1fr); }
  #first-03 .walk { grid-template-columns: repeat(2, 1fr); }
  #room-06 .room-lay { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #ask-08 .intake-lay { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .back-board .board-lay { grid-template-columns: 1.4fr 1fr 1fr; }
  .tab-nav { display: block; }
  .rail-ask { display: inline-flex; }
  .pull-btn { display: none; }
}

/* a leaning card costs a few pixels of width; on a phone those pixels matter */
@media (max-width: 40rem) {
  .catalog-card--tilt-a .catalog-card-face,
  .catalog-card--tilt-b .catalog-card-face,
  .js .catalog-card--tilt-a .catalog-card-faces,
  .js .catalog-card--tilt-b .catalog-card-faces { transform: none; }
  .js .catalog-card--tilt-a.is-turned .catalog-card-faces,
  .js .catalog-card--tilt-b.is-turned .catalog-card-faces { transform: rotateY(180deg); }
}

@media (max-width: 26rem) {
  .spine-label i { display: none; }
  /* the staggered tabs line up on the narrowest screens rather than run off it */
  .divider--mid .divider-tab,
  .divider--far .divider-tab { left: 0; }
}

/* ---------- preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .stamp:hover { transform: none; }
  .tab-nav a { transition: none; }
  .pull-out { transition: none; }
  #room-06 figure img { transition: none; filter: none; }

  /* the annotating hand arrives already drawn */
  .js .annot path,
  .js .annot line,
  .js .annot ellipse { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }

  /* the mechanic's replacement: no turn, an instant change of face */
  .js .catalog-card-faces { transform: none !important; transition: none; }
  .js .catalog-card-face {
    backface-visibility: visible;
    transform: none !important;
    grid-area: 1 / 1 / 2 / 2;
  }
  .js .catalog-card:not(.is-turned) .catalog-card-face--verso { display: none; }
  .js .catalog-card.is-turned .catalog-card-face--recto { display: none; }
}

/* ---------- print: the fees and the first-visit walk survive a printer ---------- */
@media print {
  .drawer-rail, .pull-out, .catalog-card-flip, .stamp, .back-board, .annot, .snapshot { display: none !important; }
  body { background: #fff; color: #000; }
  .catalog-card-face { box-shadow: none; border: 1px solid #999; background: #fff; background-image: none; }
  .js .catalog-card-faces { display: block !important; transform: none !important; }
  .js .catalog-card-face { grid-area: auto !important; backface-visibility: visible !important; transform: none !important; display: block !important; }
  .section { padding-block: 1rem; }
}