@font-face{
  font-family:"Space Grotesk"; src:url("assets/space-grotesk.ttf") format("truetype");
  font-weight:100 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"DM Sans"; src:url("assets/dm-sans.ttf") format("truetype");
  font-weight:100 1000; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono"; src:url("assets/ibm-plex-mono.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
:root{
  --paper:#F6F3EC; --paper-2:#EFE9DB; --card:#FFFDF7; --ink:#1A1E1D;
  --ink-soft:#4B5452; --line:#DED6C2; --line-strong:#1A1E1D;
  --teal:#0E5F56; --teal-deep:#0A463F; --amber:#F2B441; --coral:#E4572E;
  --todo:#6B7C7A; --prog:#0E5F56; --blocked:#B3401F; --done:#3E7C4F;
  --radius:16px; --radius-s:10px;
  --shadow:0 1px 0 rgba(26,30,29,.9), 0 14px 30px -18px rgba(26,30,29,.45);
  --font-d:"Space Grotesk","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-b:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-m:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-b); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(26,30,29,.07) 1px, transparent 1px);
  background-size:22px 22px;
}
::selection{background:var(--amber); color:var(--ink)}
:focus-visible{outline:3px solid var(--teal); outline-offset:2px; border-radius:6px}
.skip{position:absolute; left:12px; top:-60px; z-index:99; background:var(--ink); color:#fff; padding:.6rem 1rem; border-radius:10px; transition:top .2s}
.skip:focus{top:12px; color:#fff}

/* topbar */
.topbar{position:sticky; top:0; z-index:40; background:rgba(246,243,236,.92); backdrop-filter:blur(10px); border-bottom:2px solid var(--ink)}
.topbar-inner{max-width:1240px; margin:0 auto; padding:.65rem 1.25rem; display:flex; align-items:center; gap:1rem}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink)}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-name{font-family:var(--font-d); font-weight:700; font-size:1.35rem; letter-spacing:-.02em}
.brand-sub{font-family:var(--font-m); font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-soft)}
.topnav{display:flex; gap:.25rem; margin-left:1rem}
.topnav-link{padding:.45rem .8rem; border-radius:999px; text-decoration:none; color:var(--ink); font-weight:600; font-size:.92rem}
.topnav-link.is-active,.topnav-link:hover{background:var(--ink); color:var(--paper)}
.topbar-right{margin-left:auto; display:flex; align-items:center; gap:.7rem}
.avatar-stack{display:flex; align-items:center}
.avatar{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:.68rem; font-weight:800; color:#fff; border:2px solid var(--paper); margin-left:-8px; font-family:var(--font-d)}
.avatar:first-child{margin-left:0}
.live-dot{display:flex; align-items:center; gap:.4rem; font-family:var(--font-m); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; border:1.5px solid var(--ink); border-radius:999px; padding:.28rem .7rem; background:#fff}
.pulse{width:8px; height:8px; border-radius:50%; background:#2e9e5b; animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(46,158,91,.5)}50%{box-shadow:0 0 0 6px rgba(46,158,91,0)}}

/* hero */
.hero{border-bottom:2px solid var(--ink); background:linear-gradient(180deg,#F6F3EC 0%, #EFE7D3 100%)}
.hero-inner{max-width:1240px; margin:0 auto; padding:2.6rem 1.25rem 2rem; display:grid; grid-template-columns:1.35fr .85fr; gap:2rem; align-items:end}
.eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-m); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; background:var(--ink); color:var(--paper); padding:.4rem .8rem; border-radius:999px; margin:0 0 1rem}
.eyebrow-dot{width:8px; height:8px; border-radius:50%; background:var(--amber)}
h1{font-family:var(--font-d); font-size:clamp(2.4rem,5vw,4.2rem); line-height:.98; letter-spacing:-.03em; margin:0 0 1rem}
h1 em{font-style:normal; background:var(--amber); padding:0 .25em; border:2px solid var(--ink); border-radius:12px; display:inline-block; transform:rotate(-1.2deg)}
.lede{font-size:1.08rem; color:var(--ink-soft); max-width:34rem; margin:0 0 1.4rem}
.status-meter{background:var(--card); border:2px solid var(--ink); border-radius:var(--radius); padding:.9rem 1rem; box-shadow:var(--shadow); max-width:36rem}
.meter-bar{display:flex; height:14px; border-radius:999px; overflow:hidden; border:2px solid var(--ink); background:#fff}
.meter-bar span{display:block; height:100%}
.meter-legend{list-style:none; display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin:.7rem 0 0; padding:0; font-size:.86rem}
.meter-legend li{display:flex; align-items:center; gap:.4rem; font-weight:600}
.meter-legend i{width:11px; height:11px; border-radius:4px; border:1.5px solid var(--ink); display:inline-block}

.hero-card{background:var(--teal); color:#F3EFE2; border:2px solid var(--ink); border-radius:18px; padding:1.4rem; box-shadow:6px 6px 0 var(--ink); transform:rotate(.6deg)}
.hero-card-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:.6rem}
.card-kicker{font-family:var(--font-m); text-transform:uppercase; font-size:.72rem; letter-spacing:.12em; opacity:.85}
.card-date{background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35); padding:.25rem .6rem; border-radius:999px; font-family:var(--font-m); font-size:.75rem}
.hero-card-big{font-family:var(--font-d); font-size:1.7rem; line-height:1.05; margin:.2rem 0 .6rem; letter-spacing:-.02em}
.hero-card-sub{margin:0 0 1rem; opacity:.9; font-size:.95rem}
.hero-hints{display:flex; gap:1rem; font-size:.85rem; opacity:.9}
kbd{background:#fff; color:var(--ink); border:1.5px solid var(--ink); border-bottom-width:3px; border-radius:6px; padding:.05rem .4rem; font-family:var(--font-m); font-size:.78rem}

/* workspace */
.workspace{max-width:1240px; margin:0 auto; padding:1.5rem 1.25rem 3rem; display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:1.5rem; align-items:start}
.board{min-width:0}
.toolbar{background:var(--card); border:2px solid var(--ink); border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem; display:grid; grid-template-columns:1fr 220px; gap:.9rem; align-items:end; position:sticky; top:64px; z-index:20}
.field label{display:block; font-family:var(--font-m); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; margin-bottom:.4rem}
.search-wrap,.select-wrap{position:relative}
.search-wrap svg{position:absolute; left:.8rem; top:50%; transform:translateY(-50%); opacity:.6}
.search-wrap input{width:100%; padding:.75rem .9rem .75rem 2.5rem; border:2px solid var(--ink); border-radius:12px; font:inherit; font-weight:600; background:#fff}
.search-wrap input::placeholder{font-weight:400; color:#8a918f}
.select-wrap select{width:100%; appearance:none; padding:.75rem 2.2rem .75rem .9rem; border:2px solid var(--ink); border-radius:12px; font:inherit; font-weight:700; background:#fff; cursor:pointer}
.select-wrap svg{position:absolute; right:.8rem; top:50%; transform:translateY(-50%); pointer-events:none}
.result-count{grid-column:1/-1; margin:0; font-size:.9rem; color:var(--ink-soft); font-weight:600}
.result-count strong{color:var(--ink)}

/* task list */
.task-list{list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:.9rem}
.task{position:relative; background:var(--card); border:2px solid var(--ink); border-radius:var(--radius); box-shadow:3px 3px 0 var(--ink); transition:transform .15s ease, box-shadow .15s ease; overflow:hidden}
.task:hover{transform:translate(-1px,-2px); box-shadow:5px 6px 0 var(--ink)}
.task::before{content:""; position:absolute; left:0; top:0; bottom:0; width:7px; background:var(--stripe,var(--todo))}
.task[data-status="todo"]{--stripe:#9AA8A6} .task[data-status="in-progress"]{--stripe:var(--teal)}
.task[data-status="blocked"]{--stripe:var(--coral)} .task[data-status="done"]{--stripe:#3E7C4F}
.task.done{opacity:.92}
.task.done .task-title{text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:rgba(26,30,29,.4)}
.task-inner{padding:1rem 1.1rem 1rem 1.4rem}
.task-top{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.45rem}
.pill{display:inline-flex; align-items:center; gap:.4rem; font-size:.76rem; font-weight:800; letter-spacing:.02em; padding:.24rem .65rem; border-radius:999px; border:1.8px solid var(--ink); background:#fff}
.pill .dot{width:9px; height:9px; border-radius:50%; border:1.5px solid var(--ink)}
.pill[data-s="todo"] .dot{background:#9AA8A6} .pill[data-s="in-progress"] .dot{background:var(--teal)}
.pill[data-s="blocked"] .dot{background:var(--coral)} .pill[data-s="done"] .dot{background:#3E7C4F}
.pill[data-s="todo"]{background:#EDF0EE} .pill[data-s="in-progress"]{background:#D9ECE6}
.pill[data-s="blocked"]{background:#FBE3D8} .pill[data-s="done"]{background:#DDEBDD}
.priority{font-family:var(--font-m); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700}
.priority.high{color:var(--blocked)} .priority.medium{color:#7a5b00} .priority.low{color:var(--ink-soft)}
.task-title{font-family:var(--font-d); font-size:1.18rem; letter-spacing:-.015em; line-height:1.25; margin:0 0 .35rem}
.task-title a{color:inherit; text-decoration:none}
.task-title a:hover{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px}
.task-summary{margin:0 0 .7rem; color:var(--ink-soft); font-size:.95rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.task-meta{display:flex; flex-wrap:wrap; gap:.45rem .9rem; font-size:.85rem; color:var(--ink-soft); margin-bottom:.8rem}
.task-meta strong{color:var(--ink)}
.task-actions{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap}
.btn{font:inherit; font-weight:700; border:2px solid var(--ink); border-radius:11px; padding:.55rem 1rem; cursor:pointer; background:#fff; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:.45rem; transition:transform .12s ease, box-shadow .12s ease}
.btn-primary{background:var(--ink); color:var(--paper)}
.btn-primary:hover{background:var(--teal-deep)}
.btn-ghost{background:#fff}
.btn:hover{transform:translateY(-1px); box-shadow:2px 3px 0 var(--ink)}
.btn:active{transform:translateY(0); box-shadow:none}
.open-btn{background:var(--amber)}
.tag{font-family:var(--font-m); font-size:.72rem; background:var(--paper-2); border:1.5px solid var(--line); padding:.12rem .5rem; border-radius:999px}

/* empty */
.empty{background:var(--card); border:2px dashed var(--ink); border-radius:var(--radius); padding:2.5rem 1.5rem; text-align:center; margin-top:1.2rem}
.empty h2{font-family:var(--font-d); margin:.8rem 0 .4rem; letter-spacing:-.02em}
.empty p{color:var(--ink-soft); margin:0 0 1.2rem}

/* team */
.team{margin-top:2rem}
.team-head h2{font-family:var(--font-d); font-size:1.5rem; letter-spacing:-.02em; margin:0}
.team-head p{margin:.2rem 0 1rem; color:var(--ink-soft)}
.team-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem}
.team-card{background:var(--card); border:2px solid var(--ink); border-radius:14px; padding:.9rem; box-shadow:2px 2px 0 var(--ink)}
.team-card-top{display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem}
.team-ava{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-family:var(--font-d); border:2px solid var(--ink); flex:none}
.team-card strong{display:block; font-size:.94rem; line-height:1.2}
.team-card small{color:var(--ink-soft); font-family:var(--font-m); font-size:.72rem}
.team-bar{display:flex; height:8px; border-radius:99px; overflow:hidden; border:1.5px solid var(--ink); background:#fff}
.team-bar span{display:block; height:100%}
.team-count{font-size:.82rem; color:var(--ink-soft); margin:.45rem 0 0}

/* detail */
.detail-idle{background:var(--card); border:2px solid var(--ink); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow); position:sticky; top:64px}
.detail-idle h2{font-family:var(--font-d); letter-spacing:-.02em; margin:.6rem 0 .4rem; font-size:1.4rem}
.detail-idle p{color:var(--ink-soft); margin:0 0 1rem}
.idle-art{width:46px; height:46px; border-radius:14px; background:var(--amber); border:2px solid var(--ink); display:grid; place-items:center; font-size:1.4rem; font-weight:800}
.idle-list{margin:0; padding:0; list-style:none; display:grid; gap:.5rem; font-size:.93rem; color:var(--ink-soft)}
.idle-list strong{color:var(--ink)}

.detail{background:var(--card); border:2px solid var(--ink); border-radius:18px; box-shadow:6px 6px 0 var(--ink); padding:1.3rem; position:sticky; top:64px; max-height:calc(100vh - 90px); overflow:auto}
.detail-top{display:flex; justify-content:space-between; align-items:center; gap:.6rem; margin-bottom:.7rem}
.icon-btn{display:inline-flex; align-items:center; gap:.4rem; border:2px solid var(--ink); background:#fff; border-radius:999px; padding:.4rem .8rem; font:inherit; font-weight:700; font-size:.85rem; cursor:pointer}
.icon-btn:hover{background:var(--ink); color:#fff}
.detail-project{font-family:var(--font-m); font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--teal); font-weight:700; margin:0}
.detail-title{font-family:var(--font-d); font-size:1.65rem; line-height:1.1; letter-spacing:-.025em; margin:.3rem 0 .8rem}
.detail-meta{display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:1rem}
.meta-cell{background:var(--paper); border:1.5px solid var(--line); border-radius:10px; padding:.55rem .7rem}
.meta-cell dt{font-family:var(--font-m); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); margin:0}
.meta-cell dd{margin:.15rem 0 0; font-weight:700; font-size:.92rem}
.detail-body{border-top:2px solid var(--ink); padding-top:1rem; white-space:pre-line; font-size:.98rem}
.detail-body p{margin:0 0 .8rem}
.detail-tags{display:flex; flex-wrap:wrap; gap:.4rem; margin:.9rem 0 0}
.status-form{margin-top:1.1rem; background:var(--paper); border:2px solid var(--ink); border-radius:12px; padding:.9rem}
.status-form label{display:block; font-weight:800; margin-bottom:.45rem}
.status-feedback{margin:.6rem 0 0; font-size:.88rem; font-weight:700; color:var(--teal-deep); min-height:1.3em}
.detail-nav{display:flex; gap:.6rem; margin-top:.9rem}
.detail-nav .btn{flex:1; justify-content:center; font-size:.9rem}

/* toast, backdrop, footer */
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--paper); padding:.8rem 1.2rem; border-radius:12px; font-weight:700; box-shadow:0 12px 30px rgba(0,0,0,.3); opacity:0; transition:all .25s ease; z-index:80; max-width:min(92vw,480px); text-align:center}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast b{color:var(--amber)}
.backdrop{position:fixed; inset:0; background:rgba(26,30,29,.5); z-index:50}
.footer{border-top:2px solid var(--ink); padding:1.2rem; text-align:center; color:var(--ink-soft); font-size:.88rem}
.footer strong{color:var(--ink)}

/* responsive */
@media (max-width:1020px){
  .workspace{grid-template-columns:1fr}
  .detail-idle{display:none}
  .toolbar,.detail{position:static}
  .detail{max-height:none}
  .hero-inner{grid-template-columns:1fr}
  .hero-card{transform:none}
  /* detail becomes modal sheet on small screens */
  .detail.modal{position:fixed; z-index:60; left:12px; right:12px; bottom:12px; top:auto; max-height:86vh; border-radius:18px; animation:sheet .28s ease}
  @keyframes sheet{from{transform:translateY(30px); opacity:0}to{transform:none; opacity:1}}
}
@media (max-width:640px){
  .toolbar{grid-template-columns:1fr; top:58px}
  .team-grid{grid-template-columns:1fr 1fr}
  .topnav{display:none}
  h1{font-size:2.5rem}
  .detail-meta{grid-template-columns:1fr 1fr}
  .task-summary{-webkit-line-clamp:3}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
}