/* ۵۰ سوگیری ذهنی در نوآوری سلامت — the gallery and its 50 pages.
   ONE stylesheet for all 51, so a card cannot look one way in the gallery and
   another on its own page. Tokens come from system.css (data-surface="dark");
   the three panel colours are the wall's own — the printed canvases use exactly
   these, and #AE832B is the gold darkened until white text holds 3.45:1 on it. */

.tone-orange{--band:#E95F23;--deep:#C2481A;--ink-on-band:#FFFFFF}
.tone-teal  {--band:#1F8FA0;--deep:#13707E;--ink-on-band:#FFFFFF}
.tone-gold  {--band:#AE832B;--deep:#85641B;--ink-on-band:#FFFFFF}

/* the masthead is lifted from the library, whose inline style sizes its SVG mark;
   without these two rules the mark is unsized and the brand text wraps to three lines */
.brand .mk{inline-size:44px;block-size:auto;flex:0 0 auto;display:block}
.brand-txt b em{font-style:normal;color:var(--y-accent)}

.crumb{font-size:13px;color:var(--y-muted);margin-block-end:var(--y-3)}
.crumb a{color:var(--y-muted);text-decoration:none;border-block-end:1px solid var(--y-rule)}
.crumb a:hover{color:var(--y-text);border-color:var(--y-accent)}
.sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.credit{font-family:Helvetica,Arial,sans-serif;font-size:12px;color:var(--y-muted);text-align:center;margin-block:var(--y-6) 0;line-height:1.6}

/* ── gallery hero ───────────────────────────────────────────────── */
.ghero{padding-block:clamp(22px,3vw,40px) clamp(14px,2vw,22px)}
.ghero h1{font-family:var(--y-display);font-weight:400;font-size:clamp(30px,4.4vw,54px);line-height:1.1;margin:0;text-wrap:balance}
.ghero .lead{color:var(--y-muted);font-size:15.5px;line-height:1.9;max-width:62ch;margin:var(--y-3) 0 0}

/* ── search and filter: stays under the thumb while scrolling ─────── */
/* the topbar is sticky too (z 50); two bars cannot both own the top, so the
   brand bar scrolls away on these pages and the search keeps the top edge */
body:has(.controls) .topbar{position:static}
.controls{position:sticky;top:0;z-index:20;background:var(--y-ground);border-block:1px solid var(--y-rule)}
.cin{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-block:12px}
.search{flex:1 1 260px;min-inline-size:0;position:relative}
.search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.search input{inline-size:100%;background:var(--y-field);color:var(--y-text);border:1px solid var(--y-control);
  border-radius:var(--y-radius);padding:10px 14px;font:inherit;font-size:15px}
.search input::placeholder{color:var(--y-placeholder)}
.search input:focus-visible{outline:3px solid var(--y-accent);outline-offset:1px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;background:transparent;color:var(--y-text);
  border:1px solid var(--y-control);border-radius:999px;padding:7px 13px;font:inherit;font-size:13.5px;cursor:pointer;white-space:nowrap}
.chip i{inline-size:9px;block-size:9px;border-radius:50%;background:var(--band)}
.chip[aria-pressed="true"]{background:var(--y-text);color:var(--y-ground);border-color:var(--y-text)}
.chip.tone-orange[aria-pressed="true"],.chip.tone-teal[aria-pressed="true"],.chip.tone-gold[aria-pressed="true"]{background:var(--band);color:var(--ink-on-band);border-color:var(--band)}
.chip[aria-pressed="true"] i{background:currentColor}
.chip:hover{border-color:var(--y-accent)}

/* ── the wall: three canvases hung one under another ─────────────── */
.wall{padding-block:clamp(26px,4vw,52px) var(--y-7)}
.frame{position:relative;margin-block-end:clamp(40px,6vw,76px);padding-block-start:34px}
.frame[hidden]{display:none}
/* the wire and its nail: the one detail that says "hung", drawn, no shadow */
.wire{position:absolute;inset-block-start:0;inset-inline:0;block-size:34px;pointer-events:none}
.wire::before{content:"";position:absolute;inset-inline-start:50%;inset-block-start:0;inline-size:8px;block-size:8px;
  border-radius:50%;background:var(--y-rule-2);transform:translateX(50%)}
.wire::after{content:"";position:absolute;inset-inline:22% 22%;inset-block:4px 0;
  background:linear-gradient(to bottom right,transparent calc(50% - .6px),var(--y-rule-2) 50%,transparent calc(50% + .6px)) left/50% 100% no-repeat,
             linear-gradient(to bottom left,transparent calc(50% - .6px),var(--y-rule-2) 50%,transparent calc(50% + .6px)) right/50% 100% no-repeat}
.canvas{background:var(--y-ground);border:1px solid var(--y-rule-2);outline:1px solid var(--y-rule);outline-offset:5px;
  border-radius:4px;padding:clamp(12px,1.6vw,20px);
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1vw,12px)}

.tile{background:var(--band);color:var(--ink-on-band);border-radius:10px;padding:14px 14px 13px;display:flex;flex-direction:column;min-block-size:100%}
.tile .lbl{font-size:11.5px;font-weight:700;line-height:1.5;opacity:.95}
.tile .tn{font-family:var(--y-display);font-size:clamp(46px,5vw,64px);line-height:.9;margin-block-start:auto}
.tile h2{font-family:var(--y-display);font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.15;margin:4px 0 0}
.tile p{font-size:12.5px;font-weight:700;line-height:1.6;margin:6px 0 0}

/* ── a card ─────────────────────────────────────────────────────── */
.bc{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  background:#F6F0EA;color:#141110;text-decoration:none;border-radius:10px;overflow:hidden;
  padding:18px 11px 13px;border:1px solid transparent}
.bc[hidden]{display:none}
.bc::before{content:"";position:absolute;inset:0 0 auto 0;block-size:4px;background:var(--band)}
.bc .no{position:absolute;top:10px;left:10px;font-size:11px;font-weight:700;color:var(--deep)}
/* a name reserves two lines, so a one-line name and a two-line name put their
   icons on the same row */
.bc h3{font-family:var(--y-sans);font-weight:700;font-size:15px;line-height:1.4;margin:0;padding-inline:14px;text-wrap:balance;color:#141110;
  min-block-size:2.8em;display:flex;align-items:center;justify-content:center}
/* site.css styles every .en as an uppercase eyebrow; this one is a name */
.bc .en{font-size:11px;color:#6E6A67;margin-block-start:2px;letter-spacing:.02em;text-transform:none;font-family:Helvetica,Arial,sans-serif;
  max-inline-size:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ben{text-transform:none;letter-spacing:0}
.bc .ic{margin-block:10px 8px}
.bc p{font-size:13px;line-height:1.75;margin:0;color:#3A3533;text-wrap:balance;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.bc:hover{border-color:var(--band)}
.bc:focus-visible{outline:3px solid var(--band);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .bc{transition:transform .18s ease,border-color .18s ease}
  .bc:hover{transform:translateY(-3px)}
}
.ic{display:block;inline-size:64px;block-size:64px;flex:none;background:var(--deep);
  -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}

.empty{text-align:center;color:var(--y-muted);font-size:15px;padding-block:var(--y-6)}

@media (max-width:1180px){ .canvas{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:860px){  .canvas{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:620px){
  .canvas{grid-template-columns:repeat(2,minmax(0,1fr));outline-offset:3px}
  .tile{grid-column:span 2;flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:2px 12px;min-block-size:0}
  .tile .lbl{flex-basis:100%}
  .tile .tn{margin:0;font-size:44px}
  .tile h2{margin:0 0 4px}
  .tile p{flex-basis:100%;margin-block-start:2px}
  .bc{padding:16px 9px 11px}
  .bc h3{font-size:14px;padding-inline:10px}
  .bc .ic{inline-size:52px;block-size:52px;margin-block:8px 6px}
  .bc p{font-size:12.5px;-webkit-line-clamp:3}
  /* field on one row, chips scroll sideways on the next */
  .cin{padding-block:10px;gap:8px 10px}
  .search{flex-basis:100%}
  .search input{padding:9px 13px}
  .chip{padding:6px 11px;font-size:13px}
  .chips{flex:1 1 100%;min-inline-size:0;flex-wrap:nowrap;overflow-x:auto;padding-block-end:2px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
}
@media (max-width:360px){ .bc p{display:none} }

/* ── one bias ──────────────────────────────────────────────────── */
.bpage{padding-block:clamp(22px,3vw,40px) var(--y-7)}
.bgrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:start;margin-block-start:var(--y-4)}
.pchip{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--y-text);font-size:13.5px;
  border:1px solid var(--y-control);border-radius:999px;padding:6px 13px}
.pchip i{inline-size:9px;block-size:9px;border-radius:50%;background:var(--band)}
.pchip:hover{border-color:var(--band)}
.btext h1{font-family:var(--y-display);font-weight:400;font-size:clamp(34px,5vw,58px);line-height:1.1;margin:14px 0 0;text-wrap:balance}
.ben{color:var(--y-muted);font-size:15px;margin:6px 0 0;font-family:Helvetica,Arial,sans-serif;text-align:right}
.btext h2{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--band);margin:var(--y-6) 0 var(--y-2)}
.bdef{font-size:clamp(18px,1.9vw,22px);line-height:1.9;margin:0;color:var(--y-text);max-width:48ch}
.bex{margin:0;border-inline-start:3px solid var(--band);background:var(--y-raise);border-radius:0 var(--y-radius) var(--y-radius) 0;
  padding:16px 20px;font-size:16.5px;line-height:1.95;color:var(--y-text-2);max-width:56ch}

.bframe{position:relative;margin:0;padding-block-start:34px}
.bcard{position:relative;background:#F6F0EA;color:#141110;border-radius:12px;overflow:hidden;
  outline:1px solid var(--y-rule-2);outline-offset:7px;
  display:flex;flex-direction:column;align-items:center;gap:16px;padding:42px 20px 30px;text-align:center}
.bcard::before{content:"";position:absolute;inset:0 0 auto 0;block-size:7px;background:var(--band)}
.bcard .no{position:absolute;top:16px;left:16px;font-size:14px;font-weight:700;color:var(--deep)}
.bcard .ic{inline-size:min(56%,190px);block-size:auto;aspect-ratio:1}
.bcard b{font-size:19px;line-height:1.5}

.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-block-start:var(--y-7)}
.pn a{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--y-text);
  border:1px solid var(--y-rule-2);border-radius:var(--y-radius);padding:12px 16px}
.pn a small{color:var(--y-muted);font-size:12px}
.pn a b{font-size:15px}
.pn .next{text-align:left}
.pn a:hover{border-color:var(--band)}
.brel h2{font-size:15px;margin:var(--y-7) 0 var(--y-3);color:var(--y-text)}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.rc{display:flex;align-items:center;gap:10px;text-decoration:none;color:#141110;background:#F6F0EA;border-radius:10px;padding:10px 12px;font-size:13.5px;font-weight:700;line-height:1.4}
.rc .ic{inline-size:34px;block-size:34px}
.rc:hover{outline:2px solid var(--band)}
.lback{display:inline-block;margin-block-start:var(--y-6);color:var(--y-muted);text-decoration:none}
.lback:hover{color:var(--y-text)}
.bpage .credit{text-align:right}

@media (max-width:820px){
  .bgrid{grid-template-columns:1fr}
  .bframe{order:-1;max-inline-size:340px;margin-inline:auto;inline-size:100%}
  .bcard{padding:34px 16px 22px}
  .bcard .ic{inline-size:min(46%,150px)}
}
@media (max-width:520px){ .pn{grid-template-columns:1fr} .pn .next{text-align:right} }