/* ============================================================
   ADON MEDIA — Work, case studies, blog, media
   Extends styles.css + pages.css. Logical properties only.
   ============================================================ */

/* ============================================================
   RESPONSIVE IMAGE PRIMITIVES
   ============================================================ */
picture{display:block}
picture img{width:100%;height:auto;display:block;object-fit:cover}
.img-pending{
  display:grid;place-items:center;background:
    repeating-linear-gradient(135deg,var(--warm-2) 0 12px,#EFE9DC 12px 24px);
  border:1px solid var(--line);aspect-ratio:3/2;
}
.img-pending span{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;
  letter-spacing:.04em;color:var(--ink-2);padding:10px 14px;text-align:center;
  background:rgba(242,239,233,.85);
}
.sec.dark .img-pending{background:repeating-linear-gradient(135deg,#131A26 0 12px,#0E141E 12px 24px);border-color:var(--line-dark)}
.sec.dark .img-pending span{color:var(--ink-inv-2);background:rgba(10,14,20,.8)}

/* ============================================================
   MOCKUPS — composed product screens

   Every internal dimension is expressed in container-query units,
   so one component renders correctly as a 230px phone frame and as
   a 900px desktop frame without a second set of rules.
   ============================================================ */
.mk{margin:0;--mk-ink:#12161F;--mk-paper:#FFFFFF;--mk-soft:#E9E5DC}
.mk-screen{
  container-type:inline-size;
  background:var(--mk-paper);overflow:hidden;position:relative;
  border:1px solid var(--line);
  box-shadow:0 26px 60px -26px rgba(10,14,20,.42);
}
.sec.dark .mk-screen,.page-hero .mk-screen{border-color:var(--line-dark);box-shadow:0 30px 70px -26px rgba(0,0,0,.72)}
.mk-desktop .mk-screen{aspect-ratio:16/10}
.mk-tablet  .mk-screen{aspect-ratio:3/4;border-radius:10px}
.mk-phone   .mk-screen{aspect-ratio:9/19;border-radius:20px}

/* browser chrome */
.mk-bar{
  display:flex;align-items:center;gap:1.6cqw;padding:0 2.2cqw;height:8.5%;
  background:var(--mk-soft);border-block-end:1px solid rgba(0,0,0,.08);
}
.mk-dots{display:flex;gap:1cqw}
.mk-dots i{width:1.1cqw;height:1.1cqw;border-radius:50%;background:rgba(0,0,0,.2);margin:0}
.mk-url{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:1.5cqw;letter-spacing:.02em;
  color:rgba(0,0,0,.4);background:rgba(255,255,255,.8);padding:.4cqw 1.6cqw;border-radius:99px;
  white-space:nowrap;
}
.mk-body{height:91.5%;display:flex;flex-direction:column}
.mk-phone .mk-body,.mk-tablet .mk-body{height:100%}

/* generic bars stand in for text */
.mk i{display:block;height:.8cqw;background:var(--mk-ink);border-radius:.3cqw;margin-block-end:1.3cqw}
.mk-lines i:first-child{height:1.8cqw}
.mk-lines.pad{padding:5% 6%}

/* nav */
.mk-nav{
  display:flex;align-items:center;justify-content:space-between;gap:2cqw;
  padding:3.4% 6%;border-block-end:1px solid rgba(0,0,0,.08);flex:none;
}
.mk-nav b{font-family:var(--display);font-weight:750;font-size:2.1cqw;letter-spacing:.05em;color:var(--mk-accent);white-space:nowrap}
.mk-nav span{display:flex;gap:1.6cqw;align-items:center;flex:1;justify-content:center;max-width:52%}
.mk-nav span i{height:.8cqw;margin:0;opacity:.42;max-width:6cqw}
.mk-nav em{width:5.6cqw;height:2.4cqw;background:var(--mk-accent);border-radius:.3cqw;flex:none}
.mk-nav.dense b{width:7cqw;height:1.6cqw;background:rgba(0,0,0,.35);display:block}
.mk-nav.dense span{max-width:68%}

/* hero */
.mk-hero{padding:6% 6% 5.5%;display:flex;flex-direction:column;gap:1.4cqw;background:linear-gradient(160deg,var(--mk-accent) 0%,transparent 130%)}
.mk-hero .mk-lines i{background:#fff}
.mk-cta{display:block;width:34%;height:3cqw;background:var(--mk-accent);border-radius:.3cqw;margin-block-start:1.6cqw}
.mk-cta.sm{width:46%;height:2.4cqw;margin-block-start:1.4cqw}
.mk-hero .mk-cta{background:#fff}

/* content rows */
.mk-rows{padding:4.5% 6%;display:grid;gap:2.2cqw;flex:1;align-content:start}
.mk-row{display:grid;grid-template-columns:3.4cqw 1fr;gap:2.2cqw;align-items:start}
.mk-row u{display:block;width:2.8cqw;height:2.8cqw;border:.35cqw solid var(--mk-accent);border-radius:.3cqw}
.mk-row i{opacity:.32}

/* store shelf */
.mk-shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;padding:5% 6%;flex:1;align-content:start}
.mk-prod{margin:0;display:flex;flex-direction:column}
.mk-prod i{height:.8cqw;opacity:.3}
.mk-img{display:block;border-radius:.4cqw;aspect-ratio:1;margin-block-end:1.3cqw;background:var(--mk-soft)}
.mk-img.i0{background:linear-gradient(150deg,var(--mk-accent),transparent 160%),var(--mk-soft)}
.mk-img.i1{background:linear-gradient(30deg,var(--mk-accent),transparent 150%),var(--mk-soft);opacity:.85}
.mk-img.i2{background:var(--mk-soft)}
.mk-nav em.cart{width:3cqw;height:3cqw;border-radius:50%}

/* gallery */
.mk-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:1.8cqw;padding:5% 6%;flex:1}
.mk-grid .mk-img{aspect-ratio:auto;height:100%;margin:0}
.mk-grid .tall{grid-row:span 2}
.mk-grid .wide{grid-column:span 2}

/* campaign split */
.mk-split{display:grid;grid-template-columns:1fr auto 1fr;gap:3.5%;align-items:center;padding:6%;flex:1}
.mk-ad,.mk-land{background:var(--mk-soft);padding:8%;border-radius:.6cqw}
.mk-tag{
  display:inline-block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:1.5cqw;
  letter-spacing:.1em;text-transform:uppercase;border:.2cqw solid var(--mk-accent);
  color:var(--mk-accent);padding:.3cqw 1.2cqw;border-radius:.3cqw;margin-block-end:1.8cqw;
}
.mk-arrow{width:5cqw;height:.25cqw;background:var(--mk-accent);position:relative}
.mk-arrow::after{content:'';position:absolute;inset-inline-end:0;inset-block-start:-.85cqw;
  border:.95cqw solid transparent;border-inline-start-color:var(--mk-accent)}
[dir="rtl"] .mk-arrow::after{inset-inline-end:auto;inset-inline-start:0;
  border-inline-start-color:transparent;border-inline-end-color:var(--mk-accent)}
.mk-form{display:block;margin-block-start:1.8cqw}
.mk-form i{height:2.4cqw;background:#fff;border:.2cqw solid rgba(0,0,0,.14);margin-block-end:1.2cqw;border-radius:.3cqw}

/* architecture tree */
.mk-tree{padding:8% 6%;display:flex;flex-direction:column;align-items:center;gap:6%;flex:1;justify-content:center}
.mk-node{
  display:grid;place-items:center;min-width:14cqw;height:4cqw;padding-inline:1.8cqw;
  background:var(--mk-accent);border-radius:.3cqw;white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:1.7cqw;letter-spacing:.05em;color:#fff;
}
.mk-node.root{min-width:22cqw;height:5cqw;font-size:2.1cqw}
.mk-branch{display:flex;gap:3cqw}
.mk-branch .mk-node{min-width:10cqw;height:2.8cqw;opacity:.6}
.mk-leaves{display:grid;grid-template-columns:repeat(6,1fr);gap:1.4cqw;width:80%}
.mk-leaf{display:block;height:2.2cqw;background:var(--mk-soft);border-block-start:.5cqw solid var(--mk-accent);border-radius:.2cqw}

/* before / after */
.mk-ba{display:grid;grid-template-columns:1fr 1fr;height:100%}
.mk-old,.mk-new{position:relative;display:flex;flex-direction:column;overflow:hidden}
.mk-old{background:#EDEAE3;filter:saturate(.55)}
.mk-new{background:#fff;border-inline-start:1px solid rgba(0,0,0,.12)}
.mk-label{
  position:absolute;inset-block-start:1.6cqw;inset-inline-start:1.6cqw;z-index:2;white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:1.5cqw;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(0,0,0,.55);color:#fff;padding:.5cqw 1.4cqw;border-radius:.3cqw;
}
.mk-label.on{background:var(--mk-accent)}
.mk-ba .mk-nav{padding-block-start:7%}
.mk-cramped{display:grid;grid-template-columns:repeat(3,1fr);gap:.8cqw;padding:6%;flex:1}
.mk-cramped i{height:100%;margin:0;background:rgba(0,0,0,.14);border-radius:.2cqw}

/* ============================================================
   WORK INDEX
   ============================================================ */
.work-filters{
  display:flex;flex-wrap:wrap;gap:8px;margin-block-start:34px;padding:0;list-style:none;
}
.work-filters button{
  font-family:var(--display);font-weight:650;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);background:transparent;
  border:1px solid var(--line);padding:10px 15px;cursor:pointer;
  transition:color .22s ease,border-color .22s ease,background .22s ease;
  min-height:40px;
}
.work-filters button:hover{color:var(--ink);border-color:var(--ink-2)}
.work-filters button[aria-pressed="true"]{
  color:#fff;background:var(--blue-ink);border-color:var(--blue-ink);
}
.work-count{font-size:13px;color:var(--ink-2);margin-block-start:14px}

/* asymmetric editorial grid — not twelve identical cards */
.work-grid{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(16px,2.4vw,32px);margin-block-start:34px;
}
.work-item{grid-column:span 3;border:0;padding:0;display:block}
.work-item.is-large{grid-column:span 4}
.work-item.is-medium{grid-column:span 2}
.work-item.is-wide{grid-column:span 6}
.work-item[hidden]{display:none}

.work-card{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;height:100%;
}
.work-shot{
  position:relative;overflow:hidden;background:var(--warm-2);
  border:1px solid var(--line);
}
.work-card .mk{width:100%}
.work-card .mk-screen{border:0;box-shadow:none;aspect-ratio:auto;height:100%}
.work-shot .mk{height:100%}
.work-item.is-wide .work-shot{aspect-ratio:2/1}
.work-item.is-large .work-shot{aspect-ratio:16/10}
.work-item.is-medium .work-shot{aspect-ratio:16/10}
.work-shot > .mk,.work-shot > picture,.work-shot > .img-pending{height:100%}

/* restrained hover — desktop, pointer only */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .work-shot .mk,.work-shot picture{transition:transform .5s cubic-bezier(.16,1,.3,1)}
  .work-card:hover .mk,.work-card:hover picture{transform:scale(1.025)}
  .work-card .go{transition:gap .32s cubic-bezier(.16,1,.3,1)}
  .work-card:hover .go{gap:12px}
}

.work-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-block-start:16px}
.work-meta .cat{
  font-family:var(--display);font-weight:650;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue-ink);
}
.work-meta .ind{font-size:13px;color:var(--ink-2)}
.work-meta .ind::before{content:'·';margin-inline-end:8px;color:var(--line)}
.work-card h3{
  font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:750;
  font-size:clamp(19px,2.1vw,26px);letter-spacing:-.015em;margin-block:8px 6px;
}
.work-card .line{font-size:15px;color:var(--ink-2);max-width:46ch}
.work-tags{display:flex;flex-wrap:wrap;gap:6px;margin-block-start:12px;padding:0;list-style:none}
.work-tags li{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--line);padding:4px 9px;
}
.work-card .go{
  display:inline-flex;align-items:center;gap:8px;margin-block-start:14px;
  font-family:var(--display);font-weight:650;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue-ink);
}
.work-card .go .icon{font-size:15px}
[dir="rtl"] .work-card .go .icon{transform:scaleX(-1)}

/* the concept label — one class to delete when real work lands */
.concept-flag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#8A6A24;background:rgba(176,138,60,.14);
  border:1px solid rgba(176,138,60,.4);padding:3px 8px;
}
.sec.dark .concept-flag,.page-hero .concept-flag{
  color:#E0C07A;background:rgba(224,192,122,.12);border-color:rgba(224,192,122,.36);
}
/* bottom-left so it never collides with the composed browser chrome */
.work-shot .concept-flag{position:absolute;inset-block-end:10px;inset-inline-start:10px;z-index:3;background:rgba(242,239,233,.94);height:auto}

