/* Psychiatry hub pages, intent 2026-10-13-psychiatry-hub-priority-pages.
   Page-scoped: linked only from pages built by tools/build-psychiatry-page.py.
   Uses tokens.css variables only; never edits tokens.css or care.css (spec R10).
   The look is the site's soft one (DESIGN.md): white ground, hairlines over
   shadows, one terracotta heading thread on the urgent card, 18px body copy on
   a short measure, question headings, figures with captions, sources folded.
   The refreshed estate (refresh-integration.css) removes every border and
   shadow inside main with !important, so the hairlines here are drawn with
   outline and background-image, which that rule leaves alone. */

.psy-page.psy-page.shell {
  /* The refreshed estate widens main's direct children; the column is set here. */
  box-sizing: border-box;
  width: min(720px, calc(100% - 2rem));
  max-width: 720px;
  margin-inline: auto;
}
.psy-page {
  padding-block: var(--space-12) var(--space-16);
  color: var(--ink);
  font-size: 1.125rem;
  line-height: 1.65;
}
/* The site header is in flow, so the first text sits 36 to 48px under it, as on
   the estate's own pages (Fable review M2: the old 7 to 9.5rem left a blank band). */
main > .psy-page:first-child { padding-top: clamp(2.25rem, 3vw, 3rem); }
/* Doubled class: the care-refresh route sets 17px on narrow screens. */
.psy-page.psy-page :is(p, li) { max-width: 64ch; font-size: 1.125rem; line-height: 1.65; }
.psy-page p { margin: 0 0 var(--space-4); }
.psy-page ul { margin: 0 0 var(--space-4); padding-left: 1.25em; }
.psy-page li { margin-bottom: var(--space-2); }
.psy-page li::marker { color: var(--ink-3); }
.psy-page strong { font-weight: 650; color: var(--ink); }
.psy-page a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* Header */
.psy-crumbs { margin-bottom: var(--space-3); color: var(--ink-2); font-size: 1rem; }
/* Standalone links get a 44px tap target (cognitive gate p6). */
.psy-crumbs a,
.psy-link a,
.psy-keep a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.psy-crumbs a { color: inherit; }
.psy-hero .eyebrow { margin-bottom: var(--space-4); }
.psy-hero h1 {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 5.4vw, 3.25rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.psy-page.psy-page .psy-hero .lede { margin-bottom: 0; color: var(--ink-2); font-size: 1.25rem; line-height: 1.55; }

/* The hub's hero (owner addendum A, r2) is the home hero: section.home-stage
   with .home-copy and the home's own classes, styled by refresh-concept,
   refresh-wide and refresh-integration, which this page already links. Only
   what the home hero does not carry is styled here: the urgent line, in a
   light colour on the forest band (contrast measured in the review evidence),
   and the wrapper that keeps the actions, the urgent line and the hand-note
   together. */
/* The home hero's layout is set by css/approved-art-placement.css on
   body[data-approved-art-placement] [data-approved-art-layout]; this page does
   not link that sheet, so the same rules are copied here, scoped to the hub's
   stage: copy left, the 3:2 drawing right on its white field, one column with
   the copy first at 1000px and below. */
body .home-stage.psy-stage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: 0; width: 100%; height: auto; min-height: 0;
  position: relative !important; top: auto !important; transform: none !important;
  overflow: visible; aspect-ratio: auto;
}
body .home-stage.psy-stage > figure {
  position: relative; inset: auto !important; grid-column: 2; grid-row: 1;
  width: 100%; height: auto; max-width: 720px; min-height: 0; margin: 0;
  justify-self: center; align-self: center; mask-image: none;
}
body .home-stage.psy-stage > figure::after { content: none; }
/* The adjacent credit inherits its colour (image-branding.css); under the
   drawing it sits on the forest band, so the figure's colour is light. */
