/* ==========================================================================
   Dukes Assistant — /receptionist/, 18 August 2026 (rx v1).
   Built against AMRIT_STORY_PAGE_RULEBOOK v3.0 and Aarav's page standard.

   COLOUR HAS ONE JOB PER FAMILY. This is what stops the page reading as a
   recolour of the Seller's Guide or of the sales-valuation lane:
     - warm paper is the anchor and the only ground the page returns to;
     - ONE stone field carries the explanation chapter, and appears nowhere
       else on the page;
     - slate panels carry the two moments the page speaks as an instrument
       (the specimen summary and the honesty ledger) — cool and near-black,
       deliberately not the guide's night navy and not forest;
     - brass is the metal thread: numerals, kickers, seals, keylines;
     - forest is reserved for ACTIONS and appears on nothing else.
   Separation is surface and space. There are no hairline rules dividing
   content anywhere on this page, because that was the standing complaint
   about the version this replaces.
   ========================================================================== */

.page--receptionist {
  --rx-ink: #1c2429;
  --rx-ink-soft: #45515a;
  --rx-slate: #202a30;
  --rx-slate-deep: #161d22;
  --rx-paper: #f3eee5;
  --rx-cream: #fffdf8;
  --rx-stone: #e4dbc9;
  --rx-stone-soft: #efe8da;
  --rx-brass: #7d5a1f;
  --rx-brass-light: #cbb98a;
  --rx-forest: #155443;
  --rx-forest-deep: #0f3028;
  --rx-focus: #c59743;
  --rx-plate-line: 1px solid rgba(28, 36, 41, 0.16);
  --rx-plate-shadow: 0 6px 16px -10px rgba(28, 36, 41, 0.34);
  --rx-shell: min(94vw, 1640px);
  --rx-reading: min(92vw, 1440px);
  background: var(--rx-paper);
  color: var(--rx-ink);
}

/* The old page opened with a breadcrumb strip stranded between the header and
   the title, which the rulebook rejects outright. Location now lives in the
   page navigator's own label instead. */
.page--receptionist .crumbs { display: none; }

/* --------------------------------------------------------------------------
   "On this page" — the approved left-anchored pill opening a compact side
   drawer. Sticky, contributes no flow height, and joins the MEASURED header
   seam rather than trusting --head-h, which overstates the real height at
   wide widths. Docks to the top edge while the header is hidden on scroll.
   ----------------------------------------------------------------------- */

.page--receptionist .rx-nav {
  position: sticky;
  top: var(--rx-nav-seam, var(--head-h, 79px));
  z-index: 900;
  height: 0;
  width: max-content;
  max-width: calc(100vw - 2rem);
  margin: 0 0 0 clamp(1rem, 3vw, 2.5rem);
  overflow: visible;
  transition: top 240ms ease;
}

.site-head.head--hidden ~ .main .rx-nav { top: 0; }

.page--receptionist .rx-nav > summary {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 48px;
  padding: 0.65rem 1.1rem;
  border: 1px solid rgba(28, 36, 41, 0.2);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 6px 16px -8px rgba(28, 36, 41, 0.38);
  transform: translateY(0.6rem);
  color: var(--rx-ink);
  cursor: pointer;
  list-style: none;
}

.page--receptionist .rx-nav > summary::-webkit-details-marker { display: none; }

.page--receptionist .rx-nav > summary span {
  color: var(--rx-brass);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.page--receptionist .rx-nav > summary strong {
  font-size: 0.92rem;
  font-weight: 750;
}

.page--receptionist .rx-nav > summary::after {
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.2rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  transform: rotate(45deg) translateY(-2px);
  transition: transform 180ms ease;
}

.page--receptionist .rx-nav[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }

.page--receptionist .rx-nav > summary:focus-visible {
  outline: 3px solid var(--rx-focus);
  outline-offset: 3px;
}

.page--receptionist .rx-nav:not([open]) nav { display: none; }

.page--receptionist .rx-nav[open] nav {
  position: fixed;
  top: var(--rx-nav-seam, var(--head-h, 79px));
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: min(19rem, 86vw);
  max-height: calc(100vh - var(--rx-nav-seam, var(--head-h, 79px)) - 1rem);
  padding: 0.9rem 0.85rem 1rem;
  overflow-y: auto;
  border: 1px solid rgba(28, 36, 41, 0.14);
  border-left: 0;
  border-radius: 0 16px 16px 0;
  background: var(--rx-cream);
  box-shadow: 0 10px 28px -12px rgba(28, 36, 41, 0.42);
}

.site-head.head--hidden ~ .main .rx-nav[open] nav { top: 0; }

.page--receptionist .rx-nav nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  color: var(--rx-ink);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .page--receptionist .rx-nav nav a:hover { background: var(--rx-stone-soft); }
}

