.selected-work {
  min-width:0;
  display:grid;
  grid-template-rows:auto auto auto auto;
  align-content:start;
  background:linear-gradient(145deg,#e8eae2,#dce1d5);
  border:1px solid #d4d9cd;
  border-radius:8px;
  padding:23px 22px 20px;
}
.work-heading { display:flex; justify-content:space-between; align-items:center; padding:0 2px; }
.work-heading h2 { margin:0; font-weight:500; font-size:14px; letter-spacing:-.3px; }
.work-heading>span { font:9px var(--mono); color:var(--muted); letter-spacing:1px; }
.work-tabs { grid-row:3; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; padding:0 0 17px; }
.work-tabs button {
  border:1px solid transparent;
  border-radius:4px;
  padding:10px 4px;
  background:transparent;
  font-size:10px;
  color:#626d60;
  cursor:pointer;
  min-height:40px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
}
.work-tabs button[aria-selected="true"] { background:#f5f4ed; border-color:#cbd2c4; color:var(--ink); box-shadow:0 2px 4px #243a3308; }
.work-tabs button:hover { color:var(--ink); background:#f5f4ed99; }
.tab-number { font:8px var(--mono); color:var(--accent); }
.pane-stage { grid-row:2; display:grid; padding:65px 17px 22px 0; perspective:1400px; isolation:isolate; }
.work-pane {
  grid-area:1 / 1;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:340px;
  border:1px solid #c4cdc0;
  border-radius:7px;
  background:#f9f8f2;
  box-shadow:0 14px 25px -15px #18372666,0 2px 3px #1837260a;
  transform-origin:50% 50%;
  transition:transform .4s ease,box-shadow .4s ease;
  backface-visibility:hidden;
}
.work-pane[data-active="false"] { pointer-events:none; background:#edf0e7; }
.pane-toolbar {
  min-height:33px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 13px;
  border-bottom:1px solid #d9dfd3;
  background:#f0f1e9;
  border-radius:7px 7px 0 0;
  color:#6c7969;
  font:8px var(--mono);
  letter-spacing:.6px;
}
.window-dots { display:flex; gap:5px; }
.window-dots i { width:6px; height:6px; border-radius:50%; background:#b7c0b1; }
.window-dots i:first-child { background:#c28d75; }
.window-dots i:nth-child(2) { background:#cabd92; }
.pane-body { display:flex; flex-direction:column; flex:1; padding:25px 26px 23px; }
.project-category { font:8px var(--mono); letter-spacing:.8px; text-transform:uppercase; color:var(--accent); margin:0 0 17px; }
.pane-body h3 { font-size:clamp(25px,2.45vw,35px); line-height:1.08; letter-spacing:-1.3px; font-weight:500; margin:0 0 9px; max-width:360px; text-wrap:balance; }
.project-detail { margin:0 0 19px; color:#60705e; font-size:11px; line-height:1.45; }
.project-description { margin:0 0 24px; font-size:12px; line-height:1.7; color:#5b6958; }
.project-links { margin-top:auto; padding-top:17px; border-top:1px solid #dce0d4; display:flex; gap:30px; }
.project-links a { font-size:12px; display:flex; flex-direction:column; gap:6px; }
.project-links a>span>span { margin-left:6px; color:var(--accent); }
.project-links a:hover>span { text-decoration:underline; text-underline-offset:4px; }
.project-links small { font:8px var(--mono); color:var(--muted); }
.teaching-link { display:flex; justify-content:space-between; gap:15px; border-top:1px solid #c7d0c1; padding-top:16px; color:#5b6958; font-size:10px; line-height:1.6; }
.teaching-link:hover { color:var(--ink); }
@media(max-width:1000px) and (min-width:701px) {
  .selected-work { padding:20px 14px; }
  .pane-body { padding:22px 18px; }
  .work-tabs button { flex-direction:column; gap:4px; font-size:9px; }
  .project-links { gap:18px; }
}
@media(max-width:700px) {
  .selected-work { padding:21px 16px 18px; }
  .pane-stage { padding:61px 12px 20px 0; }
  .pane-body { padding:23px 20px; }
  .pane-body h3 { font-size:29px; }
  .work-tabs button { font-size:9px; flex-direction:column; gap:5px; }
  .project-links { gap:20px; }
}
@media(max-width:380px) {
  .selected-work { padding:20px 12px 17px; }
  .pane-body { padding:21px 16px; }
  .pane-body h3 { font-size:27px; }
  .project-category { font-size:7px; letter-spacing:.3px; }
  .project-links { gap:16px; }
  .project-links a { font-size:11px; }
  .work-tabs button { font-size:8px; }
}
@media(prefers-reduced-motion:reduce) {
  .work-pane { transform:none!important; }
  .work-pane[data-active="false"] { visibility:hidden; }
  .pane-stage { padding-top:24px; }
}

@media(max-width:1000px) {
  .work-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .work-tabs button { flex-direction:row; gap:6px; font-size:10px; }
}

/* Keep the live pane layout, using the original cosmos palette. */
.selected-work { background:rgba(8,12,25,.82); border-color:#35405a; }
.work-tabs button { color:#a7afc3; }
.work-tabs button[aria-selected="true"] { background:#253149; border-color:#8190a9; }
.work-tabs button:hover { background:#253149; }
.work-pane, .work-pane[data-active="false"] { background:#111a2c; border-color:#495670; }
.pane-toolbar { background:#202b41; border-color:#3d4b64; color:#b8c5dc; }
.project-detail, .project-description, .teaching-link { color:#b5c1d7; }
.project-links, .teaching-link { border-color:#3d4b64; }
.work-tabs button { min-height:44px; }