/*
 * type.css — the resume's type system for the work pages: headlines in Instrument Serif, reading text in Geist, small labels,
 * dates and meta in Geist Mono; ink and greys. Turned on with <body class="rt"> (fonts are loaded by each page).
 */
  body.rt { --c-ink: #141416; --c-body: #4a4a50; --c-muted: #8c8c93; --c-faint: #b7b7bd; --c-line: #ececee;
    --c-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif; --c-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace; --c-serif: "Instrument Serif", Georgia, serif;
    font-family: var(--c-sans); color: var(--c-body); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }
  body.rt .wp-top { font-family: var(--c-sans); font-size: 13.5px; }
  body.rt .cs-kicker { margin-bottom: 18px; font-family: var(--c-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
  body.rt .cs-head h1 { font-family: var(--c-serif); font-weight: 400; font-size: clamp(42px, 6vw, 68px); line-height: .98; letter-spacing: -.015em; color: var(--c-ink); text-wrap: balance; }
  body.rt .cs-lede { margin-top: 18px; font-size: clamp(16px, 1.8vw, 18px); line-height: 1.6; color: var(--c-body); max-width: 36em; }
  body.rt .cs-meta { border-color: var(--c-line); }
  body.rt .cs-meta dt { margin-bottom: 6px; font-family: var(--c-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
  body.rt .cs-meta dd { font-size: 14.5px; line-height: 1.45; color: var(--c-ink); }
  body.rt .a-sec h2 { font-family: var(--c-sans); font-weight: 500; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; letter-spacing: -.025em; color: var(--c-ink); }
  body.rt .a-soft { color: var(--c-faint); font-weight: 400; }
  body.rt .a-sec h3 { font-family: var(--c-sans); font-weight: 500; font-size: 17px; letter-spacing: -.015em; color: var(--c-ink); }
  body.rt .a-text { font-size: 16px; line-height: 1.7; color: var(--c-body); }
  body.rt .a-text b, body.rt .a-text em { font-weight: 500; font-style: normal; color: var(--c-ink); }
  body.rt .a-card b { font-family: var(--c-sans); font-weight: 500; font-size: 15.5px; letter-spacing: -.01em; color: var(--c-ink); }
  body.rt .a-card span { font-size: 14px; line-height: 1.55; color: var(--c-muted); }
  body.rt .a-card small { display: block; margin-bottom: 6px; font-family: var(--c-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--c-muted); }
  body.rt .a-rows { border-color: var(--c-line); } body.rt .a-rows > div { border-color: var(--c-line); }
  body.rt .a-rows dt { font-weight: 500; font-size: 14.5px; color: var(--c-ink); }
  body.rt .a-rows dd { font-size: 14.5px; line-height: 1.6; color: var(--c-muted); }
  body.rt .a-pull { padding-left: 24px; border-left: 1px solid var(--c-ink); font-family: var(--c-serif); font-size: clamp(24px, 2.8vw, 30px); line-height: 1.25; letter-spacing: -.005em; color: var(--c-ink); }
  body.rt .a-pull span { margin-bottom: 10px; font-family: var(--c-mono); font-size: 10.5px; font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
  body.rt .a-label, body.rt .a-note { font-family: var(--c-sans); font-style: normal; font-size: 13.5px; color: var(--c-muted); }
  body.rt .a-label { font-family: var(--c-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
  body.rt .a-scroll { font-family: var(--c-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
  body.rt .cs-next span { font-family: var(--c-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
  body.rt .cs-next a { font-family: var(--c-sans); font-weight: 500; font-size: 20px; letter-spacing: -.02em; }
  body.rt .wp-foot { font-family: var(--c-serif); color: var(--c-muted); }

/* bits only some case studies use */
body.rt .a-flow p { font-size: 15px; color: var(--c-ink); }
body.rt .a-answer { font-size: 16px; line-height: 1.65; color: var(--c-body); } body.rt .a-answer b { font-weight: 500; color: var(--c-ink); }
body.rt .a-hand { font-family: var(--c-serif); font-style: normal; font-size: clamp(22px, 2.6vw, 26px); color: var(--c-ink); }
body.rt .a-steps li, body.rt .a-list li { font-size: 15px; color: var(--c-body); }
body.rt .a-steps li::before { font-family: var(--c-mono); font-size: 10.5px; color: var(--c-muted); }
body.rt .cs-hl { background: linear-gradient(transparent 62%, #efe7dc 62%); }
body.rt .wp-top a, body.rt .wp-top span { font-family: var(--c-sans); }
/* the list pages (Swiggy, Hike) */
body.rt .wp-head h1 { font-family: var(--c-serif); font-weight: 400; font-size: clamp(34px, 4.6vw, 48px); line-height: 1.02; letter-spacing: -.015em; color: var(--c-ink); }
body.rt .wp-head p { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--c-muted); }
body.rt .wl-name { font-family: var(--c-sans); font-weight: 500; font-size: 17px; letter-spacing: -.02em; color: var(--c-ink); }
body.rt .wl-side { font-family: var(--c-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
body.rt .wl-line { font-size: 13.5px; color: var(--c-muted); }
body.rt .wl-tag { font-family: var(--c-mono); font-size: 9.5px; letter-spacing: .1em; }
body.rt .site-end .end-sub { font-family: var(--c-sans); font-size: 15px; color: var(--c-muted); }

/* ---------- premium pass: structure, cards and frames (all case studies) ---------- */
/* each section opens with a small mono index number over a hairline, like a well-set report */
body.rt main.cs { counter-reset: sec; }
body.rt .a-sec { counter-increment: sec; margin-top: 104px; padding-top: 22px; border-top: 1px solid var(--c-line); }
body.rt .a-sec > h2::before { content: counter(sec, decimal-leading-zero); display: block; margin-bottom: 14px; font-family: var(--c-mono); font-size: 10.5px; font-weight: 400; letter-spacing: .14em; color: var(--c-faint); }
body.rt .a-sec > h2 { max-width: 22em; }
body.rt .a-sec h3 { margin-top: 52px; }
body.rt .cs-head { margin-top: 72px; }
body.rt figure.a-shot.cover, body.rt .a-cover { margin-top: 40px; }

/* the big statement between sections: set like a pull-quote, the second line quieter */
body.rt .cs-statement { margin: 104px 0 0; max-width: 18em; font-family: var(--c-serif); font-weight: 400; font-size: clamp(32px, 4.4vw, 48px); line-height: 1.08; letter-spacing: -.015em; color: var(--c-ink); text-wrap: balance; }
body.rt .cs-statement span { display: block; margin-top: 4px; font-style: italic; color: #a0927f; }

/* cards: clean paper-glass, a light falling from the top, a bright inner edge; no sheen, no outer shadow (they're squircle-clipped) */
body.rt .a-card { padding: 20px 22px 22px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #f6f1ea, #f1eadf) !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(80, 55, 30, .06), inset 0 -18px 30px -24px rgba(80, 55, 30, .12) !important; }
body.rt .a-card b + span { margin-top: 8px; }
body.rt .a-grid { gap: 14px; margin-top: 26px; }
/* three cards stay three across (no orphan) until the screen is genuinely narrow */
body.rt .a-grid:has(> :nth-child(3):last-child) { --cols: 3; }
@media (max-width: 640px) { body.rt .a-grid:has(> :nth-child(3):last-child) { --cols: 1; } }

/* image frames and the cover: the same paper, generous radius, smoothed corners */
body.rt figure.a-shot { border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, #f5efe7, #efe7dc) !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(80, 55, 30, .06) !important; }
body.rt .a-cover img, body.rt .cs-img img { border-radius: 26px; }

/* term → explanation rows: a touch more air */
body.rt .a-rows > div { padding: 16px 0; }

/* the "play it" link becomes a real button */
body.rt .cs-try { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 12px 20px; border-radius: 16px; font-family: var(--c-sans); font-size: 15px; font-weight: 500;
  color: #fffaf3; background: linear-gradient(180deg, #2e2722, #1b1714); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
body.rt .cs-try .wl-arrow { opacity: .8; color: currentColor; width: 16px; }
body.rt .cs-try:hover { transform: translateY(-1px); } body.rt .cs-try:hover .wl-arrow { color: currentColor; }

/* the next-case link and the sign-off */
body.rt .cs-next { margin-top: 104px; border-color: var(--c-line); }

/* unfinished bits: highlighted on your Mac, hidden on the live site (whole blocks marked data-draft go too) */
body.rt mark.ph, body.rt [data-draft] { display: none !important; }
html.is-local body.rt mark.ph { display: inline !important; }
html.is-local body.rt [data-draft] { display: revert !important; }
html.is-local body.rt [data-draft]:is(div) { display: grid !important; }
/* impact cards: the result itself is the headline */
body.rt #impact .a-card b { font-family: var(--c-serif); font-weight: 400; font-size: clamp(28px, 3.2vw, 36px); line-height: 1.05; letter-spacing: -.015em; }
body.rt #impact .a-card b + span { margin-top: 10px; }
body.rt .site-end.has-notes { margin-bottom: 0; }
body.rt .a-label.a-why-label { font-size: 16px; letter-spacing: .14em; color: var(--c-body); }

/* roomy: more breathing space for image-heavy studies (the AOV one), in the spirit of the Hike study */
body.rt main.roomy .a-sec { margin-top: 128px; padding-top: 26px; }
body.rt main.roomy .cs-statement { margin-top: 128px; }
body.rt main.roomy .a-sec > h2 + * { margin-top: 30px; }
body.rt main.roomy .a-text + .a-text { margin-top: 16px; }
body.rt main.roomy :is(figure.a-shot, .a-grid, .a-rows, .a-pull) + :is(.a-text, .a-note, .a-answer) { margin-top: 36px; }
body.rt main.roomy .a-text + :is(figure.a-shot, .a-grid, .a-rows, .a-hand) { margin-top: 36px; }
body.rt main.roomy figure.a-shot + figure.a-shot { margin-top: 44px; }
body.rt main.roomy :is(.a-grid, figure.a-shot, .a-pull, .a-text, .a-answer, .a-rows, .a-note) + h3 { margin-top: 80px; }
body.rt main.roomy h3 + :is(.a-text, .a-answer) { margin-top: 12px; }
body.rt main.roomy :is(.a-answer, .a-text, figure.a-shot, .a-grid) + .a-label { margin-top: 52px; }
body.rt main.roomy .a-label + :is(figure.a-shot, .a-grid) { margin-top: 16px; }
body.rt main.roomy figure.a-shot + .a-pull, body.rt main.roomy .a-pull + figure.a-shot { margin-top: 56px; }
body.rt main.roomy .a-grid { --gap: 18px; gap: 18px; }