/* Recruitment pages opened from campus posters.
   Layout: a sticky first screen (the sunlight loop, the poster's question, Apply), then a
   sheet of paper that rises over it carrying everything else, a little more per screen. */
@font-face { font-family:Caveat; src:url('assets/caveat-display.ttf'); font-display:swap; }
@font-face { font-family:Hand; src:url('assets/patrick-hand.ttf'); font-display:swap; }
:root {
  --ink:#353e40; --quiet:#536066; --blue:#476c83; --blue-deep:#2f4b5c; --pale:#dfeef6; --crayon:#badcec;
  --sun:#f3e7cf; --card:#fffdf8; --line:#a6b4ba;
  --ease:cubic-bezier(.16,1,.3,1);
  --hand:Hand,system-ui,sans-serif; --script:Caveat,Hand,sans-serif;
  color:var(--ink); font-family:var(--hand); font-size:18px; font-synthesis:none;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff url('assets/paper.webp') repeat; background-size:700px; overflow-x:clip; }
a { color:inherit; text-underline-offset:5px; -webkit-tap-highlight-color:transparent; }
a:focus-visible { outline:3px solid var(--blue); outline-offset:5px; border-radius:6px; }
.sr-only { position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
h1,h2,h3,p,dl,dd,dt,ol,ul,figure { margin:0; }
h1,h2,h3 { font-family:var(--script); font-weight:500; line-height:1.04; text-wrap:balance; }
h2 { font-size:clamp(44px,6vw,68px); }
p,li,dd { line-height:1.5; }

/* Header floats over the first screen; its wordmark carries across pages. */
.join-header { position:absolute; inset:0 0 auto; z-index:6; display:flex; justify-content:space-between; align-items:center; padding:max(20px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) 0 max(22px,env(safe-area-inset-left)); font-size:17px; animation:fade-up .9s var(--ease) .2s backwards; }
.join-header a { text-decoration:none; }
.wordmark { font:31px var(--script); }
.join-header .wordmark { view-transition-name:minlow-wordmark; }

/* First screen. It stays put while the paper sheet slides over it. */
main { position:relative; }
/* Behind the first screen is a dark ground: as the paper sheet rises, the sunlit room shrinks
   back with rounded corners over it, the way an iPhone presents a sheet over an app. */
.hero { position:sticky; top:min(0px, calc(100svh - 500px)); z-index:0; height:100svh; min-height:500px; display:grid; place-items:center; overflow:hidden; background:#262b2a; }
.hero-media,.ambient-surface { position:absolute; inset:0; }
.ambient-surface { overflow:hidden; background:var(--sun); transform-origin:50% 100%; }
.hero-media { animation:settle 2.4s var(--ease) backwards; transform-origin:50% 60%; }
.ambient-surface img,.ambient-surface video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% var(--ambient-focus,70%); }
.ambient-surface img { z-index:1; transition:opacity .9s ease; }
.ambient-surface[data-ready=true] img { opacity:0; }
.hero:after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(ellipse 70% 46% at 50% 44%, #fffaf0b8, #fffaf000 72%); }
.hero-copy { position:relative; z-index:2; width:min(680px,100%); padding:0 24px; text-align:center; transform:translateY(-3vh); }
.greeting { font:26px var(--script); color:var(--blue); animation:fade-up .9s var(--ease) .25s backwards; }
.hero h1 { margin-top:8px; font-size:clamp(52px,9vw,96px); line-height:1; }
.hero h1 .line { display:block; position:relative; overflow:hidden; padding:0 .08em .16em; margin-bottom:-.16em; }
.hero h1 .line > span { display:inline-block; animation:rise 1.15s var(--ease) backwards; }
.hero h1 .line:first-child > span { animation-delay:.35s; }
.hero h1 .line:nth-child(2) > span { animation-delay:.5s; }
.pencil-underline { position:absolute; left:12%; right:12%; bottom:.02em; width:76%; height:.26em; overflow:visible; }
/* Drawn by default; the script rubs them out first, then draws them in. */
.pencil-underline path,.pencil-ring path,.pencil-path path { fill:none; stroke:var(--blue); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; vector-effect:non-scaling-stroke; }
.pencil-underline path { stroke-dashoffset:1; animation:draw .8s ease-in-out 1.25s forwards; }
.hook { margin:16px auto 0; max-width:21em; text-wrap:balance; font-size:20px; color:var(--quiet); animation:fade-up 1s var(--ease) .95s backwards; }
.chips { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:14px 0 0; padding:0; animation:fade-up 1s var(--ease) 1.02s backwards; }
.chips li { padding:3px 12px 4px; border-radius:999px; background:#fffaf0c4; box-shadow:0 0 0 1px #53606624; font-size:16px; color:var(--quiet); line-height:1.4; }
.hero-actions { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 26px; margin-top:26px; animation:fade-up 1s var(--ease) 1.1s backwards; }
.more { display:inline-flex; gap:6px; align-items:center; min-height:44px; color:var(--blue); font-size:19px; text-decoration:none; }
.more span { display:inline-block; animation:bob 1.6s ease-in-out 2.4s 3; }

/* The one action, everywhere it appears. */
.apply { touch-action:pan-y; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; position:relative; overflow:hidden; isolation:isolate; display:inline-flex; align-items:center; gap:8px; min-height:50px; padding:10px 30px; border-radius:28px; background:var(--blue); color:#fff; font-size:21px; text-decoration:none; box-shadow:0 2px 0 var(--blue-deep),0 12px 26px #476c8340; transition:transform .35s var(--ease),box-shadow .35s var(--ease); }
.apply:before { content:''; position:absolute; z-index:-1; inset:0 auto 0 0; width:40%; background:linear-gradient(90deg,#ffffff00,#ffffff38,#ffffff00); transform:translateX(-140%) skewX(-20deg); }
.hero .apply:before { animation:sheen 1.4s ease-in-out 2.1s; }
/* Under the thumb: a pale crayon bloom spreads from where it pressed. */
.apply:after { content:''; position:absolute; z-index:-1; inset:0; background:#dfeef659; clip-path:circle(var(--bloom,0%) at var(--bx,50%) var(--by,50%)); opacity:0; transition:opacity .45s ease; }
.apply.pressed:after { opacity:1; transition:none; }
.apply .label { display:inline-block; max-width:4em; overflow:hidden; white-space:nowrap; transition:max-width .35s var(--ease),opacity .25s ease; }
.apply:hover { transform:translateY(-2px); box-shadow:0 4px 0 var(--blue-deep),0 18px 32px #476c8350; }
.apply:active { transform:translateY(1px) scale(.98); box-shadow:0 1px 0 var(--blue-deep),0 6px 14px #476c8340; }
.apply.large { min-height:58px; padding:12px 40px; font-size:24px; }

/* The paper sheet: a torn top edge and a soft shadow on the first screen beneath it. */
.hero-sentinel { position:absolute; top:0; left:0; width:1px; height:100svh; pointer-events:none; }
.sheet { position:relative; z-index:2; background:#fff url('assets/paper.webp') repeat; background-size:700px; box-shadow:0 -24px 50px #353e401c; }
.sheet:before { content:''; position:absolute; left:0; right:0; top:-15px; height:16px; background:inherit; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 16' preserveAspectRatio='none'%3E%3Cpath d='M0 16V9l40-3 38 4 52-6 41 5 47-4 36 3 55-5 44 4 39-2 51 5 45-6 37 4 58-3 40 4 49-5 43 3 52-2 38 4 46-6 41 5 50-3 44 4 37-4 53 5 41-3 47 2 39-4 50 5 32-2V16z'/%3E%3C/svg%3E") 0 100%/100% 100% no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 16' preserveAspectRatio='none'%3E%3Cpath d='M0 16V9l40-3 38 4 52-6 41 5 47-4 36 3 55-5 44 4 39-2 51 5 45-6 37 4 58-3 40 4 49-5 43 3 52-2 38 4 46-6 41 5 50-3 44 4 37-4 53 5 41-3 47 2 39-4 50 5 32-2V16z'/%3E%3C/svg%3E") 0 100%/100% 100% no-repeat; }

/* The cat peeks over the torn edge as the sheet rises, paws on the paper. */
.peek { position:absolute; z-index:3; right:7%; bottom:calc(100% - 9px); width:min(46vw,210px); aspect-ratio:2; overflow:hidden; pointer-events:none; }
.peek-cat { display:block; width:100%; height:100%; }

.chapter { max-width:980px; margin:auto; padding:96px 24px 40px; }
.chapter-lead { margin-top:14px; font-size:20px; color:var(--quiet); }

/* Rooms (UAL first): the art drifts past as the page scrolls. */
.rooms { max-width:none; overflow:hidden; padding-left:0; padding-right:0; }
.rooms > h2,.rooms > p { max-width:932px; margin-left:auto; margin-right:auto; padding:0 24px; }
.room-drift { display:flex; gap:16px; width:max-content; margin-top:34px; padding:10px 24px 20px; will-change:transform; }
.room-drift img { width:min(46vw,230px); aspect-ratio:9/16; object-fit:cover; border-radius:18px; box-shadow:0 0 0 1px #5360661f,0 14px 30px #353e4018; user-select:none; }
.room-drift img:nth-child(odd) { transform:rotate(-1.6deg) translateY(6px); }
.room-drift img:nth-child(even) { transform:rotate(1.2deg); }

/* Proof: the home page's curve, drawn as you arrive, with the numbers counting up. */
.growth { margin:34px 0 0; }
.growth svg { width:100%; height:auto; overflow:visible; color:var(--blue); }
.growth path { fill:none; stroke:var(--blue); stroke-width:2.5; }
.growth .chart-axis { stroke:#829299; stroke-width:1.2; }
.growth text { font:18px var(--hand); fill:var(--quiet); }
.growth .chart-dates text { font-size:15px; text-anchor:middle; }
.growth circle { fill:var(--blue); }
.growth-line { stroke-dasharray:1; stroke-dashoffset:0; }
@media (max-width:759px) {
  .growth text { font-size:40px; }
  .growth .chart-dates text { font-size:32px; }
  .growth .chart-dates text:nth-child(even) { display:none; }
  /* The end label grows with the larger type: end it just before the curve's last point. */
  .growth > svg > text { text-anchor:end; transform:translateX(170px); }
}
.counts { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:26px; }
.counts strong { display:block; font:500 46px/1 var(--script); color:var(--blue); font-variant-numeric:tabular-nums; }
.counts span { display:block; margin-top:6px; font-size:16px; color:var(--quiet); }

/* What you get: a crayon wash fills in behind each heading. */
.gains ul { list-style:none; padding:0; display:grid; gap:34px; margin-top:34px; }
.gains h3 { font-size:34px; }
.gains p { margin-top:6px; font-size:19px; color:var(--quiet); max-width:30em; }
.crayon { position:relative; isolation:isolate; }
.crayon:before { content:''; position:absolute; z-index:-1; inset:38% -6px 2% -4px; background:var(--crayon) url('assets/paper.webp') center/500px; background-blend-mode:multiply; opacity:.7; transform:rotate(-1.2deg); clip-path:inset(0 calc(100% - var(--wash,100%)) 0 0 round 3px); }

/* Roles: cards that stack as you scroll, each one settling over the last. */
.role-stack { margin-top:34px; }
/* Every card is opaque and the same height, so a card never shows through or peeks out below
   the one on top. A covered card shrinks back towards its top edge and a sheet of paper settles
   over its words (--shade), leaving a clean edge above the card in front, like a deck. */
.role-card { position:sticky; top:calc(74px + var(--i) * 20px); isolation:isolate; min-height:var(--card-height,auto); padding:26px 24px 22px; border-radius:24px; background:var(--card) url('assets/paper.webp') center/600px; box-shadow:0 0 0 1px #53606624,0 -6px 18px #353e400f,0 18px 40px #353e401a; transform-origin:50% 0; }
.role-card:after { content:''; position:absolute; z-index:1; inset:0; border-radius:inherit; background:var(--card) url('assets/paper.webp') center/600px; opacity:var(--shade,0); pointer-events:none; }
.role-card + .role-card { margin-top:22vh; }
.role-number { font-size:15px; color:var(--quiet); }
.role-card h3 { margin-top:6px; font-size:38px; }
.role-line { margin-top:10px; font-size:21px; }
.role-card p:not(.role-number):not(.role-line) { margin-top:6px; font-size:18px; color:var(--quiet); }
.role-card a { display:inline-block; min-height:44px; padding-top:14px; color:var(--blue); font-size:19px; }

/* The honest part: a pencil ring drawn around the line nobody should miss. */
.honest dl { display:grid; gap:24px; margin-top:30px; }
.honest dt { position:relative; display:inline-block; font:500 36px/1.1 var(--script); }
.honest dd { margin-top:4px; font-size:19px; color:var(--quiet); }
.pencil-ring { position:absolute; left:-18px; top:-12px; width:calc(100% + 36px); height:calc(100% + 24px); overflow:visible; pointer-events:none; }

/* How it starts: a pencil line joins the three steps as you scroll past. */
.step-path { position:relative; margin-top:34px; padding-left:58px; }
.pencil-path { position:absolute; left:2px; top:10px; width:40px; height:calc(100% - 28px); overflow:visible; }
.steps ol { list-style:none; padding:0; display:grid; gap:34px; counter-reset:step; }
.steps li { position:relative; counter-increment:step; }
.step-dot { position:absolute; left:-58px; top:-4px; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--card); box-shadow:0 0 0 1.5px var(--blue); font:500 26px/1 var(--script); color:var(--blue); transition:background .3s ease; }
.step-dot.reached { background:var(--pale); }
.pencil-tip { position:absolute; left:2px; top:10px; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 5px #476c8324; opacity:0; pointer-events:none; }
.steps li strong { display:block; font:500 32px/1.1 var(--script); }
.steps li > span:not(.step-dot) { display:block; margin-top:4px; font-size:19px; color:var(--quiet); }

/* What you'd be building: one link to the full story. */
.story-link { position:relative; overflow:hidden; isolation:isolate; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; min-height:220px; margin-top:30px; padding:24px 26px; border-radius:26px; background:var(--sun); color:var(--ink); text-decoration:none; box-shadow:0 0 0 1px #5360661f,0 20px 44px #353e401f; }
.story-link img { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 72%; }
.story-link:after { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,#fffaf000 30%,#fffaf0d9); }
.story-link span { position:relative; z-index:1; font:500 36px/1 var(--script); }
.story-link .arrow { font-size:40px; transition:transform .45s var(--ease); }
.story-link:hover .arrow,.story-link:focus-visible .arrow { transform:translateX(8px); }

/* Closing: the cat turns to you, then the question. */
.closing { max-width:980px; margin:auto; padding:70px 24px 140px; text-align:center; }
.welcome-cat { position:relative; width:min(300px,72vw); aspect-ratio:1; margin:0 auto; touch-action:pan-y; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; cursor:pointer; transform-origin:50% 92%; }
.welcome-cat img,.welcome-cat video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; mix-blend-mode:multiply; -webkit-mask:radial-gradient(closest-side,#000 72%,#0000); mask:radial-gradient(closest-side,#000 72%,#0000); }
.welcome-cat[data-media=poster] .welcome-poster,.welcome-cat[data-media=video] video,.welcome-cat[data-media=handoff] .welcome-handoff { opacity:1; }
.closing h2 { margin-top:10px; font-size:clamp(52px,7vw,76px); }
.closing-actions { display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:26px; }
.mail-row { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; }
.mail { color:var(--blue); font-size:19px; }
.copy-mail { min-height:36px; padding:4px 14px; border:0; border-radius:999px; background:var(--pale); box-shadow:0 0 0 1px #476c8340; color:var(--blue); font:16px var(--hand); cursor:pointer; transition:transform .25s var(--ease); }
.copy-mail:active { transform:scale(.96); }
.copy-mail:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.founder { margin-top:26px; font-size:16px; color:var(--quiet); }

/* Apply follows you once the first screen has gone, and steps aside at the end. */
.sticky-apply { position:fixed; z-index:20; left:50%; bottom:calc(14px + env(safe-area-inset-bottom)); transform:translate(-50%,160%); visibility:hidden; transition:transform .55s cubic-bezier(.34,1.56,.64,1),visibility 0s linear .55s; }
.sticky-apply.show { visibility:visible; transition:transform .55s cubic-bezier(.34,1.56,.64,1),visibility 0s; }
.sticky-apply .apply { transition:padding .35s var(--ease); }
.sticky-apply.compact .apply { padding-left:18px; padding-right:18px; }
.sticky-apply.compact .label { max-width:0; opacity:0; }
.sticky-apply.show { transform:translate(-50%,0); }


/* Pencil doodles where a thumb taps blank paper, and the heart when you pat the cat. */
.doodles { position:fixed; inset:0; z-index:30; pointer-events:none; overflow:hidden; }
.doodle { position:absolute; left:0; top:0; width:46px; height:46px; margin:-23px 0 0 -23px; overflow:visible; }
.doodle path { fill:none; stroke:var(--blue); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.doodle.heart path { fill:#badcec80; }

.join-footer { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; max-width:980px; margin:auto; padding:30px 24px max(30px,env(safe-area-inset-bottom)); border-top:1px solid #d4dce0; background:#fff url('assets/paper.webp') repeat; background-size:700px; font-size:17px; }
.join-footer a { text-decoration:none; }

/* Moving between Minlow's pages: the wordmark stays, the page rises like a new sheet. */
@view-transition { navigation:auto; }
::view-transition-old(root) { animation:vt-out .32s ease both; }
::view-transition-new(root) { animation:vt-in .6s var(--ease) both; }

@keyframes settle { from { transform:scale(1.07); } to { transform:none; } }
@keyframes rise { from { transform:translateY(108%) rotate(3deg); } to { transform:none; } }
@keyframes fade-up { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes draw { to { stroke-dashoffset:0; } }
@keyframes sheen { to { transform:translateX(330%) skewX(-20deg); } }
@keyframes bob { 50% { transform:translateY(4px); } }
@keyframes vt-out { to { opacity:0; transform:translateY(-12px); } }
@keyframes vt-in { from { opacity:0; transform:translateY(26px); } }

@media (min-width:760px) {
  .join-header { padding-left:max(30px,calc((100vw - 1240px)/2)); padding-right:max(30px,calc((100vw - 1240px)/2)); font-size:20px; }
  .wordmark { font-size:36px; }
  .hook { font-size:23px; }
  .chapter { padding:130px 30px 50px; }
  .rooms > h2,.rooms > p { padding:0 30px; }
  .gains ul { grid-template-columns:1fr 1fr; gap:46px 70px; }
  .role-card { padding:34px 38px 28px; }
  .role-stack { max-width:760px; }
  .story-link { min-height:300px; padding:34px 40px; }
  .counts { max-width:640px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*:before { animation:none!important; transition:none!important; }
  .pencil-underline path,.pencil-ring path,.pencil-path path { stroke-dashoffset:0; }
  .role-card + .role-card { margin-top:18px; }
  .role-card { position:relative; top:auto; }
  @view-transition { navigation:none; }
}