/* ============================================================
   Work system — homepage "Selected work" + Related-work module.
   Maps onto the site's real tokens (base.css); adds 3 discipline colors.
   ============================================================ */
:root{
  --eng:#3b5bdb;      /* AI engineering */
  --design:#c2410c;   /* Design */
  --research:#0f766e; /* Research */
  --ink-3:#8A867E;    /* whispered meta (company · period) */
  --work-w:1160px;    /* selected-work section width (breaks out of the 960 wrap) */
}

/* ---- discipline primitives ---- */
.lenses{ display:inline-flex; flex-wrap:wrap; gap:12px; align-items:center; }
.lens{ font-size:11px; font-weight:400; color:var(--ink-2); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; letter-spacing:.02em; }
.lens::before{ content:""; width:7px; height:7px; border-radius:50%; display:inline-block; flex:0 0 auto; }
.lens.eng::before{ background:var(--eng); } .lens.design::before{ background:var(--design); } .lens.research::before{ background:var(--research); }
.dots{ display:inline-flex; gap:5px; align-items:center; }
.d{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.d.eng{ background:var(--eng); } .d.design{ background:var(--design); } .d.research{ background:var(--research); }
.wperiod{ font-size:12px; color:var(--ink-3); text-align:right; line-height:1.4; letter-spacing:.01em; font-weight:400; }
.chips{ display:flex; flex-wrap:wrap; align-items:center; }
.chip{ font-size:11px; color:var(--ink-2); font-weight:300; }
.chip + .chip::before{ content:"·"; margin:0 8px; color:rgba(28,26,22,0.3); }
.wmetricrow{ display:flex; gap:28px; }
.wmetric .num{ font-family:var(--sans); font-size:20px; font-weight:600; line-height:1; letter-spacing:-.01em; color:var(--ink); }
.wmetric .lab{ font-size:11px; color:var(--ink-2); margin-top:5px; max-width:22ch; line-height:1.4; font-weight:300; }
.readlink{ font-size:13px; font-weight:500; color:var(--accent); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.readlink .arw{ transition:transform .15s ease; } .readlink:hover .arw{ transform:translateX(3px); }

/* ---- text filters: quiet, legend-first — dot names the lens color, active reads in ink ---- */
.wfilters{ display:flex; flex-wrap:wrap; gap:1.4rem; align-items:baseline; padding:14px 0 0; margin-bottom:2rem; }
.pill{ appearance:none; border:none; background:none; color:var(--ink-2); font:inherit; font-size:12px; font-weight:400; padding:0; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:color .15s; }
.pill .pd{ width:7px; height:7px; border-radius:50%; background:var(--ink-2); flex:0 0 auto; }
.pill[data-lens="eng"] .pd{ background:var(--eng); } .pill[data-lens="design"] .pd{ background:var(--design); } .pill[data-lens="research"] .pd{ background:var(--research); }
.pill:hover{ color:var(--ink); }
.pill[aria-pressed="true"]{ color:var(--ink); font-weight:600; }
.pill:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.whidden{ display:none !important; }

/* ---- work section breaks out of the label-rail AND widens past the 960 wrap ---- */
.section--work{ display:block; width:min(var(--work-w), calc(100vw - 3rem)); margin-left:calc(50% - min(var(--work-w), calc(100vw - 3rem)) / 2); }
.section--work .section-label{ margin-bottom:2rem; padding-top:0; }

/* ---- featured tier: fixed 2-up grid, five layers not eight ---- */
.fgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:2.25rem; align-items:start; }
@media(max-width:760px){ .fgrid{ grid-template-columns:1fr; } }
.fcard{ border:0.5px solid var(--border); border-radius:var(--radius-lg); background:rgba(255,255,255,0.42); padding:1.6rem 1.6rem 1.25rem; display:flex; flex-direction:column; gap:15px; box-shadow:0 14px 40px -30px rgba(28,26,22,.45); transition:box-shadow .18s ease; }
.fcard-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.fcard h3{ font-family:var(--sans); font-weight:600; font-size:20px; line-height:1.22; margin:-2px 0 0; letter-spacing:-.01em; color:var(--ink); }
.fcard .summary{ font-size:14px; color:var(--ink-2); margin:0; line-height:1.55; font-weight:300; }
.fcard .wmetricrow{ margin-top:2px; }
.fcard-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:0.5px solid var(--border); padding-top:14px; margin-top:2px; }
.fcard-foot .readlink{ margin-left:auto; }
.expand-btn{ appearance:none; background:none; border:none; cursor:pointer; font:inherit; font-size:12px; color:var(--ink-3); display:inline-flex; align-items:center; gap:6px; padding:0; transition:color .15s; }
.expand-btn:hover{ color:var(--ink); }
.expand-btn .chev{ transition:transform .2s ease; font-size:15px; }
.fcard.open .expand-btn .chev{ transform:rotate(180deg); }

