/* ============================================================
   WORK PAGE — the interactive project book.
   Loaded only by /work/. Inherits every token from style.css.
   ============================================================ */

.work-hero{ padding:var(--s6) 0 var(--s4) }
.work-hero h1{ font-size:clamp(32px,5vw,52px); margin-top:var(--s2) }
.work-hero .lede{ max-width:62ch; margin-top:var(--s2); font-size:16.5px }

/* ---- personal / director switch ---- */
.switchbar{
  position:sticky; top:60px; z-index:30;
  background:rgba(244,243,241,.92); backdrop-filter:blur(10px);
  padding:var(--s3) 0 var(--s2); margin-bottom:var(--s2);
}
.switch{
  display:inline-flex; background:var(--surface);
  border:1px solid var(--line-deep); border-radius:10px; padding:4px; gap:4px;
}
.switch button{
  border:none; background:none; color:var(--muted);
  padding:9px 16px; border-radius:7px; transition:.15s;
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left;
  font-size:13.5px; font-weight:600;
}
.switch button .sub{ font-family:var(--mono); font-size:10.5px; font-weight:400; opacity:.8 }
.switch button.on{ background:var(--ink); color:#fff }
.switch button:not(.on):hover{ color:var(--ink) }

.viewhead{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s3); flex-wrap:wrap; margin:var(--s3) 0 var(--s2);
}
.viewhead h2{ font-size:24px }
.viewhead .desc{ color:var(--ink-soft); font-size:14px; margin-top:6px; max-width:66ch }
.viewhead .asof{ font-family:var(--mono); font-size:11.5px; color:var(--muted) }

/* ---- KPI strip ---- */
.kpis{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; margin-bottom:var(--s3);
}
.kpi{ background:var(--surface); padding:var(--s3) }
.kpi .n{
  font-family:var(--display); font-weight:600; font-size:28px;
  color:var(--ink); line-height:1; letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
}
.kpi:first-child .n{ color:var(--red) }
.kpi .l{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-top:9px;
}

