/* ==========================================================================
   Thrive at Work: the crew (/crew, /chinese-new-year)
   Loaded after /redesign.css and /css/pages.css. Scoped extras only: nothing here
   changes a shared class outside .crew-* / .cny-*.
   The art ships on a near-white ground; multiply drops it into the page colour so no box shows.
   ========================================================================== */

/* ---------- /crew ---------- */
.crew-queue{width:100%;max-width:1124px;margin:clamp(40px,5vw,72px) auto 0;mix-blend-mode:multiply}
.crew-host{width:100%;mix-blend-mode:multiply}
.crew-host-p{margin-top:18px;max-width:30em;color:var(--fg2);text-wrap:pretty}
.crew-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(44px,5vw,72px) clamp(20px,3vw,48px)}
.crew-card{display:grid;justify-items:center;gap:14px;margin:0;text-align:center}
.crew-card img{width:100%;max-width:176px;aspect-ratio:1;border-radius:50%}
.crew-card .h3{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.35em}
.crew-card p{margin-top:6px;font-size:var(--fs-small);color:var(--fg2);text-wrap:balance}
.crew-zh{font-family:'Microsoft YaHei','PingFang SC','Noto Sans SC',var(--sans);font-size:.8em;color:var(--fg2)}

/* ---------- /chinese-new-year ---------- */
.cny-art img{max-width:400px;margin-inline:auto;mix-blend-mode:multiply}
.cny-tag{align-self:center;padding:3px 10px;border:1px solid currentColor;border-radius:999px;font:500 var(--fs-label)/1 var(--sans);letter-spacing:0;color:var(--t-coral-sm)}
.cny-year-note .copy{max-width:44em}

/* birth-year lookup: needs the script, so it only shows with JavaScript */
.cny-find{display:none;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:clamp(28px,3vw,44px)}
html.js .cny-find{display:flex}
.cny-find label{font:500 var(--fs-label)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--fg2)}
.cny-find input{width:6.5em;min-height:44px;padding:0 .2em;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:none;color:var(--ink);font:400 var(--fs-title)/1 var(--serif-t);appearance:textfield;-moz-appearance:textfield}
.cny-find input::-webkit-outer-spin-button,.cny-find input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cny-find input:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
#cnyYearOut{color:var(--fg2)}

/* the twelve: 12 across, then 6, then 4, so no sign ever sits alone in a row */
.cny-pick{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px 10px;margin-bottom:clamp(44px,5vw,72px)}
.cny-pick a{display:grid;justify-items:center;gap:8px;font-size:var(--fs-small);color:var(--fg2);transition:color .3s}
.cny-pick img{width:100%;max-width:76px;aspect-ratio:1;border-radius:50%;outline:2px solid transparent;outline-offset:3px;transition:outline-color .3s}
.cny-pick a:hover{color:var(--ink)}
.cny-pick a:hover img{outline-color:var(--rule)}
.cny-pick a[aria-current]{color:var(--ink);font-weight:500}
.cny-pick a[aria-current] img{outline-color:var(--t-coral)}

/* one profile: the sign on the left, the reading on the right. Without the script all twelve stack. */
.cny-prof{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,88px);padding-block:clamp(32px,4vw,56px);border-top:1px solid var(--rule);scroll-margin-top:calc(var(--hd) + 16px)}
.cny-prof[hidden]{display:none}
.cny-prof-id img{width:100%;max-width:176px;aspect-ratio:1;border-radius:50%;margin-bottom:22px}
.cny-prof-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25em .4em;font:400 var(--fs-h2)/1 var(--serif);letter-spacing:-.018em}
.cny-prof-line{margin-top:12px;font:italic 400 var(--fs-title)/1.15 var(--serif-t);color:var(--t-coral)}
.cny-prof-meta{margin-top:10px;font-size:var(--fs-small);color:var(--fg2);font-variant-numeric:tabular-nums}
.cny-prof-meta+.cny-prof-meta{margin-top:2px}
.cny-nature{font:400 var(--fs-title)/1.25 var(--serif-t);letter-spacing:-.005em;margin-bottom:clamp(24px,3vw,36px);text-wrap:pretty}
.cny-dl{margin:0;border-top:1px solid var(--rule)}
.cny-dl>div{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:4px 24px;padding:16px 0;border-bottom:1px solid var(--rule)}
.cny-dl dt{font:500 var(--fs-label)/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);padding-top:.2em}
.cny-dl dd{margin:0;text-wrap:pretty}
.cny-dl a,.cny-table a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;transition:color .3s}
.cny-dl a:hover,.cny-table a:hover{color:var(--t-coral-sm)}
.cny-c{display:inline-flex;align-items:center;gap:6px;margin-right:12px;white-space:nowrap}
.cny-c i{width:14px;height:14px;border-radius:50%;background:var(--c);border:1px solid var(--rule)}
.cny-fine{margin-top:clamp(24px,3vw,36px);text-align:left;margin-inline:0}

/* charts: each scrolls inside its own box on phones, with the sign column pinned */
.cny-scroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cny-scroll:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.cny-table,.cny-matrix{width:100%;border-collapse:collapse}
.cny-table{min-width:860px;font-size:var(--fs-small)}
.cny-table th,.cny-table td{padding:14px 18px 14px 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top;color:var(--fg2);font-weight:400}
.cny-table thead th{font:500 var(--fs-label)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.cny-table tbody th{position:sticky;left:0;background:var(--ground);color:var(--ink);font-weight:500;white-space:nowrap}
.cny-table tbody th .crew-zh{margin-right:.4em}
.cny-table .cny-c{margin-right:8px}
.cny-matrix{min-width:700px;table-layout:fixed;font-size:var(--fs-label)}
.cny-matrix th,.cny-matrix td{height:42px;padding:0;border:1px solid var(--rule);text-align:center;font-weight:500}
.cny-matrix td{font-size:1rem}
.cny-matrix thead td{border:0}
.cny-matrix thead th{border-width:0 0 1px;color:var(--fg2);font-weight:400}
.cny-matrix tbody th{position:sticky;left:0;width:84px;padding-left:2px;border-width:0 1px 0 0;background:var(--ground);text-align:left;color:var(--ink);box-shadow:0 1px 0 var(--rule)}
.m-trine{color:var(--t-teal)}
.m-harmony{color:var(--t-blue)}
.m-harm{color:var(--t-amber)}
.m-clash{color:var(--t-coral-sm)}
.m-same{color:var(--fg2)}
.cny-matrix .m-trine{background:color-mix(in srgb,var(--teal) 15%,transparent)}
.cny-matrix .m-harmony{background:color-mix(in srgb,var(--blue) 13%,transparent)}
.cny-matrix .m-harm{background:color-mix(in srgb,var(--amber) 18%,transparent)}
.cny-matrix .m-clash{background:color-mix(in srgb,var(--coral) 15%,transparent)}
.cny-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cny-legend{display:flex;flex-wrap:wrap;gap:8px 26px;margin-bottom:18px;font-size:var(--fs-small)}
.cny-legend li{display:inline-flex;align-items:center;gap:8px}
.cny-teams-h{margin:clamp(56px,6vw,88px) 0 clamp(24px,3vw,36px)}

@media (max-width:1100px){
  .crew-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cny-pick{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (max-width:760px){
  .crew-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cny-art img{max-width:300px}
  .cny-pick{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cny-prof{grid-template-columns:minmax(0,1fr);gap:24px}
  .cny-prof-id img{max-width:132px}
  .cny-dl>div{grid-template-columns:minmax(0,1fr)}
}