/* empty filter state */
.work-empty{
  display:none;padding:56px 0;text-align:center;color:var(--ink-2);font-size:15.5px;
  border-block-start:1px solid var(--line);margin-block-start:34px;
}
.work-empty.show{display:block}

/* ============================================================
   CASE STUDY
   ============================================================ */
.case-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-block-start:40px;
}
.case-fact{background:var(--warm);padding:22px 20px}
.sec.dark .case-fact{background:var(--midnight)}
.sec.elevated .case-fact{background:var(--warm-2)}
.case-fact dt{
  font-family:var(--display);font-weight:650;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);margin-block-end:8px;
}
.sec.dark .case-fact dt{color:var(--ink-inv-2)}
.case-fact dd{margin:0;font-size:15px;line-height:1.5}
.case-fact dd + dd{margin-block-start:3px}

/* device switcher — one device at a time, never three squeezed */
.case-devices{margin-block-start:40px}
.device-switch{display:flex;gap:8px;margin-block-end:22px;padding:0;list-style:none}
.device-switch button{
  font-family:var(--display);font-weight:650;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);background:transparent;
  border:1px solid var(--line);padding:9px 14px;cursor:pointer;min-height:40px;
  transition:color .22s ease,border-color .22s ease,background .22s ease;
}
.device-switch button[aria-pressed="true"]{color:#fff;background:var(--blue-ink);border-color:var(--blue-ink)}
.sec.dark .device-switch button{color:var(--ink-inv-2);border-color:var(--line-dark)}
.sec.dark .device-switch button[aria-pressed="true"]{color:#fff;background:var(--blue);border-color:var(--blue)}
.device-stage{display:grid;place-items:center;min-height:min(58vh,520px)}
.device-stage .mk{width:100%;transition:opacity .34s ease}
.device-stage .mk[hidden]{display:none}
.device-stage .mk-desktop{max-width:900px}
.device-stage .mk-tablet{max-width:380px}
.device-stage .mk-phone{max-width:230px}

.case-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(14px,2.2vw,26px);margin-block-start:36px}

/* ============================================================
   BLOG
   ============================================================ */
.post-featured{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,4vw,56px);align-items:center;margin-block-start:36px;
}
.post-featured .shot{border:1px solid var(--line);overflow:hidden;background:var(--warm-2)}
.post-featured h2{font-size:clamp(24px,3.2vw,40px);line-height:1.08;letter-spacing:-.02em;margin-block:12px 12px;max-width:20ch}
.post-featured .excerpt{font-size:16.5px;color:var(--ink-2);max-width:52ch}

