:root{
  --paper:#FBFBF9;--ink:#16161A;--ink-2:#3A3A40;--red:#D2232A;--blue:#2F5BD3;--margin:#F2B8B8;--grey:#77767A;--hi:#FFE27A;--rule:#E6E4DE;--sheet:#FFFFFF;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --pen:"Kalam","Segoe Print","Bradley Hand",cursive;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --maxw:1240px;--pad:clamp(20px,5vw,64px);--mw:clamp(200px,22vw,280px);--gap:clamp(32px,4.5vw,64px);
  --p-ceo:url(/images/ceo.jpg);--p-kiwi:url(/images/kiwi.jpg);--p-mihir:url(/images/mihir.jpg);--p-aagam:url(/images/aagam.jpg);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{text-wrap:balance}
p{margin:0}
a{color:inherit}
::selection{background:var(--hi);color:var(--ink)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
[id]{scroll-margin-top:96px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;font-family:var(--mono);font-size:13px;text-decoration:none}
.skip:focus{top:12px}
html:not(.is-dry) .only-dry,html.is-dry .only-wet{display:none!important}
.page[hidden]{display:none}

/* opening animation: the name goes through two drafts, then files itself into the top bar */
#intro{position:fixed;inset:0;z-index:100;background:var(--paper);display:grid;place-items:center}
html:not(.intro) #intro{display:none}
html.intro{overflow:hidden}
html.intro .brand,html.intro main,html.intro .foot{opacity:0}
.intro-name{position:relative;font-weight:500;font-size:clamp(30px,8.4vw,120px);letter-spacing:-.015em;line-height:1;white-space:nowrap;transform-origin:0 0;font-optical-sizing:none}
.intro-lbl{position:absolute;left:0;bottom:calc(100% + .35em);font-family:var(--mono);font-size:max(12px,.13em);letter-spacing:.08em;color:var(--grey)}
.intro-st{position:absolute;left:-3%;right:-3%;top:55%;height:max(3px,.055em);background:var(--red);border-radius:99px;transform-origin:left center;rotate:-3deg;scale:0 1}
.intro-skip{position:absolute;right:max(16px,3vw);bottom:max(16px,3vw);font-family:var(--mono);font-size:12px;color:var(--grey);background:none;border:1px solid var(--rule);border-radius:99px;padding:8px 14px;cursor:pointer}

/* top bar */
.top{position:sticky;top:0;z-index:40;background:rgba(251,251,249,.93);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.top-in{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);height:72px;display:flex;align-items:center;gap:28px}
.brand{font-size:22px;font-weight:500;letter-spacing:-.015em;line-height:1;text-decoration:none;white-space:nowrap;font-optical-sizing:none}
.nav-wrap{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav{display:flex;gap:26px;font-family:var(--mono);font-size:13px;letter-spacing:.03em}
.nav a{text-decoration:none;padding-block:6px}
.nav a:hover,.nav a[aria-current="page"]{text-decoration:underline wavy var(--red) 1.5px;text-underline-offset:7px}
.hire-link{position:relative;font-family:var(--pen);font-weight:700;font-size:20px;color:var(--red);text-decoration:none;padding:3px 14px;white-space:nowrap}
.hire-link svg{position:absolute;left:-8px;top:-7px;width:calc(100% + 16px);height:calc(100% + 14px);overflow:visible;pointer-events:none}
.hire-link path{fill:none;stroke:var(--red);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;transform-origin:center;transition:transform .3s}
.hire-link:hover path{transform:rotate(-2deg) scale(1.03)}
.dry-toggle{display:inline-flex;align-items:center;gap:9px;background:none;border:0;padding:6px 0;font-family:var(--mono);font-size:12px;color:var(--grey);cursor:pointer}
.dry-toggle .sw{position:relative;width:36px;height:20px;border-radius:99px;background:#D9D7D0;transition:background .2s}
.dry-toggle .sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s}
.dry-toggle[aria-pressed="true"]{color:var(--ink)}
.dry-toggle[aria-pressed="true"] .sw{background:var(--ink)}
.dry-toggle[aria-pressed="true"] .sw::after{transform:translateX(16px)}
.menu-btn{display:none;background:none;border:1px solid var(--ink);border-radius:99px;padding:7px 14px;font-family:var(--mono);font-size:12px;color:var(--ink);cursor:pointer}
@media (max-width:860px){
  .top-in{gap:16px;height:64px}
  .brand{font-size:20px}
  .dry-toggle{margin-left:auto}
  .menu-btn{display:inline-flex}
  .nav-wrap{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:flex-start;gap:18px;margin:0;padding:18px var(--pad) 26px;background:var(--paper);border-bottom:1px solid var(--rule)}
  .top.open .nav-wrap{display:flex}
  .nav{flex-direction:column;gap:14px;font-size:15px}
  .hire-link{margin-left:10px}
}
@media (max-width:420px){.dry-toggle .lbl-x{display:none}}

/* the notebook */
.book{position:relative;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.book::before{content:"";position:absolute;top:0;bottom:0;right:calc(var(--pad) + var(--mw) + var(--gap) / 2);width:2px;background:var(--margin);pointer-events:none}
.row{display:grid;grid-template-columns:minmax(0,1fr) var(--mw);column-gap:var(--gap);align-items:start}
.row>.note,.note-stack{grid-column:2}
.wide{grid-column:1/-1;position:relative;z-index:1;background:var(--paper)}
.sec{padding-block:clamp(56px,7vw,96px);border-top:1px solid var(--rule)}
.sec-head{margin-bottom:26px}
.page-head{padding-block:clamp(56px,8vw,110px) clamp(40px,5vw,64px)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin-bottom:12px}
.h1{position:relative;font-size:clamp(46px,7vw,92px);font-weight:500;letter-spacing:-.03em;line-height:1;margin:0}
.h2{font-size:clamp(32px,4.2vw,52px);font-weight:500;letter-spacing:-.02em;line-height:1.05;margin:0}
[data-reveal]{position:relative;width:fit-content;max-width:100%}
.pst{position:absolute;left:-2%;right:-2%;top:52%;height:max(3px,.06em);background:var(--red);border-radius:9px;transform-origin:left center;rotate:-2deg;pointer-events:none}
.lede{font-size:clamp(22px,2.4vw,28px);line-height:1.35;max-width:34ch;margin-top:26px}
.body{font-size:clamp(20px,2vw,23px);line-height:1.55;max-width:60ch}
.small{font-size:15px;color:var(--grey);margin-top:16px}
.note{font-family:var(--pen);font-weight:700;color:var(--red);font-size:21px;line-height:1.25;padding-top:.3em;transform:rotate(-1.5deg);transform-origin:left top}
.note.pencil{color:var(--grey);font-weight:400}
html.ink .note{opacity:0;translate:0 6px;transition:opacity .55s ease,translate .55s ease}
html.ink .note.inked{opacity:1;translate:0 0}
html.is-dry .note{display:none}

/* buttons and links */
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:32px}
.btn{display:inline-flex;align-items:center;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:14px;letter-spacing:.02em;line-height:1;padding:17px 22px;border:0;border-radius:4px;text-decoration:none;cursor:pointer;transition:background .2s,transform .2s}
.btn:hover{background:#2E2E35;transform:translateY(-1px)}
.pen-link{font-family:var(--pen);font-weight:700;font-size:23px;color:var(--red);text-decoration:underline wavy var(--red) 1.5px;text-underline-offset:7px;background:none;border:0;padding:0;cursor:pointer}
.pen-link:hover{text-decoration-thickness:2.5px}

/* hero and the pen edits */
.hero{padding-block:clamp(48px,8vw,110px) clamp(56px,8vw,96px)}
.hero-txt{container-type:inline-size;position:relative}
.hero .lede{margin-top:0}
.hero-r2{margin-top:26px}
.hero-r3{margin-top:30px}
.hero-r3 .ctas{margin-top:0}
.note-stack{display:grid;gap:12px;align-content:start}
.name{position:relative;font-size:clamp(34px,12.6cqi,104px);font-weight:500;letter-spacing:-.03em;line-height:1;margin:0;padding-top:.62em;white-space:nowrap}
.edit{position:relative;display:inline-block}
.strike{position:relative;color:var(--grey)}
.strike::after{content:"";position:absolute;left:-5%;right:-5%;top:55%;height:max(3px,.06em);background:var(--red);border-radius:99px;transform:rotate(-4deg);transform-origin:left center}
.ins{position:absolute;left:50%;bottom:78%;transform:translateX(-46%) rotate(-5deg);font-family:var(--pen);font-weight:700;color:var(--red);font-size:.56em;letter-spacing:0;line-height:1;white-space:nowrap}
.ins-hero::after{content:"Cheesy"}
.co{position:relative;display:inline-block}
.co svg{position:absolute;left:-14%;top:-10%;width:128%;height:122%;overflow:visible;pointer-events:none}
.co path{fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.hero .strike{transition:color .45s ease .2s}
html.hero-wait .hero .strike{color:var(--ink)}
html.hero-wait .hero .strike::after{transform:rotate(-4deg) scaleX(0)}
html.hero-wait .hero .ins{opacity:0}
html.hero-wait .co path{stroke-dashoffset:1}
html.hero-go .hero .strike::after{animation:heroStrike .52s cubic-bezier(.65,0,.35,1) both}
html.hero-go .hero .ins{animation:heroWrite .9s .6s cubic-bezier(.2,.7,.2,1) both}
html.hero-go .co path{animation:coDraw .7s 1.55s cubic-bezier(.65,0,.35,1) both}
@keyframes heroStrike{from{transform:rotate(-4deg) scaleX(0)}to{transform:rotate(-4deg) scaleX(1)}}
@keyframes heroWrite{from{clip-path:inset(-40% 100% -40% 0);opacity:.4;translate:0 6%}to{clip-path:inset(-40% 0 -40% 0);opacity:1;translate:0 0}}
@keyframes coDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.dry-line{position:absolute;top:.35em;left:0;margin:0;font-family:var(--mono);font-size:13px;color:var(--grey)}
.edit.inline{display:inline}
.edit.inline .ins{position:static;transform:none;display:inline;font-size:1.08em;margin-left:.2em}
.edit.inline .strike::after{left:-2%;right:-2%;transform:rotate(-2deg)}
.todo{list-style:none;margin:0;padding:.3em 0 0;font-size:19px}
.todo li{position:relative;padding-left:1.6em;line-height:1.55}
.todo li::before{content:"";position:absolute;left:0;top:.3em;width:.95em;height:.95em;border:2px solid var(--red);border-radius:3px}
.todo li.done::after{content:"";position:absolute;left:.22em;top:.1em;width:.45em;height:.85em;border:solid var(--red);border-width:0 3px 3px 0;transform:rotate(40deg)}
.todo li.done{text-decoration:line-through;text-decoration-color:rgba(210,35,42,.55);text-decoration-thickness:2px}
.todo a{color:inherit;text-decoration:underline wavy var(--red) 1.5px;text-underline-offset:5px}
html.is-dry .strike::after,html.is-dry .co svg{display:none}
html.is-dry .edit:not([data-keep="new"]) .strike{color:inherit}
html.is-dry .edit:not([data-keep="new"]) .ins{display:none}
html.is-dry .edit[data-keep="new"] .strike{display:none}
html.is-dry .edit[data-keep="new"] .ins{font-family:inherit;font-weight:inherit;font-size:inherit;color:inherit;margin:0}

/* who we are, numbers, contents */
.who-p{font-size:clamp(24px,2.9vw,36px);line-height:1.3;letter-spacing:-.01em;max-width:30ch}
/* who we are: the five things we do, with the red pen circling one at a time */
.does{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin:0 -10px;padding-top:22px;font-size:clamp(26px,3.6vw,42px);letter-spacing:-.02em;line-height:1.3}
/* each word has room for its circle, so the row sits 10px wider; the rule stays on the column */
.does::before{content:"";position:absolute;top:0;left:10px;right:10px;border-top:1px solid var(--ink)}
.does .w{position:relative;padding:0 10px}
.does .dot{color:var(--grey)}
.pen-ring{position:absolute;overflow:visible;pointer-events:none}
.pen-ring path{fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
html.is-dry .pen-ring{display:none}
.does-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;margin-top:10px}
.does-foot .note{font-size:19px}
.does-link{font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.does-link:hover{color:var(--red)}
.toc{list-style:none;margin:0;padding:0}
.toc a{display:flex;align-items:baseline;gap:14px;padding:18px 0;border-top:1px solid var(--rule);text-decoration:none}
.toc li:last-child a{border-bottom:1px solid var(--rule)}
.toc-t b{display:block;font-weight:500;font-size:clamp(24px,2.8vw,32px);line-height:1.15}
.toc-t span{display:block;font-size:16px;color:var(--ink-2);margin-top:2px}
.toc-dots{flex:1;min-width:24px;border-bottom:2px dotted #C9C7C0;transform:translateY(-6px)}
.toc-p{flex:none;font-family:var(--mono);font-size:13px;color:var(--grey);padding:5px 9px;border:1.5px solid transparent;border-radius:50%;transition:border-color .25s,color .25s}
.toc a:hover .toc-p{border-color:var(--red);color:var(--red)}
.toc a:hover b{text-decoration:underline wavy var(--red) 1.5px;text-underline-offset:6px}

/* practice rewrites */
.winframe{display:block;position:relative;margin:22px 0 0;border:1px solid rgba(0,0,0,.1);border-radius:11px;overflow:hidden;text-decoration:none;box-shadow:0 1px 1px rgba(0,0,0,.04),0 16px 38px rgba(32,28,20,.16);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.winframe:hover{transform:translateY(-3px);box-shadow:0 1px 1px rgba(0,0,0,.04),0 22px 48px rgba(32,28,20,.2)}
.wf-tabs{display:flex;align-items:flex-end;height:42px;padding:9px 12px 0;background:#E6E3DD}
.wf-lights{display:flex;flex:none;align-items:center;gap:8px;height:24px;margin-right:14px}
.wf-lights span{width:11px;height:11px;border-radius:50%;background:#FF5F57}
.wf-lights span:nth-child(2){background:#FEBC2E}
.wf-lights span:nth-child(3){background:#28C840}
.wf-tab{display:flex;align-items:center;height:33px;min-width:0;max-width:62%;padding:0 14px;border-radius:8px 8px 0 0;background:var(--paper);font-family:var(--mono);font-size:12px;color:#55504A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-bar{display:flex;align-items:center;height:36px;padding:0 12px;background:var(--paper);border-bottom:1px solid rgba(0,0,0,.09)}
.wf-url{flex:1;min-width:0;height:24px;display:flex;align-items:center;padding:0 12px;border-radius:6px;background:#EFEDE8;font-family:var(--mono);font-size:12px;color:#8A857C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-shot{display:block;position:relative;line-height:0}
.wf-shot img{display:block;width:100%;height:auto}
.shot-cue{position:absolute;right:14px;bottom:14px;background:var(--red);color:#fff;font-family:var(--pen);font-weight:700;font-size:17px;line-height:1;padding:11px 16px;border-radius:2px}
@media(max-width:560px){.wf-tabs{height:38px;padding:7px 10px 0}.wf-tab{height:31px;padding:0 11px;font-size:11px}.wf-bar{height:32px;padding:0 10px}.wf-url{font-size:11px;padding:0 10px}.shot-cue{right:10px;bottom:10px;font-size:15px;padding:9px 13px}}
.shot-cap{font-family:var(--mono);font-size:12px;color:var(--grey);margin-top:10px}
.sp-links{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:9px;max-width:52ch}
.shelf{display:grid;gap:clamp(22px,3vw,30px);margin-top:4px}
.shelf-item{padding-top:20px;border-top:1px solid var(--rule)}
.shelf-item h3{margin:0;font-weight:500;font-size:clamp(22px,2.4vw,28px);line-height:1.2}
.shelf-item p{margin:8px 0 0;max-width:46ch}
.shelf-stage{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
@media(min-width:760px){.shelf{grid-template-columns:1fr 1fr;column-gap:44px}}
.rw{padding-block:24px;border-top:1px solid var(--rule)}
.rw-label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-bottom:10px}
.rw-before{width:fit-content;max-width:100%;max-height:5em;overflow:hidden;font-size:clamp(21px,2.4vw,28px);line-height:1.3;color:var(--grey);text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px;transition:opacity .45s,filter .45s,max-height .5s .2s,margin .5s .2s}
.rw-before.gone{opacity:0!important;max-height:0;margin:0;pointer-events:none}
.rw-after{font-size:clamp(28px,3.6vw,44px);font-weight:500;letter-spacing:-.015em;line-height:1.1;margin-top:10px}
.rw.done .rw-after::after{content:" \2713";font-family:var(--pen);color:var(--red);font-size:.8em}
.rw-time{font-family:var(--mono);font-size:12.5px;color:var(--grey);margin-top:12px}
.rw-hint{font-family:var(--mono);font-size:12.5px;color:var(--grey);margin-top:18px}
.h-touch{display:none}
@media (hover:none){.h-mouse{display:none}.h-touch{display:inline}}

/* services */
.svc{padding-block:20px;border-top:1px solid var(--rule)}
.svc h3{font-size:clamp(24px,2.6vw,31px);font-weight:500;letter-spacing:-.01em;margin:0}
.svc h3+p{color:var(--ink-2);margin-top:4px}
.svc .note{padding-top:.5em}
.also{font-size:clamp(22px,2.4vw,28px);margin-top:30px}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:18px;padding-block:18px;border-top:1px solid var(--rule)}
.steps li::before{counter-increment:s;content:counter(s);grid-row:span 2;width:40px;height:40px;border:2px solid var(--red);border-radius:50%;display:grid;place-items:center;font-family:var(--pen);font-weight:700;font-size:21px;color:var(--red);line-height:1}
.steps b{font-weight:500;font-size:clamp(22px,2.4vw,27px);line-height:1.2}
.steps span{color:var(--ink-2)}
.fp-row{padding-block:14px;border-top:1px solid var(--rule)}
.big{display:flex;gap:14px;align-items:flex-start;font-size:clamp(22px,2.6vw,30px);line-height:1.25}
.tick{flex:none;width:.9em;height:.9em;margin-top:.14em}
.tick path{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
html.ink .tick path{stroke-dashoffset:1;transition:stroke-dashoffset .6s ease .15s}
html.ink .tick.inked path{stroke-dashoffset:0}

/* meet the team: ID cards on lanyards */
.badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 26px;padding-top:4px;border-top:3px solid var(--ink)}
.hang{position:relative;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;padding-top:var(--strap)}
.hang::before{content:"";position:absolute;top:0;left:50%;width:12px;margin-left:-6px;height:calc(var(--strap) + 8px);background:var(--red)}
.hang::after{content:"";position:absolute;top:calc(var(--strap) - 8px);left:50%;width:24px;margin-left:-12px;height:12px;border-radius:3px;background:#B9B7B0}
.hang:hover{animation:swing 1.1s ease-in-out}
@keyframes swing{0%{rotate:0deg}25%{rotate:3.5deg}55%{rotate:-2.5deg}80%{rotate:1deg}100%{rotate:0deg}}
.badge{position:relative;width:100%;max-width:230px;background:var(--sheet);border:1px solid var(--rule);border-radius:12px;overflow:hidden;box-shadow:0 12px 26px rgba(22,22,26,.09)}
.band{position:relative;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:10px;letter-spacing:.12em;padding:20px 10px 8px;text-align:center}
.band::before{content:"";position:absolute;top:7px;left:50%;width:34px;margin-left:-17px;height:6px;border-radius:9px;background:var(--paper)}
.ph{aspect-ratio:4/5;width:100%;background:#CFCDC6 var(--img) center/cover no-repeat;filter:grayscale(1) contrast(1.06);border:1px solid var(--ink)}
.badge .ph{aspect-ratio:1/1;background-position:50% 30%;border:0}
.b-body{padding:12px 14px 14px}
.role{display:block;font-weight:500;font-size:18px;line-height:1.2}
.who{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--grey);margin-top:2px}
.was{display:block;font-size:13px;line-height:1.55;color:var(--grey);margin-top:5px}
.was .strike{white-space:nowrap;margin-right:.35em}
.was .strike::after{left:-2%;right:-2%;top:52%;height:2px;transform:rotate(-1.5deg)}
.was b{font-weight:500;color:var(--ink);white-space:nowrap}
/* the real job, kept apart from the jokes so clients can find it */
.dept{display:inline-block;margin-top:9px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--ink);border-radius:4px;padding:3px 7px}
.idl{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);margin-top:8px}
.code{height:22px;margin-top:10px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px,var(--ink) 8px 11px,transparent 11px 13px)}
.hang .note{max-width:230px;text-align:center;font-size:17px;padding-top:10px;transform-origin:center top}
.reports{font-family:var(--mono);font-size:13px;color:var(--grey);margin-top:36px;text-align:center}
/* the founder gets the first line to himself */
.boss{grid-column:1/-1;position:relative;display:flex;justify-content:center}
.boss .hang{width:230px}
.boss .side{position:absolute;left:calc(50% + 140px);top:336px;max-width:min(220px,calc(50% - 150px));font-size:17px;line-height:1.3;transform-origin:left top}
.solo{max-width:280px;margin:0}
.solo figcaption{padding-top:10px}
.crew{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px}
.crew .solo{max-width:none}
.crew .solo:first-child{grid-column:1/-1;width:calc((100% - 44px)/3)}
@media (max-width:760px){
  .badges{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 16px}
  .boss{flex-direction:column;align-items:center}
  .boss .hang{width:min(230px,100%)}
  .boss .side{position:static;max-width:230px;text-align:center;padding-top:16px}
  .badges>.hang:last-child{grid-column:1/-1}
  .badges>.hang:last-child>.badge,.badges>.hang:last-child>.note{max-width:calc(50% - 8px)}
  .crew{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .crew .solo:first-child{width:calc(50% - 8px)}
}

/* client notes, drafts */
.quote{margin:0}
.quote p{font-size:clamp(32px,4.4vw,54px);line-height:1.1;letter-spacing:-.02em}
.quote .u{text-decoration:underline var(--red) 3px;text-underline-offset:.12em;text-decoration-skip-ink:none}
html.is-dry .quote .u{text-decoration:none}
.quote footer{font-family:var(--mono);font-size:13px;color:var(--grey);margin-top:14px}
.drafts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:720px}
.draft{position:relative;aspect-ratio:3/4;background:var(--sheet);border:1px solid var(--rule);box-shadow:0 14px 30px rgba(22,22,26,.07)}
.draft:nth-child(odd){rotate:-1.2deg}
.draft:nth-child(even){rotate:1.4deg}
.draft::before{content:"";position:absolute;inset:16% 13% 22%;background:repeating-linear-gradient(to bottom,#E4E2DB 0 6px,transparent 6px 20px);-webkit-mask-image:linear-gradient(90deg,#000 55%,rgba(0,0,0,.35));mask-image:linear-gradient(90deg,#000 55%,rgba(0,0,0,.35))}
.stamp{position:absolute;left:50%;top:48%;translate:-50% -50%;rotate:-14deg;border:3px solid var(--red);color:var(--red);font-family:var(--mono);font-weight:500;font-size:clamp(14px,1.6vw,19px);letter-spacing:.24em;padding:5px 10px 5px 14px;background:rgba(251,251,249,.85)}
@media (max-width:560px){.drafts{grid-template-columns:repeat(2,minmax(0,1fr))}.draft:nth-child(3){display:none}}

/* fill-in-the-blanks form */
.fill{font-size:clamp(26px,3.4vw,40px);line-height:1.75;letter-spacing:-.01em;max-width:30ch}
.fill input{font-family:var(--pen);font-weight:700;font-size:.92em;color:var(--red);background:transparent;border:0;border-bottom:2px solid var(--ink);border-radius:0;padding:0 6px;margin:0 4px;width:8ch;min-width:4ch;max-width:100%;line-height:1.2}
.fill input::placeholder{color:#B5B3AC;opacity:1}
.fill input:focus{outline:none;border-bottom-color:var(--red);background:rgba(255,226,122,.45)}
.fill input[aria-invalid="true"]{border-bottom-color:var(--red);background:rgba(210,35,42,.06)}
.err{font-family:var(--mono);font-size:13px;color:var(--red);margin-top:12px;min-height:1.2em}
@media (max-width:640px){.fill{line-height:1.5}.fill input{display:block;width:100%!important;margin:6px 0 14px;padding:4px 2px}}

/* about, contact, 404 */
.beliefs,.facts{list-style:none;margin:0;padding:0}
.beliefs li,.facts li{font-size:clamp(22px,2.5vw,29px);line-height:1.3;padding-block:14px;border-top:1px solid var(--rule)}
.redact{display:inline-block;width:5.2em;height:.82em;background:var(--ink);vertical-align:-.06em;margin-left:.15em}
.alt{display:flex;flex-wrap:wrap;gap:10px 26px;font-family:var(--mono);font-size:14px;margin-top:8px}
.bad-url{font-family:var(--mono);font-size:15px;color:var(--grey);margin-bottom:22px;overflow-wrap:anywhere}
.bad-url span{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}

/* footer and toast */
.foot{border-top:1px solid var(--rule)}
.foot-in{max-width:var(--maxw);margin-inline:auto;padding:52px var(--pad) 60px;display:grid;gap:14px}
.foot-tag{font-size:clamp(24px,2.8vw,32px);font-style:italic;letter-spacing:-.01em}
.foot-joke{font-family:var(--mono);font-size:13px;color:var(--grey)}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 24px;font-family:var(--mono);font-size:13px;margin-top:10px}
.foot-links a,.alt a{text-decoration:none}
.foot-links a:hover,.alt a:hover{text-decoration:underline wavy var(--red) 1.5px;text-underline-offset:6px}
.copy{font-family:var(--mono);font-size:12px;color:var(--grey);margin-top:6px}
.toast{position:fixed;left:50%;bottom:24px;z-index:60;width:max-content;max-width:calc(100vw - 32px);translate:-50% 16px;opacity:0;pointer-events:none;font-family:var(--mono);font-size:13px;line-height:1.4;text-align:center;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:22px;transition:opacity .3s,translate .3s}
.toast.show{opacity:1;translate:-50% 0}

/* cursors: pencil, eraser, pen (computers only, off in Dry mode) */
html.cur:not(.is-dry),html.cur:not(.is-dry) body{cursor:var(--c-pencil),auto}
html.cur:not(.is-dry) :is(a,button,[role="button"],label){cursor:var(--c-pencil),pointer}
html.cur:not(.is-dry) .rw-before{cursor:var(--c-eraser),pointer}
html.cur:not(.is-dry) :is(.hire-link,a[href="/contact"],.pen-zone,.pen-zone *){cursor:var(--c-pen),pointer}
html.cur :is(input,textarea){cursor:text!important}

/* the tagline machine */
.machine{max-width:640px;border:1.5px solid var(--ink);border-radius:12px;background:var(--sheet);padding:clamp(18px,3vw,28px);box-shadow:6px 6px 0 var(--ink)}
.reels{display:grid;gap:10px}
.reel{display:flex;align-items:center;min-height:2.3em;overflow:hidden;border:1px solid var(--rule);border-radius:6px;background:var(--paper);padding:10px 16px;font-size:clamp(22px,2.8vw,32px);font-weight:500;letter-spacing:-.01em;line-height:1.15;transition:filter .15s,color .15s}
.reel.spinning{filter:blur(1.2px);color:var(--grey)}
.machine .ctas{margin-top:22px}

/* work: the outbox of cold mails */
.ob-count{font-family:var(--mono);font-size:12px;color:var(--grey);margin-top:12px}
.outbox{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:var(--sheet)}
.ob-list{position:relative;border-right:1px solid var(--rule);max-height:640px;overflow:auto;overscroll-behavior:contain}
.ob-item{position:relative;display:block;width:100%;text-align:left;font:inherit;color:var(--ink);background:var(--sheet);border:0;border-bottom:1px solid var(--rule);padding:13px 16px 13px 20px;cursor:pointer;transition:background .2s}
.ob-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);transform:scaleY(0);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.ob-item:hover{background:#F6F4EE}
.ob-item[aria-current="true"]{background:#F2F0EA}
.ob-item[aria-current="true"]::before{transform:scaleY(1)}
.ob-no{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.ob-sub{display:block;font-weight:500;font-size:16.5px;line-height:1.3;margin-top:3px}
.ob-read{padding:clamp(20px,3vw,34px);max-height:640px;overflow:auto;overscroll-behavior:contain}
.ob-to{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--grey)}
.ob-read h3{font-size:clamp(22px,2.6vw,30px);font-weight:500;letter-spacing:-.01em;line-height:1.15;margin:10px 0 18px}
.ob-body{white-space:pre-line;font-size:17.5px;line-height:1.65;max-width:58ch}
.ob-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px;padding-top:16px;border-top:1px solid var(--rule)}
.ob-nav span{font-family:var(--mono);font-size:12px;color:var(--grey);margin-right:auto}
.ghost{font-family:var(--mono);font-size:13px;line-height:1;background:none;color:var(--ink);border:1px solid var(--ink);border-radius:4px;padding:15px 18px;cursor:pointer}
.guj{font-family:"Noto Serif Gujarati","Shruti",var(--serif);line-height:1.6}
/* the brand kit page */
.bk-show{background:var(--sheet);border:1px solid var(--rule);border-radius:8px;padding:clamp(18px,3vw,40px);display:grid;place-items:center}
.bk-show img{width:100%;height:auto;max-width:760px}
.bk-show.tall img{max-width:300px}
.bk-cap{font-size:15.5px;color:var(--ink-2);margin-top:12px;max-width:62ch}
.bk-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;margin-top:26px;align-items:start}
.bk-links{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:20px}
.bk-links a{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-decoration:none;border:1px solid var(--rule);border-radius:99px;padding:8px 14px;transition:border-color .2s ease}
.bk-links a:hover{border-color:var(--ink)}
.bk-marks{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}
.bk-marks figure{margin:0;background:var(--sheet);border:1px solid var(--rule);border-radius:8px;padding:22px;text-align:center}
.bk-marks img{width:100%;max-width:120px;height:auto}
.bk-marks figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-top:12px}
.bk-swatches{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.bk-swatches li{display:grid;gap:4px}
.bk-swatches span{display:block;height:74px;border-radius:6px}
.bk-swatches b{font-weight:500;font-size:16px}
.bk-swatches code{font-family:var(--mono);font-size:11.5px;color:var(--grey)}
.bk-chapters{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.bk-chapters a{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:4px 26px;padding:15px 0;border-bottom:1px solid var(--rule);text-decoration:none;align-items:baseline}
.bk-chapters b{font-weight:500;font-size:18px}
.bk-chapters span{color:var(--ink-2);font-size:15.5px}
.bk-chapters a:hover b{text-decoration:underline wavy var(--red) 1.5px;text-underline-offset:5px}
.bk-note-small{font-family:var(--mono);font-size:11.5px;color:var(--grey);margin-top:14px}
@media (max-width:640px){.bk-chapters a{grid-template-columns:minmax(0,1fr)}}
/* links inside body copy */
.prose a,.also a,.ticks a,.price-note a,.faq dd a{text-decoration:underline;text-decoration-color:var(--margin);text-decoration-thickness:1.5px;text-underline-offset:3px}
.prose a:hover,.also a:hover,.ticks a:hover,.price-note a:hover,.faq dd a:hover{text-decoration-color:var(--red)}
/* service pages: what it costs, and the questions people ask first */
.price{margin:18px 0 0;border-top:1px solid var(--ink)}
.price div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;padding:13px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.price dt{font-size:17.5px}
.price dt small{display:block;font-family:var(--mono);font-size:11.5px;color:var(--grey);margin-top:3px;letter-spacing:.02em}
.price dd{margin:0;font-family:var(--mono);font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}
.price dd b{font-weight:500}
.price-note{font-size:16px;color:var(--ink-2);margin-top:16px;max-width:62ch}
.svc-more{font-family:var(--mono);font-size:12.5px;margin-top:9px}
.svc-more a{text-decoration:underline;text-decoration-color:var(--margin);text-decoration-thickness:1.5px;text-underline-offset:4px}
.svc-more a:hover{text-decoration-color:var(--red)}
.faq{margin:16px 0 0;border-top:1px solid var(--ink)}
.faq dt{font-weight:500;font-size:18.5px;padding-top:16px;letter-spacing:-.01em}
.faq dd{margin:7px 0 0;padding-bottom:16px;border-bottom:1px solid var(--rule);color:var(--ink-2);font-size:16.5px;max-width:64ch;line-height:1.6}
.ticks{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px;max-width:64ch}
.ticks li{position:relative;padding-left:26px;font-size:17px;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:3px;top:.5em;width:11px;height:6px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
.ticks b{font-weight:500;color:var(--ink)}
/* notes: the index and the pieces */
.nt-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.nt-list a{display:grid;grid-template-columns:120px minmax(0,1fr);gap:4px 26px;padding:18px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;align-items:baseline}
.nt-list a:hover .nt-t{text-decoration:underline wavy var(--red) 1.5px;text-underline-offset:6px}
.nt-d{font-family:var(--mono);font-size:11.5px;color:var(--grey);padding-top:5px}
.nt-t{font-size:clamp(20px,2.3vw,26px);font-weight:500;letter-spacing:-.015em;line-height:1.2}
.nt-b{grid-column:2;color:var(--ink-2);font-size:16.5px;margin-top:4px;max-width:62ch}
.nt-soon{font-family:var(--mono);font-size:13px;color:var(--grey);padding:18px 0;border-bottom:1px solid var(--rule)}
.nt-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.prose{max-width:64ch;font-size:18px;line-height:1.65}
.prose h2{font-size:clamp(22px,2.6vw,29px);font-weight:500;letter-spacing:-.015em;line-height:1.2;margin:38px 0 0}
.prose h3{font-size:20px;font-weight:500;margin:26px 0 0}
.prose p{margin-top:14px}
.prose ul,.prose ol{margin:14px 0 0;padding-left:22px;display:grid;gap:8px}
.prose li{padding-left:2px}
.prose b{font-weight:500}
.prose .pull{font-size:clamp(21px,2.4vw,27px);line-height:1.35;letter-spacing:-.015em;margin:30px 0;padding-left:20px;border-left:3px solid var(--red)}
@media (max-width:640px){.nt-list a{grid-template-columns:minmax(0,1fr)}.nt-b{grid-column:1}}
/* work: the chapters of the page */
.chap-toc{display:flex;flex-wrap:wrap;gap:9px 10px;margin-top:6px}
.chap-toc a{display:inline-flex;align-items:baseline;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--ink);border:1px solid var(--rule);border-radius:99px;padding:9px 15px;transition:border-color .2s ease}
.chap-toc a:hover{border-color:var(--ink)}
.chap-toc a span{font-size:10.5px;color:var(--grey)}
.ob-alt{margin-top:22px;padding-top:14px;border-top:1px dashed var(--rule)}
.ob-alt p{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.ob-alt ul{margin:8px 0 0;padding-left:18px;display:grid;gap:5px}
.ob-alt li{font-size:16.5px;line-height:1.35}
/* the fortnightly sheet for Rajula: a concept, set like newsprint */
.np{background:#F4F2EA;border:1px solid #E0DCCC;padding:clamp(20px,3.4vw,40px)}
.np-rail{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);border-bottom:2px solid var(--ink);padding-bottom:9px}
.np-h{font-size:clamp(26px,4vw,44px);font-weight:500;letter-spacing:-.025em;line-height:1.05;margin:20px 0 0;max-width:22ch}
.np-strap{font-size:clamp(19px,2.2vw,24px);margin-top:16px}
.np-en{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--grey);margin-top:6px}
.np-cols{margin-top:22px;column-count:2;column-gap:36px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.np-cols p{break-inside:avoid;margin:0 0 12px}
.np-block{margin-top:30px;padding-top:18px;border-top:1px solid #DFDBCB}
.np-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.np-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:18px}
.np-list>li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:4px 26px}
.np-list b{font-weight:400;font-size:21px}
.np-list .en{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--grey);margin-top:2px}
.np-list p{font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.np-foot{margin-top:30px;padding-top:18px;border-top:2px solid var(--ink)}
.np-line{font-size:clamp(20px,2.4vw,26px);margin-top:12px}
.np-foot>p:last-child{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin-top:14px;max-width:62ch}
/* the short pieces */
.sp{background:var(--sheet);border:1px solid var(--rule);border-radius:8px;padding:clamp(20px,3vw,32px)}
.sp+.sp{margin-top:22px}
.sp-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.sp h3{font-size:clamp(20px,2.4vw,27px);font-weight:500;letter-spacing:-.015em;line-height:1.2;margin:8px 0 0;max-width:30ch}
.sp-body{white-space:pre-line;font-size:16.5px;line-height:1.6;margin-top:14px;max-width:62ch;color:var(--ink-2)}
.sp-alt{margin-top:18px;padding-top:14px;border-top:1px dashed var(--rule)}
.bag{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px 28px}
.bag li{border-left:2px solid var(--margin);padding-left:14px}
.bag .guj{font-size:18px}
.bag .en{font-size:14.5px;line-height:1.45;color:var(--grey);margin-top:6px}
.sp-more{font-family:var(--mono);font-size:11px;color:var(--grey);margin-top:18px}
@media (max-width:760px){.np-cols{column-count:1}.np-list>li{grid-template-columns:minmax(0,1fr)}}
/* work: the brands we've worked with, on a line that runs left to right, in their own colours */
.clients{position:relative;overflow:hidden;border-block:1px solid var(--ink);padding-block:28px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.clients-track{display:flex;width:max-content;animation:clientsRoll 40s linear infinite}
.clients:hover .clients-track{animation-play-state:paused}
.clients-run{display:flex;align-items:center;gap:56px;padding-right:56px}
.clients-run .note{white-space:nowrap;font-size:19px;padding-top:0}
.clients-run .star{display:none;color:var(--grey);font-family:var(--mono);font-size:20px}
html.is-dry .clients-run .star{display:inline}
@keyframes clientsRoll{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.client{--h:46px;position:relative;display:inline-block;height:calc(var(--h) * var(--s,1));aspect-ratio:var(--a);flex:none;transition:transform .3s ease}
.client i{position:absolute;inset:0;background:var(--tint);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.client:hover{transform:translateY(-3px)}
.c-agvelio{--m:url(/images/clients/agvelio.png);--tint:#D4AF37;--a:3.36;--s:.98}
.c-thekkedaar{--m:url(/images/clients/thekkedaar.png);--tint:#153D99;--a:2.99;--s:1.04}
.c-seleqt{--m:url(/images/clients/seleqt.png);--tint:#D4B06D;--a:5.09;--s:.84}
.c-lakhani{--a:2.67;--s:1.08}
.c-lakhani i{-webkit-mask:none;mask:none;background:url(/images/clients/lakhani.png) center/contain no-repeat}
.client-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:22px 0 0}
.client-facts dt{font-weight:500;font-size:17px}
.client-facts dd{margin:2px 0 0;font-size:14.5px;color:var(--ink-2);line-height:1.45}
@media (max-width:760px){.client-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.client{--h:38px}.clients-run{gap:40px;padding-right:40px}.client-facts{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.clients{overflow-x:auto}}
@media (max-width:760px){.outbox{grid-template-columns:minmax(0,1fr)}.ob-list{border-right:0;border-bottom:1px solid var(--rule);max-height:280px}.ob-read{max-height:none}}

/* visitors' own comments, written in the margin in blue */
.slot{font-family:var(--pen);font-weight:700;font-size:19px;line-height:1.3;color:var(--blue)}
.slot .add{display:block;width:100%;text-align:left;font:inherit;color:#9FACCB;background:none;border:0;border-bottom:1.5px dashed #C6CEE2;padding:2px 0 6px;cursor:pointer;opacity:.8;transition:opacity .2s,color .2s,border-color .2s}
.slot .add:hover,.slot .add:focus-visible{opacity:1;color:var(--blue);border-bottom-color:var(--blue)}
.slot textarea{display:block;width:100%;font:inherit;color:var(--blue);background:rgba(47,91,211,.06);border:0;border-bottom:1.5px solid var(--blue);border-radius:3px 3px 0 0;padding:4px 6px;resize:none;overflow:hidden;min-height:2.2em}
.slot textarea:focus{outline:none;background:rgba(47,91,211,.1)}
.mine{position:relative;margin:0;padding-right:20px;white-space:pre-line;transform:rotate(-1deg);transform-origin:left top;cursor:text}
.mine .del{position:absolute;right:0;top:-2px;font-family:var(--mono);font-size:13px;color:#9FACCB;background:none;border:0;cursor:pointer;padding:2px 4px}
.mine .del:hover{color:var(--red)}
.dock{position:fixed;right:16px;bottom:16px;z-index:55;font-family:var(--mono);font-size:13px}
.dock[hidden],.dock-menu[hidden]{display:none}
.dock-btn{display:inline-flex;align-items:center;gap:8px;font:inherit;background:var(--blue);color:#fff;border:0;border-radius:99px;padding:11px 16px;cursor:pointer;box-shadow:0 8px 20px rgba(47,91,211,.28)}
.dock-menu{position:absolute;right:0;bottom:calc(100% + 10px);width:min(270px,calc(100vw - 32px));display:grid;gap:8px;background:var(--sheet);border:1px solid var(--rule);border-radius:10px;padding:14px;box-shadow:0 16px 36px rgba(22,22,26,.14)}
.dock-menu button,.dock-menu a{display:block;width:100%;text-align:left;font:inherit;color:var(--ink);background:none;border:1px solid var(--rule);border-radius:6px;padding:10px 12px;text-decoration:none;cursor:pointer}
.dock-menu button:hover,.dock-menu a:hover{border-color:var(--ink)}
.dock-menu p{margin:2px 0 0;font-size:11.5px;line-height:1.4;color:var(--grey)}

/* one column on phones and small tablets */
@media (max-width:860px){
  .row{grid-template-columns:minmax(0,1fr)}
  .row>.note,.note-stack{grid-column:1}
  .row>.note,.note-stack .note{font-size:19px;padding-top:10px}
  .row>.note:not(.todo)::before,.note-stack .note::before{content:"\21B3\00a0"}
  .note-stack{gap:0;margin-top:6px}
  .arr{display:none}
  .book::before{right:auto;left:calc(var(--pad) / 2 - 1px)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* every page has its own address; the browser slides from one to the next */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:pgOut .24s ease-in both}
  ::view-transition-new(root){animation:pgIn .52s cubic-bezier(.2,.8,.2,1) both}
  @keyframes pgOut{to{opacity:0;transform:translateY(12px)}}
  @keyframes pgIn{from{opacity:0;transform:translateY(40px)}}
  .top{view-transition-name:topbar}
  .dock{view-transition-name:dock}
}