/* A case study as its own page (work/<id>/, written by content-sync.mjs): the book's spread laid
   out for the web. Words first, then the pictures as one bento on six columns, as in the book.
   Square corners throughout, like the rest of the site. */
:root{--ink:#242424;--muted:#6b6b6b;--paper:#fff;--line:#e8e8e8;--surface:#f7f7f7;font-family:Manrope,Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
body{margin:0}
h1,h2,p,dl,dd,figure{margin:0;font-weight:400}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
:focus-visible{outline:2px solid var(--muted);outline-offset:4px}

.case{width:min(880px,calc(100% - 56px));margin:96px auto 80px;display:flex;flex-direction:column}
.home{align-self:flex-start;font-size:13px;line-height:20px;color:var(--muted)}
.home:hover{color:var(--ink)}
/* inside the website's sheet: no corner buttons, and the way home closes the sheet */
.embedded .theme-switch,.embedded .desk-link{display:none}
.embedded .case{margin-top:56px}

.case header{display:flex;flex-direction:column;max-width:600px;margin-top:56px}
.kicker{font-size:12px;line-height:18px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.case h1{margin-top:12px;font:400 56px/1 'Instrument Serif',Georgia,serif;letter-spacing:-.01em}
.lede{margin-top:10px;font:italic 400 24px/1.3 'Instrument Serif',Georgia,serif;color:var(--muted)}
.intro{margin-top:24px;font-size:16px;line-height:26px}
.meta{margin-top:28px;border-top:1px solid var(--line)}
.meta div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:9px 0;border-bottom:1px solid var(--line)}
.meta dt{font-size:11px;line-height:22px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.meta dd{font-size:14px;line-height:22px}
.more{align-self:flex-start;margin-top:20px;font-size:14px;line-height:22px;font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}

/* the bento: the book's 6-column grid and placement; rows grow to fit the words and pictures keep
   a fixed shape, so nothing is left as an empty box on a wide screen */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(min(40px,4.4vw),auto);gap:min(14px,1.6vw);margin-top:64px}
.bento>*{min-width:0}
.t.media{aspect-ratio:16/10}
.t.phone{aspect-ratio:10/14}
.t.app{aspect-ratio:16/9}
.t{position:relative;overflow:hidden;background:var(--surface)}
.t.media img,.t.media video{display:block;width:100%;height:100%;object-fit:cover}
.t.phone img{object-position:top}
.t.app{display:flex;align-items:center;justify-content:center;padding:6%}
.t.app img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 12px 28px #00000012}
.t.words,.t.stat{display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:20px}
.label{font-size:11px;line-height:16px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.t.words p{font-size:15px;line-height:23px}
.t.stat p{display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:21px;color:var(--muted)}
.t.stat b{font:400 52px/1 'Instrument Serif',Georgia,serif;color:var(--ink)}
.t.stat.small b{font-size:32px;line-height:1.1}
.t.todo{display:flex;align-items:flex-end;padding:16px;background:none;border:1px dashed var(--line);font:500 12px/18px ui-monospace,Menlo,monospace;color:var(--muted)}
.t.next{display:flex;justify-content:space-between;align-items:flex-end;padding:20px;background:var(--ink);color:var(--paper)}
.t.next:hover{text-decoration:none}
.t.next span{font-size:11px;line-height:16px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.t.next b{font:400 36px/1 'Instrument Serif',Georgia,serif}

.prev{align-self:flex-start;margin-top:24px;font-size:13px;line-height:20px;color:var(--muted)}
.prev:hover{color:var(--ink)}

/* Flap & Type Lab */
.minis{display:flex;flex-direction:column;gap:48px;margin-top:56px;max-width:600px}
.mini figure{margin-bottom:16px;background:var(--surface)}
.mini img{display:block;width:100%;height:auto}
.mini h2{font-size:16px;line-height:24px;font-weight:500}
.mini h2 span{margin-left:8px;font-weight:400;color:var(--muted);font-size:13px}
.mini p{margin-top:6px;font-size:15px;line-height:24px;color:var(--muted)}

.case footer{display:flex;flex-wrap:wrap;gap:24px;margin-top:80px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;line-height:20px;color:var(--muted)}
.case footer a:hover{color:var(--ink)}

/* a phone: one column, each tile at its natural height */
@media(max-width:700px){
  .case{width:auto;margin:72px 28px 64px}
  .case header{margin-top:40px}
  .case h1{font-size:44px}
  .lede{font-size:21px}
  .meta div{grid-template-columns:96px 1fr}
  .bento{display:flex;flex-direction:column;gap:12px;margin-top:48px}
  .t{grid-column:auto!important;grid-row:auto!important}
  .t.media{aspect-ratio:16/10}
  .t.phone{aspect-ratio:auto;width:62%;align-self:center}
  .t.phone img{height:auto}
  .t.app{aspect-ratio:4/3}
  .t.todo{min-height:120px}
  .t.next{min-height:96px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}