/* resources: a "coming soon" holding page in the same world as the home page */
:root{
  --paper:#F4F4F2; --sheet:#FFFFFF; --ink:#462615; --ink-soft:#7A6457; --sun:#2563EB; --sun-deep:#1D4ED8; --sun-light:#93C5FD;
  --hand:'Gaegu','Comic Neue','Marker Felt',cursive;
  --gutter-l:max(16px, env(safe-area-inset-left, 0px)); --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:var(--hand);min-height:100svh;display:flex;flex-direction:column;overflow-x:hidden}
a{color:var(--ink)}
a:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:999px}
img{display:block}

/* the same white bar as the home page */
.top{padding:calc(24px + env(safe-area-inset-top,0px)) var(--gutter-r) 0 var(--gutter-l)}
@media (min-width:761px){.top{padding-left:max(64px,var(--gutter-l));padding-right:max(64px,var(--gutter-r))}}
.bar{max-width:1280px;margin-inline:auto;display:flex;align-items:center;gap:24px;background:var(--sheet);border-radius:999px;height:50px;
  padding:0 5px 0 6px;box-shadow:0 1px 0 rgba(70,38,21,.06),0 14px 34px -14px rgba(70,38,21,.28)}
.brand{margin-right:auto;border-radius:50%}
.logo{width:38px;height:38px;border-radius:50%}
.pill{font:700 19px/1 var(--hand);text-decoration:none;background:var(--sun);color:#FFFFFF;border-radius:999px;
  padding:0 18px;height:40px;display:inline-flex;align-items:center;gap:8px;transition:transform .2s ease,background-color .2s ease}
.pill:hover{background:var(--sun-deep);transform:translateY(-2px) rotate(-1.5deg)}
.pill .arr{width:24px;height:14px;transition:transform .2s ease}.pill:hover .arr{transform:translateX(4px)}

/* the message */
main{flex:1;display:grid;place-items:center;padding:48px var(--gutter-r) 72px var(--gutter-l);position:relative}
.soon{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.label{font-size:24px;font-weight:700;color:var(--ink-soft);letter-spacing:.04em}
h1{margin:0;font-size:clamp(64px,13vw,168px);line-height:.9;font-weight:700;text-wrap:balance}
/* a short stroke of the yellow line underneath, drawing itself in */
.swoosh{width:min(520px,80vw);height:auto;margin-top:-6px;overflow:visible}
.swoosh path{fill:none;stroke:var(--sun);stroke-width:26;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.1s .35s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.back{margin-top:12px;font:700 22px/1 var(--hand);text-decoration:none;padding:14px 22px;border-radius:999px;background:var(--sheet);
  box-shadow:0 1px 0 rgba(70,38,21,.06),0 14px 30px -14px rgba(70,38,21,.3);transition:transform .2s ease}
.back:hover{transform:translateY(-2px)}

/* phone: the same round menu button as the home page, with "work with me" inside */
.bar{position:relative}
.menu-btn{display:none;flex:none;width:36px;height:36px;margin-left:auto;border:0;border-radius:50%;background:var(--paper);color:var(--ink);cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}
.menu-btn span{display:block;width:44%;height:2.5px;border-radius:2px;background:currentColor;transition:transform .25s ease,opacity .2s ease}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.menu-panel{position:absolute;right:0;top:calc(100% + 10px);min-width:200px;background:var(--sheet);border-radius:24px;padding:10px;z-index:5;
  display:flex;flex-direction:column;box-shadow:0 1px 0 rgba(70,38,21,.06),0 18px 40px -12px rgba(70,38,21,.32)}
.menu-panel[hidden]{display:none}
.menu-panel a{font-size:24px;font-weight:700;text-decoration:none;padding:12px 16px;border-radius:16px}
.menu-panel a:hover,.menu-panel a:focus-visible{background:var(--paper)}
.menu-panel .menu-work{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;background:var(--sun);color:#FFFFFF}
.menu-panel .menu-work:hover{background:var(--sun-deep);color:#FFFFFF}
.menu-panel .menu-work .arr{width:24px;height:14px}
@media (max-width:760px) and (max-aspect-ratio:11/10){ .menu-btn{display:inline-flex} .bar > .pill{display:none} }
@media (max-width:760px){
  .bar{height:48px}.logo{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){
  .swoosh path{animation:none;stroke-dashoffset:0}
}