/* Shared type hierarchy. Loaded last so page components use one scale. */
:root{
  --type-h1:32px;
  --type-h2:24px;
  --type-h3:20px;
  --type-h4:18px;
  --type-h5:16px;
  --type-h6:14px;
  --type-body:16px;
  --type-label:14px;
}
body.notebook{font-size:var(--type-body);line-height:1.7}
body.notebook :is(h1,h2,h3,h4,h5,h6){color:var(--ink);font-weight:500}
body.notebook h1{font-size:var(--type-h1);line-height:1.25;letter-spacing:-.6px}
body.notebook h2{font-size:var(--type-h2);line-height:1.35;letter-spacing:-.35px}
body.notebook h3{font-size:var(--type-h3);line-height:1.4;letter-spacing:-.2px}
body.notebook h4{font-size:var(--type-h4);line-height:1.45}
body.notebook h5{font-size:var(--type-h5);line-height:1.5;font-weight:600}
body.notebook h6{font-size:var(--type-h6);line-height:1.5;font-weight:600}
body.notebook :is(.intro p,.feed-text,.chapter p,.project-entry>p:not(.project-meta),.cs-prose p,.cs-cols p,.cs-steps p,.cs-quote,.type-body){font-size:var(--type-body);line-height:1.7}
body.notebook :is(label,.eyebrow,.cs-label,.cs-meta,.cs-contents,.cs-frame figcaption,.cs-image-slot figcaption,.cs-image-slot__space>span,.cs-image-slot__space p,.project-meta,.note-meta,.feed-action,.inline-link,.type-label){font-size:var(--type-label);line-height:1.5}
body.notebook .cs-image-slot__space>strong{font-size:var(--type-h4);line-height:1.45}
/* Preserve compact headings within the fixed-size chat panel. */
body.notebook .rc-head h2{font-size:var(--type-h5);line-height:1.4}
/* Let larger labels wrap instead of overflowing narrow artwork and cards. */
.card-label,.card-foot{white-space:normal}
.curiosity-grid>*{min-width:0}
.art-caption{letter-spacing:.3px;padding-inline:4px;line-height:1.3}
.tool-chip{max-width:120px;line-height:1.2}
.notebook-footer{flex-wrap:wrap}
.notebook-footer nav{flex-wrap:wrap;max-width:100%}
/* Homepage components keep their own compact sizes; the scale above is for long-form pages */
body.notebook .intro h1{font-size:25px;line-height:1.4;letter-spacing:-.6px}
body.notebook .section-title h2{font-size:var(--type-h3);line-height:1.4;font-weight:500;letter-spacing:-.2px}
body.notebook .chapter h3,
body.notebook .curiosity h3{font-size:var(--type-h5);line-height:1.5;font-weight:500}
@media(max-width:600px){body.notebook .intro h1{font-size:23px}}

/* ── One look across every page, matching the homepage ───────────────── */
/* footer: copyright left, links right, on one line within the 600px column */
.notebook-footer{column-gap:12px}
.notebook-footer nav{gap:12px}
/* page titles use the homepage headline size; the case study keeps its long-form scale */
body.notebook:not(.page-cs) main h1{font-size:25px;line-height:1.4;letter-spacing:-.6px;font-weight:500}
/* section headings match the homepage's section titles */
body.notebook:not(.page-cs) main h2{font-size:var(--type-h3);line-height:1.4;letter-spacing:-.2px;font-weight:500}
/* eyebrow labels: quiet sentence case, like the case study labels */
body.notebook .eyebrow{text-transform:none;letter-spacing:0;font-size:var(--type-label);font-weight:400;color:var(--quiet)}
/* buttons: the same soft pill used by the chat chips */
body.notebook main :is(.btn,.btn-primary,.btn-secondary){display:inline-flex;align-items:center;gap:6px;min-height:0;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:500 14px/1.4 Runde,Arial,sans-serif;box-shadow:none;transition:border-color .18s,background .18s}
body.notebook main :is(.btn,.btn-primary,.btn-secondary):hover{border-color:var(--quiet);background:var(--wash);transform:none}
/* form fields */
body.notebook main :is(input:not([type=checkbox]):not([type=radio]),textarea,select){border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:16px/1.5 Runde,Arial,sans-serif;padding:10px 14px;box-shadow:none}
body.notebook main :is(input,textarea,select):focus{outline:none;border-color:var(--quiet)}
body.notebook main label{color:var(--quiet)}
/* Links pick up the paper plane's purple on hover (cards and the name logo keep their own hover) */
:root{--plane:#5A3DA8}
:root[data-theme=dark]{--plane:#B29BE8}
body.notebook a{transition:color .18s,text-decoration-color .18s}
body.notebook a:not(.site-name):not(.curiosity):not(.rc-tile):not(.skip-link):not(.list-cell):not(.outro-cta):hover{color:var(--plane);text-decoration-color:var(--plane)}
/* the dot after "Rahul Sharma" in the header shares the link-hover purple */
body.notebook .name-dot{color:var(--plane)}
/* Page to page: the old page fades out and the new one fades in with a slight rise, while the header stays
   perfectly still, so moving around feels like one app (Chrome, Edge, Safari 18.2+; others just navigate) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .2s ease both}
::view-transition-new(root){animation:vt-in .36s cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
.notebook-header{view-transition-name:site-header}
/* the theme switch's circle reveal works on the whole page at once, so the header joins it there */
html.theme-wipe .notebook-header{view-transition-name:none}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}