/* Om Gajjar. One typeface, two sizes, black and white. */

:root {
  --bg: #fff;
  --fg: #000;
  --mute: #6b6b6b;
  --rule: #d4d4d4;

  --s1: 17px;
  --s2: clamp(21px, 1.05rem + 0.75vw, 28px);

  --m: clamp(16px, 2.4vw, 36px);
  --g: clamp(12px, 1.4vw, 24px);
  --gap: clamp(64px, 11vh, 128px);      /* between sections */
  --gap-lg: clamp(112px, 19vh, 210px);  /* end of a page: pager, footer */

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #000;
  --fg: #fff;
  --mute: #8e8e8e;
  --rule: #333;
  color-scheme: dark;
}

/* No script: follow the system setting. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #000;
    --fg: #fff;
    --mute: #8e8e8e;
    --rule: #333;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--s1);
  font-weight: 400;
  line-height: 1.45;
  font-kerning: normal;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  hanging-punctuation: first;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* The only colour on the site is the cursor: a ring in #FF3300 that
   fills in over anything clickable. A cursor image, not a script.
   SVG first so it stays sharp on any screen, then the PNG, then the
   system cursor. The browser takes the first one it can draw. */
body {
  cursor: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228.7%22 fill=%22none%22 stroke=%22%23FF3300%22 stroke-width=%222.6%22/%3E%3C/svg%3E") 12 12, url(../assets/cursor.png) 12 12, auto;
}

/* Text keeps its I-beam, so a quote is still easy to select. */
p, li, dd, dt, h1, h2, h3, figcaption, blockquote {
  cursor: text;
}

/* Anything clickable fills the ring in. Declared last so it wins. */
a, button, .item, .item *, summary, label {
  cursor: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228.7%22 fill=%22%23FF3300%22/%3E%3C/svg%3E") 12 12, url(../assets/cursor-link.png) 12 12, pointer;
}

::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--m); top: var(--m); background: var(--bg); }

.mute { color: var(--mute); }

.big {
  font-size: var(--s2);
  line-height: 1.28;
}

p, li, dd { text-wrap: pretty; }
.c p + p { margin-top: 1em; }

/* Grid. A heading column hung off the left edge, a reading column that
   starts a little before the middle, and empty space to the right. */

.wrap { padding: 0 var(--m); }

.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
}

.l { grid-column: 1 / span 4; }
.c { grid-column: 6 / span 6; max-width: 40em; }
.w { grid-column: 6 / -1; }
.e { grid-column: 12 / span 1; justify-self: end; text-align: right; white-space: nowrap; }

/* Header */

.top { padding-top: var(--m); align-items: baseline; }
.top a { text-decoration: none; }
.top a:hover, .top a[aria-current] { text-decoration: underline; }
.nav { display: flex; flex-wrap: wrap; column-gap: clamp(1.4em, 2.2vw, 2.2em); }

/* The colour-scheme switch: a half-filled circle, the old contrast mark.
   Padding gives it a 40px tap target without moving the icon. */
.theme {
  display: inline-flex;
  align-self: center;
  padding: 10px;
  margin: -10px;
  color: inherit;
}
.theme svg { display: block; }
.theme:hover { opacity: 0.6; }

/* Sections are separated by space. Rules are kept only for rows of
   tabular content, where they help the eye travel across a line. */

.lead { margin-top: clamp(96px, 20vh, 240px); }

.block { margin-top: var(--gap); }

/* Front page: the list of case studies */

.items { margin-top: 1.6em; }
.more { margin-top: 1.8em; }

.item {
  text-decoration: none;
  padding: 1em 0;
  border-top: 1px solid var(--rule);
}
.item:last-child { border-bottom: 1px solid var(--rule); }
.item:hover .name { text-decoration: underline; }
.item .c { color: var(--mute); }   /* the name is the link; the line supports it */

/* Lists inside the reading column */

.c ul li { padding-left: 1em; text-indent: -1em; }
.c ul li::before { content: "- "; }
.c ul li + li { margin-top: 0.35em; }
.c p + ul, .c ul + p { margin-top: 1em; }

.pairs div {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  column-gap: var(--g);
  padding: 0.55em 0;
  border-bottom: 1px solid var(--rule);
}
.pairs div:first-child { padding-top: 0; }
.pairs dt { color: var(--mute); }
.c p + .pairs { margin-top: 1em; }

/* Case study */

.hero { margin-top: clamp(80px, 16vh, 180px); align-items: end; }

.meta {
  margin-top: 1.4em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9em var(--g);
}
.meta .span { grid-column: 1 / -1; }
.meta dt { color: var(--mute); }

.pager {
  margin-top: var(--gap-lg);
  padding-top: 0.9em;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.pager a { text-decoration: none; }
.pager a:hover { text-decoration: underline; }

/* Footer */

.foot {
  margin-top: var(--gap-lg);
  padding-bottom: var(--m);
}
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* Draft review: add #drafts to any address to outline unconfirmed copy. */
.show-drafts [data-draft] { outline: 1px dashed var(--mute); outline-offset: 6px; }

/* Tablets: the reading column gets too narrow to read comfortably at this
   width, so it starts one column earlier and runs wider. */

@media (min-width: 761px) and (max-width: 1023px) {
  .c { grid-column: 5 / span 7; }
  .w { grid-column: 5 / -1; }
}

/* Narrow screens: one column, headings above text. */

@media (max-width: 760px) {
  :root {
    --s1: 16px;
    --m: 20px;
    --gap: 72px;
    --gap-lg: 120px;
  }

  .l, .c, .w { grid-column: 1 / -1; }
  .e { grid-column: 1 / -1; justify-self: start; text-align: left; }

  /* Header: the name holds its own line, the menu sits below it with
     enough space that the two read as different things. */
  .top .l { grid-column: 1 / span 8; }
  .top .e { grid-column: 9 / -1; justify-self: end; }
  .top .nav {
    grid-column: 1 / -1;
    order: 3;
    margin-top: 1.7em;
    column-gap: 1.5em;
    row-gap: 0.5em;
  }

  .lead { margin-top: 88px; }
  .lead > .l + .big { margin-top: 1.2em; }

  /* A section heading needs clear air beneath it here, or it reads as
     another line of body text once the two columns stack. */
  .block > .l + .c { margin-top: 1.8em; }

  .item .l { grid-column: 1 / span 9; }
  .item .e { grid-column: 10 / -1; grid-row: 1; justify-self: end; text-align: right; }
  .item .c { margin-top: 0.35em; }
  .list-head .e { display: none; }

  .hero { margin-top: 56px; }
  .hero figcaption { order: 2; margin-top: 0.7em; }

  .pager .c, .pager .e { margin-top: 1.1em; }
  .foot .c { margin-top: 0.5em; }

  .pairs div { grid-template-columns: 5.5em minmax(0, 1fr); }
}

@media print {
  :root, [data-theme="dark"] { --bg: #fff; --fg: #000; --mute: #555; --rule: #ccc; }
  .nav, .theme, .skip, .pager { display: none; }
  .block, .foot, .lead, .hero { margin-top: 2em; }
  img { max-height: 11cm; width: auto; }
}