/* Notebook accents folded in from r19 "October notebook": hand underline, hand-font notes,
   October drift type, tilted work prints, coloured hairline rules, big linked close. */
@font-face{font-family:"Caveat";src:url(fonts/Caveat.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{--hand:"Caveat","Bradley Hand",cursive}
html,body{overflow-x:clip}
/* hero: hand-drawn underline under the wordmark */
.wm-u{position:relative;display:inline-block}
.uline{position:absolute;left:-1%;right:-3%;bottom:-.14em;width:104%;height:.16em;overflow:visible;pointer-events:none}
.uline path{fill:none;stroke:var(--ver);stroke-width:3.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.uline .u2{stroke-width:2;opacity:.45}
.wordmark{margin-bottom:52px}
/* hand-font notes */
.hand{font-family:var(--hand);font-weight:600;letter-spacing:0}
.cap.hand{font-size:25px;line-height:1.15;color:var(--ver);max-width:20ch}
/* What I do: October drift type (decorative, repeats the row titles) */
.drift{margin:0 0 70px;overflow:hidden;pointer-events:none}
.drift .mq{margin:0;white-space:nowrap;font:500 clamp(54px,8.4vw,128px)/1.08 var(--serif);letter-spacing:.005em;color:transparent;-webkit-text-stroke:1.2px rgba(30,26,24,.55);will-change:transform}
.drift .mq:nth-child(2){color:var(--ink);-webkit-text-stroke:0;font-style:italic}
.drift .mq span{display:inline-block;padding:0 .3em}
.drift .mq:nth-child(1){padding-left:6vw}.drift .mq:nth-child(2){padding-left:18vw}.drift .mq:nth-child(3){padding-left:2vw}
/* What I do + Work: coloured top rule on each hairline row */
.do .rows.plain{border-top:0}
.do .rows.plain li{border-top:3px solid var(--ver);border-bottom:1px solid var(--line-strong);padding:20px 0 22px}
.do .rows.plain li+li{margin-top:-1px}
.do .rows.plain li:nth-child(2){border-top-color:var(--ult)}
.do .rows.plain li:nth-child(3){border-top-color:var(--och)}
.work .rows.plain{border-top:0}
.work .rows.plain li{border-top:3px solid var(--och);border-bottom:0;padding:20px 0 22px}
.work .rows.plain li:nth-child(2){border-top-color:var(--ver)}
.work .rows.plain.past li{border-top-color:rgba(240,232,214,.55);border-top-width:1px}
.on-dark .eb.past{margin:46px 0 14px;color:rgba(240,232,214,.7)}
/* Work: tilted screenshot prints on the paper side */
.prints{position:relative;min-height:520px}
.print{position:absolute;margin:0;background:#fffdf8;padding:10px 10px 34px;box-shadow:0 1px 0 rgba(30,26,24,.08),0 18px 40px rgba(30,26,24,.16)}
.print img{display:block;width:100%;height:auto}
.print.p1{width:78%;left:12%;top:4%;transform:rotate(-3.2deg)}
.print.p2{width:52%;left:44%;top:50%;transform:rotate(4.2deg)}
.print::after{content:"";position:absolute;left:50%;top:-11px;width:84px;height:22px;margin-left:-42px;background:rgba(222,168,62,.55);transform:rotate(-2deg)}
.print.p2::after{background:rgba(214,72,44,.4);transform:rotate(3deg)}
/* juggling: a quieter section */
.jgsec{padding:100px 0 90px}
.jgsec h2{font-size:clamp(38px,4.6vw,64px)}
.jg-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.jg-sim{min-height:500px}
.jg .sim canvas{height:440px}
/* close: big linked "Pick a time." + hand "Say hello." */
.close h2.pick{font-size:clamp(64px,10.5vw,168px);line-height:.92;margin-bottom:38px}
.close h2.pick a{display:inline-flex;align-items:flex-start;gap:.18em;transition:color .25s}
.close h2.pick .arr{font:400 .42em/1 var(--sans);color:var(--och);transition:transform .3s}
.close h2.pick a:hover{color:var(--och)}.close h2.pick a:hover .arr{transform:translate(6px,-6px)}
.close .hello{margin:44px 0 6px;font-size:46px;line-height:1;color:var(--och)}
.close .mail{margin:0;font:500 clamp(22px,2.4vw,30px)/1.2 var(--sans)}
.close .mail a{border-bottom:1px solid rgba(240,232,214,.5);padding-bottom:4px}
.close .mail a:hover{color:var(--och)}
/* Cal.com pop-up (from r12) */
html.hs-cal-open{overflow:hidden}
.hs-cal{padding:0;border:1px solid #d9cfbe;background:#f4eee2;color:#1c1a17;width:min(960px,calc(100vw - 48px));max-width:none;height:auto;max-height:min(780px,90vh);box-shadow:0 24px 64px rgba(28,26,23,.18);border-radius:2px}
.hs-cal[open]{display:flex;flex-direction:column}
.hs-cal::backdrop{background:rgba(28,26,23,.38)}
.hs-cal-head{display:flex;align-items:center;gap:16px;padding:12px 12px 12px 24px;border-bottom:1px solid #d9cfbe;background:#ede6d8;flex:0 0 auto}
.hs-cal-title{margin:0 auto 0 0;font:700 17px/1 var(--sans);color:#1c1a17}
.hs-cal-page{font:500 13px/1 var(--sans);color:#5e564b;text-decoration:underline;text-underline-offset:3px}
.hs-cal-close{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid #d9cfbe;background:#f4eee2;color:#1c1a17;cursor:pointer;border-radius:2px}
.hs-cal-close:focus-visible,.hs-cal-page:focus-visible{outline:2px solid var(--ver);outline-offset:2px}
.hs-cal-body{flex:1 1 auto;overflow:auto;overscroll-behavior:contain}
.hs-cal-inline{min-height:480px}
.hs-cal-wait{margin:0;padding:48px 24px;text-align:center;font:400 15px/1.5 var(--sans);color:#5e564b}
.hs-cal.is-ready .hs-cal-wait{display:none}
@media (max-width:960px){
 .prints{min-height:0;height:clamp(300px,70vw,520px)}
 .drift{margin-bottom:44px}
 .jgsec{padding:80px 0}
 .jg-sim{min-height:460px}
}
@media (max-width:767px){
 .hs-cal{width:100vw;height:92dvh;max-height:92dvh;margin:auto 0 0;border-width:1px 0 0;border-radius:10px 10px 0 0}
 .jg .sim canvas{height:400px}
 .close .hello{font-size:40px}
 .print{padding:6px 6px 22px}
}
@media (max-width:600px){
 .drift .mq{white-space:normal;font-size:12.6vw;line-height:1.02;padding:0 24px!important}
 .drift .mq:nth-child(2){padding-left:14vw!important}
 .drift .mq span{padding:0}
}