.page--receptionist .rx-nav nav a:focus-visible {
  outline: 3px solid var(--rx-focus);
  outline-offset: 2px;
  background: var(--rx-stone-soft);
}

.page--receptionist [data-rx-section] {
  scroll-margin-top: calc(var(--rx-nav-seam, var(--head-h, 84px)) + 4.5rem);
}

/* --------------------------------------------------------------------------
   Shared chapter chrome: brass kicker, Gloock statement, short brass keyline.
   A 3.25rem keyline, never a full-width rule.
   ----------------------------------------------------------------------- */

.page--receptionist .rx-kicker {
  margin: 0 0 0.9rem;
  color: var(--rx-brass);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page--receptionist .rx-kicker--light { color: var(--rx-brass-light); }

.page--receptionist .rx-h2 {
  margin: 0;
  color: var(--rx-ink);
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(2rem, 3.3vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}

.page--receptionist .rx-h2--light { color: #f4f1e8; }

.page--receptionist .rx-h2::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 3px;
  margin-top: 1rem;
  border-radius: 2px;
  background: var(--rx-brass);
}

.page--receptionist .rx-h2--light::after { background: var(--rx-brass-light); }

.page--receptionist .rx-head {
  max-width: 64ch;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}

.page--receptionist .rx-head__intro {
  max-width: 58ch;
  margin: 1.1rem 0 0;
  color: var(--rx-ink-soft);
  font-size: 1.02rem;
  line-height: 1.65;
}

/* Actions. Forest fill is the primary; the text action is a real 44px target
   with an underline, never faint prose pretending to be a control. */
.page--receptionist .rx-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.82rem 1.4rem;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 750;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}

.page--receptionist .rx-button--forest { background: var(--rx-forest); color: #f5f1e6; }

@media (hover: hover) and (pointer: fine) {
  .page--receptionist .rx-button--forest:hover { background: var(--rx-forest-deep); }
}

.page--receptionist .rx-button:focus-visible {
  outline: 3px solid var(--rx-focus);
  outline-offset: 3px;
}

.page--receptionist .rx-text-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--rx-forest);
  font-size: 0.95rem;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 0.24em;
}

.page--receptionist .rx-text-action:focus-visible {
  outline: 3px solid var(--rx-focus);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   The stamped image slot: tinted plate, ghost crown, label chip, ratio tag.
   Aarav generates every image on this site; these are the briefs.
   ----------------------------------------------------------------------- */

.page--receptionist .rx-slot {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  border: var(--rx-plate-line);
  border-radius: 14px 14px 40px 14px;
  background: linear-gradient(150deg, rgba(125, 90, 31, 0.1), rgba(125, 90, 31, 0)), var(--rx-stone-soft);
  box-shadow: var(--rx-plate-shadow);
}

.page--receptionist .rx-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/brand/dukes-crown.png") center / clamp(4.5rem, 44%, 10rem) no-repeat;
  opacity: 0.16;
}

.page--receptionist .rx-slot::after {
  content: "";
  position: absolute;
  inset: 0.7rem;
  border: 1px solid rgba(28, 36, 41, 0.13);
  border-radius: 8px;
  pointer-events: none;
}

.page--receptionist .rx-slot__chip {
  position: absolute;
  left: 0.7rem;
  bottom: 0.7rem;
  z-index: 1;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.94);
  color: #4f463a;
  font-size: 0.875rem;
  font-weight: 750;
  line-height: 1.2;
}