/* expand-in-place body */
.fcard-body{ display:none; margin-top:2px; }
.fcard.open .fcard-body{ display:block; }
.wstack{ margin-top:12px; font-size:11.5px; color:var(--ink-3); line-height:1.5; }
.wstack b{ font-weight:500; color:var(--ink-2); }

/* shared faint two-column detail box, did/produced side by side — used by featured cards and more-work rows */
.detailbox{ display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; background:rgba(28,26,22,0.022); border:0.5px solid var(--border); border-radius:var(--radius); padding:16px 18px; }
@media (max-width:520px){ .detailbox{ grid-template-columns:1fr; } }
.fb-col-label{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px; }
.fb-list{ list-style:none; padding:0; margin:0; }
.fb-list li{ font-size:13px; color:var(--ink-2); font-weight:300; line-height:1.55; padding:6px 0; border-top:0.5px solid var(--border); }
.fb-list li:first-child{ border-top:none; }

/* ---- more-work list: a lean index — one language with the cards, quieter ---- */
.windex{ border-top:0.5px solid var(--border); margin-top:.5rem; padding-top:2rem; }

/* ---- project grid: label rail + flat entries, everything visible ---- */
.pwrap{ display:grid; grid-template-columns:180px 1fr; gap:2.5rem; }
.plabel{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-2); font-weight:400; }
.plabel span{ display:block; font-size:11px; letter-spacing:0; text-transform:none; color:var(--ink-3); margin-top:4px; }
.pgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.75rem 2.5rem; }
.pitem .pt{ display:inline-block; font-size:15px; font-weight:600; color:var(--ink); line-height:1.3; letter-spacing:-.01em; transition:color .15s; }
.pitem .pt:hover{ color:var(--accent); }
.pmeta{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-2); font-weight:500; margin:5px 0 7px; }
.pdesc{ font-size:13px; color:var(--ink-2); font-weight:300; line-height:1.55; margin:0; }
@media (max-width:900px){ .pgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .pwrap{ grid-template-columns:1fr; gap:1.25rem; } .pgrid{ grid-template-columns:1fr; gap:1.75rem; } }


.wcard{ border-bottom:0.5px solid var(--border); }
.wcard.whidden{ display:none !important; }
.wcard-header{ appearance:none; background:none; border:none; width:100%; font:inherit; color:inherit; text-align:left; cursor:pointer; display:flex; align-items:baseline; gap:14px; padding:17px 2px; transition:color .15s; }
.wcard-header:hover .ititle{ color:var(--accent); }
.ititle{ font-family:var(--sans); font-size:16px; font-weight:500; line-height:1.25; color:var(--ink); transition:color .15s; }
.iperiod{ font-size:12.5px; color:var(--ink-3); white-space:nowrap; }
.wcard-header .chev{ margin-left:auto; align-self:center; color:var(--ink-3); font-size:15px; transition:transform .2s ease; }
.wcard.open .wcard-header .chev{ transform:rotate(180deg); }
@media(max-width:520px){ .wcard-header{ flex-wrap:wrap; } .wcard-header .chev{ margin-left:0; } }

.wcard-body{ display:none; padding:0 2px 24px; }
.wcard.open .wcard-body{ display:block; }
.wcard-body .readlink{ margin-top:16px; display:inline-flex; }

/* ============================================================
   Related-work module (bottom of every case study)
   ============================================================ */
.relwork{margin-top:3rem; padding-top:2.25rem; padding-bottom:3rem; }
.relwork-h{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); font-weight:600; margin:0 0 1.5rem; }
.relcols{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
@media(max-width:760px){ .relcols{ grid-template-columns:1fr; gap:1.5rem; } }
.relcol-label{ font-size:11px; font-weight:500; color:var(--ink-2); display:inline-flex; align-items:center; gap:6px; margin-bottom:12px; letter-spacing:.02em; }
.relcol-label::before{ content:""; width:7px; height:7px; border-radius:50%; }
.relcol-label.eng::before{ background:var(--eng); } .relcol-label.design::before{ background:var(--design); } .relcol-label.research::before{ background:var(--research); }
.rellink{ display:block; text-decoration:none; color:inherit; padding:10px 0; border-top:0.5px solid var(--border); }
.rellink:first-of-type{ border-top:none; }
.rellink .rt{ font-family:var(--sans); font-size:14px; font-weight:500; color:var(--ink); display:flex; align-items:center; gap:6px; }
.rellink .rt .arw{ color:var(--ink-2); transition:transform .15s ease; }
.rellink:hover .rt .arw{ transform:translateX(3px); }
.rellink .rd{ font-size:12px; color:var(--ink-2); line-height:1.5; font-weight:300; margin-top:2px; }
.relmore{ display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:2rem; padding-top:1.25rem; border-top:0.5px solid var(--border); }
.relmore a{ font-size:12px; letter-spacing:.04em; color:var(--ink-2); text-decoration:none; }
.relmore a:hover{ color:var(--accent); }