/* /work/content-engine/: the engine has no brand of its own, so this page takes a print-shop look for a
   publishing machine. White paper, ink #111, process magenta #d4006a and yellow #ffd400, registration
   marks, Space Grotesk + IBM Plex Sans + IBM Plex Mono. Everything scoped under .cs-engine. */
.cs-engine{--ink:#111;--ink2:#3b3b3b;--muted:#6b6b6b;--rule:#1111;--line:#e4e4e4;--mag:#d4006a;--mag-soft:#fde6f1;--yel:#ffd400;--paper:#fff;--paper2:#f7f7f5;
  --mono:"IBM Plex Mono",ui-monospace,monospace;--disp:"Space Grotesk",system-ui,sans-serif;
  background:var(--paper);color:var(--ink);font:400 17px/1.65 "IBM Plex Sans",system-ui,sans-serif;overflow:hidden}
.cs-engine *{box-sizing:border-box}
.cs-engine section{border-bottom:0}
.cs-engine h1,.cs-engine h2,.cs-engine h3{font-family:var(--disp);font-weight:700;letter-spacing:-.03em;line-height:1.02;color:var(--ink);margin:0 0 .5em;max-width:none}
.cs-engine h1{font-size:clamp(44px,6.4vw,92px);letter-spacing:-.045em}
.cs-engine h2{font-size:clamp(30px,3.4vw,46px)}
.cs-engine h3{font-size:20px;letter-spacing:-.015em;line-height:1.2}
.cs-engine p{margin:0 0 1em;color:var(--ink2)}
.cs-engine img{display:block;width:100%;height:auto}
.cs-engine figure{margin:0}
.cs-engine figcaption,.cs-engine .ce-cap{font:400 12.5px/1.45 var(--mono);color:var(--muted);margin-top:8px}
.cs-engine .ce-w{max-width:1180px;margin:0 auto;padding:0 28px}
.cs-engine .ce-tag{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mag);margin-bottom:16px}
.cs-engine .reg{display:inline-block;width:18px;height:18px;border:1.5px solid var(--ink);border-radius:50%;position:relative;flex:none}
.cs-engine .reg::before,.cs-engine .reg::after{content:"";position:absolute;background:var(--ink)}
.cs-engine .reg::before{left:50%;top:-5px;bottom:-5px;width:1.5px;transform:translateX(-50%)}
.cs-engine .reg::after{top:50%;left:-5px;right:-5px;height:1.5px;transform:translateY(-50%)}

/* masthead opening */
.cs-engine .ce-open{padding:44px 0 80px}
.cs-engine .ce-mast{display:flex;align-items:center;gap:16px;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);padding:12px 0;margin-bottom:44px}
.cs-engine .ce-mast p{margin:0;font:500 12.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.cs-engine .ce-mast .r{margin-left:auto;color:var(--mag)}
.cs-engine .ce-opengrid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:48px;align-items:end;margin-bottom:56px}
.cs-engine .ce-opengrid h1{margin:0}
.cs-engine .ce-lede p{font-size:18px}
.cs-engine .ce-ink{display:flex;gap:6px;margin:0}
.cs-engine .ce-ink span{width:28px;height:10px}
.cs-engine .ce-ink .m{background:var(--mag)}.cs-engine .ce-ink .y{background:var(--yel)}.cs-engine .ce-ink .k{background:var(--ink)}
/* the wall of real sites, wider than the column */
.cs-engine .ce-wall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding:0 10px;max-width:1600px;margin:0 auto}
.cs-engine .ce-wall figure{background:var(--paper2);padding:6px 6px 2px;border:1px solid var(--line)}
.cs-engine .ce-wall figcaption{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;margin:6px 2px 4px}
.cs-engine .ce-cap{margin-top:14px}

/* why: heading beside text set in columns */
.cs-engine .ce-why{padding:40px 0 100px}
.cs-engine .ce-whygrid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;border-top:1px solid var(--ink);padding-top:36px}
.cs-engine .ce-cols{columns:2;column-gap:40px;column-rule:1px solid var(--line)}
.cs-engine .ce-cols p{break-inside:avoid}

/* the component only this page has: the weekly run sheet */
.cs-engine .ce-run{padding:0 0 110px}
.cs-engine .ce-runhead{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px;align-items:end;margin-bottom:32px}
.cs-engine .ce-sheet{border:1.5px solid var(--ink);background:#fff;box-shadow:10px 10px 0 var(--yel)}
.cs-engine .ce-sheettop{display:flex;align-items:center;gap:16px;padding:14px 18px;border-bottom:1.5px solid var(--ink);font:500 12.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em}
.cs-engine .ce-sheettop b{font-weight:500;color:var(--mag)}
.cs-engine .ce-sheettop span:not(.reg){color:var(--muted)}
.cs-engine .ce-sheettop .reg:last-child{margin-left:auto}
.cs-engine .ce-sheet table{width:100%;border-collapse:collapse}
.cs-engine .ce-sheet th,.cs-engine .ce-sheet td{border-bottom:1px solid var(--line);padding:14px 18px;text-align:left}
.cs-engine .ce-sheet thead th{font:500 11.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--paper2)}
.cs-engine .ce-sheet tbody th{font:500 14px/1.3 var(--mono);color:var(--ink);white-space:nowrap}
.cs-engine .ce-sheet td{border-left:1px solid var(--line)}
.cs-engine .ce-sheet .ok{display:block;height:12px;background:var(--mag);position:relative}
.cs-engine .ce-sheet td:last-child .ok{background:var(--ink)}
.cs-engine .ce-sheet tbody tr:last-child th,.cs-engine .ce-sheet tbody tr:last-child td{border-bottom:0}
.cs-engine .ce-ill{margin:0;padding:10px 18px;border-top:1.5px solid var(--ink);font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* identity: copy beside four real home pages */
.cs-engine .ce-ident{padding:100px 0;background:var(--paper2)}
.cs-engine .ce-identgrid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:center}
.cs-engine .ce-quad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-right:-160px}
.cs-engine .ce-quad img{border:1px solid var(--line)}
.cs-engine .ce-quad figcaption b{display:block;color:var(--ink);font-weight:500}