.page--receptionist .rx-slot__ratio {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 1;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: rgba(32, 42, 48, 0.82);
  color: #f2ece2;
  font-size: 0.875rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Opening: the honest definition beside a worked example of the deliverable.
   The right half used to be empty.
   ----------------------------------------------------------------------- */

.page--receptionist .rx-open {
  display: grid;
  width: var(--rx-shell);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin: 0 auto clamp(3rem, 5vw, 4.5rem);
  padding-top: clamp(1.5rem, 3vw, 3rem);
}

.page--receptionist .rx-open__title {
  margin: 0;
  color: var(--rx-ink);
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(2.8rem, 4.8vw, 4.6rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.page--receptionist .rx-open__lede {
  max-width: 52ch;
  margin: 1.3rem 0 0;
  color: var(--rx-ink-soft);
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.62;
}

.page--receptionist .rx-open__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  margin: 1.9rem 0 0;
}

/* The specimen. A slate instrument sheet, its disclosure set UNDER the plate
   rather than overlaid on it. */
.page--receptionist .rx-spec { margin: 0; }

.page--receptionist .rx-spec__sheet {
  padding: clamp(1.4rem, 2.4vw, 2.1rem);
  border-radius: 16px 16px 48px 16px;
  background:
    radial-gradient(120% 140% at 85% 6%, rgba(203, 185, 138, 0.13) 0%, transparent 55%),
    var(--rx-slate);
  box-shadow: 0 14px 30px -18px rgba(22, 29, 34, 0.75);
}

.page--receptionist .rx-spec__tag {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0 0 1.2rem;
}

.page--receptionist .rx-spec__tag span {
  color: var(--rx-brass-light);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.page--receptionist .rx-spec__tag em {
  padding: 0.22rem 0.65rem;
  border: 1px solid rgba(203, 185, 138, 0.42);
  border-radius: 999px;
  color: #e8e3d6;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 700;
}

.page--receptionist .rx-spec__list { margin: 0; }

.page--receptionist .rx-spec__row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 1rem;
  padding: 0.62rem 0;
}

.page--receptionist .rx-spec__row dt {
  color: #b9c2c7;
  font-size: 0.9375rem;
  font-weight: 700;
}

.page--receptionist .rx-spec__row dd {
  margin: 0;
  color: #fbf8f1;
  font-size: 0.9375rem;
  font-weight: 750;
}

.page--receptionist .rx-spec__foot {
  margin: 1.3rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(203, 185, 138, 0.28);
  color: #d5dade;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.page--receptionist .rx-spec__cap {
  margin: 0.75rem 0 0;
  color: var(--rx-ink-soft);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   The three standing facts, stamped into one plate instead of floating as
   small print under the copy.
   ----------------------------------------------------------------------- */

.page--receptionist .rx-assure {
  width: var(--rx-reading);
  margin: 0 auto clamp(4rem, 7vw, 7rem);
}

.page--receptionist .rx-assure__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin: 0;
  padding: clamp(1.5rem, 2.6vw, 2.3rem);
  border: var(--rx-plate-line);
  border-radius: 16px 16px 40px 16px;
  background: var(--rx-cream);
  box-shadow: var(--rx-plate-shadow);
  list-style: none;
}

.page--receptionist .rx-assure__item {
  display: grid;
  gap: 0.45rem;
  align-content: start;
}

.page--receptionist .rx-assure__seal {
  width: 1.6rem;
  height: 1.6rem;
  margin-bottom: 0.35rem;
  border: 2px solid var(--rx-brass);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--rx-brass) 0 0.28rem, transparent 0.29rem);
}

.page--receptionist .rx-assure__item strong {
  color: var(--rx-ink);
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 400;
  line-height: 1.18;
}

.page--receptionist .rx-assure__item span:last-child {
  max-width: 34ch;
  color: var(--rx-ink-soft);
  font-size: 0.98rem;
  line-height: 1.58;
}

/* --------------------------------------------------------------------------
   How it works — the page's ONE stone field. Image-left, explanation-right.
   ----------------------------------------------------------------------- */

.page--receptionist .rx-how {
  margin: 0 0 clamp(4rem, 7vw, 7rem);
  padding-block: clamp(3.5rem, 6vw, 6rem);
  background: var(--rx-stone);
}

