/* Phase 3 public portraits.
   The family shares a reading grammar, not a fill-in-the-slots composition.
   Center color identifies subject matter; gold supplies editorial structure;
   orange is reserved for an action the reader can take. */

.portrait {
  --portrait-center: var(--gold);
  --portrait-center-soft: rgba(201,169,110,.12);
}

.portrait.center-gut {
  --portrait-center: #c47050;
  --portrait-center-soft: rgba(196,112,80,.12);
}

.portrait.center-heart {
  --portrait-center: #a86090;
  --portrait-center-soft: rgba(168,96,144,.12);
}

.portrait.center-head {
  --portrait-center: #5090b8;
  --portrait-center-soft: rgba(80,144,184,.12);
}

.portrait-intro {
  max-width:1080px;
  margin:58px auto 34px;
  padding:54px 40px 34px;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr);
  grid-template-areas:"title art" "scene art" "note art";
  column-gap:clamp(34px,7vw,88px);
  row-gap:18px;
  position:relative;
}

.portrait-intro::before {
  content:"";
  position:absolute;
  top:0;
  left:40px;
  right:40px;
  height:1px;
  background:linear-gradient(90deg,var(--gold),var(--portrait-center),transparent 82%);
  opacity:.7;
}

.portrait-title-lockup { grid-area:title; align-self:end; }
.portrait-number {
  display:inline-block;
  color:var(--portrait-center);
  font-family:var(--font-mono,monospace);
  font-size:12px;
  letter-spacing:.14em;
  margin-bottom:11px;
}

.portrait-title-lockup h1 {
  color:rgba(255,255,255,.94);
  font-family:var(--fd,Georgia,serif);
  font-size:clamp(38px,6vw,68px);
  font-weight:300;
  letter-spacing:-.025em;
  line-height:.98;
  margin:0;
}

.portrait-centerline {
  color:var(--portrait-center);
  font-family:var(--font-mono,monospace);
  font-size:12px;
  letter-spacing:.055em;
  margin-top:13px;
}

.portrait-centerline span { color:rgba(255,255,255,.4); }

.portrait-thesis {
  max-width:620px;
  color:rgba(255,255,255,.64);
  font-size:14.5px;
  line-height:1.65;
  margin:17px 0 15px;
}

.portrait-term-note {
  max-width:620px;
  color:rgba(255,255,255,.58);
  font-size:12.5px;
  line-height:1.55;
  margin:0 0 15px;
  padding:9px 12px;
  border-left:1px solid rgba(201,169,110,.46);
  background:rgba(201,169,110,.025);
}
.portrait-term-note .vt { color:var(--gold); font-weight:500; }
.portrait-term-note .vg { color:rgba(255,255,255,.58); }

.portrait-scene {
  grid-area:scene;
  color:rgba(255,255,255,.78);
  font-family:var(--fd,Georgia,serif);
  font-size:clamp(18px,2.3vw,25px);
  font-weight:300;
  line-height:1.48;
  margin:5px 0 0;
}

.portrait-scene strong { color:rgba(255,255,255,.95); font-weight:400; }

.portrait-reading-note {
  grid-area:note;
  color:rgba(255,255,255,.62);
  font-size:13.5px;
  line-height:1.68;
  max-width:650px;
  padding-left:17px;
  border-left:1px solid rgba(201,169,110,.42);
}

.portrait-reading-note b { color:var(--gold); font-weight:500; }

.portrait-artifact {
  grid-area:art;
  align-self:stretch;
  min-height:280px;
  margin:0;
  padding:20px 20px 16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid color-mix(in srgb,var(--portrait-center) 28%, transparent);
  border-radius:18px 4px 18px 4px;
  background:
    linear-gradient(145deg,var(--portrait-center-soft),transparent 52%),
    rgba(255,255,255,.018);
  overflow:hidden;
}

.portrait-artifact svg { display:block; width:100%; height:auto; max-height:235px; }
.portrait-artifact figcaption {
  color:rgba(255,255,255,.6);
  font-size:12px;
  line-height:1.5;
  margin-top:11px;
}
.portrait-artifact figcaption strong { color:var(--portrait-center); font-weight:500; }
.portrait-artifact .gold-stroke { stroke:var(--gold); }
.portrait-artifact .center-stroke { stroke:var(--portrait-center); }
.portrait-artifact .center-fill { fill:var(--portrait-center); }
.portrait-artifact .muted-stroke { stroke:rgba(255,255,255,.2); }
.portrait-artifact .muted-fill { fill:rgba(255,255,255,.34); }
.portrait-artifact text {
  fill:rgba(255,255,255,.54);
  font-family:var(--font-mono,monospace);
  font-size:12px;
  letter-spacing:.025em;
}