/* what comes back */
.cs-engine .ce-out{padding:110px 0}
.cs-engine .ce-outgrid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}
.cs-engine .ce-outshots{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-left:-120px}
.cs-engine .ce-outshots figcaption{padding-left:120px}
.cs-engine .ce-outshots img{border:1px solid var(--line)}
.cs-engine .ce-outcopy{position:relative}
.cs-engine .ce-phone{width:58%;margin-top:28px;border:7px solid var(--ink);border-radius:26px;overflow:hidden;box-shadow:12px 12px 0 var(--mag-soft)}

/* console */
.cs-engine .ce-console{padding:0 0 110px}
.cs-engine .ce-congrid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center;border-top:1px solid var(--ink);padding-top:56px}
.cs-engine .ce-stack{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cs-engine .ce-stack li{font:500 13px/1 var(--mono);padding:9px 11px;border:1px solid var(--ink)}

/* decisions as newspaper columns, two to a row */
.cs-engine .ce-calls{padding:0 0 90px}
.cs-engine .ce-calls h2{border-top:3px solid var(--ink);padding-top:22px}
.cs-engine .ce-callgrid{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;margin-top:20px}
.cs-engine .ce-callgrid article{padding:26px 0 8px;border-top:1px solid var(--line);position:relative;padding-left:64px}
.cs-engine .ce-callgrid .cn{position:absolute;left:0;top:22px;font:700 44px/1 var(--disp);color:var(--mag)}

/* next */
.cs-engine .ce-next{padding:0 0 90px}
.cs-engine .ce-next a{display:flex;align-items:center;gap:22px;text-decoration:none;border:1.5px solid var(--ink);padding:24px 28px;box-shadow:8px 8px 0 var(--yel)}
.cs-engine .ce-next span{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mag)}
.cs-engine .ce-next b{font:700 28px/1.1 var(--disp);letter-spacing:-.03em}
.cs-engine .ce-next i{font-style:normal;margin-left:auto;font:700 30px/1 var(--disp)}
.cs-engine .ce-next a:hover{box-shadow:8px 8px 0 var(--mag-soft)}

@media (max-width:980px){
  .cs-engine .ce-w{padding:0 20px}
  .cs-engine .ce-open{padding:24px 0 56px}
  .cs-engine .ce-mast{flex-wrap:wrap;gap:8px 12px;margin-bottom:28px}
  .cs-engine .ce-mast .r{margin-left:0;width:100%}
  .cs-engine .ce-opengrid,.cs-engine .ce-whygrid,.cs-engine .ce-runhead,.cs-engine .ce-identgrid,.cs-engine .ce-outgrid,.cs-engine .ce-congrid,.cs-engine .ce-callgrid{grid-template-columns:minmax(0,1fr);gap:24px}
  .cs-engine .ce-opengrid{margin-bottom:32px}
  .cs-engine .ce-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 20px}
  .cs-engine .ce-wall figure:nth-child(n+7){display:none}
  .cs-engine .ce-cols{columns:1}
  .cs-engine .ce-why{padding:24px 0 64px}
  .cs-engine .ce-run,.cs-engine .ce-console{padding-bottom:64px}
  .cs-engine .ce-sheet thead{display:none}
  .cs-engine .ce-sheet tr{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .cs-engine .ce-sheet tbody tr:last-child{border-bottom:0}
  .cs-engine .ce-sheet tbody th{grid-column:1/-1;padding:0 0 4px;border:0;font-size:13px}
  .cs-engine .ce-sheet td{border:0;padding:0}
  .cs-engine .ce-sheet td::before{content:attr(data-l);display:block;font:400 10px/1.3 var(--mono);color:var(--muted);margin-bottom:4px}
  .cs-engine .ce-sheet{box-shadow:6px 6px 0 var(--yel)}
  .cs-engine .ce-sheettop span:not(.reg){display:none}
  .cs-engine .ce-ident,.cs-engine .ce-out{padding:64px 0}
  .cs-engine .ce-quad,.cs-engine .ce-outshots{margin:0}
  .cs-engine .ce-quad{grid-template-columns:minmax(0,1fr)}
  .cs-engine .ce-outshots figcaption{padding-left:0}
  .cs-engine .ce-phone{width:70%}
  .cs-engine .ce-callgrid article{padding-left:52px}
  .cs-engine .ce-callgrid .cn{font-size:36px}
  .cs-engine .ce-next a{flex-wrap:wrap;gap:10px}
  .cs-engine .ce-next span{width:100%}
  .cs-engine .ce-next b{font-size:22px}
}