/* ============ Tokens ============ */
:root {
  --bg: #f5f3ef;
  /* warm off-white */
  --ink: #17171a;
  /* near-black text */
  --ink-soft: #3a3833;
  /* body text */
  --muted: #a29d95;
  /* mono labels */
  --muted-2: #a8a39c;
  /* card meta */
  --hairline: #e6e2db;
  /* borders */
  --underline: #d5d1c9;
  /* link underline (rest) */
  --arrow: #b3aea7;
  /* link arrow (rest) */
  --accent: #2f57ff;
  /* electric blue */
  --sans: 'Instrument Sans', system-ui, sans-serif;
  --serif: 'Newsreader', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  /* The intro row and the case-study rows are both a 60/40 pair. They share these so they always
     split, line up and fall to one column at exactly the same widths. */
  --pair-min: 430px;
  --pair-gap: 32px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

/* ============ Links ============ */
a {
  color: var(--accent);
  text-decoration: none;
}

.link {
  color: var(--ink);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--underline);
  transition: color .2s, text-decoration-color .2s;
}

.link .arr {
  display: inline-block;
  margin-left: 2px;
  font-size: .85em;
  color: var(--arrow);
  transition: transform .22s cubic-bezier(.2, .7, .2, 1), color .22s;
}

.link:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.link:hover .arr {
  transform: translate(2px, -2px);
  color: var(--accent);
}

/* ============ Header ============ */
.site-header {
  padding: clamp(14.112px, 2.016vw, 22.176px) 0 0;
}

.site-header .name {
  font-size: 48px;
  font-weight: 400;
  font-family: 'Instrument Serif', Georgia, serif;
}

/* Blob standing in for the "a" in the name */
.site-header .name-blob {
  display: inline-block;
  height: 0.6em;
  width: auto;
  margin: 0 0.07em;
  vertical-align: baseline;
}

/* ============ Intro: About + Work/Links ============ */
.intro {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pair-gap);
  padding: clamp(28px, 4vw, 44px) 0 clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--hairline);
}

/* Match the case-study grid's 60/40 split so the WORK column (inside
   .intro-cols) lines up with the "Tracking returns" card underneath it.
   Growth, basis, minimum and gap all mirror .card's; see --pair-min. */
.intro>div {
  flex-grow: 6;
  flex-shrink: 1;
  flex-basis: 0;
  min-width: min(var(--pair-min), 100%);
}

.intro>.intro-cols {
  flex-grow: 4;
}

.label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--muted);
  margin-bottom: 14px;
}

.intro p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.intro-cols {
  display: grid;
  /* WORK never gets narrower than its longest link; on small screens the right column gives up width instead */
  grid-template-columns: minmax(max-content, 1fr) minmax(0, 300px);
  column-gap: 32px;
  row-gap: 32px;
  align-items: start;
}

.intro-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.intro-cols p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* On a phone the right-hand column is too narrow for the fun fact, which broke over three lines.
   CONTACT stays beside WORK; FUN FACT drops to a row of its own across the full width. */
@media (max-width: 460px) {
  /* Ragged-right text only reaches the margin when the words happen to fit, and at a fixed size the
     about paragraph kept falling a word short on every line. Sizing the type from the column width
     makes it break the same way on every phone, at a size chosen so each line runs out to the margin.
     (The column is the viewport less the 20px gutters.) */
  .intro {
    --intro-size: clamp(13.5px, calc((100vw - 40px) * 0.0414), 17px);
  }

  .intro p,
  .intro-cols p,
  .intro .link-list {
    font-size: var(--intro-size);
  }

  /* plain greedy wrapping: `pretty` evens the lines out, which pulls them back from the margin */
  .intro>div:first-child p {
    text-wrap: wrap;
  }

  .intro-cols {
    display: flex;
    flex-wrap: wrap;
  }

  .intro-stack {
    display: contents;
  }

  .intro-stack>div:first-child {
    flex: 1 1 0;
    min-width: 0;
  }

  .intro-stack>div:last-child {
    flex: 0 0 100%;
  }
}

.link-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 15px;
  line-height: 1.62;
  align-items: flex-start;
  white-space: nowrap;
}

/* ============ Project grid ============ */
.work {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pair-gap);
  padding: clamp(28px, 4vw, 44px) 0 clamp(40px, 5vw, 64px);
}

.card {
  display: block;
  color: inherit;
  flex-grow: 6;
  flex-shrink: 1;
  flex-basis: 0;
  min-width: min(var(--pair-min), 100%);
}

/* Alternating 60/40 rows: row 1 is 60/40, row 2 is 40/60, repeating */
.card:nth-child(4n+2),
.card:nth-child(4n+3) {
  flex-grow: 4;
}

.card.full {
  flex: 1 1 100%;
  min-width: 100%;
}

.thumb {
  position: relative;
  width: 100%;
  /* scaled from the original 16/11 (at 50% width) to 60% width, so row height matches the old even split */
  aspect-ratio: 19.2 / 11;
  border-radius: 5px;
  overflow: hidden;
  transition:
    transform .45s cubic-bezier(.2, .7, .2, 1),
    box-shadow .45s;
}

.card:nth-child(4n+2) .thumb,
.card:nth-child(4n+3) .thumb {
  /* scaled from the original 16/11 (at 50% width) to 40% width, so row height matches the old even split */
  aspect-ratio: 12.8 / 11;
}

.card.full .thumb {
  aspect-ratio: 16 / 6;
  min-height: 220px;
}

/* Thumbnail image or looping video; sits under the overlay */
.thumb-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hover states temporarily disabled — restore this block and .card:hover .overlay below
.card:hover .thumb {
  transform: translateY(-7px);
  box-shadow: 0 34px 60px -26px var(--shadow, rgba(20, 20, 30, .45));
}
*/

.overlay {
  position: absolute;
  inset: 0;
  background: var(--scrim, rgba(8, 10, 28, .34));
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .35s;
  display: flex;
  align-items: flex-end;
  padding: 24px;
}

/* Hover states temporarily disabled
.card:hover .overlay {
  opacity: 1;
}
*/

.overlay span {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: #fff;
}

.caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 20px;
  margin-top: 16px;
}

.caption .title {
  font-family: var(--serif);
  font-size: 20px;
}

.caption .meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--muted-2);
}

/* Per-project hover shadow and scrim colours; the art itself is the .thumb-media element in the HTML */
.t-coinbase-trading {
  /* matches the video's own background so its square frame blends into the wider card */
  background: #090b0d;
  --shadow: rgba(31, 50, 120, .6);
}

.t-coinbase-trading .thumb-media {
  object-fit: contain;
}

.t-coinbase-gains {
  --shadow: rgba(120, 120, 160, .45);
  --scrim: rgba(20, 18, 40, .28);
}

.t-square-retail {
  --shadow: rgba(200, 90, 90, .5);
  --scrim: rgba(40, 10, 10, .3);
}

.t-datadog-dx {
  --shadow: rgba(30, 20, 70, .6);
  --scrim: rgba(8, 10, 28, .42);
}

.t-shopify-stores {
  --shadow: rgba(90, 150, 110, .5);
  --scrim: rgba(15, 40, 25, .28);
}

/* ============ Footer ============ */
.site-footer {
  padding: clamp(20px, 3vw, 32px) 0 clamp(47px, 5.85vw, 70px);
}

/* Mascots and scroll, painted by drollery.js, which also sets the height to suit the width */
.drollery {
  display: block;
  width: 100%;
  max-width: 392px;
  margin: 0 auto;
}