/* The three compositions deliberately pace their first screen differently. */
.portrait-layout-b .portrait-intro {
  grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);
  grid-template-areas:"art title" "art scene" "art note";
}
.portrait-layout-b .portrait-intro::before {
  background:linear-gradient(90deg,transparent,var(--portrait-center),var(--gold));
}
.portrait-layout-b .portrait-scene { max-width:680px; }

.portrait-layout-c .portrait-intro {
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"scene title" "art art" "note note";
}
.portrait-layout-c .portrait-scene {
  align-self:end;
  padding:0 0 8px 20px;
  border-left:2px solid var(--portrait-center);
}
.portrait-layout-c .portrait-artifact {
  min-height:190px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(180px,.35fr);
  align-items:center;
  gap:24px;
}
.portrait-layout-c .portrait-artifact svg { max-height:180px; }
.portrait-layout-c .portrait-artifact figcaption { margin:0; }

/* Concept cards stay complete, but the ledger no longer presents four equal boxes. */
.portrait .type-grid {
  grid-template-columns:repeat(12,1fr);
  gap:12px;
}
.portrait .type-card { grid-column:span 6; border-radius:4px 14px 4px 14px; }
.portrait .type-card{box-shadow:inset 0 2px 0 var(--portrait-center-soft);}

.portrait-1 .type-card:nth-child(1),
.portrait-4 .type-card:nth-child(3),
.portrait-7 .type-card:nth-child(2) { grid-column:span 7; }
.portrait-1 .type-card:nth-child(2),
.portrait-4 .type-card:nth-child(4),
.portrait-7 .type-card:nth-child(3) { grid-column:span 5; }
.portrait-2 .type-card:nth-child(1),
.portrait-5 .type-card:nth-child(2),
.portrait-8 .type-card:nth-child(4) { grid-column:span 5; }
.portrait-2 .type-card:nth-child(2),
.portrait-5 .type-card:nth-child(3),
.portrait-8 .type-card:nth-child(1) { grid-column:span 7; }
.portrait-3 .type-card:nth-child(1),
.portrait-6 .type-card:nth-child(4),
.portrait-9 .type-card:nth-child(3) { grid-column:span 8; }
.portrait-3 .type-card:nth-child(2),
.portrait-6 .type-card:nth-child(1),
.portrait-9 .type-card:nth-child(4) { grid-column:span 4; }

.portrait .type-card-lbl { color:var(--portrait-center); opacity:.9; }
.portrait .type-card-val { color:rgba(255,255,255,.9); }
.portrait .type-card:nth-child(4) { border-color:rgba(201,169,110,.26)!important; }

