@font-face{font-family:"TeX Gyre Termes";src:url("assets/fonts/texgyretermes-regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"TeX Gyre Termes";src:url("assets/fonts/texgyretermes-bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"TeX Gyre Termes";src:url("assets/fonts/texgyretermes-italic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"TeX Gyre Termes";src:url("assets/fonts/texgyretermes-bolditalic.otf") format("opentype");font-weight:700;font-style:italic;font-display:swap}

:root{--paper:#f5f2e9;--ink:#071e26;--blue:#263fcd;--lilac:#ded4e7;--line:#d6d6c9}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,sans-serif;font-size:16px;line-height:1.65}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-underline-offset:5px}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--blue);outline-offset:5px}.wrap{max-width:1280px;margin:auto;padding:0 64px}header{display:flex;justify-content:space-between;align-items:center;padding:34px 0;border-bottom:1px solid var(--line)}.brand{font-family:"TeX Gyre Termes",serif;font-weight:bold;font-size:23px;line-height:.92;letter-spacing:-1px;text-decoration:none;display:flex;gap:15px;align-items:center}.bench{width:50px;height:33px;stroke:currentColor;stroke-width:4;stroke-linecap:round;fill:none}nav{display:flex;gap:32px;font-size:13px}nav a{text-decoration:none}nav a:hover{text-decoration:underline}.eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700}.hero{padding:74px 0 84px;position:relative}.hero-top{display:flex;justify-content:space-between}.hero-top span:last-child{font-family:"TeX Gyre Termes",serif;font-style:italic;color:var(--blue);font-size:19px;letter-spacing:0;text-transform:none;font-weight:normal}h1,h2,h3,p{margin:0}h1{font:normal clamp(65px,8.7vw,118px)/.98 "TeX Gyre Termes",serif;letter-spacing:-6px;max-width:1000px;margin:38px 0 36px}h1 em{font-weight:normal;color:var(--blue);position:relative;white-space:nowrap}h1 em:after{content:'';position:absolute;bottom:-8px;left:0;width:100%;height:10px;border-top:3px solid var(--blue);border-radius:50%;transform:rotate(-2deg)}.hero-bottom{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}.intro{max-width:420px;font-size:18px;line-height:1.7}.cta{display:inline-flex;gap:34px;align-items:center;background:var(--blue);color:white;border:1px solid var(--blue);padding:15px 22px;border-radius:2px;text-decoration:none;font-size:13px}.cta:hover{background:#1c309d}.hero-note{font-size:12px;margin-top:12px;color:#697064}.actions{justify-self:end}.bench-scene{background:#dce0d4;position:relative;height:270px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:3px}.bench-scene svg{width:400px;max-width:70%;color:#65745c}.scene-note{position:absolute;right:28px;bottom:24px;font:italic 24px "TeX Gyre Termes",serif;color:#465842;transform:rotate(-5deg)}.scene-label{position:absolute;top:25px;left:28px}.section{padding:88px 0;border-bottom:1px solid var(--line)}.about{display:grid;grid-template-columns:1fr 1.15fr;gap:90px}.about h2,.participate h2{font:normal 48px/1.12 "TeX Gyre Termes",serif;letter-spacing:-1.8px;margin-top:20px}.about-copy{padding-top:6px}.about-copy p{margin-bottom:24px;font-size:18px;max-width:500px}.about-copy .small{font-size:14px;color:#62685f}.prompt-section{padding:80px 0;display:grid;grid-template-columns:1fr 1.05fr;gap:100px;align-items:center}.prompt-card{background:var(--lilac);padding:36px 40px 32px;min-height:350px;transform:rotate(-2deg);box-shadow:0 10px 30px #071e2609;display:flex;flex-direction:column}.prompt-card h3{font:normal 37px/1.17 "TeX Gyre Termes",serif;letter-spacing:-1px;margin:36px 0 26px;min-height:132px}.prompt-card footer{display:flex;justify-content:space-between;border-top:1px solid #b8adbd;padding-top:20px;font-size:12px}.text-button{background:none;border:0;padding:0;color:var(--blue);font-size:13px;text-decoration:underline;text-underline-offset:5px}.prompt-copy h2{font:normal 42px/1.16 "TeX Gyre Termes",serif;letter-spacing:-1.3px;margin:20px 0}.prompt-copy p{max-width:360px}.participate{background:#e9eadf;padding:70px 64px;margin:10px -64px 0;border-radius:3px;display:grid;grid-template-columns:1fr 1fr;gap:80px}.participate h2{margin-top:18px}.participate p{max-width:450px;margin:0 0 20px}.participate .cta{margin-top:8px}.page-footer{padding:45px 0 26px;display:flex;justify-content:space-between;align-items:end;gap:30px;font-size:12px}.page-footer .brand{font-size:19px;margin-bottom:20px}.footer-right{text-align:right}.draft-note{border-top:1px solid var(--line);padding:16px 0 22px;font-size:11px;color:#697064}.modal{border:0;background:var(--paper);color:var(--ink);padding:40px 50px;width:min(720px,94vw);max-height:88vh;overflow:auto}.modal::backdrop{background:#14211dcc;backdrop-filter:blur(4px)}.modal h2{font:40px/1.1 "TeX Gyre Termes",serif;margin:20px 0}.modal p{margin-bottom:16px}.modal .close{position:sticky;float:right;top:0;background:var(--paper);border:1px solid var(--line);width:35px;height:35px;font-size:22px}.preview-banner{background:#e6e6d7;padding:12px;font-size:12px;margin:20px 0}.question{display:block;margin:25px 0;font-size:14px}.question input,.question textarea,.question select{display:block;width:100%;margin-top:10px;padding:12px;background:#fffdf8;border:1px solid #b9bdb1;border-radius:2px;font:16px Arial,sans-serif;color:var(--ink)}.question textarea{min-height:90px}.privacy{border-top:1px solid var(--line);padding-top:25px;font-size:12px}.privacy h3{font-size:16px;margin-bottom:12px}@media(max-width:760px){.wrap{padding:0 24px}header{padding:26px 0}.brand{font-size:19px}.bench{width:38px}nav{gap:18px;font-size:12px}nav a:first-child{display:none}.hero{padding:45px 0 48px}.hero-top span:last-child{display:none}h1{font-size:66px;letter-spacing:-3.5px;margin:28px 0 34px}.hero-bottom,.about,.prompt-section,.participate{grid-template-columns:1fr;gap:30px}.hero-bottom{gap:26px}.actions{justify-self:start}.intro{font-size:17px}.bench-scene{height:220px}.scene-note{font-size:20px}.scene-label{font-size:9px}.section{padding:55px 0}.about h2,.participate h2{font-size:38px}.about-copy p{font-size:16px}.prompt-section{padding:60px 0;gap:45px}.prompt-card{padding:28px;min-height:330px}.prompt-card h3{font-size:34px}.prompt-copy h2{font-size:36px}.participate{padding:38px 24px;margin:0 -8px}.page-footer{align-items:start;flex-direction:column}.footer-right{text-align:left}.modal{padding:25px}.modal h2{font-size:32px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Film-led direction */
:root{--paper:#f2f1eb;--ink:#071e26;--blue:#263fcd;--line:#d3d5cd}header{border-bottom:0;padding:30px 0}.hero{padding:60px 0 0}.hero-heading{position:relative;padding-bottom:62px}.hero-heading .eyebrow{letter-spacing:1.4px;font-weight:normal}h1{font-size:clamp(76px,9.3vw,132px);line-height:.94;letter-spacing:-6px;margin:30px 0 0;max-width:900px}h1 em{color:var(--ink)}h1 em:after{display:none}.hero-caption{position:absolute;right:0;bottom:67px;font-size:15px;line-height:1.65}.quiet-link{font-size:12px;display:inline-flex;gap:46px;margin-top:25px;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:7px}.film-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px}figure{margin:0}.film-pair img{width:100%;aspect-ratio:470/567;object-fit:cover;display:block}.film-pair figcaption{display:flex;justify-content:space-between;padding:13px 0 0;font-size:10px;letter-spacing:.4px}.film-pair figcaption span:last-child{color:#697064}.section{padding:98px 0}.about h2{font-size:46px}.prompt-section{border-top:0;gap:100px;padding:50px 0 90px;grid-template-columns:.85fr 1fr}.third-frame{max-width:390px}.third-frame img{width:100%;display:block;aspect-ratio:466/560;object-fit:cover}.third-frame figcaption{font-size:10px;padding-top:12px}.prompt-copy h2{font-size:45px;line-height:1.17;margin:30px 0}.prompt-copy p{font-size:14px}.prompt-copy .text-button{margin-top:24px;color:var(--ink)}.participate{background:transparent;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;margin:0;padding:65px 0}.participate .cta{background:var(--ink);border-color:var(--ink)}.participate .cta:hover{background:#35483e}.page-footer{padding-top:42px}
@media(max-width:760px){.hero{padding-top:35px}.hero-heading{padding-bottom:35px}h1{font-size:76px;letter-spacing:-4px;margin-top:24px}.hero-caption{position:static;margin-top:30px;font-size:14px}.quiet-link{margin-top:15px}.film-pair{gap:10px;margin:0 -12px}.film-pair img{aspect-ratio:470/620}.film-pair figcaption{font-size:9px;padding-top:10px}.film-pair figcaption span:last-child{display:none}.section{padding:62px 0}.about h2{font-size:37px}.prompt-section{grid-template-columns:1fr;gap:36px;padding:15px 0 55px}.third-frame{max-width:100%;width:80%}.prompt-copy h2{font-size:36px}.participate{padding:42px 0}.hero-heading .eyebrow{font-size:9px;letter-spacing:1px}}

.explorer{height:calc(100svh - 115px);min-height:640px;position:relative;margin:0 -64px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:#f4f3ef}.explore-toolbar,.explore-bottom{position:absolute;z-index:3;left:40px;right:40px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.explore-toolbar{top:24px}.explore-toolbar>*{pointer-events:auto}.explore-bottom{bottom:22px;font-size:11px;color:#677065}.explore-bottom a{pointer-events:auto;text-decoration:none;color:var(--ink)}.viewport{position:absolute;inset:75px 0 65px;overflow:hidden;touch-action:none}.world{width:1700px;height:1120px;position:absolute;top:0;left:0;will-change:transform}.world-title{position:absolute;left:620px;top:450px;font:56px/.98 "TeX Gyre Termes",serif;letter-spacing:-2.5px;pointer-events:none}.world-title span{display:block;font:12px/1.5 Arial,sans-serif;letter-spacing:0;margin-top:20px;color:#677065}.world-title em{font-weight:normal}.person{position:absolute;width:245px;border:0;padding:0;background:none;text-align:left;color:var(--ink);transition:opacity .2s}.person img{width:100%;height:290px;object-fit:cover;display:block;filter:saturate(.8);transition:filter .25s,transform .35s}.person-label{display:flex;align-items:center;gap:18px;font:13px/1.4 Arial,sans-serif;margin-bottom:13px}.person-label>span:first-child{color:var(--blue);font-size:10px}.person-arrow{margin-left:auto;opacity:0}.person-foot{display:block;font-size:10px;margin-top:10px;color:#677065;opacity:0;transition:opacity .2s}.person:hover img,.person:focus-visible img{filter:saturate(1);transform:scale(1.025)}.person:hover .person-foot,.person:focus-visible .person-foot,.person:hover .person-arrow,.person:focus-visible .person-arrow{opacity:1}.p-daddy{left:290px;top:220px}.p-procy{left:1110px;top:105px}.p-edu{left:650px;top:750px}.p-papa{left:1235px;top:690px}.p-daddy img{object-position:20% center}.p-edu img{object-position:80% center}.world-note{position:absolute;left:235px;top:875px;font:italic 21px/1.4 "TeX Gyre Termes",serif;color:#697064}.explorer.list-mode{height:auto;min-height:0;padding:90px 50px 75px}.list-mode .viewport{position:static;overflow:visible;touch-action:auto}.list-mode .world{position:static;width:auto;height:auto;transform:none!important;display:grid;grid-template-columns:repeat(4,1fr);gap:30px}.list-mode .person{position:static;width:100%}.list-mode .world-title,.list-mode .world-note{display:none}.list-mode .person-foot{opacity:1}.list-mode .person img{height:auto;aspect-ratio:245/290}.story-modal{padding:30px 42px;border:0;width:min(1100px,96vw);max-height:94svh;background:var(--paper);color:var(--ink);overflow:auto}.story-modal::backdrop{background:#101c18de;backdrop-filter:blur(5px)}.story-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:22px;gap:20px}.story-top button,.story-pager button{border:0;background:none;font-size:12px;color:var(--ink);padding:5px}.story-body{display:grid;grid-template-columns:1fr 1fr;gap:65px;padding:35px 0 5px;align-items:center}.story-body img{width:100%;max-height:65svh;object-fit:contain;display:block}.story-body figcaption{font-size:10px;margin-top:10px;color:#697064}.story-copy h2{font:80px/1 "TeX Gyre Termes",serif;letter-spacing:-3px;margin:18px 0 30px}.story-copy>p:not(.eyebrow){font-size:16px;max-width:290px}.story-status{margin-top:40px;border-top:1px solid var(--line);padding-top:20px}.story-status p{font-size:12px;margin-top:10px;color:#697064;max-width:290px}.story-pager{display:flex;justify-content:space-between;margin-top:35px;gap:20px}@media(max-width:760px){nav{gap:12px}.explorer{margin:0 -24px;height:calc(100svh - 100px);min-height:580px}.explore-toolbar,.explore-bottom{left:22px;right:22px}.explore-toolbar>.eyebrow{font-size:9px;letter-spacing:1px}.explore-bottom{font-size:9px;gap:20px}.explore-bottom a{max-width:90px;text-align:right}.world{width:1300px;height:1000px}.world-title{left:510px;top:380px;font-size:42px;letter-spacing:-1.5px}.person{width:185px}.person img{height:230px}.p-daddy{left:220px;top:140px}.p-procy{left:885px;top:140px}.p-edu{left:450px;top:670px}.p-papa{left:950px;top:650px}.world-note{left:170px;top:720px;font-size:18px}.explorer.list-mode{padding:85px 22px 75px}.list-mode .world{grid-template-columns:1fr 1fr;gap:35px 18px}.story-modal{padding:24px}.story-body{grid-template-columns:1fr;gap:25px;padding-top:24px}.story-body img{max-height:44svh}.story-copy h2{font-size:60px;margin-bottom:20px}.story-status{margin-top:22px}.story-top>.eyebrow{font-size:9px}.story-top button{font-size:11px}.story-pager{margin-top:22px}.person-arrow,.person-foot{opacity:1}}@media(prefers-reduced-motion:reduce){.person img{transition:none}.world{will-change:auto}}

/* Full-screen, direct-manipulation canvas */
header{position:absolute;top:0;left:0;right:0;padding:24px 40px;margin:0;z-index:10;background:linear-gradient(var(--paper) 65%,transparent);pointer-events:none}header>*{pointer-events:auto}.explorer{height:100svh;min-height:560px;border:0;margin-top:0}.explore-toolbar{top:112px}.viewport{inset:156px 0 64px;cursor:grab;user-select:none;-webkit-user-select:none}.viewport .person{cursor:grab}.viewport.dragging,.viewport.dragging *{cursor:grabbing!important}.viewport.dragging .person img{transform:none;transition:none}.viewport .person img{pointer-events:none}.list-mode .viewport,.list-mode .person{cursor:auto;user-select:auto}.list-mode .person{cursor:pointer}.explorer.list-mode{min-height:100svh;padding-top:175px}.explore-bottom{background:linear-gradient(transparent,var(--paper) 40%);padding-top:15px}#explore{scroll-margin-top:0}@media(max-width:760px){header{padding:24px}.explore-toolbar{top:104px}.viewport{inset:145px 0 70px}.explorer{height:100svh;min-height:520px}.explorer.list-mode{padding-top:160px}.explore-bottom{font-size:10px}.explore-bottom a{max-width:90px}}

/* Small depth shifts, independent of the draggable canvas position. */
.person{--depth:1;transform:translate3d(calc(var(--drift-x,0px)*var(--depth)),calc(var(--drift-y,0px)*var(--depth)),0)}.p-procy{--depth:.65}.p-edu{--depth:1.15}.p-papa{--depth:.85}.world-title{transform:translate3d(calc(var(--drift-x,0px)*.3),calc(var(--drift-y,0px)*.3),0)}.world-note{transform:translate3d(calc(var(--drift-x,0px)*.45),calc(var(--drift-y,0px)*.45),0)}.list-mode .person{transform:none}@media(prefers-reduced-motion:reduce){.person,.world-title,.world-note{transform:none}}

/* The canvas runs uninterrupted beneath floating navigation. */
header{background:transparent}.explorer .viewport{inset:0}.explore-bottom{background:transparent;padding-top:0}.explore-toolbar,.explore-bottom,header{border:0}.explore-toolbar,.explore-bottom,header a{text-shadow:0 1px 8px var(--paper),0 0 3px var(--paper)}

/* Each floating label chooses its own contrast against the image below. */
header a,.explore-toolbar,.explore-bottom{ text-shadow:none }
[data-overlay-tone]{color:#071e26!important;text-shadow:0 0 2px rgba(244,243,239,.55)}
[data-overlay-tone="light"]{color:#fff!important;text-shadow:0 1px 3px rgba(0,0,0,.7)}

/* Original vector lockup; currentColor preserves adaptive contrast. */
.logo-mark{display:block;width:264px;aspect-ratio:363.41/66.76;background:currentColor;mask:url("assets/logo.svg") center/contain no-repeat;-webkit-mask:url("assets/logo.svg") center/contain no-repeat}.page-footer .logo-mark{width:230px}@media(max-width:760px){header .logo-mark{width:200px}header nav a:not(:last-child){display:none}.page-footer .logo-mark{width:220px}}@media(max-width:360px){header .logo-mark{width:175px}}

/* Original portrait stills, with the entire composition visible. */
.world{height:1280px}.person img{height:auto;aspect-ratio:auto;object-fit:contain;filter:none}.list-mode .person img{height:auto;aspect-ratio:auto;object-fit:contain}.person:hover img,.person:focus-visible img{filter:none}.third-frame img{aspect-ratio:auto;object-fit:contain}@media(max-width:760px){.world{height:1200px}.person img{height:auto}.list-mode .world{height:auto}}

/* A seamless repeating field, with invitations woven between the people. */
.world{width:max(1700px,100vw);height:max(1280px,100svh)}.scene-tile{position:absolute;width:100%;height:100%;left:100%;top:100%}.list-mode .tile-primary{display:contents}.list-mode .repeat-tile{display:none}.grid-invitation{border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer;padding:0}.world-title.grid-invitation{pointer-events:auto}.grid-invitation:hover strong,.world-title.grid-invitation:hover em{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}.world-title.grid-invitation span{color:var(--blue)}.invitation-note{position:absolute;left:195px;top:850px;width:270px;transform:translate3d(calc(var(--drift-x,0px)*.45),calc(var(--drift-y,0px)*.45),0)}.invitation-note strong{display:block;font:normal 34px/1.12 "TeX Gyre Termes",serif;letter-spacing:-.8px;margin:18px 0}.invitation-note>span:last-child{font-size:11px;color:var(--blue)}.invitation-blue{position:absolute;left:675px;top:95px;width:275px;padding:30px;background:var(--blue);color:var(--paper);transform:translate3d(calc(var(--drift-x,0px)*.5),calc(var(--drift-y,0px)*.5),0)}.invitation-blue .eyebrow{font-size:9px;letter-spacing:1px}.invitation-blue strong{display:block;font:normal 33px/1.12 "TeX Gyre Termes",serif;letter-spacing:-.7px;margin:27px 0}.invitation-blue>span:last-child{font-size:11px}.list-mode .invitation-note,.list-mode .invitation-blue{position:static;transform:none;width:auto;align-self:center}.list-mode .world{width:auto;height:auto}.list-mode .world-title{display:none}@media(max-width:760px){.world{width:max(1300px,100vw);height:max(1200px,100svh)}.invitation-note{left:170px;top:760px;width:220px}.invitation-note strong{font-size:29px}.invitation-blue{left:525px;top:100px;width:235px;padding:25px}.invitation-blue strong{font-size:29px}.list-mode .world{width:auto;height:auto}.list-mode .invitation-blue,.list-mode .invitation-note{grid-column:1/-1}.world-title.grid-invitation{font-size:42px}}

/* Navigation lives among the stories, rather than above them. */
.grid-nav{position:absolute;display:block;width:185px;text-decoration:none;transform:translate3d(calc(var(--drift-x,0px)*.4),calc(var(--drift-y,0px)*.4),0);padding-top:18px;border-top:1px solid var(--blue);color:var(--ink)}.grid-nav .eyebrow{font-size:9px;letter-spacing:1px;color:var(--blue)}.grid-nav strong{display:block;font:normal 29px/1.12 "TeX Gyre Termes",serif;letter-spacing:-.6px;margin:19px 0 15px}.grid-nav>span:last-child{font-size:11px;line-height:1.5;display:block;color:#697064}.grid-nav:hover strong{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}.nav-project{left:65px;top:105px}.nav-begin{left:1000px;top:660px}.list-mode .grid-nav{position:static;transform:none;width:auto;align-self:center}.explore-bottom{justify-content:flex-start}@media(max-width:760px){.grid-nav{width:160px}.grid-nav strong{font-size:25px}.nav-project{left:25px;top:160px}.nav-begin{left:740px;top:660px}.list-mode .grid-nav{width:auto}}@media(prefers-reduced-motion:reduce){.grid-nav{transform:none}}

/* Blur the moving item itself, with no panel behind the controls. */
.scene-tile>.person,.scene-tile>.grid-invitation,.scene-tile>.grid-nav{transition:filter .18s ease}
.scene-tile>.under-controls:not(:focus-visible){filter:blur(9px)}
@media(prefers-reduced-motion:reduce){.scene-tile>.person,.scene-tile>.grid-invitation,.scene-tile>.grid-nav{transition:none}}

/* Consistent 3:4 photo tiles; focused stories retain the complete still. */
.scene-tile .person img,.list-mode .person img{aspect-ratio:3/4;height:auto;object-fit:cover;object-position:center 70%}

/* Soft lilac spine, sampled from the supplied brand reference. */
:root{--spine:#dcbad5}body::before{content:"";position:fixed;inset:0 auto 0 0;width:clamp(21px,3vw,36px);background:var(--spine);z-index:20;pointer-events:none}
header{padding-left:calc(clamp(21px,3vw,36px) + 24px)}.explore-toolbar{left:calc(clamp(21px,3vw,36px) + 24px)}

/* Slightly curved, drawn arrow strokes in place of typographic glyphs. */
.drawn-arrow{display:inline-block;width:26px;height:20px;vertical-align:middle;overflow:visible;margin:0 3px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.arrow-ne{transform:rotate(-34deg)}.arrow-left{transform:rotate(180deg)}.arrow-down{transform:rotate(90deg)}.person-arrow .drawn-arrow{width:21px;margin:0}.grid-nav .eyebrow .drawn-arrow{width:20px;height:16px}.story-pager .drawn-arrow{width:24px}

/* A changing prompt within the field of people and invitations. */
.question-tile{position:absolute;left:970px;top:1070px;width:290px;padding:25px;background:var(--paper);border-top:4px solid var(--spine);transform:translate3d(calc(var(--drift-x,0px)*.6),calc(var(--drift-y,0px)*.6),0);transition:filter .18s ease}.question-tile-top{display:flex;justify-content:space-between;align-items:center;gap:15px}.question-tile .eyebrow{font-size:8px;letter-spacing:1px}.question-index{font-size:9px;color:var(--blue);white-space:nowrap}.question-tile [data-question-text]{font:normal 29px/1.16 "TeX Gyre Termes",serif;letter-spacing:-.7px;min-height:170px;padding:25px 0}.question-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:14px}.question-controls button{font-size:10px;padding:0;background:none;border:0;color:var(--ink)}.question-controls .drawn-arrow{width:21px;height:16px;color:var(--blue)}.question-controls button:last-child{color:#697064;text-decoration:underline;text-underline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.world{height:max(1450px,100svh)}.list-mode .question-tile{position:static;transform:none;width:auto}.list-mode .world{height:auto}@media(max-width:760px){.world{height:max(1420px,100svh)}.question-tile{left:780px;top:1080px;width:255px;padding:22px}.question-tile [data-question-text]{font-size:27px;min-height:170px}.list-mode .question-tile{grid-column:1/-1;width:auto}.list-mode .world{height:auto}}@media(prefers-reduced-motion:reduce){.question-tile{transform:none;transition:none}}

/* A small physical-feeling deck: serif questions and a branded reverse. */
.flip-tile{width:275px;padding:0;background:none;border:0}.flip-card{display:block;width:100%;aspect-ratio:5/7;border:0;padding:0;background:transparent;perspective:1100px;text-align:left;color:var(--ink);cursor:pointer}.flip-inner{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.75,.2,1)}.is-flipped .flip-inner{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;display:block;border-radius:20px;background:#fffdf7;box-shadow:0 7px 18px rgba(7,30,38,.12);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}.card-brand-face{text-align:center}.card-kicker{position:absolute;top:24px;left:0;right:0;font:9px Arial,sans-serif;text-transform:uppercase;letter-spacing:1.4px;color:#697064}.card-wordmark{position:absolute;top:34%;left:16%;width:68%;aspect-ratio:160.07/49.92;background:currentColor;mask:url('assets/card-wordmark-centered.svg') center/contain no-repeat;-webkit-mask:url('assets/card-wordmark-centered.svg') center/contain no-repeat}.card-underline{position:absolute;left:24%;top:51%;width:52%;height:15px;fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round}.card-bench{position:absolute;bottom:54px;left:41%;width:18%;aspect-ratio:128/68;background:currentColor;mask:url('assets/card-bench.svg') center/contain no-repeat;-webkit-mask:url('assets/card-bench.svg') center/contain no-repeat}.card-turn-hint{position:absolute;bottom:22px;left:0;right:0;font:10px Arial,sans-serif;color:#697064}.card-question-face{transform:rotateY(180deg);padding:23px}.card-category{display:block;background:var(--spine);margin:-23px -23px 23px;padding:15px 16px;text-align:center;font:700 9px Arial,sans-serif;letter-spacing:1px;text-transform:uppercase}.card-question-face .card-main-question{display:block;font:normal 29px/1.12 "TeX Gyre Termes",serif;letter-spacing:-.7px;min-height:150px;padding:0}.question-underline{display:block;width:85%;height:15px;margin:12px 0 20px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round}.card-followup-label{display:block;font:700 9px Arial,sans-serif;text-transform:uppercase;letter-spacing:.7px;margin-bottom:10px}.card-followup{display:block;font:13px/1.45 Arial,sans-serif}.flip-tile .question-controls{border:0;padding:17px 3px 0}.flip-tile .question-controls button{color:var(--ink)}.scattered-prompt{position:absolute;font:italic 23px/1.25 "TeX Gyre Termes",serif;color:var(--ink);transform:translate3d(calc(var(--drift-x,0px)*.35),calc(var(--drift-y,0px)*.35),0)}.scattered-prompt .eyebrow{display:block;font:8px Arial,sans-serif;letter-spacing:1px;margin-bottom:18px;color:var(--blue)}.prompt-one{left:50px;top:590px;width:220px}.prompt-two{left:1460px;top:350px;width:210px}.list-mode .scattered-prompt{position:static;transform:none;align-self:center}.list-mode .flip-tile{width:min(100%,275px)}@media(max-width:760px){.flip-tile{width:255px}.card-question-face .card-main-question{font-size:27px;min-height:140px}.card-followup{font-size:12px}.question-underline{margin:9px 0 16px}.prompt-one{left:25px;top:520px;width:160px}.prompt-two{left:1090px;top:430px;width:180px}.scattered-prompt{font-size:21px}.list-mode .scattered-prompt{width:auto}.list-mode .flip-tile{grid-column:auto;width:100%;max-width:275px}}@media(prefers-reduced-motion:reduce){.flip-inner{transition:none}.scattered-prompt{transform:none}}

/* Prompt cards scattered across the field, with independent decks. */
.world{width:max(2100px,100vw);height:max(1800px,100svh)}.deck-1{left:1720px;top:175px;rotate:3deg}.deck-2{left:45px;top:1170px;rotate:-3deg}.deck-3{left:580px;top:1370px;rotate:2deg}.deck-zero{rotate:-1deg}.list-mode .flip-tile{rotate:none}.list-mode .world{width:auto;height:auto}@media(max-width:760px){.world{width:max(1700px,100vw);height:max(1820px,100svh)}.deck-1{left:1380px;top:140px}.deck-2{left:35px;top:1180px}.deck-3{left:470px;top:1420px}.list-mode .world{width:auto;height:auto}}

/* The supplied textured highlighters match the category band. */
.flip-tile{--category-color:#dcbad5;--highlight-image:url('assets/highlight-about.svg')}.flip-tile[data-category="memories"]{--category-color:#b5e0e6;--highlight-image:url('assets/highlight-memories.svg')}.flip-tile[data-category="relationship"]{--category-color:#f4bc9b;--highlight-image:url('assets/highlight-relationship.svg')}.flip-tile[data-category="carry"]{--category-color:#89a37d;--highlight-image:url('assets/highlight-carry.svg')}.card-category{background:var(--category-color)}.prompt-highlight{position:relative;display:inline-block;white-space:nowrap;isolation:isolate}.prompt-highlight::before{content:"";position:absolute;inset:18% -9% 2%;background-image:var(--highlight-image);background-position:center;background-size:100% 100%;background-repeat:no-repeat;transform:rotate(-3deg);z-index:-1;pointer-events:none}
.card-question-face .card-main-question{font-weight:700}

/* Larger category labels and a fuller, balanced prompt face. */
.card-question-face{display:flex;flex-direction:column;padding:20px}.card-category{flex-shrink:0;font-size:12px;line-height:1.2;letter-spacing:.8px;padding:16px 10px;margin:-20px -20px 18px}.card-question-face .card-main-question{flex:1;min-height:0;font-size:32px;line-height:1.06;font-weight:700;letter-spacing:-.8px;padding:0}.question-underline{flex-shrink:0;width:100%;height:14px;margin:10px 0 16px}.card-followup-label{flex-shrink:0;font-size:10px;margin-bottom:8px}.card-followup{flex-shrink:0;font-size:15px;line-height:1.35}.card-wordmark{left:10%;width:80%;top:32%}.card-underline{left:20%;width:60%;top:51%}@media(max-width:760px){.card-category{font-size:12px;padding:14px 8px;margin-bottom:16px}.card-question-face .card-main-question{font-size:30px;line-height:1.05;min-height:0}.card-followup{font-size:14px}.question-underline{margin:8px 0 12px}}
.card-question-face .card-main-question{font-size:36px;line-height:1.02}@media(max-width:760px){.card-question-face .card-main-question{font-size:34px;line-height:1.02}}

/* Keep the prompt cards secondary to the conversations. */
.flip-tile{scale:.88;transform-origin:center center}.question-underline{width:78%;align-self:flex-start;margin-left:0;margin-right:auto}.prompt-highlight{font-size:inherit;line-height:inherit}.prompt-highlight::before{inset:7% -14% -8%}

@font-face{font-family:"Kalam";src:url("assets/fonts/Kalam-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
/* Handwritten paper notes and loose cobalt arrows. */
.grid-annotation{position:absolute;z-index:2;pointer-events:none;width:max-content;max-width:235px;transform:translate3d(calc(var(--drift-x,0px)*.25),calc(var(--drift-y,0px)*.25),0)}.grid-annotation>span{display:inline-block;padding:5px 11px 2px;background:#fffefb;box-shadow:0 2px 1px rgba(7,30,38,.10);font:400 20px/1.15 "Kalam",cursive;letter-spacing:.1px;text-transform:uppercase;color:var(--ink)}.grid-annotation svg{position:absolute;width:110px;height:78px;fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}.note-start{left:730px;top:355px;rotate:-4deg}.note-start svg{left:-85px;top:20px;transform:rotate(70deg)}.note-turn{left:1530px;top:80px;rotate:3deg}.note-turn svg{left:115px;top:25px}.note-little{left:1420px;top:515px;rotate:-4deg}.note-little svg{left:-95px;top:-50px;transform:rotate(175deg)}.note-words{left:930px;top:995px;rotate:3deg}.note-words svg{left:-30px;top:30px;transform:rotate(70deg)}.list-mode .grid-annotation{display:none}@media(max-width:760px){.grid-annotation>span{font-size:17px;padding:4px 9px 1px}.grid-annotation svg{width:85px;height:65px}.note-start{left:535px;top:335px}.note-turn{left:1220px;top:55px}.note-turn svg{left:105px}.note-little{left:1145px;top:585px}.note-words{left:740px;top:1015px}.note-words svg{left:-20px}}@media(prefers-reduced-motion:reduce){.grid-annotation{transform:none}}

/* Full viewport canvas, independent of the centered text-page container. */
html,body{overflow-x:clip}.explorer{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:0}
/* Give the conversations more presence than the prompt cards. */
.person{width:310px}.p-daddy{left:275px}.p-papa{left:1280px}.world-title{left:650px}@media(max-width:760px){.person{width:225px}.p-daddy{left:220px}.p-papa{left:950px}.world-title{left:510px}}

/* Distribute content across the entire repeating tile, including its seams. */
.world{width:max(2000px,100vw);height:max(1500px,100svh)}
.scene-tile>.person,.scene-tile>.flip-tile,.scene-tile>.grid-nav,.scene-tile>.grid-invitation{left:calc(var(--gx)*20% + 35px);top:calc(var(--gy)*33.333333% + 45px)}
.nav-project{--gx:0;--gy:0}.p-daddy{--gx:1;--gy:0}.deck-1{--gx:2;--gy:0}.p-procy{--gx:3;--gy:0}.invitation-blue{--gx:4;--gy:0}
.deck-2{--gx:0;--gy:1}.world-title{--gx:1;--gy:1;width:330px}.p-edu{--gx:2;--gy:1}.deck-zero{--gx:3;--gy:1}.nav-begin{--gx:4;--gy:1}
.invitation-note{--gx:0;--gy:2}.p-papa{--gx:1;--gy:2}.deck-3{--gx:2;--gy:2}.repeat-invitation-blue{--gx:3;--gy:2}.repeat-invitation-note{--gx:4;--gy:2}
.list-mode .world{width:auto;height:auto}.list-mode .repeat-invitation-blue,.list-mode .repeat-invitation-note{display:none}
@media(max-width:760px){.world{width:max(1200px,100vw);height:max(2500px,100svh)}.scene-tile>.person,.scene-tile>.flip-tile,.scene-tile>.grid-nav,.scene-tile>.grid-invitation{left:calc(var(--gx)*33.333333% + 35px);top:calc(var(--gy)*20% + 45px)}
.nav-project{--gx:0;--gy:0}.p-daddy{--gx:1;--gy:0}.deck-1{--gx:2;--gy:0}.p-procy{--gx:0;--gy:1}.invitation-blue{--gx:1;--gy:1}.deck-2{--gx:2;--gy:1}.world-title{--gx:0;--gy:2;width:315px}.p-edu{--gx:1;--gy:2}.deck-zero{--gx:2;--gy:2}.nav-begin{--gx:0;--gy:3}.invitation-note{--gx:1;--gy:3}.p-papa{--gx:2;--gy:3}.deck-3{--gx:0;--gy:4}.repeat-invitation-blue{--gx:1;--gy:4}.repeat-invitation-note{--gx:2;--gy:4}.list-mode .world{width:auto;height:auto}}

/* A looser editorial arrangement, rather than aligned rows and columns. */
.world{width:max(2200px,100vw);height:max(1650px,100svh)}
.scene-tile>.person,.scene-tile>.flip-tile,.scene-tile>.grid-nav,.scene-tile>.grid-invitation{left:calc(var(--gx)*20% + 35px + var(--dx,0px));top:calc(var(--gy)*33.333333% + 45px + var(--dy,0px))}
.nav-project{--dx:40px;--dy:50px}.p-daddy{--dx:-10px;--dy:95px}.deck-1{--dx:15px;--dy:-10px}.p-procy{--dx:-20px;--dy:40px}.invitation-blue{--dx:30px;--dy:160px}.deck-2{--dx:110px;--dy:60px}.world-title{--dx:-40px;--dy:135px}.p-edu{--dx:40px;--dy:-10px}.deck-zero{--dx:-40px;--dy:80px}.nav-begin{--dx:70px;--dy:25px}.invitation-note{--dx:-5px;--dy:120px}.p-papa{--dx:60px;--dy:10px}.deck-3{--dx:-40px;--dy:-10px}.repeat-invitation-blue{--dx:70px;--dy:50px}.repeat-invitation-note{--dx:-25px;--dy:150px}
.explore-toolbar>.eyebrow{max-width:min(590px,calc(100vw - 110px));line-height:1.55;letter-spacing:1.2px}.list-mode .world{width:auto;height:auto}
@media(max-width:760px){.world{width:max(1200px,100vw);height:max(2500px,100svh)}.scene-tile>.person,.scene-tile>.flip-tile,.scene-tile>.grid-nav,.scene-tile>.grid-invitation{left:calc(var(--gx)*33.333333% + 35px + var(--dx,0px));top:calc(var(--gy)*20% + 45px + var(--dy,0px))}
.nav-project{--dx:10px;--dy:35px}.p-daddy{--dx:0px;--dy:75px}.deck-1{--dx:35px;--dy:0px}.p-procy{--dx:20px;--dy:-10px}.invitation-blue{--dx:-20px;--dy:95px}.deck-2{--dx:10px;--dy:20px}.world-title{--dx:5px;--dy:10px}.p-edu{--dx:-20px;--dy:70px}.deck-zero{--dx:25px;--dy:-20px}.nav-begin{--dx:35px;--dy:15px}.invitation-note{--dx:-10px;--dy:65px}.p-papa{--dx:0px;--dy:20px}.deck-3{--dx:15px;--dy:-10px}.repeat-invitation-blue{--dx:30px;--dy:20px}.repeat-invitation-note{--dx:-10px;--dy:90px}.explore-toolbar>.eyebrow{max-width:260px;font-size:9px}.list-mode .world{width:auto;height:auto}}

/* Social link shares the title’s inset from the lilac spine. */
.explore-bottom{left:calc(clamp(21px,3vw,36px) + 24px)}.explore-bottom .instagram-link{display:inline-flex;align-items:center;gap:10px;font-size:12px;line-height:1.4;max-width:none;text-align:left;white-space:nowrap}.instagram-icon{width:19px;height:19px;flex-shrink:0}.instagram-link:hover>span{text-decoration:underline;text-underline-offset:4px}.explore-toolbar>.eyebrow{white-space:nowrap;line-height:1.65}
.explore-toolbar>.eyebrow{text-transform:none;font-size:12px;font-weight:400;letter-spacing:.4px}

/* Fewer text fragments: two paper navigation cards and one clear invitation. */
.grid-nav{width:255px;min-height:230px;background:#fffdf7;padding:24px;border:1px solid rgba(7,30,38,.09);border-radius:3px;box-shadow:0 3px 10px rgba(7,30,38,.035)}.grid-nav strong{font-size:31px;line-height:1.08;margin:28px 0 22px}.grid-nav>span:last-child{font-size:12px;line-height:1.45}.grid-nav:hover strong{text-decoration:none}.grid-nav:hover{border-color:var(--blue)}.invitation-blue{min-height:255px;display:flex;flex-direction:column;justify-content:space-between;border-radius:3px}.invitation-blue strong{font-size:35px;line-height:1.08;margin:24px 0}.story-echo-a{--gx:0;--gy:2;--dx:-5px;--dy:60px}.story-echo-b{--gx:3;--gy:2;--dx:70px;--dy:50px}.story-echo-c{--gx:4;--gy:2;--dx:-25px;--dy:150px}.list-mode .story-echo{display:none}@media(max-width:760px){.grid-nav{width:235px;min-height:215px;padding:22px}.grid-nav strong{font-size:29px;margin:24px 0 20px}.invitation-blue{min-height:240px}.invitation-blue strong{font-size:32px}.story-echo-a{--gx:1;--gy:3;--dx:-10px;--dy:65px}.story-echo-b{--gx:1;--gy:4;--dx:30px;--dy:20px}.story-echo-c{--gx:2;--gy:4;--dx:-10px;--dy:90px}}
.invitation-blue:hover strong{text-decoration:none}

/* The grid is the page. Supporting information stays in dismissible overlays. */
html,body{height:100%;overflow:hidden}.wrap{height:100svh}.explorer{height:100svh;min-height:0}.explorer.list-mode{height:100svh;min-height:0;padding:0}.list-mode .viewport{position:absolute;inset:165px 0 68px;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;padding:20px 55px 40px;overscroll-behavior:contain}.info-dialog{width:min(760px,94vw);max-height:88svh;padding:42px;border:0;border-radius:3px;background:var(--paper);color:var(--ink);overflow:auto}.info-dialog::backdrop{background:rgba(7,30,38,.75);backdrop-filter:blur(6px)}.info-close{display:block;margin:0 0 25px auto;border:0;background:none;color:var(--ink);font-size:12px;padding:5px}.info-dialog .section,.info-dialog .prompt-section,.info-dialog .participate{display:block;padding:0;margin:0;border:0;background:none}.info-dialog h2{font:normal 44px/1.06 "TeX Gyre Termes",serif;letter-spacing:-1px;margin:18px 0 28px}.info-dialog .about-copy{padding:0}.info-dialog .about-copy p{font-size:17px;max-width:none}.info-dialog .third-frame{display:none}.info-dialog .prompt-copy p,.info-dialog .participate p{max-width:none}.info-contact{border-top:1px solid var(--line);margin-top:30px;padding-top:22px;font-size:13px}@media(max-width:760px){.list-mode .viewport{inset:150px 0 65px;padding:15px 30px 35px}.info-dialog{padding:25px}.info-dialog h2{font-size:36px}.info-dialog .about-copy p{font-size:16px}}

/* Conversation imagery in place of the former prompt-navigation box. */
.conversation-begin{--gx:4;--gy:1;--dx:70px;--dy:25px;--depth:.7}@media(max-width:760px){.conversation-begin{--gx:0;--gy:3;--dx:35px;--dy:15px}}
.explore-toolbar{top:84px}.explore-toolbar>.eyebrow{text-transform:uppercase;font-weight:700;letter-spacing:1px}@media(max-width:760px){.explore-toolbar{top:72px}}

/* Instagram account directly beneath the logo, with no duplicate footer link. */
.explore-toolbar>.instagram-link{display:inline-flex;align-items:center;gap:8px;font:400 12px/1.4 Arial,sans-serif;letter-spacing:0;text-transform:none;text-decoration:none;color:var(--ink);white-space:nowrap}.explore-toolbar .instagram-icon{width:16px;height:16px}
.location-label{display:inline-flex;align-items:center;gap:7px;font:400 12px/1.4 Arial,sans-serif;white-space:nowrap}.location-label svg{width:17px;height:20px;flex:none}
.scene-tile>.name-sticker{position:absolute;left:30px;top:1210px;width:340px;rotate:-7deg;--depth:.5}.name-sticker{padding:18px 16px 15px;border-radius:23px;background:#263fcd;color:#fff;border:1px solid #1733b9;box-shadow:1px 4px 6px #071e2630,inset 0 0 0 2px #ffffff40;text-align:center}.sticker-heading{display:block;font:700 17px/1.2 Arial,sans-serif;letter-spacing:.3px}.sticker-name{display:block;box-sizing:border-box;width:100%;height:92px;margin:12px 0 10px;padding:3px 12px;border:0;border-radius:13px;background:#fffdf7;color:#071e26;font:400 60px/1 "Kalam",cursive;text-align:center;outline-offset:4px;touch-action:auto;min-width:0}.sticker-name::placeholder{color:#071e2680}.sticker-signature{display:flex;justify-content:center;align-items:center;gap:10px;font:700 23px/1.2 "TeX Gyre Termes",serif}.sticker-bench{width:40px;height:25px;background:currentColor;mask:url('assets/card-bench.svg') center/contain no-repeat;-webkit-mask:url('assets/card-bench.svg') center/contain no-repeat}.sticker-hint{display:block;font:10px/1 Arial,sans-serif;margin-top:10px;opacity:.85}.list-mode .name-sticker{position:static;width:min(340px,100%);box-sizing:border-box;rotate:0;margin:15px auto;grid-column:1/-1}@media(max-width:760px){.scene-tile>.name-sticker{left:425px;top:1610px;width:290px}.list-mode .name-sticker{position:static}.sticker-heading{font-size:15px}}
.name-sticker{padding:0;background:none;border:0;border-radius:0;box-shadow:none;aspect-ratio:1763/892;filter:drop-shadow(1px 4px 3px #071e2626)}.sticker-photo{display:block;width:100%;height:auto;aspect-ratio:1763/892;pointer-events:none}.sticker-heading{font-size:0;letter-spacing:0}.sticker-name{position:absolute;left:7%;top:31%;width:86%;height:44%;margin:0;padding:0 8px;background:transparent;border:0;border-radius:5px;color:#111;font-weight:700}.sticker-signature{display:none}.sticker-hint{position:absolute;top:100%;left:0;right:0;color:var(--ink);font-size:11px;margin-top:9px}.list-mode .name-sticker{position:relative;margin-bottom:35px}@media(max-width:760px){.sticker-heading{font-size:0}}
@font-face{font-family:"Permanent Marker";src:url("assets/fonts/PermanentMarker-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}.sticker-name{font-family:"Permanent Marker",cursive;font-weight:400;line-height:1;text-transform:uppercase;transform:rotate(-2deg)}
.sticker-cta{position:absolute;top:calc(100% + 12px);left:0;width:100%;display:flex;justify-content:center;align-items:center;gap:8px;border:0;background:none;color:var(--blue);font:400 17px/1.25 "TeX Gyre Termes",serif;padding:7px 5px;cursor:pointer}.sticker-cta[hidden]{display:none}.sticker-cta span{overflow-wrap:anywhere;min-width:0}.sticker-cta svg{flex:none;width:27px;height:22px}.sticker-cta:hover span{text-decoration:underline;text-underline-offset:4px}.name-sticker:has(.sticker-cta:not([hidden])) .sticker-hint{display:none}.list-mode .name-sticker:has(.sticker-cta:not([hidden])){margin-bottom:85px}
.viewport{overscroll-behavior:none}.viewport input,.viewport textarea{user-select:text;-webkit-user-select:text}.list-mode .viewport{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* Native vertical layout is the fallback for constrained devices. */
@media(max-width:760px){.explorer.list-mode .viewport{position:absolute;inset:0;box-sizing:border-box;padding:145px 24px 90px calc(clamp(21px,3vw,36px) + 24px);overflow-x:hidden;overflow-y:auto;touch-action:pan-y;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;user-select:auto;cursor:auto}
.explorer.list-mode .viewport .world{position:relative;display:block;width:100%;height:auto;min-height:0;transform:none!important;will-change:auto}
.explorer.list-mode .viewport .tile-primary{position:static;display:flex;flex-direction:column;align-items:center;gap:58px;width:100%;height:auto}
.explorer.list-mode .viewport .repeat-tile,.explorer.list-mode .viewport .story-echo{display:none!important}
.explorer.list-mode .viewport .tile-primary>*{position:relative;left:auto;top:auto;right:auto;bottom:auto;transform:none!important;scale:1;flex:none;box-sizing:border-box;max-width:100%;margin:0}
.explorer.list-mode .viewport .world-title{display:block!important;order:0;align-self:flex-start;width:100%;font-size:clamp(35px,10vw,48px);line-height:1.04;padding:15px 0 5px;letter-spacing:-1.3px}.explorer.list-mode .viewport .world-title span{font-size:14px;line-height:1.5;max-width:230px}
.explorer.list-mode .viewport .person{width:100%;cursor:pointer}.explorer.list-mode .viewport .person img{width:100%;height:auto;aspect-ratio:3/4}.explorer.list-mode .viewport .person-foot{opacity:1}
.explorer.list-mode .viewport .p-daddy{order:1}.explorer.list-mode .viewport .name-sticker{order:2;width:100%;rotate:-4deg;margin:8px 0 42px}.explorer.list-mode .viewport .name-sticker:has(.sticker-cta:not([hidden])){margin-bottom:60px}
.explorer.list-mode .viewport .deck-2{order:3}.explorer.list-mode .viewport .p-procy{order:4}.explorer.list-mode .viewport .deck-zero{order:5}.explorer.list-mode .viewport .p-edu{order:6}.explorer.list-mode .viewport .p-papa{order:7}.explorer.list-mode .viewport .nav-project{order:8;width:100%;min-height:0}.explorer.list-mode .viewport .invitation-blue{order:9;width:100%;min-height:255px}
.explorer.list-mode .viewport .deck-1,.explorer.list-mode .viewport .deck-3{display:none}.explorer.list-mode .viewport .flip-tile{width:min(260px,92%);rotate:0}.explorer.list-mode .viewport .card-main-question{font-size:32px}.explorer.list-mode .viewport .question-controls{padding-top:14px}.explore-bottom{bottom:14px}.explore-bottom .location-label{font-size:11px}
}

/* Keep the badge caption stable when its invitation appears. */
.sticker-hint,.sticker-cta{box-sizing:border-box;position:absolute;top:calc(100% + 12px);left:0;right:auto;width:100%;min-height:44px;margin:0;padding:7px 5px;display:flex;align-items:center;justify-content:center;font:400 17px/1.25 "TeX Gyre Termes",serif;color:var(--blue);opacity:1}
.sticker-cta[hidden]{display:none}.name-sticker:has(.sticker-cta:not([hidden])) .sticker-hint{display:none}
.list-mode .name-sticker,.list-mode .name-sticker:has(.sticker-cta:not([hidden])){margin-bottom:85px}
@media(max-width:760px){.explorer .viewport .name-sticker,.explorer .viewport .name-sticker:has(.sticker-cta:not([hidden])){margin:8px 0 60px}}
.sticker-name,.sticker-name:focus{outline:none;box-shadow:none;border:0;-webkit-appearance:none;appearance:none}.sticker-name:focus-visible{outline:none;box-shadow:none}

#hosted-intake[hidden],#local-intake-preview[hidden]{display:none!important}
.modal:has(#hosted-intake:not([hidden])){width:min(840px,calc(100vw - 48px));height:min(900px,calc(100dvh - 48px));max-height:none;padding:0;overflow:hidden;background:#191919;color:#f5f2e9;border:1px solid #ffffff20;border-radius:12px;box-shadow:0 30px 100px #0006;color-scheme:dark}
.modal:has(#hosted-intake:not([hidden]))::backdrop{background:transparent;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal:has(#hosted-intake:not([hidden]))>.eyebrow{margin:0;padding:24px 64px 7px 32px;color:#c9bfd5;font-size:10px;letter-spacing:1.8px}
.modal:has(#hosted-intake:not([hidden]))>h2{font:700 32px/1.1 "TeX Gyre Termes",serif;letter-spacing:-.6px;margin:0;padding:0 64px 22px 32px}
.modal:has(#hosted-intake:not([hidden]))>.close{position:absolute;right:20px;top:22px;width:36px;height:36px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:#ffffff0a;color:#f5f2e9;font-size:25px;line-height:1;z-index:2}
.modal:has(#hosted-intake:not([hidden]))>.close:hover{background:#ffffff18}
#hosted-intake{height:calc(100% - 99px);display:flex;flex-direction:column;min-height:0;border-top:1px solid #ffffff14}


#hosted-frame-slot{flex:1;min-height:0;position:relative}
.hosted-form-frame{display:block;width:100%;height:100%;min-height:0;border:0;background:#191919;color-scheme:dark}
.hosted-form-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.hosted-form-fallback{margin:0;padding:12px 32px 16px;border-top:1px solid #ffffff14;font-size:11px;line-height:1.4;color:#b7b3bb}
.hosted-form-fallback a{text-decoration-color:#ffffff40;text-underline-offset:3px}
@media(max-width:760px){.modal:has(#hosted-intake:not([hidden])){width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-radius:0}.modal:has(#hosted-intake:not([hidden]))>.eyebrow{padding:20px 60px 7px 22px}.modal:has(#hosted-intake:not([hidden]))>h2{padding:0 60px 18px 22px;font-size:29px}.modal:has(#hosted-intake:not([hidden]))>.close{top:18px;right:16px}#hosted-intake{height:calc(100% - 88px)}.hosted-form-fallback{padding:12px 22px max(16px,env(safe-area-inset-bottom))}}

.modal:has(#hosted-intake:not([hidden])){background:var(--paper);color:var(--ink);color-scheme:light;border-color:#071e261a}
.modal:has(#hosted-intake:not([hidden]))>.eyebrow{color:var(--blue)}
.modal:has(#hosted-intake:not([hidden]))>.close{background:#071e2608;color:var(--ink)}
.modal:has(#hosted-intake:not([hidden]))>.close:hover{background:#071e2612}
#hosted-intake{border-top-color:#071e2612}
#hosted-frame-slot{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0}
.hosted-form-frame{height:1688px;background:transparent;color-scheme:light}

.hosted-form-fallback{border-top-color:#071e2612;color:#566268}
.hosted-form-fallback a{text-decoration-color:#071e2640}
@media(max-width:760px){#hosted-frame-slot{padding:0}}

/* The embedded document owns scrolling; neither the shell nor page scrolls behind it. */
html:has(#intake[open]),body:has(#intake[open]){overflow:hidden!important;overscroll-behavior:none}
.modal[open]:has(#hosted-intake:not([hidden])){display:flex;flex-direction:column}
.modal:has(#hosted-intake:not([hidden]))>.eyebrow,.modal:has(#hosted-intake:not([hidden]))>h2{flex:none}
#hosted-intake{height:auto;flex:1;min-height:0;overflow:hidden}
.hosted-form-fallback{flex:none}
#hosted-frame-slot{overflow:hidden;padding:0;min-height:0;flex:1}
.hosted-form-frame{height:100%;min-height:0}
@media(max-width:760px){#hosted-frame-slot{padding:0}#hosted-intake{height:auto}}

#intake{opacity:0;transform:translateY(12px) scale(.99);transition:opacity 320ms ease,transform 360ms cubic-bezier(.2,.7,.2,1),display 360ms allow-discrete,overlay 360ms allow-discrete}
#intake[open]{opacity:1;transform:translateY(0) scale(1)}
#intake::backdrop{opacity:0;transition:opacity 360ms ease,backdrop-filter 360ms ease,display 360ms allow-discrete,overlay 360ms allow-discrete}
#intake[open]::backdrop{opacity:1}
@starting-style{#intake[open]{opacity:0;transform:translateY(12px) scale(.99)}#intake[open]::backdrop{opacity:0;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}}
@media(prefers-reduced-motion:reduce){#intake,#intake::backdrop{transition:none;transform:none}}

.wrap{opacity:1;transition:opacity 550ms cubic-bezier(.2,.65,.3,1)}
.wrap{animation:page-entrance 400ms ease-out both}@keyframes page-entrance{from{opacity:.35}to{opacity:1}}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){.wrap{animation:none}}
@media(prefers-reduced-motion:reduce){.wrap{transition:none}}

.conversation-placeholder.invitation-blue{display:block;min-height:0;padding:0;background:none;border:0}
.conversation-placeholder .person-label{font-size:14px}.conversation-placeholder .person-foot{font-size:11px}
.list-mode .conversation-placeholder{display:block}

/* Leave a full breathing space between portrait rows, including across tile seams. */
@media(min-width:761px){.world{height:max(1800px,100svh)}.conversation-placeholder.invitation-blue{--dy:40px}.conversation-placeholder.conversation-begin{--dy:35px}.conversation-placeholder.story-echo-c{--dy:45px}.conversation-placeholder.story-echo-b{--dy:60px}}
.conversation-placeholder.invitation-blue{color:var(--ink)}
@media(max-width:760px){.explorer.list-mode .world{row-gap:44px}.explorer.list-mode .conversation-placeholder{margin-block:0}}

.scene-tile>.bench-story{--gx:4;--gy:0;--dx:30px;--dy:80px;--depth:.4;width:275px;min-height:280px;background:#eee8f2;border:0;padding:26px}
.bench-story-drawing{display:block!important;width:130px;height:70px;margin:20px 0;background:var(--ink);mask:url('assets/card-bench.svg') left center/contain no-repeat;-webkit-mask:url('assets/card-bench.svg') left center/contain no-repeat}
.bench-story strong{margin:18px 0 14px;font-size:36px}.bench-story>span:last-child{max-width:190px}
#info-bench .bench-draft{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue);margin-bottom:20px}
@media(max-width:760px){.scene-tile>.bench-story{--gx:1;--gy:1;--dx:-20px;--dy:40px}.explorer.list-mode .bench-story{position:relative;inset:auto;transform:none;grid-column:1/-1;justify-self:center;width:min(310px,100%);margin:12px 0}}

/* Personal photographs bring a different shape and scale to the field. */
.scene-tile>.personal-portrait{width:260px;min-height:0;padding:0;border:0;background:none;box-shadow:none;cursor:default;text-align:center}
.personal-portrait .portrait-circle{width:100%;aspect-ratio:1;border-radius:50%;background:#e8e3d9;border:1px dashed #071e2640;display:grid;place-items:center}
.personal-portrait.conversation-begin .portrait-circle{background:#e5deeb}
.portrait-circle>span{font:italic 27px/1.1 "TeX Gyre Termes",serif;color:#071e2680}
.personal-portrait h3{font:700 29px/1.1 "TeX Gyre Termes",serif;margin:19px 0 7px}
.personal-portrait p{font-size:11px;color:#647074;margin:0}
.list-mode .personal-portrait{position:relative;inset:auto;transform:none;width:min(260px,100%);justify-self:center;align-self:center;margin:20px 0;grid-column:auto}
@media(max-width:760px){.scene-tile>.personal-portrait{width:230px}.explorer.list-mode .personal-portrait{width:min(230px,75%);grid-column:1/-1;justify-self:center}}

/* Match the shell's text edges to Tally's internal content gutter. */
#intake{--form-content-inset:48px}
.modal:has(#hosted-intake:not([hidden]))>.eyebrow,.modal:has(#hosted-intake:not([hidden]))>h2{padding-left:var(--form-content-inset);padding-right:calc(var(--form-content-inset) + 48px)}
.modal:has(#hosted-intake:not([hidden]))>.close{right:var(--form-content-inset)}
.hosted-form-fallback{padding-left:var(--form-content-inset);padding-right:var(--form-content-inset)}
@media(max-width:760px){#intake{--form-content-inset:24px}}

/* Give the whole badge its own depth instead of leaving it fixed among moving tiles. */
.scene-tile>.name-sticker{transform:translate3d(calc(var(--drift-x,0px)*var(--depth,.5)),calc(var(--drift-y,0px)*var(--depth,.5)),0)}
.list-mode .scene-tile>.name-sticker{transform:none}
@media(prefers-reduced-motion:reduce){.scene-tile>.name-sticker{transform:none}}

.name-sticker input.sticker-name:is(:focus,:focus-visible){outline:0;outline-offset:0;box-shadow:none;border:0}

.hosted-form-fallback{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:20px;min-height:68px}
.hosted-form-fallback>a{grid-column:1;justify-self:start}
.intake-footer-bench{grid-column:2;display:block;width:64px;height:34px;object-fit:contain}
@media(max-width:560px){.hosted-form-fallback{grid-template-columns:1fr;row-gap:10px;padding-top:14px}.intake-footer-bench{grid-column:1;grid-row:1;justify-self:center}.hosted-form-fallback>a{grid-row:2;justify-self:center;text-align:center}}

/* Mobile: lead with the slogan and conversations, then weave in personal portraits. */
@media(max-width:760px){
  .explorer.list-mode .viewport .personal-portrait{order:5}
  .explorer.list-mode .viewport .personal-portrait.conversation-begin{order:8}
  .explorer.list-mode .viewport .bench-story{order:9}
}

/* Touch-capable mobile devices can explore the same spatial field directly. */
@media(max-width:760px){
 .explorer:not(.list-mode) .viewport{inset:0;padding:0;overflow:hidden;touch-action:pinch-zoom;overscroll-behavior:none;cursor:grab;user-select:none}
 .explorer:not(.list-mode) .world{width:1200px;height:2500px}
 .explorer:not(.list-mode) .person{width:225px}
 .explorer:not(.list-mode) .world-title{width:285px;font-size:42px}
 .explorer:not(.list-mode) .name-sticker{width:275px}
 .explorer:not(.list-mode) .person-foot{opacity:1}
}

/* Keep Dad’s face centered within the circular photograph. */
.personal-portrait .dad-photo{overflow:hidden;border:0;position:relative}
.dad-photo img{width:100%;height:100%;object-fit:contain;pointer-events:none;display:block}

.personal-portrait .brother-photo{overflow:hidden;border:0;position:relative}
.brother-photo img{width:100%;height:100%;object-fit:contain;pointer-events:none;display:block}

/* Circular photographs keep both people in the frame. */
.personal-portrait .dad-photo,.personal-portrait .brother-photo{aspect-ratio:1;border-radius:50%;background:var(--paper);overflow:hidden}
.dad-photo img,.brother-photo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.dad-photo img{object-position:center 30%}
.brother-photo img{object-position:center center}

/* Only the spatial canvas captures pinch gestures; dialogs and scroll fallback remain native. */
.explorer:not(.list-mode) .viewport{touch-action:none}
.world{transform-origin:0 0}

/* Quiet empty-state instruction; the personalized invitation stays cobalt. */
.name-sticker .sticker-hint{color:#717778}

/* Keep the desktop composition on touch screens; the camera supplies the overview. */
@media(max-width:760px){
.explorer:not(.list-mode) .world{width:2200px;height:1800px}
.explorer:not(.list-mode) .scene-tile>:is(.person,.flip-tile,.grid-nav,.grid-invitation){left:calc(var(--gx)*20% + 35px + var(--dx,0px));top:calc(var(--gy)*33.333333% + 45px + var(--dy,0px))}
.explorer:not(.list-mode) .nav-project{--gx:0;--gy:0;--dx:40px;--dy:50px}
.explorer:not(.list-mode) .p-daddy{--gx:1;--gy:0;--dx:-10px;--dy:95px}
.explorer:not(.list-mode) .deck-1{--gx:2;--gy:0;--dx:15px;--dy:-10px}
.explorer:not(.list-mode) .p-procy{--gx:3;--gy:0;--dx:-20px;--dy:40px}
.explorer:not(.list-mode) .deck-2{--gx:0;--gy:1;--dx:110px;--dy:60px}
.explorer:not(.list-mode) .world-title{--gx:1;--gy:1;--dx:-40px;--dy:135px;width:330px;font-size:56px;letter-spacing:-2.5px}
.explorer:not(.list-mode) .p-edu{--gx:2;--gy:1;--dx:40px;--dy:-10px}
.explorer:not(.list-mode) .deck-zero{--gx:3;--gy:1;--dx:-40px;--dy:80px}
.explorer:not(.list-mode) .nav-begin,.explorer:not(.list-mode) .conversation-begin{--gx:4;--gy:1;--dx:70px;--dy:25px}
.explorer:not(.list-mode) .invitation-note{--gx:0;--gy:2;--dx:-5px;--dy:120px;width:270px}
.explorer:not(.list-mode) .p-papa{--gx:1;--gy:2;--dx:60px;--dy:10px}
.explorer:not(.list-mode) .deck-3{--gx:2;--gy:2;--dx:-40px;--dy:-10px}
.explorer:not(.list-mode) .repeat-invitation-blue,.explorer:not(.list-mode) .story-echo-b{--gx:3;--gy:2;--dx:70px;--dy:50px}
.explorer:not(.list-mode) .repeat-invitation-note,.explorer:not(.list-mode) .story-echo-c{--gx:4;--gy:2;--dx:-25px;--dy:150px}
.explorer:not(.list-mode) .bench-story{--gx:4;--gy:0;--dx:30px;--dy:80px}
.explorer:not(.list-mode) .person{width:310px}
.explorer:not(.list-mode) .person img{height:auto;aspect-ratio:3/4}
.explorer:not(.list-mode) .personal-portrait{width:260px}
.explorer:not(.list-mode) .name-sticker{left:30px;top:1210px;width:340px}
.explorer:not(.list-mode) .flip-tile{width:275px}
}

.story-links{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:24px}.story-links a{color:var(--blue);font-size:14px;text-underline-offset:4px}.story-links:empty{display:none}

/* The badge needs its own ready state: its input must never paint against the page. */
.name-sticker{position:absolute;left:30px;top:1210px;width:340px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 320ms ease-out}
.name-sticker.badge-ready{opacity:1;visibility:visible;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.name-sticker{transition:none}}