.page--receptionist .rx-how__inner {
  display: grid;
  width: var(--rx-reading);
  grid-template-columns: minmax(0, 5.2fr) minmax(0, 6.8fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
  margin-inline: auto;
}

/* One asset, one ratio. On narrow widths the slot keeps its 4:5 and loses
   WIDTH instead of changing shape, so the brief on its face is the brief
   Aarav generates against and nothing gets re-cropped. */
.page--receptionist .rx-how__slot { aspect-ratio: 4 / 5; }

.page--receptionist .rx-how__note {
  margin: 0.75rem 0 0;
  color: #453d31;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.page--receptionist .rx-how__intro {
  max-width: 56ch;
  margin: 1.2rem 0 0;
  color: #453d31;
  font-size: 1.05rem;
  line-height: 1.62;
}

.page--receptionist .rx-steps {
  display: grid;
  gap: 0.9rem;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.page--receptionist .rx-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.2rem;
  row-gap: 0.35rem;
  padding: 1.15rem 1.4rem 1.25rem;
  border: var(--rx-plate-line);
  border-radius: 12px 12px 28px 12px;
  background: var(--rx-cream);
  box-shadow: var(--rx-plate-shadow);
}

.page--receptionist .rx-step__n {
  grid-row: 1 / span 2;
  color: var(--rx-brass);
  font-family: "Gloock", Georgia, serif;
  font-size: 1.65rem;
  line-height: 1;
}

.page--receptionist .rx-step h3 {
  margin: 0;
  color: var(--rx-ink);
  font-family: "Gloock", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.15;
}

.page--receptionist .rx-step p {
  max-width: 56ch;
  margin: 0;
  color: var(--rx-ink-soft);
  font-size: 0.98rem;
  line-height: 1.6;
}

.page--receptionist .rx-how__status {
  max-width: 56ch;
  margin: 1.5rem 0 0;
  color: #453d31;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.55;
}

.page--receptionist .rx-how__action { margin: 1.6rem 0 0; }

/* --------------------------------------------------------------------------
   The honesty ledger — the slate panel. The page's most useful content, and
   the only place a website can usefully say what a box is NOT.
   ----------------------------------------------------------------------- */

.page--receptionist .rx-honest {
  width: var(--rx-reading);
  margin: 0 auto clamp(4rem, 7vw, 7rem);
  padding: clamp(2.25rem, 4vw, 3.75rem) clamp(1.5rem, 3.5vw, 3.5rem);
  border-radius: 20px 20px 20px 72px;
  background:
    radial-gradient(110% 130% at 90% 8%, rgba(203, 185, 138, 0.12) 0%, transparent 55%),
    var(--rx-slate-deep);
  color: #f4f1e8;
}

.page--receptionist .rx-honest__head {
  max-width: 58ch;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.page--receptionist .rx-honest__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.page--receptionist .rx-honest__col {
  padding: clamp(1.35rem, 2.2vw, 1.9rem);
  border: 1px solid rgba(203, 185, 138, 0.24);
  border-radius: 14px 14px 32px 14px;
  background: rgba(255, 253, 248, 0.07);
}

/* The negative column is stated as its own plate, not as an afterthought in
   the same box: meaning never rests on the tint alone, so it also carries its
   own label and glyph. */
.page--receptionist .rx-honest__col--not {
  border-color: rgba(230, 226, 216, 0.16);
  background: rgba(255, 253, 248, 0.025);
}

.page--receptionist .rx-honest__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.1rem;
  color: #f4f1e8;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page--receptionist .rx-honest__label span {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  font-size: 0.9rem;
}

.page--receptionist .rx-honest__col--is .rx-honest__label span {
  border: 1px solid rgba(203, 185, 138, 0.55);
  color: var(--rx-brass-light);
}

.page--receptionist .rx-honest__col--not .rx-honest__label span {
  border: 1px solid rgba(230, 226, 216, 0.32);
  color: #cfd5d9;
}

.page--receptionist .rx-honest__col ul {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page--receptionist .rx-honest__col li {
  max-width: 46ch;
  color: #e4e6e4;
  font-size: 1rem;
  line-height: 1.6;
}

.page--receptionist .rx-honest__col--is li { color: #eceee9; }

/* --------------------------------------------------------------------------
   Five routes — pressable plates. These were five hairline rows, which is the
   "lines as separators" failure this page was rejected for.
   ----------------------------------------------------------------------- */

.page--receptionist .rx-routes {
  width: var(--rx-reading);
  margin: 0 auto clamp(4rem, 7vw, 7rem);
}

.page--receptionist .rx-routes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page--receptionist .rx-routes__item { display: grid; }

.page--receptionist .rx-route {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  column-gap: 1rem;
  row-gap: 0.55rem;
  height: 100%;
  padding: 1.4rem 1.5rem 1.5rem;
  border: var(--rx-plate-line);
  border-radius: 14px 14px 32px 14px;
  background: var(--rx-cream);
  box-shadow: var(--rx-plate-shadow);
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .page--receptionist .rx-route:hover {
    border-color: rgba(125, 90, 31, 0.55);
    background: var(--rx-stone-soft);
  }
}

.page--receptionist .rx-route:focus-visible {
  outline: 3px solid var(--rx-focus);
  outline-offset: 3px;
}

.page--receptionist .rx-route__n {
  grid-column: 1;
  color: var(--rx-brass);
  font-family: "Gloock", Georgia, serif;
  font-size: 1.5rem;
  line-height: 1;
}

.page--receptionist .rx-route__chip {
  grid-column: 2;
  justify-self: start;
  padding: 0.24rem 0.7rem;
  border: 1px solid rgba(28, 36, 41, 0.22);
  border-radius: 999px;
  color: var(--rx-ink-soft);
  font-size: 0.875rem;
  font-weight: 750;
  line-height: 1.25;
}

.page--receptionist .rx-route__label {
  grid-column: 2;
  color: var(--rx-ink);
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  font-weight: 400;
  line-height: 1.16;
}

.page--receptionist .rx-route__outcome {
  grid-column: 2;
  color: var(--rx-ink-soft);
  font-size: 0.98rem;
  line-height: 1.55;
}

.page--receptionist .rx-route__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  grid-column: 2;
  margin-top: 0.5rem;
}

.page--receptionist .rx-route__count {
  color: var(--rx-ink-soft);
  font-size: 0.875rem;
  font-weight: 700;
}

.page--receptionist .rx-route__go {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--rx-forest);
  font-size: 0.9375rem;
  font-weight: 800;
}

.page--receptionist .rx-route__arrow {
  display: inline-block;
  transition: transform 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .page--receptionist .rx-route:hover .rx-route__arrow { transform: translateX(4px); }
}

/* The sixth cell is a real sixth outcome, not a repeat of the five: it opens
   the builder with nothing pre-selected. */
.page--receptionist .rx-route--open {
  background: var(--rx-stone-soft);
  border-style: dashed;
}

@media (hover: hover) and (pointer: fine) {
  .page--receptionist .rx-route--open:hover { background: var(--rx-cream); }
}

.page--receptionist .rx-routes__note {
  margin: 0.6rem 0 0;
  color: var(--rx-ink-soft);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Direct contact. Three real routes as pressable plates; Instagram demoted to
   a follow line, because following is not a way of reaching an office.
   ----------------------------------------------------------------------- */

.page--receptionist .rx-direct {
  width: var(--rx-reading);
  margin: 0 auto clamp(3.5rem, 6vw, 5.5rem);
}

.page--receptionist .rx-direct__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
}

.page--receptionist .rx-direct__intro {
  max-width: 52ch;
  margin: 1.2rem 0 0;
  color: var(--rx-ink-soft);
  font-size: 1.02rem;
  line-height: 1.62;
}

.page--receptionist .rx-direct__office {
  display: grid;
  gap: 0.3rem;
  margin: 1.8rem 0 0;
  padding: 1.1rem 1.3rem 1.2rem;
  border-left: 3px solid var(--rx-brass);
  border-radius: 4px 12px 12px 4px;
  background: var(--rx-stone-soft);
}

.page--receptionist .rx-direct__office-label {
  color: var(--rx-brass);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page--receptionist .rx-direct__office-value {
  color: var(--rx-ink);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.45;
}

.page--receptionist .rx-direct__office-note {
  color: var(--rx-ink-soft);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.page--receptionist .rx-direct__social {
  margin: 1.3rem 0 0;
  color: var(--rx-ink-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* Following is not a way of reaching an office, so Instagram is a follow line
   rather than a fourth contact plate. It is still a real 44px target: small in
   weight, not small to hit. */
.page--receptionist .rx-direct__social a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.35rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(28, 36, 41, 0.2);
  border-radius: 999px;
  color: var(--rx-forest);
  font-weight: 750;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .page--receptionist .rx-direct__social a:hover {
    border-color: rgba(21, 84, 67, 0.5);
    background: var(--rx-stone-soft);
  }
}

.page--receptionist .rx-direct__social a:focus-visible {
  outline: 3px solid var(--rx-focus);
  outline-offset: 3px;
}

.page--receptionist .rx-direct__routes {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page--receptionist .rx-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  min-height: 72px;
  padding: 1rem 1.4rem;
  border: var(--rx-plate-line);
  border-radius: 12px 12px 28px 12px;
  background: var(--rx-cream);
  box-shadow: var(--rx-plate-shadow);
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .page--receptionist .rx-contact:hover {
    border-color: rgba(21, 84, 67, 0.5);
    background: var(--rx-stone-soft);
  }
}

.page--receptionist .rx-contact:focus-visible {
  outline: 3px solid var(--rx-focus);
  outline-offset: 3px;
}

.page--receptionist .rx-contact__label {
  grid-column: 1;
  color: var(--rx-ink-soft);
  font-size: 0.875rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page--receptionist .rx-contact__value {
  grid-column: 1;
  color: var(--rx-ink);
  font-size: 1.15rem;
  font-weight: 750;
}

.page--receptionist .rx-contact__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--rx-forest);
  font-size: 1.2rem;
  transition: transform 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .page--receptionist .rx-contact:hover .rx-contact__arrow { transform: translateX(4px); }
}

/* The closing human moment the contact chapter is required to end on. The
   asset is generated wide (3:1) and centre-cropped tighter on narrow widths,
   which is why the chip states the ratio to generate, not the ratio drawn. */
.page--receptionist .rx-direct__slot {
  margin-top: clamp(2rem, 4vw, 3.25rem);
  aspect-ratio: 3 / 1;
}

/* --------------------------------------------------------------------------
   Responsive recomposition. Density is solved by recomposing, never by
   shrinking type.
   ----------------------------------------------------------------------- */

@media (max-width: 68em) {
  .page--receptionist .rx-open { grid-template-columns: 1fr; gap: 2.5rem; }
  .page--receptionist .rx-assure__list { grid-template-columns: 1fr; gap: 1.5rem; }
  .page--receptionist .rx-how__inner { grid-template-columns: 1fr; }
  .page--receptionist .rx-how__stage { width: min(100%, 24rem); }
  .page--receptionist .rx-direct__slot { aspect-ratio: 2 / 1; }
  .page--receptionist .rx-honest__cols { grid-template-columns: 1fr; }
  .page--receptionist .rx-honest { border-radius: 20px 20px 20px 44px; }
  .page--receptionist .rx-routes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page--receptionist .rx-direct__inner { grid-template-columns: 1fr; }
  .page--receptionist .rx-direct__slot { aspect-ratio: 16 / 9; }
}

@media (max-width: 47.9em) {
  .page--receptionist .rx-open,
  .page--receptionist .rx-assure,
  .page--receptionist .rx-routes,
  .page--receptionist .rx-direct { width: calc(100vw - 2.5rem); }
  .page--receptionist .rx-how__inner { width: calc(100vw - 2.5rem); }
  .page--receptionist .rx-honest {
    width: calc(100vw - 2.5rem);
    padding: 1.75rem 1.4rem 2rem;
    border-radius: 16px 16px 16px 36px;
  }
  .page--receptionist .rx-open__actions { align-items: stretch; flex-direction: column; gap: 1rem; }
  .page--receptionist .rx-open__actions .rx-button { width: 100%; }
  .page--receptionist .rx-how__action .rx-button { width: 100%; }
  .page--receptionist .rx-routes__grid { grid-template-columns: 1fr; }
  .page--receptionist .rx-direct__slot { aspect-ratio: 4 / 3; }
  .page--receptionist .rx-spec__row { grid-template-columns: 1fr; gap: 0.15rem; }
  .page--receptionist .rx-nav { margin-left: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .page--receptionist .rx-nav,
  .page--receptionist .rx-nav > summary::after,
  .page--receptionist .rx-route,
  .page--receptionist .rx-route__arrow,
  .page--receptionist .rx-contact,
  .page--receptionist .rx-contact__arrow,
  .page--receptionist .rx-button { transition: none; }
}