.post-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:clamp(24px,3vw,44px);margin-block-start:40px;
}
.post-card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.post-card .shot{border:1px solid var(--line);overflow:hidden;background:var(--warm-2);aspect-ratio:3/2}
.post-card[hidden]{display:none}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .post-card .shot picture,.post-card .shot .img-pending{transition:transform .5s cubic-bezier(.16,1,.3,1)}
  .post-card:hover .shot picture,.post-card:hover .shot .img-pending{transform:scale(1.025)}
}
.post-card h3{
  font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:750;
  font-size:clamp(17px,1.9vw,21px);line-height:1.18;letter-spacing:-.012em;margin-block:10px 8px;
}
.post-card .excerpt{font-size:14.8px;color:var(--ink-2);flex:1}
.post-meta{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-block-start:12px;
  font-size:12.5px;color:var(--ink-2);
}
.post-meta .cat{
  font-family:var(--display);font-weight:650;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue-ink);
}
.post-meta .dot::before{content:'·';margin-inline-end:8px;color:var(--line)}

/* ============================================================
   ARTICLE
   ============================================================ */
.article-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(26px,5vw,72px);align-items:start}
.article-body{max-width:72ch;font-size:17px;line-height:1.75}
.article-body > * + *{margin-block-start:1.1em}
.article-body h2{
  font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:750;
  font-size:clamp(22px,2.5vw,30px);line-height:1.15;letter-spacing:-.018em;
  margin-block:2em .55em;scroll-margin-block-start:96px;max-width:26ch;
}
.article-body h3{font-size:clamp(17px,1.8vw,20px);font-weight:700;margin-block:1.6em .4em}
.article-body p{color:var(--ink-2)}
.article-body strong,.article-body b{color:var(--ink);font-weight:650}
.article-body ul,.article-body ol{padding-inline-start:24px;color:var(--ink-2)}
.article-body li{margin-block-end:.5em}
.article-body li::marker{color:var(--blue-ink)}
.article-body a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:.2em}
.article-body figure{margin:2em 0}
.article-body figcaption{font-size:13.5px;color:var(--ink-2);margin-block-start:10px}
.article-lede{font-size:clamp(17.5px,1.9vw,21px);line-height:1.55;color:var(--ink);max-width:50ch}

