/* ============================================================
   U3 — portfolio (work) pages
   Layers on top of monolith.css + monolith-theme.css (dark).
   --arm is set inline per page/card = the division's signal color.
   ============================================================ */

/* clear the fixed nav */
.work-page, .catalog{ padding-top:118px; }

/* ---------- the labeling system: arm badge + chip ---------- */
.arm-badge, .arm-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  padding:7px 12px; border-radius:999px; white-space:nowrap; line-height:1;
  color:var(--arm);
  background:color-mix(in srgb, var(--arm) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--arm) 38%, transparent);
}
.arm-badge{ transition:background .2s, border-color .2s; }
.arm-badge:hover{ background:color-mix(in srgb, var(--arm) 22%, transparent); }
.arm-chip{ font-size:10px; padding:5px 9px; }
.ab-dot{ width:8px; height:8px; border-radius:50%; background:var(--arm); flex:none; }

/* status extensions (is-live / is-build already in monolith.css) */
.is-concept{ color:var(--ink-4); } .is-concept .d{ background:var(--ink-4); }
.is-vision{ color:#D8B24A; } .is-vision .d{ background:#D8B24A; }

/* ---------- project page ---------- */
.work-hero{ max-width:900px; position:relative; padding-bottom:46px; border-bottom:1px solid rgba(255,255,255,.10); }
.work-hero::after{ content:""; position:absolute; left:var(--gutter); bottom:-2px; width:62px; height:3px; background:var(--arm); }
.wh-badges{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:28px; }
.work-hero h1{ font-weight:800; font-size:clamp(40px,8vw,92px); line-height:.92; letter-spacing:-.04em; text-transform:uppercase; }
.wh-tagline{ font-family:var(--mono); font-size:clamp(14px,2.4vw,18px); color:var(--arm); margin-top:18px; }
.wh-lede{ font-size:clamp(16px,2vw,19px); line-height:1.55; color:var(--ink-2); max-width:62ch; margin-top:22px; }
.wh-meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:40px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.10); }
.wh-meta .m{ background:var(--paper); padding:18px; }
.wh-meta .k{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px; }
.wh-meta .v{ font-size:15px; color:var(--ink); }
.wh-meta .v a{ color:var(--arm); border-bottom:1px solid color-mix(in srgb, var(--arm) 50%, transparent); }
.wh-cta{ display:flex; gap:13px; flex-wrap:wrap; margin-top:32px; }
.btn-disabled{ border:1.5px dashed rgba(255,255,255,.22); color:var(--ink-3); cursor:default; }

/* siblings */
.siblings{ margin-top:56px; }
.sib-head .k{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--arm); margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.10); }
.sib-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.sib{ display:flex; flex-direction:column; gap:6px; padding:18px; background:var(--paper-2); border:1px solid rgba(255,255,255,.10); transition:border-color .2s, transform .2s; }
.sib:hover{ border-color:color-mix(in srgb, var(--arm) 55%, transparent); transform:translateY(-2px); }
.sib-name{ font-weight:700; font-size:17px; letter-spacing:-.01em; }
.sib-tag{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); }
.sib-status{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; margin-top:6px; }

/* ---------- catalog ---------- */
.cat-head{ padding-top:124px; }
.cat-head h1{ font-weight:800; font-size:clamp(46px,10vw,128px); line-height:.9; letter-spacing:-.045em; text-transform:uppercase; margin-top:18px; }
.cat-sub{ font-size:clamp(16px,2vw,20px); color:var(--ink-2); max-width:60ch; margin-top:24px; line-height:1.5; }
.cat-head .ticker{ margin-top:40px; border-color:rgba(255,255,255,.16); }
.cat-head .ticker span{ border-color:rgba(255,255,255,.10); }