/* ---- filters ---- */
.filters{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--s3); margin-bottom:var(--s3);
}
.frow{ display:flex; align-items:flex-start; gap:var(--s2); flex-wrap:wrap }
.frow + .frow{ margin-top:var(--s2); padding-top:var(--s2); border-top:1px solid var(--line) }
.flabel{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  width:82px; flex:none; padding-top:8px;
}
.chips{ display:flex; flex-wrap:wrap; gap:6px; flex:1 }
.chip{
  font-size:12.5px; font-weight:500; color:var(--ink-soft);
  background:var(--paper); border:1px solid var(--line);
  padding:6px 11px; border-radius:20px; transition:.14s;
  display:inline-flex; align-items:center; gap:6px;
}
.chip:hover{ border-color:var(--line-deep); color:var(--ink) }
.chip .ct{ font-family:var(--mono); font-size:10.5px; color:var(--muted) }
.chip.on{ background:var(--red); border-color:var(--red); color:#fff }
.chip.on .ct{ color:rgba(255,255,255,.75) }

.searchbox{
  flex:1; min-width:200px; display:flex; align-items:center; gap:9px;
  background:var(--paper); border:1px solid var(--line);
  border-radius:8px; padding:0 12px;
}
.searchbox input{
  border:none; background:none; outline:none; font:inherit; font-size:13.5px;
  padding:10px 0; width:100%; color:var(--ink);
}
.searchbox svg{ flex:none; color:var(--muted) }
.clearbtn{
  border:1px solid var(--line-deep); background:var(--surface);
  color:var(--ink-soft); font-size:12.5px; font-weight:600;
  padding:8px 13px; border-radius:7px; transition:.14s; white-space:nowrap;
}
.clearbtn:hover{ border-color:var(--ink); color:var(--ink) }

/* ---- charts ---- */
.chartgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-bottom:var(--s3) }
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--s3);
}
.card h3{
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.card .hint{ font-size:12px; color:var(--muted); margin-top:4px }

.bars{ margin-top:var(--s3); display:flex; flex-direction:column; gap:11px }
.bar-row{ display:grid; grid-template-columns:1fr 42px; gap:10px; align-items:center }
.bar-row .lab{ font-size:12.5px; color:var(--ink); display:flex; align-items:center; gap:8px; min-width:0 }
.bar-row .lab span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.bar-track{ height:6px; background:var(--paper-deep); border-radius:3px; overflow:hidden; margin-top:5px }
.bar-fill{ height:100%; background:var(--ink); border-radius:3px; transition:width .45s cubic-bezier(.2,.8,.3,1) }
.bar-fill.hot{ background:var(--red) }
.bar-row .val{
  font-family:var(--mono); font-size:12px; color:var(--muted); text-align:right;
}
.bar-cell{ min-width:0 }

/* timeline */
.tl{ display:flex; align-items:flex-end; gap:2px; height:110px; margin-top:var(--s3) }
.tl-col{ flex:1; min-width:0; position:relative; height:100%; display:flex; align-items:flex-end }
.tl-bar{ width:100%; background:var(--line-deep); border-radius:2px 2px 0 0; transition:height .45s cubic-bezier(.2,.8,.3,1), background .14s; min-height:2px }
.tl-col:hover .tl-bar{ background:var(--red) }
.tl-col .tip{
  position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; font-family:var(--mono); font-size:10.5px;
  padding:5px 8px; border-radius:5px; white-space:nowrap; opacity:0;
  transition:opacity .14s; pointer-events:none; z-index:5;
}
.tl-col:hover .tip{ opacity:1 }
.tl-axis{
  display:flex; justify-content:space-between; margin-top:9px;
  font-family:var(--mono); font-size:10.5px; color:var(--muted);
}

/* ---- table ---- */
.tablecard{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.tabletop{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s2); padding:var(--s3); border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.tabletop h3{ font-family:var(--display); font-size:19px; font-weight:600; letter-spacing:-.02em; text-transform:none; color:var(--ink) }
.tcount{ font-family:var(--mono); font-size:12px; color:var(--muted) }
.tablescroll{ overflow-x:auto; max-height:640px; overflow-y:auto }
table{ width:100%; border-collapse:collapse; font-size:13.5px }
thead th{
  position:sticky; top:0; background:var(--surface); z-index:2;
  text-align:left; font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  padding:11px var(--s2); border-bottom:1px solid var(--line-deep);
  white-space:nowrap; cursor:pointer; user-select:none;
}
thead th:hover{ color:var(--ink) }
thead th .arw{ opacity:0; margin-left:4px }
thead th.sorted .arw{ opacity:1; color:var(--red) }
tbody td{ padding:12px var(--s2); border-bottom:1px solid var(--line); vertical-align:top }
tbody tr:hover{ background:var(--paper) }
tbody tr:last-child td{ border-bottom:none }
td.name{ font-weight:600; color:var(--ink); min-width:200px }
td.name a{ border-bottom:1px solid var(--line-deep) }
td.name a:hover{ color:var(--red-deep); border-color:var(--red) }
td.money{ font-family:var(--mono); color:var(--ink); white-space:nowrap }
td.date{ font-family:var(--mono); color:var(--muted); white-space:nowrap }
td.people{ color:var(--ink-soft); min-width:150px }
.tag{
  display:inline-block; font-family:var(--mono); font-size:11px;
  padding:3px 8px; border-radius:5px; background:var(--paper-deep);
  color:var(--ink-soft); white-space:nowrap;
}
.tag.tier-Enterprise,.tag.tier-Advanced{ background:var(--red-tint); color:var(--red-deep) }
.empty{ padding:var(--s6) var(--s3); text-align:center; color:var(--muted); font-size:14px }
.empty b{ display:block; color:var(--ink); font-family:var(--display); font-size:19px; margin-bottom:8px }

/* ============================================================
   CASE STUDY PAGES
   ============================================================ */
.cs-hero{ padding:var(--s6) 0 var(--s4); border-bottom:1px solid var(--line) }
.cs-back{ font-size:13px; font-weight:600; color:var(--muted); display:inline-flex; gap:7px; align-items:center }
.cs-back:hover{ color:var(--red-deep) }
.cs-hero h1{ font-size:clamp(36px,5.6vw,60px); margin-top:var(--s3) }
.cs-hero .kick{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--red-deep); margin-top:var(--s2) }
.cs-hero .summary{ max-width:62ch; margin-top:var(--s3); font-size:17px; line-height:1.65 }

.cs-body{ display:grid; grid-template-columns:1fr 300px; gap:var(--s6); padding:var(--s5) 0 var(--s7) }
.cs-main section + section{ margin-top:var(--s5) }
.cs-main h2{ font-size:26px }
.cs-main p{ margin-top:var(--s2); font-size:16px; max-width:64ch }

.cs-facts{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--s3); position:sticky; top:84px;
  align-self:start;
}
.cs-facts dl{ margin:0 }
.cs-facts .row{ display:flex; justify-content:space-between; gap:var(--s2); padding:11px 0; border-bottom:1px solid var(--line) }
.cs-facts .row:last-of-type{ border-bottom:none }
.cs-facts dt{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.cs-facts dd{ margin:0; font-size:13.5px; font-weight:600; color:var(--ink); text-align:right }
.cs-facts .visit{ margin-top:var(--s3); width:100%; justify-content:center }

.cs-next{ border-top:1px solid var(--line); padding-top:var(--s4) }
.cs-next .workgrid{ grid-template-columns:repeat(2,1fr); margin-top:var(--s3) }

@media (max-width:1000px){
  .kpis{ grid-template-columns:repeat(3,1fr) }
  .chartgrid{ grid-template-columns:1fr 1fr }
  .cs-body{ grid-template-columns:1fr; gap:var(--s4) }
  .cs-facts{ position:static }
}
@media (max-width:720px){
  .kpis{ grid-template-columns:1fr 1fr }
  .chartgrid{ grid-template-columns:1fr }
  .switchbar{ position:static }
  .flabel{ width:100%; padding-top:0 }
  .cs-next .workgrid{ grid-template-columns:1fr }
}