/* ============================================================================
   ORCA DEVS — work.css   (work index + project case study pages)
   ========================================================================== */

/* ------------------------------------------------------------- project hero */
.phero{
  padding-top:calc(var(--bar) + clamp(40px,6vw,76px));
  padding-bottom:clamp(30px,4vw,48px);
}
.phero-grid{
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(28px,4vw,56px); align-items:center;
}
@media (max-width:940px){ .phero-grid{ grid-template-columns:1fr } }
.phero-copy{ display:grid; gap:22px; align-content:start }
.phero h1{ font-size:clamp(2.3rem,5vw,3.9rem) }
.phero-flags{ display:flex; flex-wrap:wrap; gap:8px }

/* the fact rail under a project hero */
.prail{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  gap:1px; background:var(--line-2);
  border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden;
  margin-top:clamp(28px,4vw,44px);
}
.prail > div{ background:rgba(255,255,255,.55); padding:20px 20px 22px }
.prail .k{
  font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-3);
}
.prail .v{
  margin-top:9px; font-size:15px; font-weight:600; letter-spacing:-.015em; line-height:1.35;
}
.prail .v.big{
  font-family:var(--display);
  font-size:1.85rem; font-weight:600; letter-spacing:-.038em; line-height:1;
}

/* -------------------------------------------------------------- surface rows */
/* one row per screen/app inside a project */
.surface{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(26px,4vw,56px); align-items:center;
  padding-block:clamp(34px,5vw,62px);
  border-top:1px solid var(--line-2);
  content-visibility:auto; contain-intrinsic-size:auto 560px;
}
.surface:first-child{ border-top:0 }
.surface.flip .surface-media{ order:2 }
@media (max-width:900px){
  .surface{ grid-template-columns:1fr; gap:28px }
  .surface.flip .surface-media{ order:0 }
}
.surface-info{ display:grid; gap:16px; align-content:center }
.surface-tag{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3);
}
.surface-tag .n{
  display:grid; place-items:center; width:22px; height:22px; border-radius:6px;
  background:var(--ink); color:var(--paper); font-size:10px; letter-spacing:0;
}
.surface-tag.priv .n{ background:var(--ink-3) }
.surface h3{
  font-family:var(--display);
  font-size:clamp(1.5rem,2.6vw,2rem); font-weight:600; letter-spacing:-.036em; line-height:1.1;
}
.surface > .surface-info > p{ font-size:15.5px; line-height:1.65; color:var(--ink-2) }
.surface-go{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding-top:4px }
.lnk-off{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11.5px; color:var(--ink-3);
  padding:8px 13px; border-radius:var(--pill);
  background:rgba(10,20,23,.04); border:1px dashed var(--line);
}

/* ------------------------------------------------------------------ prose */
.prose{ max-width:68ch; display:grid; gap:1.05em }
.prose p{ font-size:16.5px; line-height:1.72; color:var(--ink-2) }
.prose p b,.prose strong{ color:var(--ink); font-weight:600 }
.prose h3{
  font-family:var(--display);
  font-size:1.6rem; font-weight:600; letter-spacing:-.034em; line-height:1.15;
  margin-top:.6em;
}

/* pull quote / the one-line thesis of a project */
.pull{
  position:relative;
  border-left:2px solid var(--tide);
  padding:6px 0 6px 26px;
  font-family:var(--display);
  font-size:clamp(1.25rem,2.3vw,1.72rem); font-weight:600;
  line-height:1.32; letter-spacing:-.022em; color:var(--ink);
  max-width:26ch;
}
.pull.wide{ max-width:36ch }

/* ------------------------------------------------------------- next project */
.next-proj{
  display:flex; align-items:center; justify-content:space-between; gap:22px;
  flex-wrap:wrap;
  padding:clamp(26px,4vw,42px) clamp(24px,4vw,44px);
  border-radius:var(--r-lg);
  background:var(--paper-2); border:1px solid var(--line-2);
  box-shadow:var(--sh-1);
  transition:box-shadow .35s var(--ease), transform .35s var(--ease);
}
.next-proj:hover{ box-shadow:var(--sh-3); transform:translateY(-3px) }
.next-proj .k{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-3);
}
.next-proj h3{
  font-family:var(--display);
  font-size:clamp(1.4rem,2.6vw,2rem); font-weight:600; letter-spacing:-.034em;
  margin-top:8px;
}
.next-proj .arrow{
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center;
  background:var(--ink); color:var(--paper);
  transition:transform .35s var(--ease), background .3s;
}
.next-proj:hover .arrow{ transform:translateX(4px); background:var(--tide-deep) }

/* -------------------------------------------------------------- tech stack */
.stack-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px;
  background:var(--line-2); border:1px solid var(--line-2);
  border-radius:var(--r); overflow:hidden;
}
.stack-grid > div{ background:var(--paper-2); padding:20px 22px 22px }
.stack-grid .k{
  font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:11px;
}
.stack-grid .chip-row{ gap:6px }

/* --------------------------------------------------- offline demo (GOD POS) */
.offline-demo{
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line-2); background:var(--paper-2);
  box-shadow:var(--sh-2);
}
.offline-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 20px; border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,#FCFBF7,#F1EFE8);
}
.offline-bar .t{ font-size:14.5px; font-weight:600; letter-spacing:-.015em }
.switch{
  margin-left:auto; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; color:var(--ink-2);
}
.switch button{
  width:52px; height:28px; border-radius:var(--pill); position:relative;
  background:var(--kelp); transition:background .3s var(--ease-soft);
  border:1px solid rgba(0,0,0,.08);
}
.switch button::after{
  content:""; position:absolute; top:2.5px; left:2.5px;
  width:21px; height:21px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.28);
  transition:transform .3s var(--ease);
}
.switch button[aria-pressed="true"]{ background:#B4432E }
.switch button[aria-pressed="true"]::after{ transform:translateX(24px) }
.offline-body{ padding:22px 20px 24px; display:grid; gap:14px }
.offline-line{
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  padding:14px 16px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:rgba(255,255,255,.6);
  transition:opacity .3s, background .3s, border-color .3s;
}
.offline-line .ic{
  width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  background:var(--kelp-wash); color:#1D5C43;
  transition:background .3s, color .3s;
}
.offline-line .tx{ font-size:14.5px; line-height:1.45 }
.offline-line .tx small{ display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px }
.offline-line .st{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 10px; border-radius:var(--pill);
  background:var(--kelp-wash); color:#1D5C43; white-space:nowrap;
}
.offline-line[data-dead="1"]{ opacity:.42 }
.offline-line[data-dead="1"] .ic{ background:rgba(180,67,46,.12); color:#8E3421 }
.offline-line[data-dead="1"] .st{ background:rgba(180,67,46,.12); color:#8E3421 }
.offline-foot{
  font-family:var(--mono); font-size:11.5px; line-height:1.6; color:var(--ink-3);
  padding-top:4px;
}

/* --------------------------------------------------------------- responsive */
@media (max-width:600px){
  .prail{ grid-template-columns:1fr 1fr }
}