@font-face { font-family: "IvyPresto Headline"; src: url("/fonts/IvyprestoHeadline-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "IvyPresto Headline"; src: url("/fonts/IvyprestoHeadline-Thin.woff2") format("woff2"); font-weight: 100; font-display: swap; }

:root {
  --ink: #000; --grain: #E7E7E7; --archive: #FFF; --graphite: #4C4C4C; --midnight: #375058; --blueprint: #7AA0AC;
  --hair: #B8B8B8; --muted-dark: #A3A3A3;
  --serif: "IvyPresto Headline", "Newsreader", Georgia, serif;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --web-margin: clamp(1.25rem, 0.6rem + 2.6667vw, 3.75rem);
  --web-gutter: clamp(0.625rem, 0.3rem + 1.3333vw, 1.5rem);
  --header-h5: clamp(3rem, 2.2571rem + 3.0476vw, 5rem);
  --title-md: clamp(2.5rem, 2.1286rem + 1.5238vw, 3.5rem);
  --title-xs: 2.5rem;
  --body-md: clamp(1.125rem, 0.9857rem + 0.5714vw, 1.5rem);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --paper-shadow: drop-shadow(0 1px 1px rgba(0,0,0,.25)) drop-shadow(0 4px 6px rgba(0,0,0,.12));
  --paper-lift: drop-shadow(0 2px 2px rgba(0,0,0,.3)) drop-shadow(0 22px 22px rgba(0,0,0,.22));
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; animation-timing-function: var(--ease-out); }
::view-transition-group(*) { animation-duration: 380ms; animation-timing-function: var(--ease-out); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--grain); color: var(--ink); font: 500 1rem/1.5rem var(--sans); -webkit-font-smoothing: antialiased; }
body::after { content: ""; position: fixed; inset: 0; z-index: 100; background: url("/img/grain.png"); opacity: 0.35; mix-blend-mode: multiply; pointer-events: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--midnight); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: 120rem; margin-inline: auto; padding-inline: var(--web-margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--web-gutter); }

/* Header */
.top { height: clamp(4rem, 3rem + 3vw, 6rem); display: flex; align-items: center; justify-content: space-between; }
.top .logo img { height: clamp(12px, 0.6rem + 0.3vw, 16px); width: auto; }
.top-link { font: 600 0.875rem/1.25rem var(--sans); color: var(--graphite); text-decoration: none; }
.top-link:hover { color: var(--ink); }

/* Paper cut-outs */
.paper { width: 100%; height: auto; transform: rotate(var(--r, -2deg)); filter: var(--paper-shadow); transition: transform 240ms var(--ease-spring), filter 240ms var(--ease-out); user-select: none; -webkit-user-drag: none; }
.paper.swap { animation: face-swap 260ms var(--ease-spring); }
@keyframes face-swap { from { transform: rotate(var(--r, -2deg)) scale(0.9) rotate(-4deg); } }
.pill { display: inline-block; padding: 6px 12px; border-radius: 1000px; background: var(--ink); color: var(--grain); font: 600 0.875rem/1.25rem var(--sans); white-space: nowrap; }

