@font-face {
  font-family:Caveat;
  src:url('assets/caveat-display.ttf')
}
@font-face {
  font-family:Hand;
  src:url('assets/patrick-hand.ttf')
}
:root {
  --ink:#353e40;
  --quiet:#536066;
  --blue:#476c83;
  --pale:#dfeef6;
  color:var(--ink);
  background:#fff;
  font-family:Hand,system-ui,sans-serif;
  font-size:18px;
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:#fff url('assets/paper.webp') repeat;
  background-size:700px;
  overflow-x:clip
}
a {
  color:inherit;
  text-underline-offset:5px
}
button,input {
  font:inherit;
  color:inherit
}
button,a,input {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer;
  background:#dfeaf0;
  border:1px solid #53606670;
  border-radius:24px;
  padding:10px 22px;
  min-height:44px
}
button:disabled {
  cursor:wait;
  opacity:.6
}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #476c83;
  outline-offset:5px
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-family:Caveat,Hand,sans-serif;
  font-weight:500;
  line-height:1.06
}
h2 {
  font-size:clamp(40px,4.4vw,66px)
}
p {
  line-height:1.5
}
header {
  position:absolute;
  inset:0 0 auto;
  z-index:5;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:28px max(28px,calc((100vw - 1240px)/2));
  font-size:20px
}
header a {
  text-decoration:none
}
.wordmark {
  font:36px Caveat
}
.sr-only {
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.intro-stage {
  height:100svh;
  min-height:600px;
  position:relative;
  background:url('assets/mist-wash.webp') no-repeat right -330px bottom -500px;
  background-size:900px
}
.opening,.recognition {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:90px 24px
}
.opening h1 {
  max-width:930px;
  font-size:clamp(40px,5vw,72px);
  line-height:1.12;
  text-align:center;
  transform:translateY(-35px)
}
.scroll-cue {
  font:54px Caveat;
  text-decoration:none;
  margin-top:28px;
  color:var(--blue)
}
.recognition {
  align-items:flex-start;
  max-width:890px;
  margin:auto;
  gap:26px
}
.recognition h2,.recognition p {
  font:46px/1.22 Caveat
}
.recognition-line {
  width:100%
}
.written-word {
  height:1.4em;
  width:auto;
  vertical-align:-.46em;
  overflow:visible;
  color:var(--blue);
  margin:0 -.07em
}
.written-word path {
  stroke-dasharray:1;
  stroke-dashoffset:1
}
.story-chapter {
  position:relative
}
.chapter-stage {
  position:relative;
  width:100%;
  height:100svh;
  min-height:760px;
  padding:45px 24px 20px;
  overflow:hidden
}
.chapter-intro {
  text-align:center;
  max-width:980px;
  margin:0 auto;
  position:relative;
  z-index:2
}
.chapter-intro p {
  margin-top:12px;
  font-size:23px;
  color:var(--quiet)
}
.memory {
  position:absolute;
  left:max(40px,calc((100% - 1120px)/2));
  top:36%;
  width:410px;
  opacity:0;
  z-index:2
}
.memory p {
  font-size:23px;
  color:var(--quiet);
  margin-top:24px;
  max-width:360px
}
.memory h2 {
  font-size:60px
}
.plan-stage,.return-stage {
  position:relative;
  max-width:1120px;
  height:calc(100svh - 175px);
  min-height:590px;
  max-height:690px;
  margin:12px auto 0
}
.schedule-target {
  position:absolute;
  width:640px;
  left:calc(50% - 320px);
  top:20px;
  display:grid;
  grid-template-rows:repeat(6,80px)
}
.schedule-target i {
  display:block
}
.phone {
  border:5px solid #383b3d;
  border-radius:43px;
  box-shadow:0 0 0 1px #909596,0 0 0 3px #c4c7c8,8px 17px 30px #353e4015,inset 0 0 0 2px #111;
  position:relative;
  background:#fff url('assets/paper.webp');
  overflow:hidden
}
.phone:after {
  content:'';
  position:absolute;
  bottom:7px;
  left:36%;
  width:28%;
  height:4px;
  background:#353e40;
  border-radius:4px
}
.planner-phone,.return-phone {
  position:absolute;
  right:105px;
  top:0;
  width:340px;
  height:650px;
  opacity:0
}
.phone-paper {
  position:absolute;
  inset:0;
  background:url('assets/plan-organised.webp') center top/100% auto;
  opacity:.13
}
.plan-header {
  position:absolute;
  inset:22px 18px auto;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  font-size:26px;
  line-height:1.15;
  background:#fff
}
.plan-header small {
  display:block;
  font-size:15px;
  color:var(--quiet)
}
.plan-header .sort {
  position:absolute;
  top:60px;
  right:0
}
.phone-slots {
  position:absolute;
  left:5px;
  right:5px;
  top:112px;
  display:grid;
  grid-template-rows:repeat(6,76px)
}
.composer {
  position:absolute;
  bottom:29px;
  left:15px;
  right:15px;
  border-bottom:1px solid #8a979e;
  padding:7px;
  font-size:17px;
  background:#fff
}
.composer span {
  float:right
}
.moving-tasks {
  position:absolute;
  inset:0;
  pointer-events:none
}
.plan-task {
  position:absolute;
  top:0;
  left:0;
  min-height:76px;
  container-type:inline-size;
  transform-origin:center center
}
.thought {
  font:36px Caveat;
  display:block;
  white-space:nowrap
}
.thought-note {
  font:20px Hand;
  color:var(--quiet);
  display:block;
  padding:4px 0 0 22px
}
.plan-task[data-task=laundry] .thought {
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:6px
}
.plan-task[data-task=seminar] .thought {
  border-bottom:1px solid #476c8390;
  border-radius:45%
}
.row-copy {
  opacity:0;
  position:absolute;
  top:8px;
  left:48px;
  right:36px
}
.row-copy strong {
  font:20px Hand;
  line-height:1.12;
  display:block
}
.task-meta {
  display:block;
  font-size:15px;
  line-height:1.18;
  margin-top:4px;
  color:var(--quiet)
}
.task-meta b {
  font-weight:400;
  color:var(--ink);
  padding-right:5px
}
.importance {
  position:absolute;
  right:7px;
  top:15px;
  display:flex;
  gap:3px;
  opacity:0
}
.importance i {
  width:7px;
  height:9px;
  border:1px solid #738185;
  border-radius:46% 58% 42% 50%;
  transform:rotate(-12deg)
}
.importance i.filled {
  background:#697981
}
.row-art {
  position:absolute;
  inset:0;
  opacity:0;
  background-image:url('assets/plan-organised.webp');
  background-size:100cqw auto;
  background-position:0 var(--art-y);
  background-repeat:no-repeat
}
.row-art:after {
  content:'';
  position:absolute;
  inset:0 0 0 41px;
  background:#fff url('assets/paper.webp');
  border-bottom:1px solid #dbe0e1
}
.plan-task[data-task=assignment]:before {
  content:'';
  position:absolute;
  inset:0;
  background:#dfeef6;
  opacity:var(--selected,0);
  border:1px solid #aac0cc;
  border-radius:12px
}
.plan-task[data-task=assignment] .row-art:after {
  background:color-mix(in srgb,#dfeef6 calc(var(--selected,0)*100%),#fff)
}
.first-step {
  height:0;
  opacity:0;
  overflow:hidden;
  position:relative;
  margin:76px 9px 0;
  padding:0 16px;
  background:#e7f0f5 url('assets/plan-selected.webp') 50% 79%/100% auto;
  border-radius:8px;
  line-height:1.22
}
.first-step:before {
  content:'';
  position:absolute;
  inset:0;
  background:#e7f0f5ed
}
.first-step span,.first-step strong {
  position:relative;
  display:block;
  font-size:18px;
  font-weight:400;
  padding-top:8px
}
.first-step strong {
  font-size:21px;
  line-height:1.18;
  color:#344e60
}
.input-fallback {
  display:none
}
.return-stage {
  max-height:660px
}
.welcome-cat {
  position:absolute;
  top:0;
  left:0;
  width:350px;
  mix-blend-mode:multiply
}
.focus-state {
  position:absolute;
  left:52%;
  top:170px;
  text-align:center
}
.focus-state>p {
  font-size:27px
}
.timer {
  font:84px Caveat;
  margin:16px
}
.demo-pill {
  display:inline-block;
  border:1px solid #8a969b;
  border-radius:28px;
  padding:9px 24px;
  font-size:19px;
  margin:4px;
  white-space:nowrap
}
.welcome-content {
  position:absolute;
  top:0;
  left:0;
  opacity:0
}
.welcome-content h3 {
  font-size:calc(46px - var(--settle,0)*13px);
  text-align:center
}
.matcha {
  font-size:19px;
  text-align:center;
  margin-top:calc(12px + var(--settle,0)*105px);
  line-height:1.3
}
.return-step {
  margin-top:22px;
  border-top:1px solid #aebcc2;
  padding-top:16px
}
.return-step>p {
  font-size:21px
}
.return-step small {
  font-size:16px;
  color:var(--quiet);
  display:block;
  margin:12px 0 6px
}
.return-step strong {
  font-size:calc(32px - var(--settle,0)*7px);
  line-height:1.15;
  font-weight:400;
  display:block
}
.return-step .primary {
  background:#d4e3e9;
  display:block;
  text-align:center;
  margin:22px 0 13px
}
.return-options {
  display:flex;
  justify-content:space-between;
  font-size:17px
}
.return-phone {
  background:#fff url('assets/paper.webp')
}
.colour-stage {
  max-width:1200px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px
}
.colour-copy {
  max-width:480px;
  padding-left:16px
}
.colour-copy>p,.colour-heading>p {
  font-size:25px;
  margin-top:25px;
  color:var(--quiet)
}
.colour-copy .colour-moment {
  font-size:21px;
  color:var(--blue);
  margin-top:45px
}
.colour-copy .colour-stays {
  font:35px Caveat;
  color:var(--ink);
  opacity:0
}
.colour-art {
  width:480px;
  flex-shrink:0;
  height:650px;
  overflow:hidden;
  position:relative
}
.idle-art {
  aspect-ratio:var(--art-ratio);
  width:100%;
  position:relative
}
.idle-art svg {
  width:100%;
  height:100%;
  display:block
}
.colour-art .idle-art {
  position:absolute;
  bottom:-2%;
  width:100%
}
.colour-before {
  display:none
}
.gallery-section {
  padding:110px 0 90px;
  overflow:hidden
}
.gallery-heading {
  text-align:center;
  padding:0 24px
}
.gallery-heading p {
  font-size:23px;
  margin:20px 0 45px;
  color:var(--quiet)
}
.room-gallery {
  display:flex;
  gap:36px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  padding:10px max(24px,calc((100vw - 1120px)/2)) 30px;
  scrollbar-width:none;
  touch-action:pan-y;
  cursor:grab;
  user-select:none
}
.room-gallery:active {
  cursor:grabbing
}
.room-gallery::-webkit-scrollbar {
  display:none
}
.room-card {
  flex:0 0 250px;
  transform-origin:center center
}
.gallery-phone {
  height:510px;
  width:250px;
  border-width:4px;
  border-radius:33px;
  isolation:isolate
}
.gallery-phone img {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  z-index:-1
}
.room-card:nth-child(2) img {
  object-fit:contain;
  background:#fff
}
.home-heading {
  position:absolute;
  left:17px;
  right:17px;
  top:28px
}
.home-heading>span {
  font-size:22px
}
.home-heading p {
  font:27px/1.12 Caveat;
  margin-top:10px
}
.home-controls {
  position:absolute;
  bottom:31px;
  left:12px;
  right:12px;
  display:flex;
  gap:8px;
  font-size:16px
}
.home-controls span {
  border:1px solid #89969b;
  border-radius:25px;
  padding:9px 10px;
  text-align:center;
  white-space:nowrap;
  background:#ffffffd9
}
.home-controls span:first-child {
  background:var(--room-colour);
  flex:1
}
.room-card h3 {
  text-align:center;
  font-size:29px;
  margin:24px 0 8px
}
.gallery-controls {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  margin:15px 20px 0
}
.gallery-controls button {
  background:none;
  padding:5px 16px
}
.gallery-controls #pause-gallery {
  font-size:16px;
  border:0;
  text-decoration:underline
}
.gallery-controls span {
  min-width:100px;
  text-align:center
}
.swipe-hint {
  text-align:center;
  color:var(--quiet);
  font-size:17px;
  margin-top:15px
}
.closing {
  max-width:1120px;
  margin:auto;
  min-height:900px;
  padding:140px 30px 80px;
  display:grid;
  grid-template-columns:330px 1fr;
  gap:65px;
  align-content:center;
  align-items:center
}
.closing-cat {
  width:330px;
  mix-blend-mode:multiply
}
.waitlist-content h2 {
  font-size:58px
}
.waitlist-content>p {
  font-size:21px;
  margin-top:22px;
  color:var(--quiet)
}
form {
  margin-top:30px
}
form>label {
  display:block;
  margin-bottom:10px
}
.email-row {
  display:flex;
  gap:10px;
  flex-wrap:wrap
}
input[type=email] {
  border:1px solid #9da9ae;
  border-radius:8px;
  background:#ffffffa0;
  padding:12px;
  min-width:180px;
  flex:1;
  min-height:48px;
  width:100%
}
.email-row button {
  white-space:nowrap
}
.check-label {
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:17px;
  margin-top:17px;
  cursor:pointer
}
input[type=checkbox] {
  accent-color:#476c83;
  min-width:20px;
  height:20px;
  margin-top:3px
}
#form-status {
  margin-top:16px;
  color:var(--blue);
  font-size:18px;
  min-height:28px
}
.waitlist-content .preview-note,.waitlist-content .disclosure {
  font-size:15px;
  line-height:1.4;
  margin-top:16px
}
.text-button {
  background:none;
  padding:5px 0;
  border:0;
  text-decoration:underline
}
.recruit-invitation {
  grid-column:1/-1;
  justify-self:center;
  text-align:center;
  text-decoration:none;
  font-size:22px;
  margin-top:55px
}
.recruit-invitation svg {
  width:30px;
  height:65px;
  display:block;
  margin:15px auto 0;
  fill:none;
  stroke:var(--blue);
  stroke-width:2;
  stroke-linecap:round
}
.recruitment {
  max-width:990px;
  margin:auto;
  padding:80px 30px 140px
}
.recruit-intro {
  max-width:790px
}
.recruit-intro>p {
  font-size:23px;
  margin-top:30px;
  color:var(--quiet)
}
.growth {
  margin:65px 0 40px
}
.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 Hand;
  fill:var(--quiet)
}
.growth .chart-dates text {
  font-size:15px;
  text-anchor:middle
}
.growth circle {
  fill:var(--blue)
}
figcaption {
  font-size:15px;
  color:var(--quiet);
  margin-top:15px
}
.founder-report {
  font:30px/1.3 Caveat;
  max-width:790px
}
.founder-report span {
  font:15px/1.4 Hand;
  display:block;
  color:var(--quiet);
  margin-top:10px
}
.roles {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px;
  margin-top:60px
}
.roles article {
  border-top:1px solid #a6b4ba;
  padding-top:25px
}
.roles h3 {
  font-size:36px
}
.roles p {
  font-size:21px;
  margin:14px 0
}
.roles a {
  display:inline-block;
  min-height:44px;
  margin-top:10px;
  color:var(--blue)
}
.university,.founder {
  margin-top:35px;
  color:var(--quiet);
  font-size:19px
}
footer {
  max-width:1240px;
  margin:auto;
  padding:45px 30px;
  display:flex;
  gap:30px;
  flex-wrap:wrap;
  align-items:center;
  border-top:1px solid #d4dce0
}
footer p {
  width:100%;
  font-size:15px;
  color:var(--quiet)
}
.privacy-page {
  max-width:780px;
  margin:120px auto;
  padding:30px
}
.privacy-page h1 {
  font-size:60px
}
.privacy-page h2 {
  font-size:35px;
  margin-top:30px
}
.privacy-page p {
  margin:20px 0
}
@media(max-width:759px) {
  header {
    padding:20px 22px;
    font-size:17px
  }
  .wordmark {
    font-size:31px
  }
  .intro-stage {
    min-height:600px;
    background-size:700px;
    background-position:right -410px bottom -380px
  }
  .opening h1 {
    font-size:42px;
    max-width:440px
  }
  .recognition {
    gap:22px;
    padding:85px 24px
  }
  .recognition h2,.recognition p {
    font-size:32px;
    line-height:1.25
  }
  .chapter-stage {
    padding:28px 20px 10px
  }
  .chapter-intro h2 {
    font-size:38px
  }
  .chapter-intro p {
    font-size:19px;
    margin-top:10px
  }
  .plan-stage,.return-stage {
    height:calc(100svh - 172px);
    min-height:590px;
    margin-top:20px
  }
  .memory {
    top:28px;
    left:24px;
    right:24px;
    width:auto;
    text-align:center
  }
  .memory h2 {
    font-size:36px
  }
  .memory p {
    font-size:19px;
    margin:10px auto 0;
    max-width:350px
  }
  .planner-phone,.return-phone {
    right:auto;
    left:50%;
    transform:translateX(-50%);
    width:min(330px,100%);
    height:625px;
    top:5px
  }
  .schedule-target {
    width:100%;
    left:0;
    top:20px;
    grid-template-rows:repeat(6,84px)
  }
  .phone-slots {
    grid-template-rows:repeat(6,76px)
  }
  .row-copy {
    left:42px;
    right:30px
  }
  .row-copy strong {
    font-size:18px
  }
  .task-meta {
    font-size:14px
  }
  .thought-note {
    font-size:17px
  }
  .importance {
    right:4px;
    gap:2px
  }
  .importance i {
    width:6px;
    height:8px
  }
  .first-step {
    padding:0 12px
  }
  .first-step strong {
    font-size:20px
  }
  .first-step span {
    font-size:18px
  }
  .return-stage {
    margin-top:8px
  }
  .focus-state {
    top:235px;
    left:0;
    width:100%
  }
  .focus-state>p {
    font-size:23px
  }
  .timer {
    font-size:75px;
    margin:10px
  }
  .return-stage .return-phone {
    top:5px
  }
  .welcome-content h3 {
    font-size:calc(36px - var(--settle,0)*3px)
  }
  .matcha {
    font-size:18px
  }
  .return-step {
    margin-top:16px;
    padding-top:12px
  }
  .return-step strong {
    font-size:calc(27px - var(--settle,0)*3px)
  }
  .return-step small {
    margin-top:9px
  }
  .return-step .primary {
    margin:18px 0 12px
  }
  .colour-stage {
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:5px;
    padding-top:35px
  }
  .colour-copy {
    padding:0;
    text-align:center;
    max-width:440px
  }
  .colour-copy h2 {
    font-size:39px
  }
  .colour-copy>p,.colour-heading>p {
    font-size:20px;
    margin-top:14px
  }
  .colour-copy>p br,.colour-heading>p br {
    display:none
  }
  .colour-copy .colour-moment {
    font-size:18px;
    margin-top:10px
  }
  .colour-copy .colour-stays {
    font-size:27px;
    position:absolute;
    bottom:25px;
    left:0;
    right:0
  }
  .colour-art {
    width:min(420px,100%);
    height:calc(100svh - 280px);
    max-height:555px;
    flex-shrink:1
  }
  .colour-art .idle-art {
    bottom:0
  }
  .gallery-section {
    padding:70px 0
  }
  .gallery-heading h2 {
    font-size:40px
  }
  .gallery-heading p {
    font-size:20px;
    margin-bottom:30px
  }
  .room-card {
    flex-basis:240px
  }
  .gallery-phone {
    width:240px;
    height:495px
  }
  .room-gallery {
    gap:28px;
    padding-left:calc((100vw - 240px)/2);
    padding-right:calc((100vw - 240px)/2)
  }
  .gallery-controls {
    gap:8px;
    flex-wrap:wrap
  }
  .gallery-controls #pause-gallery {
    width:100%
  }
  .closing {
    display:flex;
    flex-direction:column;
    gap:18px;
    padding:70px 24px;
    min-height:0
  }
  .closing-cat {
    width:210px
  }
  .waitlist-content h2 {
    font-size:41px
  }
  .waitlist-content>p {
    font-size:20px
  }
  .email-row {
    flex-direction:column
  }
  .email-row button {
    width:100%
  }
  .recruit-invitation {
    margin-top:40px
  }
  .recruitment {
    padding:65px 24px 80px
  }
  .recruitment h2 {
    font-size:45px
  }
  .recruit-intro>p {
    font-size:21px
  }
  .growth {
    margin:45px 0
  }
  .growth text {
    font-size:22px
  }
  .growth .chart-dates text {
    font-size:22px
  }
  .roles {
    grid-template-columns:1fr;
    gap:35px;
    margin-top:40px
  }
  .roles h3 {
    font-size:34px
  }
  footer {
    padding:35px 24px;
    font-size:16px;
    gap:22px
  }
}
/* One readable flowing composition when holding a complete scene would crop it. */
.flow-layout .intro-stage {
  height:auto;
  min-height:0;
  background:none
}
.flow-layout .opening,.flow-layout .recognition {
  position:relative;
  min-height:90svh;
  opacity:1!important;
  transform:none!important
}
.flow-layout .recognition {
  min-height:65svh
}
.flow-layout .chapter-stage {
  height:auto;
  min-height:0;
  overflow:visible;
  padding:70px 24px
}
.flow-layout .chapter-intro {
  opacity:1!important
}
.flow-layout .memory {
  position:relative;
  top:auto;
  left:auto;
  right:auto;
  margin:45px auto 0;
  opacity:1!important;
  text-align:center;
  width:auto;
  max-width:640px;
  transform:none!important
}
.flow-layout .memory p {
  margin:16px auto;
  max-width:540px
}
.flow-layout .memory h2 {
  font-size:44px
}
.flow-layout .plan-stage {
  height:auto;
  min-height:0;
  margin-top:45px;
  display:flex;
  flex-direction:column;
  align-items:center
}
.flow-layout .input-fallback {
  display:flex;
  flex-wrap:wrap;
  gap:24px 40px;
  max-width:800px;
  margin:0 auto 55px
}
.input-fallback .eyebrow {
  width:100%;
  font-size:18px;
  color:var(--quiet)
}
.input-fallback>span {
  font:29px Caveat
}
.input-fallback small {
  display:block;
  font:16px Hand;
  color:var(--quiet)
}
.flow-layout .schedule-target,.flow-layout .phone-slots {
  display:none
}
.flow-layout .planner-phone {
  position:absolute;
  top:auto;
  bottom:0;
  left:50%;
  right:auto;
  transform:translateX(-50%)!important;
  height:840px;
  opacity:1!important;
  width:340px
}
.flow-layout .moving-tasks {
  position:relative;
  width:330px;
  height:840px;
  padding:112px 5px 60px
}
.flow-layout .plan-task {
  position:relative!important;
  transform:none!important;
  clip-path:none!important;
  width:100%!important;
  min-height:76px
}
.flow-layout .thought,.flow-layout .thought-note {
  display:none
}
.flow-layout .row-copy,.flow-layout .row-art,.flow-layout .importance {
  opacity:1!important
}
.flow-layout .plan-task[data-task=assignment] {
  --selected:1
}
.flow-layout .first-step {
  height:194px!important;
  opacity:1!important;
  margin-top:76px;
  padding-bottom:12px
}
.flow-layout .return-stage {
  height:650px;
  margin:35px auto 0;
  max-height:none
}
.flow-layout .return-phone {
  opacity:1!important;
  left:50%;
  right:auto;
  transform:translateX(-50%)!important;
  top:0
}
.flow-layout .welcome-cat {
  width:92px!important;
  left:calc(50% - 46px);
  top:72px;
  transform:none!important
}
.flow-layout .welcome-content {
  width:286px!important;
  left:calc(50% - 143px);
  top:30px;
  opacity:1!important;
  transform:none!important;
  --settle:1
}
.flow-layout .focus-state {
  display:none
}
.flow-layout .colour-stage {
  flex-wrap:wrap;
  gap:30px;
  justify-content:center
}
.flow-layout .colour-copy {
  max-width:100%;
  width:100%;
  text-align:center
}
.flow-layout .colour-stays {
  opacity:1!important;
  position:static!important
}
.flow-layout .colour-moment {
  display:none
}
.flow-layout .colour-art,.flow-layout .colour-before {
  display:block;
  width:min(430px,100%);
  height:620px;
  position:relative;
  overflow:hidden
}
.flow-layout .colour-before {
  order:1
}
.flow-layout .colour-art {
  order:2
}
.flow-layout .colour-before .idle-art {
  position:absolute;
  bottom:0
}
.flow-layout .colour-before>p {
  position:absolute;
  top:8px;
  left:20px;
  z-index:1
}
.flow-layout .colour-art:before {
  content:'After a few little starts';
  position:absolute;
  top:8px;
  left:20px;
  z-index:1
}
.flow-layout .colour-art .idle-art {
  bottom:0
}
.flow-layout .colour-copy .colour-stays {
  margin-top:15px
}
@media(max-width:359px) {
  .opening h1 {
    font-size:37px
  }
  .recognition h2,.recognition p {
    font-size:29px
  }
  .chapter-intro h2,.memory h2 {
    font-size:33px
  }
  .chapter-stage {
    padding-left:16px;
    padding-right:16px
  }
  .row-copy {
    left:38px;
    right:25px
  }
  .first-step {
    padding:0 9px
  }
  .first-step strong {
    font-size:18px
  }
  .first-step span {
    font-size:18px
  }
  .flow-layout .planner-phone {
    width:286px;
    height:900px
  }
  .flow-layout .moving-tasks {
    width:276px;
    height:900px
  }
  .flow-layout .plan-task {
    min-height:84px
  }
  .flow-layout .first-step {
    height:220px!important
  }
  .flow-layout .return-phone {
    width:286px
  }
  .flow-layout .welcome-content {
    width:242px!important;
    left:calc(50% - 121px)
  }
  .flow-layout .colour-art,.flow-layout .colour-before {
    height:470px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important
  }
}
/* Registered artwork is retained as row material;
no ghost copies of raster text. */
body {
  background-image:linear-gradient(#ffffffa6,#ffffffa6),url('assets/paper.webp')
}
.phone-paper {
  background:url('assets/paper.webp');
  opacity:.35
}
.row-art {
  height:76px;
  bottom:auto
}
.row-art:after {
  left:48px
}
.first-step {
  position:absolute;
  left:9px;
  right:9px;
  top:76px;
  margin:0!important
}
.first-step:before {
  background:#e7f0f5
}
.flow-layout .plan-task[data-task=assignment] {
  height:270px!important
}
@media(max-width:359px) {
  .flow-layout .plan-task[data-task=assignment] {
    height:296px!important
  }
}
.welcome-cat,.closing-cat {
  mask-image:radial-gradient(ellipse 60% 62% at 50% 51%,#000 62%,transparent 84%)
}
.duplicate-thought {
  position:absolute;
  top:30px;
  left:80px;
  font:24px Caveat;
  color:#536066;
  opacity:.35
}
.correction {
  display:inline-block;
  margin-left:8px
}
.flow-layout .duplicate-thought {
  display:none
}
.flow-layout .plan-stage {
  max-height:none
}
.flow-layout .moving-tasks {
  flex-shrink:0
}
.example-label {
  position:absolute;
  top:155px;
  left:max(25px,calc((100% - 1120px)/2));
  font-size:15px;
  color:var(--quiet);
  z-index:3
}
.planner-phone {
  background:none;
  border-color:transparent;
  box-shadow:none;
  overflow:visible;
  --ui:0;
  --frame:0
}
.planner-phone:before {
  content:'';
  position:absolute;
  inset:-5px;
  border:5px solid #383b3d;
  border-radius:43px;
  box-shadow:0 0 0 1px #909596,0 0 0 3px #c4c7c8,8px 17px 30px #353e4015;
  opacity:var(--frame)
}
.planner-phone:after {
  opacity:var(--frame)
}
.planner-phone .phone-paper {
  inset:0;
  border-radius:38px;
  background:#fff;
  opacity:var(--ui)
}
.plan-header {
  inset:8px 1px auto;
  height:108px;
  background:none;
  opacity:var(--ui)
}
.plan-header svg,.composer svg {
  width:100%;
  height:100%;
  display:block
}
.composer {
  bottom:18px;
  left:4px;
  right:4px;
  height:63px;
  padding:0;
  border:0;
  background:#fff;
  opacity:var(--ui)
}
.row-art:after {
  inset:33px 18px 7px 49px;
  border:0;
  background:#fff
}
.row-copy {
  left:50px;
  right:50px
}
.row-copy strong {
  font:27px/1.05 Caveat;
  white-space:nowrap
}
.task-meta {
  margin-top:5px;
  font-size:15px
}
.task-meta b {
  display:inline-block
}
.importance {
  right:30px
}
.row-art {
  background-color:white
}
.plan-task[data-task=assignment] .row-art:after {
  background:#dfedf4
}
.first-step {
  padding:0;
  background:none;
  border-radius:0
}
.first-step:before {
  display:none
}
.step-art {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}
.step-readable {
  position:relative;
  background:#f1f7fa;
  min-height:145px;
  padding:2px 12px 6px;
  margin:4px 7px 0
}
.first-step span {
  font-size:17px;
  padding-top:5px;
  line-height:1.1
}
.first-step strong {
  font-size:20px;
  padding-top:5px;
  line-height:1.12
}
.flow-layout .row-copy strong {
  opacity:0!important
}
.flow-layout .importance {
  opacity:0!important
}
.flow-layout .planner-phone {
  --ui:1;
  --frame:1
}
.flow-layout .example-label {
  position:static;
  text-align:center;
  margin:25px auto 0
}
.flow-layout .plan-stage {
  margin-top:25px
}
@media(max-width:759px) {
  .example-label {
    top:148px;
    left:24px;
    font-size:13px
  }
  .row-copy {
    left:48px;
    right:32px
  }
  .row-copy strong {
    font-size:26px
  }
  .task-meta {
    font-size:14px
  }
  .first-step strong {
    font-size:19px
  }
  .first-step span {
    font-size:17px
  }
}
.plan-header {
  border-radius:30px 30px 0 0;
  overflow:hidden
}
.row-art:after {
  background:#fff url('assets/paper.webp') center/700px
}
.first-step span {
  font-size:18px
}
.example-label {
  top:auto;
  bottom:18px;
  left:0;
  right:0;
  text-align:center
}
.flow-layout .example-label {
  position:static
}
.room-gallery {
  touch-action:pan-y pinch-zoom
}
.room-card:nth-child(4) img {
  object-fit:contain;
  background:#fff
}
.row-art {
  height:min(76px,21.08cqw)
}
.plan-task[data-task=assignment] .row-art {
  height:76px
}
/* Move the actual illustrated title pixels throughout; they register exactly at the final row. */
.row-copy strong{width:var(--title-width,205px);height:var(--title-height,26px);display:block;opacity:1!important}.row-copy strong svg{width:100%;height:100%;display:block}.row-art:before{content:'';position:absolute;top:4px;left:47px;right:65px;height:30px;background:#fff url('assets/paper.webp') center/700px}.flow-layout .row-copy strong{opacity:1!important}.plan-task[data-task=assignment] .row-art:before{background:#dfedf4}
.welcome-cat{aspect-ratio:1}.welcome-cat img,.welcome-cat video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}.welcome-cat[data-media=poster] .welcome-poster,.welcome-cat[data-media=video] video,.welcome-cat[data-media=handoff] .welcome-handoff{opacity:1}.flow-layout .welcome-cat .welcome-handoff{opacity:1}.flow-layout .welcome-cat .welcome-poster,.flow-layout .welcome-cat video{opacity:0}
.row-copy strong{mix-blend-mode:multiply}.row-art:before{right:80px}.row-copy{right:auto}
.flow-layout .row-copy{width:calc(100% - 86px)!important}
.growth-line{stroke-dasharray:1;stroke-dashoffset:0}

/* September refinement: a quiet foreground, continuous paper, deliberate chapter space. */
.opening-copy { display:flex; flex-direction:column; align-items:center; max-width:930px; }
.opening h1 { transform:translateY(-35px); }
.hero-mascot { position:absolute; bottom:16px; left:0; right:0; height:190px; display:flex; justify-content:center; pointer-events:none; }
.hero-mascot:before { content:''; position:absolute; left:8%; right:8%; top:143px; height:1px; background:linear-gradient(90deg,transparent,#c7c2b870 20%,#c7c2b870 80%,transparent); }
.hero-mascot svg { position:relative; width:190px; height:190px; overflow:visible; }
.tilt-control { position:absolute; right:22px; bottom:35px; font-size:15px; background:transparent; padding:6px 12px; }
.tilt-control[hidden] { display:none; }
.crayon-wash { position:relative; isolation:isolate; white-space:nowrap; }
.crayon-wash:before { content:''; position:absolute; z-index:-1; inset:24% -5px 0; background:#badcec url('assets/paper.webp') center/500px; background-blend-mode:multiply; opacity:.66; transform:rotate(-1.5deg); clip-path:polygon(1% 16%,13% 8%,36% 13%,55% 0,77% 7%,99% 2%,100% 82%,89% 94%,63% 86%,44% 100%,22% 92%,0 99%); }
.matcha .crayon-wash:before { opacity:calc(var(--settle,0) * .8); }
/* The same measured rows form both the open schedule and final phone. */
.planner-phone .phone-paper { background:#fff url('assets/paper.webp') center/700px; }
.composer { background:transparent; bottom:10px; height:55px; }
.plan-task[data-task=assignment]:before { display:none; }
.plan-task[data-task=seminar] .thought { border:0; border-radius:0; }
.seminar-time { display:inline-block; position:relative; margin-left:6px; }
.seminar-time svg { position:absolute; inset:-12% -20%; width:140%; height:135%; overflow:visible; fill:#dceaf22e; stroke:#6e8c9cab; stroke-width:1.2; }
.thought-note { padding-left:5px; font-size:18px; }
.thought-note s { text-decoration-color:#849295; opacity:.65; }
.row-art { height:76px!important; background:none; border-bottom:1px solid #82929933; }
.row-art:before,.row-art:after { display:none; }
.task-checkbox { position:absolute; top:13px; left:15px; width:16px; height:18px; border:1.3px solid #758184; border-radius:4px 5px 3px 4px; transform:rotate(-2deg); }
.row-copy { left:42px; top:8px; }
.row-copy strong { mix-blend-mode:multiply; }
.task-meta { font-size:15px; display:flex; align-items:baseline; gap:6px; margin-top:5px; line-height:1.15; }
.task-meta b { padding:0; flex-shrink:0; }
.duration { flex:1; }
.importance { top:18px; right:13px; gap:4px; }
.importance i { width:9px; height:11px; border-color:#89969b; }
.importance i.filled { background:#a2c8e2 url('assets/paper.webp') center/250px; background-blend-mode:multiply; border-color:#a2c8e2; }
.flow-layout .importance { opacity:1!important; }
.flow-layout .row-copy { width:calc(100% - 62px)!important; }
.flow-layout .plan-task { visibility:visible!important; }
.flow-layout .welcome-cat .welcome-handoff,.flow-layout .welcome-cat .welcome-poster,.flow-layout .welcome-cat video { opacity:0; }
.flow-layout .welcome-cat[data-media=video] video,.flow-layout .welcome-cat[data-media=poster] .welcome-poster,.flow-layout .welcome-cat[data-media=handoff] .welcome-handoff { opacity:1; }
.flow-layout .flow-return-motion .return-stage { height:1060px; }
.flow-layout .flow-return-motion .return-phone { top:400px; }
.flow-layout .flow-return-motion .welcome-cat { left:0; top:0; width:240px!important; transform:translate(var(--cat-x,0px),var(--cat-y,0px)) scale(var(--cat-scale,1))!important; transform-origin:top left; }
.flow-layout .flow-return-motion .welcome-content { top:430px; }
.room-gallery { touch-action:pan-x pan-y pinch-zoom; scroll-snap-type:x mandatory; position:relative; }
.room-card { scroll-snap-align:center; scroll-snap-stop:always; }
.room-gallery.dragging { scroll-snap-type:none; }
.gallery-section,.closing,.recruitment { min-height:100svh; }
.gallery-section { padding:95px 0 110px; }
.closing { position:relative; padding-top:110px; padding-bottom:80px; }
.closing:before,.recruitment:before { content:''; display:block; position:absolute; top:0; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,#a4b6bf80,transparent); }
.recruitment { position:relative; padding-top:110px; }
.recruit-intro > p { margin-top:20px; max-width:740px; }
.recruit-intro > p:first-of-type { margin-top:32px; }
@media(max-width:759px) {
  .hero-mascot { height:160px; bottom:16px; }
  .hero-mascot svg { width:160px; height:160px; }
  .hero-mascot:before { top:121px; }
  .opening-copy { margin-top:-35px; }
  .opening h1 { font-size:40px; }
  .planner-phone { height:650px; }
  .task-meta { font-size:14px; }
  .thought-note { font-size:16px; }
  .gallery-section { padding:75px 0 110px; }
  .gallery-heading p { max-width:290px; margin:18px auto 32px; }
  .closing { padding:95px 24px 70px; }
  .recruitment { padding:95px 24px 90px; }
  .recruit-intro > p { margin-top:22px; }
}
@media(prefers-reduced-motion:reduce) {
  .growth-line { stroke-dashoffset:0; }
}
.recognition { pointer-events:none; }
.flow-layout .opening { min-height:100svh; }
@media(max-height:600px) {
  .hero-mascot { width:125px; height:125px; left:auto; right:20px; bottom:10px; }
  .hero-mascot svg { width:125px; height:125px; }
  .hero-mascot:before { top:95px; }
}

body:not(.flow-layout) .recognition { opacity:0; }
.recognition-line span[aria-hidden=true] { white-space:nowrap; }
@media(max-width:759px) { .recognition h2,.recognition p { font-size:30px; } }

/* Sunlight belongs to one visible stage, shared by opening and recognition. */
.intro-stage { background:none; isolation:isolate; }
.ambient-background { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.ambient-surface { position:sticky; top:0; width:100%; height:100svh; overflow:hidden; background:#eee6d4; }
.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 video { opacity:1; }
.ambient-surface img { z-index:1; }
.ambient-surface[data-ready=true] img { opacity:0; }
#introduction { position:relative; z-index:0; color:#242424; }
body.story-ready:not(.flow-layout) #planning { margin-top:-100svh; }
.story-chapter,.gallery-section,.closing,.recruitment { position:relative; background:url('assets/paper.webp') repeat; background-size:700px; }
#planning { z-index:1; }
#planning .chapter-stage { background:inherit; box-shadow:0 -15px 35px #61533b0a; }
.colour-heading { position:relative; }
.hero-mascot { width:auto; height:155px; left:0; right:0; bottom:22px; }
.hero-mascot svg { width:310px; height:155px; }
.hero-mascot:before { display:none; }
@media (max-width:759px) {
 .hero-mascot { height:130px; bottom:40px; }
 .hero-mascot svg { width:260px; height:130px; }
 .tilt-control { bottom:12px; left:16px; right:auto; }
}
@media (max-height:600px) {
 .hero-mascot { left:auto; right:18px; width:180px; height:90px; bottom:36px; }
 .hero-mascot svg { width:180px; height:90px; }
}

/* The visitor meets the interactive cat at the invitation to help build Minlow. */
.mascot-interaction { grid-column:1/-1; position:relative; height:155px; width:100%; align-self:end; margin-top:-35px; }
.mascot-interaction:after { content:''; position:absolute; left:0; right:0; top:147px; border-top:1px solid #a4b6bf80; z-index:0; }
.mascot-interaction .hero-mascot { width:100%; height:155px; left:0; right:0; bottom:0; z-index:1; }
.mascot-interaction .hero-mascot svg { width:310px; height:155px; }
.mascot-interaction .tilt-control { bottom:0; left:0; right:auto; z-index:2; }
.closing { padding-bottom:0; }
.recruitment:before { display:none; }
@media (max-width:759px) {
 .mascot-interaction { height:130px; margin-top:-5px; }
 .mascot-interaction:after { top:123px; }
 .mascot-interaction .hero-mascot,.mascot-interaction .hero-mascot svg { height:130px; }
 .mascot-interaction .hero-mascot svg { width:260px; }
 .mascot-interaction .tilt-control { bottom:135px; }
}

.waitlist-content > h2,.recruit-intro > h2 { width:fit-content; max-width:100%; }

/* Full-bleed safe areas; browser controls themselves remain under Safari's control. */
html { background:#f6efdb; }
header { padding-top:max(24px, env(safe-area-inset-top)); padding-left:max(24px, env(safe-area-inset-left)); padding-right:max(24px, env(safe-area-inset-right)); }
.ambient-surface { height:100dvh; }
.founder { padding-bottom:env(safe-area-inset-bottom); }
.intro-canvas { position:absolute; inset:0; z-index:5; pointer-events:none; background:url('assets/paper.webp') repeat; background-size:700px; transform:translateY(100%); }
.intro-stage { overflow:hidden; }
.flow-layout .intro-canvas { display:none; }
body.story-ready:not(.flow-layout) :is(#planning,#returning,#colouring,#gallery,#waitlist,#recruitment) { margin-top:-100svh; }
body.story-ready:not(.flow-layout) .story-chapter { background:none; }
body.story-ready:not(.flow-layout) .chapter-stage { background:url('assets/paper.webp') repeat; background-size:700px; }
#returning { z-index:2; } #colouring { z-index:3; } #gallery { z-index:4; } #waitlist { z-index:5; } #recruitment { z-index:6; }
/* Keep the decoder renderable behind its loading/final still, including reverse seeks. */
.welcome-cat[data-media] video { opacity:1; }
.welcome-cat img { z-index:1; }
/* Pin spacing overlaps adjacent chapters; only the visible content receives taps. */
.pin-spacer { pointer-events:none; }
.pin-spacer > .intro-stage, .pin-spacer > .chapter-stage { pointer-events:auto; }

.intro-stage { height:100dvh; }
.flow-layout .opening { min-height:100dvh; }
body.story-ready:not(.flow-layout) #planning { margin-top:-100dvh; }
/* Narrow closing content still needs an edge-to-edge canvas over the outgoing scene. */
.closing,.recruitment { isolation:isolate; }
.closing:after,.recruitment:after { content:''; position:absolute; top:0; bottom:0; left:calc(50% - 50vw); width:100vw; z-index:-1; pointer-events:none; background:url('assets/paper.webp') repeat; background-size:700px; }


/* A separate compositor-fixed backdrop is never counter-translated by scroll JS.
   Its extra height paints behind Safari controls; content keeps stable geometry. */
html { background:#eee6d4; }
body { isolation:isolate; }
.ambient-background { position:fixed; inset:0; z-index:-1; }
.ambient-surface { position:absolute; top:0; height:100svh; overflow:visible; background:transparent; }
.ambient-surface img,.ambient-surface video { top:0; height:100%; }
@media (hover:none) and (pointer:coarse) {
 .ambient-background { top:-80px; bottom:auto; height:calc(100lvh + 160px); }
 .ambient-surface { top:80px; }
 .ambient-surface img,.ambient-surface video { top:-80px; height:calc(100lvh + 160px); }
}
body.story-ready:not(.flow-layout) .intro-stage { height:100svh!important; max-height:none!important; overflow:visible; }
.intro-canvas-clip { position:absolute; top:0; left:0; width:100%; height:100lvh; overflow:hidden; pointer-events:none; z-index:5; }
/* The paper that covers the sunlight needs the sunlight's overhang, or the
   sunlight shows beneath it when scrolling back re-expands Safari's address bar. */
@media (hover:none) and (pointer:coarse) { .intro-canvas-clip { top:-80px; height:calc(100lvh + 160px); } }
body.story-ready:not(.flow-layout) #planning { margin-top:-100svh; }
/* Reading-mode sections still share one background, then leave it behind. */
.flow-layout .intro-canvas-clip { display:none; }
/* Safari's native scroll timeline keeps the backdrop in document painting while
   the compositor holds it steady, avoiding both fixed-edge tint and JS pin lag. */
@supports (animation-timeline:scroll(root block)) {
 body.native-opening.story-ready:not(.flow-layout) #introduction { height:calc(100svh + var(--opening-distance, 125svh)); }
 body.native-opening.story-ready:not(.flow-layout) .intro-stage,
 body.native-opening.story-ready:not(.flow-layout) .ambient-background {
  animation:ambient-hold linear both;
  animation-timeline:scroll(root block);
  animation-range:0px var(--opening-distance, 125svh);
 }
 body.native-opening.story-ready:not(.flow-layout) .ambient-background { position:absolute; }
 @keyframes ambient-hold { from { transform:translateY(0); } to { transform:translateY(var(--opening-distance, 125svh)); } }
}

.flow-layout .ambient-background[data-outside=true] { visibility:hidden; }

/* At scroll zero, iOS Safari fills its status-bar area with the body's
   background colour; the page cannot paint artwork there. Match the colour of
   the sunlight's top edge, and fade from it so no straight seam shows. The fade
   belongs to the header, so it scrolls away once artwork is under the bar. */
body:has(> .ambient-background) { background-color:#cbb59c; }
@media (hover:none) and (pointer:coarse) {
 body:has(> .ambient-background) > header:before { content:''; position:absolute; top:0; left:0; right:0; height:44px; z-index:-1; pointer-events:none; background:linear-gradient(#cbb59c,#cbb59c00); }
}

#verification { min-height:70px; margin-top:16px; }