/* The case study page (making.html). Colours and lettering come from site.css. */
.mk { background: var(--ink); }
.mk-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px clamp(16px, 4vw, 48px); background: var(--ink); border-bottom: 1px solid var(--line); }
.mk-back { font: 500 12px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--amber); white-space: nowrap; padding: 8px 0; }
.mk-back::before { content: '\2190\00a0\00a0'; }
.mk-back:hover, .mk-back:focus-visible { color: #ffd9a8; }
.mk-main { max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 48px) 80px; }
.mk-kicker, .mk-num { margin: 0 0 14px; font: 12px/1.4 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); }
.mk-head { padding: clamp(40px, 8vw, 96px) 0 clamp(28px, 5vw, 56px); max-width: 860px; }
.mk-head h1 { margin: 0 0 22px; font: 500 clamp(34px, 6.2vw, 68px)/1.06 var(--display); letter-spacing: 0.02em; color: #f4efe2; }
.mk-lede { margin: 0 0 26px; font-size: clamp(17px, 2vw, 20px); line-height: 1.6; color: #d9d5c6; }
.mk-by { margin: 0 0 34px; font: 13px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.mk-by b { font-weight: 400; color: var(--amber); }
.mk-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; margin: 0; padding-top: 22px; border-top: 1px solid var(--line); }
.mk-facts dt { font: 11px/1.4 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); margin-bottom: 6px; }
.mk-facts dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: #cfcbbd; }
.mk-fig { margin: 0; }
.mk-fig img, .mk-fig video { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; background: #071012; }
.mk-fig figcaption { margin-top: 12px; font: 12px/1.5 var(--mono); letter-spacing: 0.08em; color: var(--muted); }
.mk-wide { margin: clamp(12px, 3vw, 28px) 0 clamp(36px, 6vw, 72px); }
/* the slider: the running room lies over the painting and is cut off at --cut */
.mk-compare { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; --cut: 55%; }
.mk-compare img { border: 0; border-radius: 0; }
.mk-compare .mk-over { position: absolute; inset: 0; height: 100%; object-fit: cover; -webkit-clip-path: inset(0 0 0 var(--cut)); clip-path: inset(0 0 0 var(--cut)); }
.mk-bar { position: absolute; top: 0; bottom: 0; left: var(--cut); width: 2px; margin-left: -1px; background: var(--amber); box-shadow: 0 0 14px rgba(240, 167, 90, 0.7); pointer-events: none; }
.mk-bar::after { content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid var(--amber); background: rgba(5, 9, 10, 0.82); }
.mk-compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.mk-compare:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 3px; }
.mk-tag { position: absolute; bottom: 12px; padding: 6px 10px; font: 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: #e6f6f3; background: rgba(5, 9, 10, 0.78); border: 1px solid var(--line); pointer-events: none; }
.mk-tag-l { left: 12px; } .mk-tag-r { right: 12px; }
.mk-sec { max-width: 760px; margin: 0 0 clamp(40px, 6vw, 72px); }
.mk-sec h2, .mk-card h3 { margin: 0 0 16px; font: 500 clamp(22px, 3.2vw, 32px)/1.2 var(--display); letter-spacing: 0.03em; color: #f4efe2; }
.mk-sec p:not(.mk-num) { margin: 0 0 16px; font-size: 16.5px; line-height: 1.72; color: #cfcbbd; }
.mk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 22px; margin: 26px 0 28px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mk-stats dt { font: 500 clamp(30px, 4.4vw, 46px)/1 var(--display); color: var(--amber); margin-bottom: 10px; }
.mk-stats dd { margin: 0; font: 12px/1.5 var(--mono); letter-spacing: 0.06em; color: var(--muted); }
.mk-split { max-width: none; display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.mk-also { margin: clamp(20px, 4vw, 40px) 0 clamp(48px, 7vw, 84px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); }
.mk-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(18px, 3.5vw, 40px); align-items: center; text-decoration: none; }
.mk-card img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; }
.mk-card h3 { font-size: clamp(20px, 2.6vw, 27px); }
.mk-card p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.65; color: #cfcbbd; }
.mk-go { font: 12px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); }
.mk-go::after { content: '\00a0\00a0\2197'; }
.mk-card:hover .mk-go, .mk-card:focus-visible .mk-go { color: #ffd9a8; }
.mk-card:focus-visible, .mk-back:focus-visible, .mk-mail:focus-visible, .mk-foot nav a:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.mk-foot { padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); }
.mk-foot-line { margin: 0 0 10px; font: 500 clamp(19px, 2.4vw, 24px)/1.3 var(--display); letter-spacing: 0.04em; color: #f4efe2; }
.mk-mail { display: inline-block; font: 15px/1.4 var(--mono); letter-spacing: 0.06em; color: var(--amber); text-decoration: none; padding: 6px 0; }
.mk-mail:hover { color: #ffd9a8; }
.mk-foot nav { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 30px; }
.mk-foot nav a { font: 500 12px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--muted); padding: 8px 0; }
.mk-foot nav a:hover { color: var(--cream); }
@media (max-width: 760px) {
  .mk-top .brand { font-size: 13px; letter-spacing: 0.1em; white-space: nowrap; } .mk-back { font-size: 11px; letter-spacing: 0.1em; }
  .mk-facts { grid-template-columns: 1fr; gap: 16px; }
  .mk-stats { grid-template-columns: 1fr 1fr; gap: 22px; }
  .mk-split, .mk-card { grid-template-columns: 1fr; }
  .mk-tag { font-size: 9.5px; letter-spacing: 0.1em; bottom: 8px; } .mk-tag-l { left: 8px; } .mk-tag-r { right: 8px; }
  .mk-bar::after { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
}