/* Lobby */
.lobby { flex: 1; display: flex; flex-direction: column; }
.lobby-head { padding-top: clamp(1rem, 0.5rem + 2vw, 2.5rem); row-gap: 1.5rem; }
.lobby-head h1 { grid-column: 1 / 10; text-wrap: balance; margin: 0; font: 300 var(--header-h5)/1 var(--serif); }
.lobby-head p { grid-column: 10 / 13; align-self: end; margin: 0; font: 500 1.125rem/1.5rem var(--sans); color: var(--graphite); }
/* The founders sit centred in whatever height is left, and the heads grow on tall screens so the row fills it. */
.founders { align-items: end; padding-block: clamp(3.5rem, 2rem + 5vw, 6rem) clamp(2.5rem, 2rem + 2vw, 3.5rem); list-style: none; margin-block: auto; }
.founders li { grid-column: span 3; }
.f-card { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.f-card .head { position: relative; width: min(100%, clamp(var(--w, 260px), calc(var(--w, 260px) * 0.4 + 17.3vh), calc(var(--w, 260px) * 1.35))); transform: rotate(var(--lean, 0deg)); transform-origin: 50% 100%; transition: transform 500ms var(--ease-out); }
.f-card .pill { position: absolute; left: 72%; top: 18%; opacity: 0; transform: translateY(6px) scale(0.96); transition: opacity 150ms linear, transform 200ms var(--ease-out); pointer-events: none; }
.f-name { margin-top: 1.75rem; font: 300 clamp(2rem, 1.5rem + 1.4vw, 2.75rem)/1 var(--serif); }
.f-title { margin-top: 0.5rem; color: var(--graphite); }
.f-soon { margin-top: 0.25rem; color: var(--graphite); }
.f-card.off { cursor: default; }
.f-card.off .paper { filter: grayscale(1); opacity: 0.45; }
.f-card.off .f-name, .f-card.off .f-title { opacity: 0.45; }
@media (hover: hover) and (pointer: fine) {
  .f-card:not(.off):hover .paper, .f-card:focus-visible .paper { transform: translateY(-24px) rotate(var(--r2, -5deg)) scale(1.06); filter: var(--paper-lift); }
  .f-card:focus-visible .pill { opacity: 1; transform: none; }
}

/* Founder page */
.founder { flex: 1; padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); align-items: start; }
.bio { grid-column: 1 / 7; position: sticky; top: 24px; }
/* The cut-out sits in flow and overlaps the card by a fixed amount, so any head height clears the text. */
.bio .head { position: relative; display: block; z-index: 2; margin: 0 0 -72px 24px; width: var(--hw, 300px); cursor: default; }
.bio .head.faces { cursor: pointer; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
.bio .head .paper { --r: -6deg; filter: var(--paper-lift); }
.bio-card { position: relative; z-index: 1; padding: 104px 40px 40px; background: var(--archive); border-radius: 4px; transform: rotate(0.6deg); box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 16px 32px -16px rgba(0,0,0,.25); }
.local::before { content: "·"; margin-inline: 0.4em; }
.meta { margin: 0 0 0.75rem; font: 500 0.875rem/1.25rem var(--sans); color: var(--graphite); }
.bio h1 { margin: 0; font: 300 clamp(3.25rem, 2.4rem + 3.2vw, 5.5rem)/0.95 var(--serif); }
.role { margin: 1rem 0 0; font: 500 1.125rem/1.5rem var(--sans); }
.bio-text { margin: 1.25rem 0 0; font: 400 1.0625rem/1.625rem var(--sans); color: var(--graphite); max-width: 36em; }
.book-for { margin: 1rem 0 0; font: 400 1.0625rem/1.625rem var(--sans); max-width: 36em; }

.book { grid-column: 8 / 13; margin-top: 3.5rem; padding: 28px; border-radius: 12px; background: var(--archive); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.book h2 { margin: 0; font: 300 var(--title-xs)/1 var(--serif); }
.book-sub { margin: 0.5rem 0 0; color: var(--graphite); }
/* Tall enough for Google's whole page, so it scrolls with ours; the frame is 20px wider and clipped to hide its own scrollbar on busy days. */
.cal { position: relative; margin: 1.25rem -12px -12px; height: 1300px; border-radius: 8px; overflow: hidden; background: var(--archive); }
.cal p { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; color: var(--graphite); }
.cal iframe { position: relative; width: calc(100% + 20px); height: 100%; border: 0; opacity: 0; transition: opacity 240ms linear; background: var(--archive); }
.cal iframe.ready { opacity: 1; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 1000px; background: var(--ink); color: var(--grain); font: 600 1rem/1.5rem var(--sans); text-decoration: none; transition: background-color 150ms linear; }
.btn:hover { background: var(--midnight); }
.book .btn { margin-top: 1.5rem; }

/* Arrival: the cut-out drops onto the card once */
.js .bio .head { animation: drop 640ms var(--ease-spring) 120ms both; }
@keyframes drop { from { opacity: 0; transform: translateY(-40px) rotate(-14deg) scale(1.08); } }

/* Footer */
.foot { position: relative; background: var(--ink); color: var(--muted-dark); overflow: hidden; }
/* The cat's walkway: a hairline it follows the pointer along */
.walkway { position: relative; height: 84px; margin-inline: var(--web-margin); border-bottom: 1px solid #3D3D3D; cursor: pointer; touch-action: manipulation; }
.cat { position: absolute; bottom: 0; left: 0; width: 100px; height: 69px; transform: translate3d(var(--catx, 0px), var(--caty, 0px), 0) scaleX(var(--face, 1)); transform-origin: 50% 100%; pointer-events: none; }
.cat img { position: absolute; bottom: 0; left: 50%; height: auto; max-width: none; transform: translateX(-50%); visibility: hidden; }
.cat img.on { visibility: visible; }
.foot .wrap { min-height: 72px; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center; justify-content: space-between; padding-block: 1rem; font: 600 0.875rem/1.25rem var(--sans); }
.foot a { color: var(--grain); text-decoration: none; }
.foot-logo img { height: 20px; width: auto; }
.capes { position: relative; display: inline-flex; align-items: center; gap: 6px; padding-block: 4px; }
.capes::after { content: ""; position: absolute; left: 0; right: 22px; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0.999); opacity: 0.35; transform-origin: 100% 50%; transition: transform 240ms var(--ease-out), opacity 150ms linear; }
.capes svg { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .capes:hover::after { opacity: 1; animation: wipe 420ms var(--ease-out); }
  .capes:hover svg { transform: translate(2px, -2px); }
}
@keyframes wipe { 0% { transform: scaleX(1); transform-origin: 100% 50%; } 45% { transform: scaleX(0); transform-origin: 100% 50%; } 46% { transform-origin: 0 50%; } 100% { transform: scaleX(1); transform-origin: 0 50%; } }

/* Cursor label: the "Book Dan" pill rides with the pointer */
.cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; padding: 6px 12px; border-radius: 1000px; background: var(--ink); color: var(--grain); font: 600 0.875rem/1.25rem var(--sans); white-space: nowrap; transform: translate3d(var(--cx, -200px), var(--cy, -200px), 0) translate(14px, 14px) scale(var(--cs, 0)); transform-origin: 0 0; }

/* Capes preview: opens up out of the link */
.site-peek { position: fixed; left: 0; top: 0; z-index: 90; width: 280px; aspect-ratio: 8 / 5; pointer-events: none; border-radius: 8px; overflow: hidden; background: #0A0A0A; opacity: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 24px 48px -20px rgba(0,0,0,.6); clip-path: inset(100% 0 0 0 round 8px); transform: translateY(10px); transition: clip-path 260ms var(--ease-out), transform 260ms var(--ease-out), opacity 160ms var(--ease-out); }
.site-peek.on { clip-path: inset(0 0 0 0 round 8px); transform: none; opacity: 1; }
.site-peek img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 260ms var(--ease-out); }
.site-peek.on img { transform: none; }

/* Touch screens never show the hover pills, so keep them out of the layout */
@media (hover: none) { .f-card .pill { display: none; } .cursor, .site-peek { display: none; } }

/* Tablet */
@media (max-width: 64em) {
  .bio { grid-column: 1 / 13; position: relative; top: auto; }
  .book { grid-column: 1 / 13; margin-top: 2.5rem; }
  .founders li { grid-column: span 6; margin-top: 2.5rem; }
  .lobby-head h1 { grid-column: 1 / 13; }
  .lobby-head p { grid-column: 1 / 10; }
}
/* Phone */
@media (max-width: 48em) {
  .lobby-head p { grid-column: 1 / 13; }
  .founders { row-gap: 0; }
  .founders li { margin-top: 2rem; }
  .f-card .head { width: calc(var(--w, 260px) * 0.6); max-width: 100%; }
  .f-name { margin-top: 1rem; font-size: 1.75rem; }
  .f-title { font-size: 0.875rem; line-height: 1.25rem; }
  .bio .head, .bio .head.faces { width: 220px; margin: 0 0 -44px 8px; }
  .bio-card { padding: 68px 20px 24px; }
  .book { padding: 20px; }
  .cal { margin-inline: -8px; height: 1340px; }
  .cal iframe { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .paper, .f-card .pill, .cal iframe { transition: opacity 150ms linear; }
  .f-card .head { transition: none; }
  .site-peek, .site-peek.on { clip-path: inset(0 0 0 0 round 8px); transform: none; }
  .site-peek img { transform: none; }
  .capes:hover::after { animation: none; }
  .js .bio .head { animation: fade 200ms linear both; }
  .paper.swap { animation: none; }
  @keyframes fade { from { opacity: 0; } }
  @view-transition { navigation: none; }
}