/* site.css: shared rules for every page but the two work lists.

   The project switcher on every page except the two work lists.
   Desktop: "Work" in the header opens a panel of all eleven projects.
   Phone: "Work" in the dock opens the same list full screen.
   Case studies also get previous / next at the end. Built by work-menu.js;
   without JS every "Work" link still goes to the work list as before. */

.wk-caret{display:inline-block;width:8px;height:8px;margin-left:6px;vertical-align:1px;transition:transform .2s ease}
.wk-on .wk-caret{transform:rotate(180deg)}

.wk-panel{position:fixed;left:0;right:0;top:57px;z-index:29;background:rgba(8,8,10,.97);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s}
.wk-panel.open{opacity:1;visibility:visible;transform:none}
.wk-panel .hold{padding-bottom:22px}
.wk-head{display:none}
.wk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);margin-top:22px}
.wk-grid a{background:var(--bg);display:grid;grid-template-columns:30px minmax(0,1fr);gap:2px 10px;
  padding:14px 16px;transition:background .15s ease}
.wk-grid a:hover{background:#131316}
.wk-grid i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim);
  grid-row:span 2;padding-top:3px}
.wk-grid b{font-weight:500;font-size:15px;color:var(--txt);min-width:0}
.wk-grid em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.wk-grid a[aria-current] i,.wk-grid .wk-all i{color:var(--hot)}
.wk-grid a[aria-current] b::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--hot);margin-left:9px;vertical-align:middle}
.wk-shade{position:fixed;inset:0;z-index:28;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;
  transition:opacity .18s}
.wk-shade.open{opacity:1;visibility:visible}

/* previous / next at the end of every case study */
.pager{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-soft)}
.pager a{padding:30px 0;display:flex;flex-direction:column;gap:6px;min-width:0}
.pager a + a{text-align:right;border-left:1px solid var(--line-soft);padding-left:20px}
.pager span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.pager b{font-weight:500;font-size:clamp(18px,2.2vw,26px);letter-spacing:-.02em;overflow-wrap:anywhere}
.pager a:hover b{color:var(--hot)}

/* phone: full-screen list above everything but the dock */
@media (max-width:760px){
  .wk-panel{top:0;bottom:0;border:0;transform:none;z-index:299;overflow-y:auto;background:var(--bg);
    padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .wk-panel .hold{padding-bottom:16px}
  .wk-head{display:flex;justify-content:space-between;align-items:center;height:50px;
    border-bottom:1px solid var(--line-soft)}
  .wk-head span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
  .wk-x{background:none;border:0;color:var(--mid);font-family:var(--mono);font-size:10px;
    letter-spacing:.16em;text-transform:uppercase;padding:14px 0 14px 14px;cursor:pointer}
  .wk-grid{display:block;background:none;border:0;margin:6px 0 0}
  .wk-grid a{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:baseline;
    padding:15px 0;background:none;border-bottom:1px solid var(--line-soft)}
  .wk-grid i{grid-row:auto;padding-top:0;font-size:10px}
  .wk-grid b{font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:.16em;
    text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wk-grid em{display:none}
  .wk-grid a[aria-current] b{color:var(--hot)}
  .wk-grid a[aria-current] b::after{display:none}
  .wk-shade{display:none}
  .pager a{padding:24px 0}
  .pager a + a{padding-left:14px}
}

/* a caption is not the end of a section: whatever follows it needs air.
   Without this the next paragraph sat flush under a three-line caption on phones. */
.cap + p,.cap + h2,.cap + div{margin-top:30px}

/* "Built with" boxes: an odd last box on a two-column phone grid left a grey hole
   beside it (the grid's own background). Let it take the whole row instead. */
@media (max-width:520px){ .kit > section:last-child:nth-child(odd){grid-column:1/-1} }

/* the E-Commerce metrics table scrolled sideways on phones and read as cut off.
   On a phone each brand becomes a block: name, focus, then the figures. */
@media (max-width:620px){
  .tblwrap{overflow:visible}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;min-width:0;width:auto}
  .tbl thead{display:none}
  .tbl tr{padding:16px 0;border-bottom:1px solid var(--line-soft)}
  .tbl tr:last-child{border-bottom:0}
  .tbl td,.tbl tr:last-child td{padding:0;border:0}
  .tbl td:nth-child(2){color:var(--mid);margin-top:3px}
  .tbl td.num{display:inline-block;margin:10px 18px 0 0}
  .tbl td:nth-child(3)::after{content:" orders";font-family:var(--sans);font-size:12.5px;color:var(--dim)}
  :lang(pl) .tbl td:nth-child(3)::after{content:" zamówień"}
}

/* a section heading sitting straight on its first paragraph (Oken's overview) */
h2.big + p.say{margin-top:18px}