/* PharmaSynapse — design system v4
   Page layer — about
   Generated from the standalone build. Edit here, not in the pages. */

/* ============================================================
   PAGE LAYER — /about
   Written in the system idiom. Every class is flagged in the handoff
   block for promotion or rejection.
   ============================================================ */

/* ---- current-page nav state. Carried from the /resources build; the header
        script strips the href from the wordmark on the page it points at and
        the stylesheet had no equivalent rule for a nav link. PROMOTE. ---- */
.site-header__link:not([href]){color:var(--ink);cursor:default}
.site-header__link:not([href])::before{display:none}
.site-header__link:not([href])::after{content:"";position:absolute;left:2px;right:2px;bottom:12px;height:1.5px;background:var(--teal)}

/* ---- .sec.sunken — a light band one step off white. ---- */
.sec.sunken{background:var(--paper)}

/* ---- hero. Single column, full-shell width. A1 is a wide diagram at 880x300
        and the H1 runs to thirteen words; put them in adjacent grid columns and
        the H1 wraps to seven lines while the diagram renders at 560px and its
        12px labels become unreadable. Stacked, the H1 takes three lines and the
        diagram gets the full 1080. ---- */
.hero .gfig{width:100%;max-width:none;margin-inline:0}
.hero .gwrap{margin:48px 0 8px}

/* ---- .fcards — the two founder cards. Photo left, identity right. They are
        not links and carry no hover: this is an introduction, not a menu. ---- */
.fcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:52px;padding-top:40px;border-top:1px solid rgba(255,255,255,.12)}
.fcard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;min-width:0}
.fcard .fmeta{min-width:0}
.fcard .fbadge{display:inline-flex;align-items:center;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.1em;color:var(--teal-bright);border:1px solid rgba(62,197,193,.42);border-radius:4px;padding:3px 8px;line-height:1;margin:0 0 10px}
.fcard h2{font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--on-dark);margin:0 0 4px}
.fcard .frole{font-size:13px;color:var(--on-dark-3);margin:0 0 10px;font-family:var(--mono);letter-spacing:.03em}
.fcard p.fdoes{font-size:14px;line-height:1.55;color:var(--on-dark-2);margin:0}
.lineage{margin-top:34px;font-size:14.5px;line-height:1.62;color:var(--on-dark-2);max-width:74ch}
.hero-cta{margin-top:30px}

/* ---- founder blocks on a dark band. .fnd sets colour for a light ground;
        dropped onto navy it renders ink-on-navy. FIFTH build in which a light
        component has needed a dark reset — .mini, .page, .audit, the /resources
        pipeline, and now this. The pattern is systemic, not incidental. ---- */
.on-dark .fnd-pair{border-top-color:rgba(255,255,255,.12)}
.on-dark .fnd{border-bottom-color:rgba(255,255,255,.12)}
.on-dark .fnd blockquote{color:var(--on-dark)}
.on-dark .fnd .who{color:var(--on-dark-2)}
.on-dark .fnd .who b{color:var(--on-dark)}
.on-dark .badge--photo{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.on-dark .cred{color:var(--on-dark-2);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04)}

/* ---- .tl — career rows. A labelled row list, not cards: a CV rendered as a
        card grid reads as a product feature set. ---- */
.tl{margin-top:44px;border-top:1px solid var(--line)}
.tlr{display:grid;grid-template-columns:minmax(0,.24fr) minmax(0,.76fr);gap:36px;padding:24px 0;border-bottom:1px solid var(--line)}
.tlr .tyr{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.05em;color:#0A6D6E;font-variant-numeric:tabular-nums;white-space:nowrap}
.tlr h3{font-size:16.5px;font-weight:600;letter-spacing:-.018em;line-height:1.36;color:var(--ink);margin:0 0 8px}
.tlr p{font-size:15px;line-height:1.62;color:var(--ink-2);margin:0}
.on-dark .tl{border-top-color:rgba(255,255,255,.12)}
.on-dark .tlr{border-bottom-color:rgba(255,255,255,.12)}
.on-dark .tlr .tyr{color:var(--teal-bright)}
.on-dark .tlr h3{color:var(--on-dark)}
.on-dark .tlr p{color:var(--on-dark-2)}

/* ---- .splits — "what transfers" against "what does not". Two columns that
        must read as equal weight: the second is the founding thesis, not an
        apology, and shrinking it would say the opposite. ---- */
.splits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;margin-top:44px}
.split{padding-top:22px;border-top:2px solid var(--line)}
.split.is-hard{border-top-color:var(--teal)}
.split h3{font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:0 0 16px}
.split ul{display:grid;gap:0}
.split li{font-size:14.5px;line-height:1.58;color:var(--ink-2);padding:12px 0;border-bottom:1px solid var(--line)}
.split li:last-child{border-bottom:0}

/* ---- .states — the worked example. Three cards, the third accented.
        A3 was specced as a graphic here and built, then cut: it restated these
        three cards almost word for word beside them, and its longest line
        clipped at the card edge because SVG text does not flow. Prose belongs
        in the DOM. The argument A3 was carrying — that removal is a decision
        and the reasoning is what has weight — is made here instead by the
        connector weight and the accent on the third card. ---- */
.states{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px;position:relative}
.state{position:relative;padding:26px 24px;border-radius:var(--radius-card);background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12)}
.state.is-why{border-left:3px solid var(--teal-bright)}
/* Connectors. Thin and grey into the removal, twice the weight and teal into
   the reason: the reasoning is what carries force, not the removal. */