.type-word-note {
  position:relative;
  max-width:920px;
  margin:5px auto 34px;
  padding:20px 26px 21px 31px;
  display:grid;
  grid-template-columns:150px minmax(0,1fr) auto;
  gap:22px;
  align-items:start;
  border-top:1px solid rgba(201,169,110,.42);
  border-bottom:1px solid rgba(201,169,110,.13);
  background:
    linear-gradient(90deg, rgba(201,169,110,.065), transparent 42%),
    rgba(255,255,255,.012);
}
.type-word-note::before {
  content:'';
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width:3px;
  border-radius:3px;
  background:var(--portrait-center);
  opacity:.82;
}
.type-word-kicker {
  color:rgba(201,169,110,.72);
  font-family:var(--font-mono,monospace);
  font-size:12px;
  line-height:1.45;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.type-word-kicker strong {
  display:block;
  margin-top:7px;
  color:var(--portrait-center);
  font-family:var(--font-display,'Fraunces',serif);
  font-size:20px;
  font-weight:400;
  line-height:1.1;
  letter-spacing:0;
  text-transform:none;
}
.type-word-copy {
  color:rgba(255,255,255,.74);
  font-size:14px;
  line-height:1.72;
}
.type-word-copy b { color:rgba(255,255,255,.9); font-weight:500; }
.type-word-copy i { color:rgba(234,215,174,.92); }
.type-word-source {
  align-self:center;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid rgba(181,158,216,.25);
  border-radius:999px;
  color:#c9b7e3;
  font-family:var(--font-mono,monospace);
  font-size:12px;
  line-height:1;
  letter-spacing:.06em;
  text-decoration:none;
  white-space:nowrap;
}
.type-word-source::before {
  content:'';
  width:5px;
  height:5px;
  border-radius:50%;
  background:#b59ed8;
  box-shadow:0 0 0 3px rgba(181,158,216,.08);
}
.type-word-source:hover,
.type-word-source:focus-visible {
  color:#ecddff;
  border-color:rgba(181,158,216,.52);
  background:rgba(181,158,216,.08);
}

.portrait-reading {
  max-width:760px;
  margin:8px auto 0;
  padding:23px 26px 20px;
  border-left:3px solid var(--portrait-center);
  background:var(--portrait-center-soft);
  border-radius:2px 12px 12px 2px;
}
.portrait-reading .portrait-reading-label {
  color:var(--portrait-center);
  font-family:var(--font-mono,monospace);
  font-size:12px;
  letter-spacing:.045em;
  margin-bottom:12px;
}

.portrait-next-step {
  max-width:820px;
  margin:50px auto 62px;
  padding:27px 30px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:28px;
  align-items:end;
  border-top:1px solid rgba(201,169,110,.5);
  border-bottom:1px solid rgba(201,169,110,.14);
  background:rgba(201,169,110,.025);
}
.portrait-next-label {
  color:var(--gold);
  font-family:var(--font-mono,monospace);
  font-size:12px;
  letter-spacing:.08em;
  margin-bottom:10px;
}
.portrait-next-step h2 {
  color:rgba(255,255,255,.88);
  font-family:var(--fd,Georgia,serif);
  font-size:21px;
  font-weight:300;
  line-height:1.25;
  margin:0 0 8px;
}
.portrait-next-step p {
  color:rgba(255,255,255,.5);
  font-size:13px;
  line-height:1.65;
  margin:0;
}
.portrait-next-actions { display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-width:180px; }
.portrait-next-actions a { color:rgba(201,169,110,.78); font-size:12px; text-decoration:none; }
.portrait-next-actions a:hover { color:rgba(201,169,110,1); }
.portrait-next-actions .portrait-next-primary {
  color:#fff;
  padding:10px 15px;
  border-radius:6px;
  background:var(--or);
  font-weight:600;
}
.portrait-next-actions .portrait-next-primary:hover { background:var(--or-d); color:#fff; }

.portrait .tp-h2::before { background:var(--portrait-center); opacity:.7; }
.portrait .tp-pattern-h { color:var(--portrait-center); }
.portrait .tp-phrase { border-color:color-mix(in srgb,var(--portrait-center) 30%, transparent); background:var(--portrait-center-soft); }
.portrait .tp-phrase-note { border-left-color:var(--portrait-center); }
.portrait .tc-eyebrow { color:rgba(201,169,110,.72); }
.portrait .type-btn { background:var(--or); }

/* Legacy subtype cards used brand orange as a category color. On these
   portraits the type's center owns that signal; brand orange stays actionable. */
.portrait #instinct-variants [style*="border-left:3px solid #c0501a"] {
  border-left-color:var(--portrait-center)!important;
  background:var(--portrait-center-soft)!important;
}
.portrait #instinct-variants [style*="color:#c0501a"] { color:var(--portrait-center)!important; }

/* A Codex link is a member continuation, so it receives the lavender cue. */
.portrait .go-deeper-banner {
  border-color:rgba(181,158,216,.3);
  background:rgba(181,158,216,.055);
}
.portrait .go-deeper-eye,
.portrait .go-deeper-h em { color:#b59ed8; }
.portrait .go-deeper-btn {
  color:#c6b4e0;
  border-color:rgba(181,158,216,.42);
  background:rgba(181,158,216,.1);
}
.portrait .go-deeper-btn:hover { background:rgba(181,158,216,.18); box-shadow:none; }

@media (max-width:760px) {
  .portrait-intro,
  .portrait-layout-b .portrait-intro,
  .portrait-layout-c .portrait-intro {
    grid-template-columns:1fr;
    grid-template-areas:"title" "scene" "art" "note";
    margin-top:58px;
    padding:38px 20px 24px;
  }
  .portrait-intro::before { left:20px; right:20px; }
  .portrait-layout-c .portrait-scene { padding:0; border-left:0; }
  .portrait-layout-c .portrait-artifact { display:flex; min-height:250px; }
  .portrait-artifact { min-height:250px; }
  .portrait .type-grid { grid-template-columns:1fr; padding:0 20px; }
  .portrait .type-card,
  .portrait .type-card:nth-child(n) { grid-column:1; }
  .type-word-note {
    grid-template-columns:1fr;
    gap:10px;
    margin-left:20px;
    margin-right:20px;
    padding:19px 20px 20px 25px;
  }
  .type-word-source { justify-self:start; margin-top:3px; }
  .portrait-reading { margin-left:20px; margin-right:20px; }
  .portrait-next-step { grid-template-columns:1fr; margin-left:20px; margin-right:20px; padding:24px 20px; }
}

@media (prefers-reduced-motion:reduce) {
  .portrait-artifact *, .portrait-artifact *::before, .portrait-artifact *::after { animation:none!important; }
}