/* The Psychology page (SPC-175 §1), both builds: every term a card, the critter acting it out on top.
   Ported from the PD's v5 mock (pd/log tools/pd/spc174/terms175.py: CSS2 + CSS4 + CSS5). No JS: "Read more" is <details>. */
@font-face { font-family: "Jersey 10"; src: url(fonts/Jersey10-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url(fonts/Silkscreen-400-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url(fonts/SpaceMono-700-latin.woff2) format("woff2"); font-weight: 700; font-display: swap; }

body.psychology-page { background: #16112F; }
html:has(body.psychology-page) { background: #16112F; }
body.psychology-page > svg.scene { display: none; }
body.psychology-page .wrap { max-width: 1360px; }
.psychology {
  --pix: "Jersey 10", ui-monospace, Menlo, monospace; --spm: "Space Mono", ui-monospace, Menlo, monospace;
  --serif: "New York", "Iowan Old Style", Georgia, serif; --sans: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  max-width: 1280px; margin: 0 auto;
}

/* header */
.psychology .ph { padding: 24px 0 0; }
.psychology .ph h1 { font: 400 80px/0.95 var(--pix); font-synthesis: none; letter-spacing: -.02em; margin: 0; color: #FFF8EC; }
.psychology .ph h1 em { font-style: normal; color: #FFD166; }
.psychology .ph p { color: #B8AEF0; max-width: 560px; margin: 14px 0 28px; font-size: 17px; line-height: 1.5; }

/* groups: contents list, then a grid of cards per group */
.psychology .term-group { margin: 0 0 44px; }
.psychology .term-group > h2 { font: 400 35px var(--pix); font-synthesis: none; text-transform: none; color: #FFF8EC; text-shadow: none; margin: 0 0 18px; }
.psychology .tgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }

/* the card: scene panel, then the text, then Read more */
.tcard { background: #FFF8EC; color: #1B1640; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; scroll-margin-top: 16px; }
/* the card a link landed on: outlined, but once its Read more is open only the summary's focus ring shows (PD lens D,
   SPC-175 b1 LOW 3); the outline comes back on hover */
.tcard:target:not(:has(details.more[open])), .tcard:target:hover { outline: 4px solid #FFD166; outline-offset: 3px; }
.tcard .pic { display: grid; grid-template-columns: 1fr 1.05fr; background: #2A2356; color: #FFF8EC; }
.tcard .pic svg { display: block; width: 100%; height: 100%; min-height: 170px; }
.tcard .ex { padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; }
.tcard .ex b { font: 700 11px var(--spm); letter-spacing: .1em; color: #FFD166; margin-bottom: 6px; }
.tcard .ex p { margin: 0; font: italic 400 18px/1.4 var(--serif); }
.tcard .text { padding: 22px 28px 20px; }
.tcard .top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tcard h3 { font: 400 24px var(--pix); font-synthesis: none; letter-spacing: .02em; margin: 0; }
.tcard .chip { font: 700 11px var(--spm); letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; color: #1B1640; }
.tcard .sum { font: 800 32px/1.12 var(--sans); letter-spacing: -.02em; margin: 0 0 12px; }
.tcard a { color: #3B2FB0; }
.tcard .teardowns, .tcard .seen-in { margin: 10px 0 0; font: 13px/1.5 var(--sans); color: #4A4470; }

details.more { margin-top: 2px; }
details.more summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font: 700 13px var(--spm); color: #5B4BE0; letter-spacing: .04em; padding: 6px 0;
}
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: "+"; font: 700 16px var(--spm); }
details.more[open] summary::after { content: "−"; }
details.more summary:focus-visible { outline: 3px solid #FFD166; outline-offset: 3px; border-radius: 2px; }
details.more .less { display: none; }
details.more[open] .lbl { display: none; }
details.more[open] .less { display: inline; }
details.more p { margin: 8px 0 0; font-size: 16px; line-height: 1.55; color: #3F3A63; max-width: 62ch; }

@media (max-width: 899px) {
  .psychology .tgrid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 720px) {
  .psychology .ph h1 { font-size: 48px; }
  .psychology .ph p { font-size: 15px; margin-bottom: 24px; }
  .tcard .text { padding: 20px 18px 18px; }
  .tcard .sum { font-size: 26px; }
  .tcard .pic { grid-template-columns: 1fr; }
  .tcard .pic svg { min-height: 0; height: auto; aspect-ratio: 240 / 134; }
  .tcard .ex { padding: 16px 18px 18px; }
  .tcard .ex p { font-size: 17px; }
  details.more p { font-size: 15px; }
}