.filterbar{ display:flex; flex-wrap:wrap; gap:9px; margin:40px 0 30px; }
.fb{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-2); background:transparent; border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:9px 14px; cursor:pointer; transition:.18s; }
.fb .ab-dot{ background:var(--arm, var(--ink-3)); }
.fb b{ color:var(--ink); font-weight:700; }
.fb:hover{ border-color:rgba(255,255,255,.42); }
.fb.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.fb.active b{ color:var(--paper); }
/* division chips carry their own signal color */
.fb:not([data-arm="all"]){ color:var(--arm); background:color-mix(in srgb, var(--arm) 11%, transparent); border-color:color-mix(in srgb, var(--arm) 42%, transparent); }
.fb:not([data-arm="all"]) b{ color:var(--arm); }
.fb:not([data-arm="all"]):hover{ background:color-mix(in srgb, var(--arm) 20%, transparent); border-color:var(--arm); }
.fb:not([data-arm="all"]).active{ background:var(--arm); color:#0C0D11; border-color:var(--arm); }
.fb:not([data-arm="all"]).active b{ color:#0C0D11; }
.fb:not([data-arm="all"]).active .ab-dot{ background:#0C0D11; }

.pgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding-bottom:44px; }
.pcard{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:12px;
  padding:26px 24px 18px; min-height:244px;
  background:radial-gradient(125% 80% at 100% 0%, color-mix(in srgb, var(--arm) 9%, transparent), transparent 56%), var(--paper-2);
  border:1px solid rgba(255,255,255,.08);
  transform:perspective(950px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease;
  will-change:transform; }
/* always-on arm accent stripe along the top */
.pcard::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--arm); z-index:2; }
/* cursor spotlight in the division's color */
.pcard::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(circle 200px at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--arm) 30%, transparent), transparent 62%); }
.pcard > *{ position:relative; z-index:1; }
.pcard:hover{ --ty:-4px;
  border-color:color-mix(in srgb, var(--arm) 38%, transparent);
  box-shadow:0 22px 50px -20px color-mix(in srgb, var(--arm) 55%, transparent); }
.pcard:hover::after{ opacity:1; }
/* staggered scroll reveal — enabled by JS; default visible for no-JS / reduced-motion */
.pgrid.reveal-on .pcard{ opacity:0; }
.pgrid.reveal-on .pcard.in{ opacity:1; animation:cardIn .55s cubic-bezier(.2,.7,.2,1); }
@keyframes cardIn{ from{ opacity:0; transform:perspective(950px) translateY(20px); } }
@media(prefers-reduced-motion:reduce){
  .pcard{ transform:none !important; }
  .pgrid.reveal-on .pcard{ opacity:1; }
  .pgrid.reveal-on .pcard.in{ animation:none; }
}
.pc-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.pcard h3{ font-weight:800; font-size:23px; letter-spacing:-.02em; line-height:1.05; margin-top:6px; }
.pc-tag{ font-size:13.5px; font-weight:600; color:var(--arm); letter-spacing:-.005em; }
.pc-one{ font-size:14px; color:var(--ink-2); line-height:1.55; flex:1; }
.pc-foot{ margin-top:auto; padding-top:15px; display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.08); }
.pc-go{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-3); transition:color .2s; }
.pc-go .ar{ transition:transform .2s ease; }
.pcard:hover .pc-go{ color:var(--arm); }
.pcard:hover .pc-go .ar{ transform:translateX(4px); }
.pc-idx{ font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--ink-4); opacity:.55; }
.cat-empty{ color:var(--ink-3); padding:30px 0; }

/* ---------- responsive ---------- */
@media(max-width:900px){
  .sib-grid{ grid-template-columns:repeat(2,1fr); }
  .pgrid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:640px){
  .work-page, .catalog{ padding-top:94px; }
  .cat-head{ padding-top:100px; }
  .wh-meta{ grid-template-columns:repeat(2,1fr); }
  .sib-grid{ grid-template-columns:1fr; }
  .pgrid{ grid-template-columns:1fr; }
  .fb{ font-size:11px; padding:8px 11px; }
}