.state:not(:first-child)::before{content:"";position:absolute;top:50%;left:-20px;width:20px;height:1px;background:var(--on-dark-3)}
.state.is-why::before{height:2px;background:var(--teal-bright)}
.state .snum{position:absolute;right:22px;bottom:20px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--on-dark-3);font-variant-numeric:tabular-nums}
@media(max-width:1040px){
  .state:not(:first-child)::before{top:-20px;left:50%;width:1px;height:20px}
  .state.is-why::before{width:2px;height:20px}
}
.state .skick{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--on-dark-3);margin:0 0 12px}
.state.is-why .skick{color:var(--teal-bright)}
.state h3{font-size:16px;font-weight:600;letter-spacing:-.018em;line-height:1.36;color:var(--on-dark);margin:0 0 10px}
.state p{font-size:14px;line-height:1.58;color:var(--on-dark-2);margin:0}
/* Emphasis is weight and a step of contrast, never the interaction colour.
   Teal mid-sentence reads as a link whether it is one or not, and a reader
   reported exactly that. Teal is reserved for anchors, buttons and diagram
   accents where nothing is clickable and nothing can be mistaken.

   .verdict appears on a light band in §Domain and a dark one in §Decisions, so
   both directions are declared. Writing it for one band only is how the first
   attempt at this fix rendered white-on-white. */
.verdict{margin-top:40px;max-width:80ch;font-size:19px;line-height:1.5;letter-spacing:-.018em;color:var(--on-dark-2)}
.verdict b{color:var(--on-dark);font-weight:600}
.sec:not(.on-dark) .verdict{color:var(--ink-2)}
.sec:not(.on-dark) .verdict b{color:var(--ink)}

/* ---- .caps — engineering capacity. Three numbered blocks and one negative,
        which uses the same geometry with a NOT kicker instead of a number. ---- */
.caps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin-top:44px;border-top:1px solid var(--line)}
.cap-i{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;padding:24px 0;border-bottom:1px solid var(--line)}
.cap-i .cn{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;color:#0A6D6E;font-variant-numeric:tabular-nums;padding-top:3px}
.cap-i.is-not .cn{color:var(--ink-3)}
.cap-i h3{font-size:16px;font-weight:600;letter-spacing:-.018em;color:var(--ink);margin:0 0 6px}
.cap-i p{font-size:14.5px;line-height:1.58;color:var(--ink-2);margin:0}

/* ---- .facts — the supplier-qualification block. Public-record data, set as
        a register: label left, value right in mono. ---- */
.facts{margin-top:44px;border-top:1px solid rgba(255,255,255,.14)}
.fact{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);min-width:0}
.fact .fk{font-size:14.5px;color:var(--on-dark-2);flex:1 1 auto;min-width:0}
.fact .fv{font-family:var(--mono);font-size:13.5px;color:var(--on-dark);text-align:right;flex:0 1 auto;min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
/* The three answers sit on a light band, one step away from the registry
   facts above them. Splitting the two was a ledger fix first — the page ran to
   50.3% navy with them together — but it reads better apart: the register is a
   dossier and the commitments are prose, and the "Not yet" panel is far more
   legible as a dashed light card than as a ghost on navy. */
.stmts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px}
.stmt{padding:26px 24px;border-radius:var(--radius-card);background:#FFFFFF;border:1px solid var(--line)}
.stmt.is-open{background:none;border-style:dashed;border-color:var(--line-strong,#C7D0D8)}
.stmt h3{font-size:16px;font-weight:600;color:var(--ink);margin:0 0 9px}
.stmt p{font-size:14.5px;line-height:1.58;color:var(--ink-2);margin:0}
.stmt.is-open h3{color:var(--ink-2)}
.stmt.is-open p{color:var(--ink-3)}
.qual{margin-top:38px;max-width:76ch;font-size:15.5px;line-height:1.64;color:var(--ink-2)}

/* ---- .ilink — a link inside running prose. .tlink is a standalone block link
        with an arrow and a 44px minimum height; mid-sentence it breaks the line
        box. This is teal with a persistent underline, which is what separates a
        link from the bold-ink emphasis defined above: after the emphasis fix,
        bold alone no longer signals "clickable", so a real inline link has to
        carry the underline to say it. ---- */
.ilink{color:#0A6D6E;font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:rgba(14,140,140,.38);transition:text-decoration-color var(--t-fast) var(--ease-io)}
.ilink:hover{text-decoration-color:#0A6D6E}
.ilink:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}
.on-dark .ilink{color:var(--teal-bright);text-decoration-color:rgba(62,197,193,.42)}
.on-dark .ilink:hover{text-decoration-color:var(--teal-bright)}

/* ---- graphics ---- */
.gfig figcaption{margin-top:16px;max-width:76ch}

/* ---- responsive ---- */
@media(max-width:1040px){
  .states{grid-template-columns:1fr}
  .stmts{grid-template-columns:1fr}
}
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .fcards{grid-template-columns:1fr;gap:28px}
  .tlr{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .splits{grid-template-columns:1fr;gap:32px}
  .caps{grid-template-columns:1fr;gap:0}
}
@media(max-width:640px){
  .state,.stmt{padding:22px 18px}
  .verdict{font-size:17px}
  .fact{flex-direction:column;gap:4px}
  .fact .fv{text-align:left}
}
@media(max-width:460px){
  .site-header__link:not([href])::after{bottom:8px}
}


/* DEFECT FIX - handoff tables overflowed below 560px on every build carrying
   this block. Fifth occurrence. PROMOTE. */
@media print{}