.pullquote{
  margin-block:2em;padding-inline-start:22px;border-inline-start:2px solid var(--blue-ink);
  font-family:var(--display);font-variation-settings:'wdth' 108;font-weight:650;
  font-size:clamp(19px,2.2vw,25px);line-height:1.3;letter-spacing:-.015em;color:var(--ink);
  max-width:28ch;
}
.keypoints{
  margin-block:2em;padding:24px 26px;background:var(--warm-2);border-inline-start:2px solid var(--blue-ink);
}
.keypoints h3{margin-block:0 10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.keypoints ul{margin:0;padding-inline-start:20px}

/* table of contents */
.toc{position:sticky;inset-block-start:96px}
.toc h2{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-block-end:14px;max-width:none}
.toc ol{list-style:none;padding:0;margin:0;counter-reset:toc}
.toc li{counter-increment:toc}
.toc a{
  display:grid;grid-template-columns:2.2ch 1fr;gap:10px;padding-block:7px;
  font-size:13.8px;color:var(--ink-2);text-decoration:none;line-height:1.4;
}
.toc a::before{content:counter(toc,decimal-leading-zero);color:rgba(76,86,102,.5);font-variant-numeric:tabular-nums}
.toc a:hover{color:var(--blue-ink)}
.toc a[aria-current="true"]{color:var(--blue-ink)}
.toc-m{display:none;margin-block-start:26px;border:1px solid var(--line)}
.toc-m summary{
  padding:13px 16px;cursor:pointer;font-family:var(--display);font-weight:650;
  font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
  list-style:none;display:flex;justify-content:space-between;align-items:center;
}
.toc-m summary::-webkit-details-marker{display:none}
.toc-m summary::after{content:'+';color:var(--blue-ink);font-size:17px}
.toc-m[open] summary::after{content:'−'}
.toc-m ol{padding:0 16px 14px}

/* reading progress */
.read-progress{
  position:fixed;inset-block-start:0;inset-inline:0;height:2px;z-index:210;
  background:var(--blue);transform-origin:0 50%;transform:scaleX(0);
  will-change:transform;pointer-events:none;
}
[dir="rtl"] .read-progress{transform-origin:100% 50%}
@media (prefers-reduced-motion:reduce){.read-progress{display:none}}

.article-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-block-start:44px;padding-block-start:24px;border-block-start:1px solid var(--line)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .work-grid{grid-template-columns:repeat(4,1fr)}
  .work-item,.work-item.is-large,.work-item.is-medium{grid-column:span 2}
  .work-item.is-wide{grid-column:span 4}
  .article-layout{grid-template-columns:1fr}
  .toc{display:none}
  .toc-m{display:block}
  .post-featured{grid-template-columns:1fr;gap:20px}
  .post-featured .shot{order:-1}
}
@media (max-width:760px){
  /* portfolio becomes a clear vertical editorial sequence */
  .work-grid{grid-template-columns:1fr;gap:44px}
  .work-item,.work-item.is-large,.work-item.is-medium,.work-item.is-wide{grid-column:span 1}
  .work-item .work-shot,
  .work-item.is-large .work-shot,
  .work-item.is-medium .work-shot,
  .work-item.is-wide .work-shot{aspect-ratio:16/10}
  .work-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(var(--pad-inline) * -1);padding-inline:var(--pad-inline);padding-block-end:4px}
  .work-filters::-webkit-scrollbar{display:none}
  .work-filters button{white-space:nowrap}
  .post-grid{grid-template-columns:1fr;gap:36px}
  .device-stage .mk-desktop{max-width:100%}
  .case-facts{grid-template-columns:1fr 1fr}
  .mk-split{grid-template-columns:1fr;gap:10px}
  .mk-arrow{transform:rotate(90deg);justify-self:center}
  .article-body{font-size:16.5px}
}
@media (max-width:430px){
  .case-facts{grid-template-columns:1fr}
  .mk-shelf{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   RTL — screens and brand marks never mirror
   ============================================================ */
[dir="rtl"] .mk-screen,[dir="rtl"] .work-shot picture,[dir="rtl"] .post-card .shot picture{direction:ltr}
[dir="rtl"] .mk-body{direction:ltr}
[dir="rtl"] .mk-label{inset-inline-start:auto;inset-inline-end:6px}
[lang="he"] .article-body{line-height:1.85}
[lang="he"] .article-body h2,[lang="he"] .post-card h3,[lang="he"] .work-card h3{letter-spacing:0}

/* ============================================================
   QA FIXES — each traced to a measured defect
   ============================================================ */

/* A project accent chosen for surfaces is not necessarily legible as text.
   Darken it for the brand name inside a composed screen — a warm stone
   accent measured 2.3:1 on white before this. */
.mk-nav b{color:color-mix(in srgb, var(--mk-accent) 62%, #10141C)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .mk-nav b{color:var(--mk-ink)}
}
/* White on the accent was 4.09:1 on the warmer palettes. */
.mk-label.on{background:color-mix(in srgb, var(--mk-accent) 76%, #10141C)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .mk-label.on{background:#3A2E1C}
}

/* The concept flag measured 4.36:1 — close, but AA is a floor, not a target. */
.concept-flag{color:#6E5316;border-color:rgba(176,138,60,.55)}

/* .article-body a was repainting the primary button's label, leaving dark
   blue on cobalt at 1.53:1. Buttons are not body links. */
.article-body a.btn{text-decoration:none}
.article-body a.btn-primary{color:#fff}
.article-body a.btn-ghost{color:var(--ink)}

/* Collapsible TOC entries are standalone controls, not inline links. */
.toc-m a{padding-block:7px;min-height:24px;align-items:center}

/* At 320px a long unbroken term in a list could push the page wider. */
.case-fact dd,.matrix-items li,.split-list li,.compare-list li{overflow-wrap:anywhere}

/* The ghost button is drawn for dark grounds; the work strip sits on a warm
   one, where it was rendering light-on-light (measured 1:1). */
.sec:not(.dark) .btn-ghost{color:var(--ink);border-color:rgba(20,26,36,.3)}
.sec:not(.dark) .btn-ghost:hover{border-color:var(--ink)}

/* Cobalt as small text on the mockup's warm surface measured 3.58:1. */
.mk-tag{color:color-mix(in srgb, var(--mk-accent) 74%, #10141C);
  border-color:color-mix(in srgb, var(--mk-accent) 74%, #10141C)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .mk-tag{color:#1E3A6E;border-color:#1E3A6E}
}

/* A grid item will not shrink below its content's min-content width, so the
   matrix rows needed an explicit floor before they would wrap at 320px. */
.matrix-items li{min-width:0}
.matrix-items li > span,.split-list li > span,.compare-list li > span{min-width:0;overflow-wrap:anywhere}
@media (max-width:420px){
  .matrix-items{grid-template-columns:1fr}
}

/* Longer localized labels ("Ordinateur" vs "Desktop") overflowed 320px
   because the switch row could not wrap. */
.device-switch{flex-wrap:wrap}

/* ============================================================
   REAL SCREENSHOT FRAMES
   Genuine captures of client sites, framed rather than redrawn.
   Frames never mirror in RTL — a screenshot is not reversed by a
   language.
   ============================================================ */
.shot-frame{margin:0;width:100%}
.shot-frame picture{
  border:1px solid var(--line);background:var(--warm-2);overflow:hidden;
  box-shadow:0 26px 60px -26px rgba(10,14,20,.42);
}
.sec.dark .shot-frame picture{border-color:var(--line-dark);box-shadow:0 30px 70px -26px rgba(0,0,0,.72)}
.shot-desktop{max-width:900px}
.shot-tablet{max-width:380px}
.shot-tablet picture{border-radius:10px}
.shot-mobile{max-width:230px}
.shot-mobile picture{border-radius:20px}
.shot-frame[hidden]{display:none}
[dir="rtl"] .shot-frame picture{direction:ltr}

/* The work card carries a real capture. picture() writes an inline
   aspect-ratio for layout stability, which beats a stylesheet rule — so the
   card override has to be explicit or the image letterboxes inside it. */
.work-shot picture{height:100%;width:100%}
.work-shot picture img{
  width:100%;height:100%;aspect-ratio:auto !important;
  object-fit:cover;object-position:top center;
}

/* live-site link in the facts table reads as an external destination */
.case-fact dd a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:.2em;overflow-wrap:anywhere}
.sec.dark .case-fact dd a{color:var(--blue-lift)}

@media (max-width:760px){
  .shot-desktop,.shot-tablet,.shot-mobile{max-width:100%}
  .shot-tablet,.shot-mobile{max-width:260px}
}

/* The live-site link is the only content of its cell — a standalone action,
   not an inline link in a sentence, so WCAG 2.5.8's inline exemption does
   not apply to it. */
.case-fact dd a{display:inline-block;padding-block:4px;min-height:24px}

/* ============================================================
   HOMEPAGE SELECTED WORK — an index, not a catalogue

   The homepage carries a selection. The /work grid above carries the
   catalogue. Reusing the catalogue here made the section taller than
   the five sections beneath it combined.

   One image per project serves both presentations. Below the hover
   breakpoint it sits inline at 92px and is simply part of the row.
   Where a fine pointer exists it is lifted out, scaled up and tracked
   to the cursor — so the dense list stays dense and the work is still
   the reward for reaching toward it.
   ============================================================ */
.hw-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-block-end:clamp(18px,2.6vw,30px);
}
.hw-head h2{margin-block-end:0}
.hw-all{margin-block-start:0;white-space:nowrap}

.hw{position:relative}
.hw-list{list-style:none;margin:0;padding:0;border-block-start:1px solid var(--line)}
.hw-row{border-block-end:1px solid var(--line)}

.hw-link{
  display:grid;align-items:center;gap:clamp(12px,2vw,26px);
  grid-template-columns:auto 92px minmax(0,1fr) auto auto;
  padding-block:clamp(14px,1.8vw,20px);
  text-decoration:none;color:inherit;
  transition:background-color .3s cubic-bezier(.16,1,.3,1);
}
.hw-n{
  font-family:var(--display);font-variation-settings:'wdth' 108;font-weight:650;
  font-size:12px;letter-spacing:.1em;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.hw-thumb{
  display:block;inline-size:92px;aspect-ratio:16/10;overflow:hidden;
  background:var(--warm-2);border:1px solid var(--line);
}
.hw-thumb picture,.hw-thumb img{display:block;inline-size:100%;block-size:100%;object-fit:cover}

.hw-text{display:flex;flex-direction:column;gap:3px;min-inline-size:0}
.hw-name{
  font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:750;
  font-size:clamp(19px,2.3vw,27px);letter-spacing:-.018em;line-height:1.1;
}
.hw-ind{font-size:13.5px;color:var(--ink-2)}
.hw-svc{
  font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);
  white-space:nowrap;
}
.hw-go{
  display:inline-grid;place-items:center;inline-size:34px;block-size:34px;
  border:1px solid var(--line);border-radius:50%;color:var(--blue-ink);
  transition:border-color .3s cubic-bezier(.16,1,.3,1),
             background-color .3s cubic-bezier(.16,1,.3,1),
             color .3s cubic-bezier(.16,1,.3,1);
}
[dir="rtl"] .hw-go .icon{transform:scaleX(-1)}

.hw-link:hover .hw-go,.hw-link:focus-visible .hw-go{
  border-color:var(--blue-ink);background:var(--blue-ink);color:#fff;
}
.hw-link:focus-visible{outline:2px solid var(--blue-ink);outline-offset:3px}

/* Narrow: thumbnail, text, arrow. The index number and the discipline
   list are the first things to go — they are orientation, not content. */
@media (max-width:860px){
  .hw-link{grid-template-columns:72px minmax(0,1fr) auto;gap:14px}
  .hw-n,.hw-svc{display:none}
  .hw-thumb{inline-size:72px}
}

/* ---- pointer-tracked preview, desktop only ----
   The row stays text; the screenshot flies. Nothing here runs where a
   pointer cannot hover, so a touch visitor keeps the inline thumbnail
   and never meets an element they cannot summon. */
/* The pointer-tracked preview needs BOTH a fine pointer and the room for
   the full row. Gating it on hover alone put a four-column template on a
   row that had already dropped two of its children at 860px, and the arrow
   landed in the wrong column — visible first in RTL, wrong in both. */
@media (hover:hover) and (pointer:fine) and (min-width:861px){
  .hw-link{grid-template-columns:auto minmax(0,1fr) auto auto}
  .hw-thumb{
    position:fixed;z-index:5;inline-size:clamp(230px,22vw,330px);
    inset-block-start:0;inset-inline-start:0;
    translate:calc(var(--hx,0) * 1px - 50%) calc(var(--hy,0) * 1px - 50%);
    opacity:0;scale:.94;pointer-events:none;border:0;background:none;
    box-shadow:0 26px 60px -18px rgba(10,14,20,.5), 0 2px 10px -4px rgba(10,14,20,.3);
    transition:opacity .34s cubic-bezier(.16,1,.3,1), scale .44s cubic-bezier(.16,1,.3,1);
    will-change:translate,opacity,scale;
  }
  .hw[data-live] .hw-row.is-on .hw-thumb{opacity:1;scale:1}
  /* Keyboard focus gets the preview too, parked beside the row rather
     than at a pointer that is not there. */
  .hw-row.is-key .hw-thumb{
    position:absolute;inset-inline-end:0;inset-block-start:50%;
    translate:0 -50%;opacity:1;scale:1;
  }
  .hw-link{transition:opacity .34s cubic-bezier(.16,1,.3,1)}
  .hw[data-live]:hover .hw-link{opacity:.42}
  .hw[data-live]:hover .hw-row.is-on .hw-link{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .hw-thumb{transition:none}
  .hw[data-live]:hover .hw-link{opacity:1}
}