body .home-stage.psy-stage > figure { color: #FFFFFF; }
body .home-stage.psy-stage > figure > img {
  display: block; width: 100%; height: auto; max-width: 100%; max-height: none;
  aspect-ratio: auto 3 / 2; object-fit: contain; object-position: center;
  transform: none; border: 0; border-radius: 0; box-shadow: none; mix-blend-mode: normal;
  background: #FFFFFF;
}
body .home-stage.psy-stage > .home-copy {
  position: static; inset: auto; grid-column: 1; grid-row: 1; width: auto;
  min-width: 0; max-width: none; margin: 0; padding: 48px clamp(24px, 4.5vw, 72px);
}
body .home-stage.psy-stage .home-copy h1 { font-size: clamp(44px, 4.5vw, 72px); max-width: 14ch; }
@media (max-width: 1000px) {
  body .home-stage.psy-stage { grid-template-columns: minmax(0, 1fr); }
  body .home-stage.psy-stage > .home-copy { grid-column: 1; grid-row: 1; }
  body .home-stage.psy-stage > figure { grid-column: 1; grid-row: 2; }
}
@media (max-width: 760px) {
  body .home-stage.psy-stage > .home-copy { padding: 36px 20px; }
  body .home-stage.psy-stage .home-copy h1 { font-size: 46px; }
}
/* standard-refresh.css boxes every .hand-note as a mist card; on home it is a
   plain gold line, so the box is taken off here. */
body .home-stage.psy-stage .hand-note {
  border: 0; border-radius: 0; box-shadow: none; padding: 0;
  background: transparent; color: var(--gold-pale, #F0D695);
}
.psy-stage .psy-stage__next { margin: 0; }
.psy-stage .psy-stage__urgent {
  max-width: 34ch;
  margin: 18px 0 0;
  color: #FFFFFF;
  font-size: 16px;
  line-height: 1.5;
}
.psy-stage .psy-stage__urgent a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--gold-pale, #F0D695);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.psy-stage .light-link { display: inline-flex; align-items: center; min-height: 44px; }
.psy-stage .psy-stage__art img { background: #FFFFFF; }
.psy-page--hero { padding-top: var(--space-6); }
.psy-page--hero .psy-short { margin-top: 0; }

/* Section rhythm */
.psy-page h2 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3.6vw, 2.125rem);
  font-weight: 500;
  line-height: 1.18;
  text-wrap: balance;
}
.psy-page h3 { margin: var(--space-8) 0 var(--space-3); font-size: 1.25rem; line-height: 1.3; }
.psy-q,
.psy-care,
.psy-bring,
.psy-keep { margin-top: var(--space-16); }
.psy-q > h2,
.psy-care > h2 { scroll-margin-top: 6rem; }

/* In short: the one card that carries the answer */
.psy-short { margin-top: var(--space-10); }
.psy-short h2 { font-size: 1.375rem; font-family: var(--font-ui); font-weight: 700; }
.psy-short ul { margin-bottom: 0; }
.psy-short li:last-child { margin-bottom: 0; }

/* Need help now: white card, full hairline border, terracotta heading thread */
.psy-urgent {
  margin-top: var(--space-8);
  padding: var(--space-6);
  outline: 1px solid var(--hairline-firm);
  outline-offset: -1px;
  border-radius: var(--radius-card);
  background: var(--cloth);
}
.psy-page .psy-urgent__title {
  margin-bottom: var(--space-3);
  text-decoration-line: underline;
  text-decoration-color: var(--thread-terracotta);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1.375rem;
  font-weight: 700;
}
.psy-urgent ul { margin-bottom: var(--space-4); }
.psy-urgent__call { margin-bottom: 0; font-weight: 650; }

/* Figures: art with its adjacent credit, then the caption */
.psy-figure { margin: var(--space-8) 0; }
.psy-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-inner);
  background: #FFFFFF;
}
.psy-figure figcaption { max-width: 60ch; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }

/* The crisis block sits inside the reading column */
.psy-crisis { margin-top: var(--space-16); }
.psy-crisis .crisis-block { margin: 0; }

/* Care route: quiet, after Questions to bring */
.psy-care,
.psy-sources { background: linear-gradient(var(--hairline), var(--hairline)) top / 100% 1px no-repeat; }
.psy-care { padding-top: var(--space-8); }

/* An index list of lone links, set as a row of link chips */
.psy-chips { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-4); }
.psy-chip a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: 999px;
  outline: 1px solid var(--hairline-firm);
  outline-offset: -1px;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
  text-decoration: none;
}
.psy-chip a:hover { outline-color: var(--ink-3); text-decoration: underline; }
.psy-stage__next { margin: 0; }

/* Keep reading */
.psy-keep ul { list-style: none; padding: 0; display: grid; gap: 0; }
.psy-keep li { margin: 0; }

/* Sources, collapsed */
.psy-sources {
  margin-top: var(--space-12);
  padding-top: var(--space-4);
  color: var(--ink-2);
  font-size: 1rem;
}
.psy-sources summary { cursor: pointer; color: var(--ink); font-weight: 650; }
.psy-sources summary:focus-visible { outline: 2px solid var(--thread-sage); outline-offset: 3px; }
.psy-sources ul { margin-top: var(--space-4); }
.psy-page.psy-page .psy-sources li { font-size: 1rem; line-height: 1.55; }
.psy-sources a { color: inherit; overflow-wrap: anywhere; }

@media (max-width: 767px) {
  .psy-urgent { padding: var(--space-5); }
  .psy-q, .psy-care, .psy-bring, .psy-keep, .psy-crisis { margin-top: var(--space-12); }
}