:root{font-family:'Clarity City',Arial,sans-serif;color:white;background:#000;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}a:focus-visible,button:focus-visible{outline:2px solid #F47A93;outline-offset:6px}
.about-header{height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;position:relative;z-index:5;font-size:16px}.about-logo{position:absolute;left:50%;transform:translateX(-50%);width:190px}.about-logo img{display:block;width:100%}
.planner-stage{height:calc(100dvh - 100px);position:relative;display:grid;place-items:center;perspective:1500px}
.planner-cover{position:absolute;border:0;padding:0;background:transparent;width:min(95vw,1040px);height:85%;cursor:pointer;transition:transform .85s cubic-bezier(.22,.75,.2,1),opacity .6s;z-index:2}
.planner-cover img{display:block;width:100%;height:100%;object-fit:contain}.planner-hint{position:absolute;bottom:1%;left:50%;transform:translateX(-50%);color:#ffd7dd;font-size:14px;white-space:nowrap}.planner-hint span{margin-left:10px}
.planner-stage.is-open .planner-cover{transform:translateX(-46vw) rotate(-8deg);opacity:0;pointer-events:none}
.planner-pages{width:min(96vw,1200px);height:94%;display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateX(20vw);transition:transform .85s cubic-bezier(.22,.75,.2,1),opacity .7s}
.planner-pages[hidden]{display:none}.planner-stage.is-open .planner-pages{opacity:1;transform:translateX(0)}
.planner-page{border:0;background:transparent;padding:0;width:100%;min-height:0;flex:1;cursor:pointer}.planner-page img{width:100%;height:100%;object-fit:contain;display:block}
.planner-navigation{display:flex;gap:22px;align-items:center;justify-content:center;padding:15px 0 25px;font-size:13px}.planner-navigation button{border:0;background:none;cursor:pointer;padding:8px;color:#ffd7dd}.planner-prev,.planner-next{font-size:26px!important}.planner-close{margin-left:16px}.planner-navigation button:hover{color:#F47A93}
@media(max-width:700px){.about-header{height:80px;font-size:14px}.about-logo{width:145px}.planner-stage{height:calc(100dvh - 80px)}.planner-cover{width:140vw;height:75%;max-width:1000px}.planner-pages{width:100vw;height:85%}.planner-navigation{gap:10px}.planner-hint{bottom:5%}}
@media(prefers-reduced-motion:reduce){.planner-cover,.planner-pages{transition:none}}
.planner-stage{overflow:hidden}
/* Horizontal opening, with generous space below the planner. */
.planner-stage{padding-bottom:clamp(65px,10vh,120px)}
.planner-cover{height:calc(85% - clamp(65px,10vh,120px));top:4%;transition:transform .9s cubic-bezier(.25,.8,.25,1),opacity .18s .72s}
.planner-stage.is-open .planner-cover{transform:translateX(-28vw);opacity:0}
.planner-pages{height:100%;max-height:calc(100% - 25px);transform:translateX(30vw);opacity:1;clip-path:inset(0 0 0 50%);transition:transform .9s cubic-bezier(.25,.8,.25,1),clip-path .9s cubic-bezier(.25,.8,.25,1)}
.planner-stage.is-open .planner-pages{transform:translateX(0);clip-path:inset(0)}
.planner-navigation{padding-bottom:15px}
@media(max-width:700px){.planner-stage{padding-bottom:75px}.planner-cover{height:calc(75% - 50px);top:8%}.planner-pages{height:90%;max-height:100%}}
@media(prefers-reduced-motion:reduce){.planner-cover,.planner-pages{transition:none}}
/* Match the recording: a stationary centred book with side navigation. */
.planner-stage{padding:25px 0 clamp(90px,12vh,140px)}
.planner-pages{position:relative;width:min(84vw,1080px);height:100%;max-height:100%;clip-path:none;transform:translateX(45px);opacity:0;transition:transform .55s ease,opacity .55s ease}
.planner-stage.is-open .planner-pages{clip-path:none;transform:translateX(0);opacity:1}
.planner-cover{top:auto;height:calc(100% - clamp(115px,15vh,170px));width:min(95vw,1040px);transition:transform .65s ease-in-out,opacity .45s ease}
.planner-stage.is-open .planner-cover{transform:translateX(-16vw);opacity:0}
.planner-page{position:relative;overflow:visible}
.planner-outgoing{position:absolute;inset:0;pointer-events:none}
.planner-navigation{padding:12px 0 0;min-height:46px}
.planner-prev,.planner-next{position:absolute;top:45%;transform:translateY(-50%);font-size:32px!important;z-index:3}
.planner-prev{left:-35px}.planner-next{right:-35px}
@media(max-width:700px){.planner-stage{padding-top:20px;padding-bottom:90px}.planner-pages{width:88vw;height:100%}.planner-cover{height:calc(100% - 125px);width:140vw}.planner-prev{left:-22px}.planner-next{right:-22px}}
@media(prefers-reduced-motion:reduce){.planner-cover,.planner-pages{transition:none}}
.planner-letter-prompt{position:absolute;left:10%;top:43%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;padding:0;border:0;background:transparent;cursor:pointer;z-index:4;transition:opacity .25s,transform .4s}
.letter-row{display:flex;justify-content:center;gap:0}
.planner-letter{width:clamp(40px,4.4vw,70px);height:auto;display:block}
.planner-stage:not(.is-open) .planner-cover{transform:translateX(12vw)}
.planner-stage.is-open .planner-letter-prompt{opacity:0;pointer-events:none;transform:translate(-40px,-50%);visibility:hidden}
.planner-stage{padding-bottom:clamp(110px,14vh,180px)}
.planner-pages{height:100%;max-height:calc(100dvh - 270px)}
.planner-page{height:calc(100% - 50px);max-height:calc(100dvh - 320px)}
.planner-cover{height:calc(100dvh - 280px);max-height:75%;width:min(90vw,1000px)}
@media(max-width:700px){.planner-letter-prompt{left:4%;top:43%;gap:1px}.planner-letter{width:clamp(25px,5.8vw,40px)}.planner-stage:not(.is-open) .planner-cover{transform:translateX(13vw)}.planner-cover{width:125vw;height:calc(100dvh - 240px)}.planner-pages{max-height:calc(100dvh - 220px)}.planner-page{max-height:calc(100dvh - 270px)}.planner-stage{padding-bottom:100px}}
@media(prefers-reduced-motion:reduce){.planner-letter-prompt{transition:none}}
/* Keep closed and open planner artwork in one large, fixed area. */
.planner-stage{padding:0;display:block;--planner-width:min(65vw,calc((100dvh - 190px)*1.3636));--planner-height:calc(100dvh - 190px)}
.planner-cover,.planner-pages{position:absolute;left:33%;top:10px;width:var(--planner-width);height:var(--planner-height);max-height:none}
.planner-stage:not(.is-open) .planner-cover{transform:none}
.planner-cover{transition:opacity .45s,transform .55s}
.planner-stage.is-open .planner-cover{transform:translateX(-35px);opacity:0}
.planner-pages{transform:translateX(35px);opacity:0;clip-path:none}
.planner-stage.is-open .planner-pages{transform:none;opacity:1}
.planner-page{height:100%;max-height:none;flex:none}
.planner-navigation{position:absolute;left:0;right:0;bottom:-38px;padding:0;min-height:30px}
.planner-prev,.planner-next{top:calc(var(--planner-height)*-.5);transform:none}
.planner-prev{left:-25px}.planner-next{right:-25px}
.planner-letter-prompt{left:8%;top:36%}
.planner-stage.is-open .planner-letter-prompt{opacity:1;visibility:visible;transform:translateY(-50%);pointer-events:none}
@media(max-width:700px){.planner-stage{--planner-width:70vw;--planner-height:calc(100dvh - 210px)}.planner-cover,.planner-pages{left:28%;top:10px}.planner-letter-prompt{left:1%;top:35%}.planner-letter{width:5.5vw}.planner-prev{left:-12px}.planner-next{right:-12px}}
@media(prefers-reduced-motion:reduce){.planner-cover,.planner-pages{transition:none}}
/* Preview the reference header only on the planner page. */
.about-header{height:155px;display:grid;grid-template-columns:2fr 1fr 1.5fr .5fr;align-items:start;gap:24px;padding:35px 4%;color:white;font-size:15px;line-height:1.4}
.about-logo{position:static;transform:none;width:170px;margin-top:-8px}.about-logo img{filter:brightness(0) invert(1)}
.header-profession,.header-location{margin:6px 0 0}
.header-menu{display:flex;flex-direction:column;align-items:flex-end;gap:7px;margin-top:6px}.header-menu a{white-space:nowrap}.header-menu a[aria-current="page"]::before{content:'• ';}.header-menu a:hover{color:#F47A93}
.planner-stage{height:calc(100dvh - 155px);--planner-height:calc(100dvh - 325px);--planner-width:min(65vw,calc((100dvh - 325px)*1.3636))}
@media(max-width:700px){.about-header{height:165px;grid-template-columns:1fr 1fr auto;gap:12px;padding:24px 5%;font-size:12px}.about-logo{width:125px;grid-column:1;grid-row:1}.header-profession{grid-column:2;grid-row:1}.header-location{grid-column:1/3;grid-row:2;margin:0;align-self:start}.header-menu{grid-column:3;grid-row:1/3;margin:0;gap:8px}.planner-stage{height:calc(100dvh - 165px);--planner-height:calc(100dvh - 340px);--planner-width:70vw}}
/* Mobile planner composition. */
@media(max-width:700px){
  .about-header{height:130px;display:flex;justify-content:space-between;align-items:flex-start;padding:30px 9% 0 5%}
  .header-profession,.header-location{display:none}
  .about-logo{width:125px;margin-top:-8px}
  .header-menu{margin-top:8px;gap:8px;font-size:12px}
  .planner-stage{height:calc(100dvh - 130px)}
  .planner-cover{left:-10%;top:calc(38dvh - 130px);width:116vw;height:85.07vw;max-width:none}
  .planner-pages{left:3%;top:calc(38dvh - 130px);width:94vw;height:68.93vw}
  .planner-letter-prompt{left:50%;top:calc(28dvh - 130px);transform:translate(-50%,-50%);gap:2px}
  .planner-stage.is-open .planner-letter-prompt{transform:translate(-50%,-50%)}
  .planner-letter{width:9vw}
  .planner-navigation{bottom:-42px;gap:12px}
  .planner-prev,.planner-next{top:calc(-34.46vw)}
}
/* Mobile page arrows sit together above the open planner. */
@media(max-width:700px){
  .planner-prev,.planner-next{top:calc(-68.93vw - 62px);transform:none}
  .planner-prev{left:calc(50% - 55px);right:auto}
  .planner-next{right:calc(50% - 55px);left:auto}
}