/* KA Creates website. Colors and rules come from DESIGN.md.
   Phones are the base layout (picture, then real words under it).
   Computers get the picture-with-words-on-top layout at the bottom of this file. */
:root{
  --navy:#031A3D;--navy-glow:#05234C;--cream:#FEECD1;--paper:#FCF3E2;
  --cyan:#03CCE2;--pink:#FD4898;--lime:#C9D11A;--orange:#FF5F1F;--yellow:#FFE600;
  --panel-cyan:#04E7FA;--panel-lime:#DAEE2D;--panel-pink:#F757A1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--navy);color:var(--cream);font:500 17px/1.55 Poppins,system-ui,sans-serif;overflow-x:hidden}
img{display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px}
h1,h2,p,ul{margin:0}
ul{list-style:none;padding:0}
.computer-only{display:none}

/* ---------- the picture frame: on phones each section shows a crop of its picture ---------- */
.frame{position:relative;overflow:hidden;width:100%;aspect-ratio:var(--a,16/9);background:var(--navy)}
.art{position:absolute;top:0;width:calc(var(--z,1)*100%);aspect-ratio:16/9;left:calc(50% - var(--x,.5)*var(--z,1)*100%);margin-top:calc(var(--y,0)*-1*var(--z,1)*56.25%)}
.art img.pic{position:absolute;inset:0;width:100%;height:100%}

.w{padding:28px 20px 36px;max-width:680px;margin:0 auto}
h1,h2{font-weight:800;line-height:1.1;letter-spacing:-.01em}
h2{font-size:34px;margin-bottom:14px}
.w p{margin-bottom:12px}
.w p:last-child{margin-bottom:0}
.strong{font-weight:600}

/* section word colors on phones */
.on-paper{background:var(--paper);color:var(--navy)}
.on-paper .w{color:var(--navy)}
.bar{width:48px;height:12px;border-radius:99px;margin-bottom:18px}

/* neon sections: the words sit on their own glowing acrylic panel */
.panel-sec{padding:0}
.panel-sec .stage{display:flex;flex-direction:column;padding-top:28px}
.panel-sec .w{order:1}
.panel-sec .frame{order:2;margin-top:6px}
/* the desk stays above its tile (Kris 11/5) */
#join .stage{padding:0 0 28px}
#join .frame{order:0;margin:0 0 6px}
.panel-sec .w{color:var(--navy);border-radius:20px;margin:0 16px;background:var(--panel);box-shadow:0 0 34px color-mix(in srgb,var(--panel) 50%,transparent)}
@media (min-width:712px){.panel-sec .w{margin:0 auto}}

/* buttons */
.btn{display:inline-block;font:700 17px/1.1 Poppins,system-ui,sans-serif;padding:16px 26px;border-radius:999px;text-decoration:none;text-align:center;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(3,204,226,.4)}
.btn.main{background:var(--cyan);color:var(--navy)}
.btn.ghost{border:2px solid var(--cream);color:var(--cream);padding:14px 24px}
.btn.dark{background:var(--navy);color:var(--cyan)}

/* the navy wood trim with the brass inlay (decided 10/31) */
.trim{position:relative;z-index:2;height:34px;background:linear-gradient(to bottom,#0a2a5c 0,#05234C 18%,#021433 46%,#0a2a5c 54%,#031A3D 78%,#010a1f 100%);box-shadow:0 8px 18px rgba(0,0,0,.45),0 -2px 6px rgba(0,0,0,.3)}
.trim:before,.trim:after{content:"";position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#c9a24a 15%,#f0d58c 50%,#c9a24a 85%,transparent)}
.trim:before{top:6px}.trim:after{bottom:6px;opacity:.6}

/* ---------- hero ---------- */
.hero-sec{position:relative;z-index:0}
.menu{display:flex;flex-wrap:nowrap;justify-content:center;gap:clamp(10px,3.4vw,18px);padding:6px 12px}
.menu a{color:var(--cyan);text-decoration:none;font:600 clamp(13px,3.9vw,16px)/1.3 Poppins,system-ui,sans-serif;white-space:nowrap;padding:10px 0}
.menu a:hover{text-decoration:underline}
.art>img#bg{transition:opacity 120ms}
.sweater-hot{cursor:pointer}
.face{position:absolute;pointer-events:none;left:52.083%;top:3.704%;width:18.75%;height:33.333%;
  -webkit-mask-image:radial-gradient(ellipse 22% 27% at 51% 35%,#000 62%,transparent 100%);
          mask-image:radial-gradient(ellipse 22% 27% at 51% 35%,#000 62%,transparent 100%)}
.face img{position:absolute;pointer-events:none;inset:0;width:100%;height:100%;opacity:0;transition:opacity 70ms linear}
.face img.on{opacity:1}
.pup{position:absolute;width:11.458%;height:20.37%;cursor:pointer;background:none;border:0;padding:0;
  -webkit-mask-image:radial-gradient(ellipse 44% 47% at 50% 50%,#000 70%,transparent 100%);
          mask-image:radial-gradient(ellipse 44% 47% at 50% 50%,#000 70%,transparent 100%)}
.pup img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 60ms linear;pointer-events:none}
.pup img.on{opacity:1}
#george{left:43.75%;top:63.889%}
#huegene{left:63.281%;top:64.352%}
.pup img.bowimg{opacity:0;transition:none}
.pup img.bowimg.wiggle{opacity:1;animation:bowwiggle 1000ms ease-in-out}
#george .bowimg{transform-origin:60.7% 69.1%}
#huegene .bowimg{transform-origin:43.1% 68.6%}
@keyframes bowwiggle{0%{transform:rotate(0) scale(1.08)}15%{transform:rotate(10deg) scale(1.08)}35%{transform:rotate(-9deg) scale(1.08)}
  55%{transform:rotate(7deg) scale(1.08)}75%{transform:rotate(-4deg) scale(1.08)}90%{transform:rotate(2deg) scale(1.08)}100%{transform:rotate(0) scale(1.08)}}
.notes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.notes text{font-family:Caveat,cursive;font-weight:700;font-size:56px;fill:#FEECD1;paint-order:stroke;stroke:#031A3D;stroke-width:7px;stroke-linejoin:round}
.notes .arrow{fill:none;stroke:#03CCE2;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 900ms ease-out forwards}
.notes .shadow{stroke:#031A3D;stroke-width:10;opacity:.55}
.notes g{transition:opacity 500ms}
.notes g.gone{opacity:0}
.notes g text{opacity:0;animation:pop 500ms ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{opacity:1}}
.words .hi{font-weight:600;margin-bottom:8px}
.words h1{font-size:clamp(23px,6.4vw,40px);margin-bottom:14px}
.words .btns{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 14px}
.words .tiny{font-size:16px}
.words .tiny b{font-weight:600;color:var(--cyan)}
/* the headline sharpens out of a blur, one piece at a time */
.sharpen{display:inline-block;animation:sharpen 900ms ease-out both}
@keyframes sharpen{from{opacity:0;filter:blur(10px)}to{opacity:1;filter:blur(0)}}

/* ---------- my story ---------- */
.link{font-weight:600;text-decoration:none;border-bottom:2px solid var(--cyan);padding-bottom:2px}

/* ---------- my work ---------- */
/* phones: tap a screen, it glows and shows its title */
.scr{display:block;position:absolute;border-radius:6px;outline:2px solid transparent;cursor:pointer;background:none;transition:box-shadow 250ms,outline-color 250ms}
.scr.flick,.scr.on{outline-color:var(--g);box-shadow:0 0 12px 3px var(--g),0 0 30px 8px color-mix(in srgb,var(--g) 45%,transparent)}
.tag{display:block;position:absolute;z-index:2;transform:translateX(-50%);font:600 14px/1 Poppins,sans-serif;color:var(--navy);background:var(--cream);padding:6px 10px;border-radius:99px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.35);pointer-events:none;opacity:0;transition:opacity .15s}
.tag.on{opacity:1}
.tap-hint{position:absolute;left:58%;top:15%;font:700 27px/1 Caveat,cursive;color:var(--cream);text-shadow:0 0 5px #031A3D,0 0 2px #031A3D,0 0 2px #031A3D;transition:opacity .5s;pointer-events:none}
.tap-hint.gone{opacity:0}

/* ---------- the cast ---------- */
.n,.cast-arrows{display:none}
/* each character's move: a see-through picture holding only what changed (phones: tap, computers: hover) */
.c{position:absolute;z-index:3;background:none;border:0;padding:0}
.mv{position:absolute;opacity:0;transition:opacity .12s linear;pointer-events:none;z-index:1}
.mv.on{opacity:1}
.mv.swing{transition:none}
.mv.swing.on{animation:bowwiggle 1000ms ease-in-out}
.c{cursor:pointer}
.cast-cap{margin-bottom:18px!important}
.cast-cap b{display:block;font:700 34px/1.05 Caveat,cursive}
.cast-cap span{display:block;font-size:17px;line-height:1.4}
/* phones: a neon arrow draws itself on at whoever was tapped; their name and line sit under the picture */
.phone-notes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.phone-notes g{opacity:0;fill:none}
.phone-notes g.on{opacity:1}
.phone-notes text{font:700 92px/1 Caveat,cursive;fill:var(--navy);stroke:var(--paper);stroke-width:14px;paint-order:stroke;stroke-linejoin:round}
.phone-notes path{fill:none;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.phone-notes .sh{stroke:var(--navy);stroke-width:15;opacity:.45}
.phone-notes g.on path{transition:stroke-dashoffset .6s ease-out .1s;stroke-dashoffset:0}

/* ---------- work with me ---------- */
.services{margin:16px 0 22px}
.services li{font-weight:700;padding-left:20px;position:relative;margin-bottom:8px;line-height:1.3}
.services li:before{content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;border-radius:50%;background:var(--navy)}

/* the Start a project form */
dialog{border:0;border-radius:20px;padding:0;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);background:var(--navy-glow);color:var(--cream);box-shadow:0 20px 70px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(1,14,42,.75)}
.pf{padding:26px 24px 28px}
.pf h3{font:800 28px/1.1 Poppins,sans-serif;margin:0 44px 18px 0}
.pf label,.pf legend{display:block;font-weight:600;font-size:16px;margin-bottom:6px;padding:0}
.pf .fld{margin-bottom:14px}
.pf fieldset{border:0;padding:0;margin:0 0 14px}
.pf input[type=text],.pf input[type=email],.pf textarea{width:100%;font:500 17px/1.4 Poppins,sans-serif;padding:12px 16px;border-radius:14px;border:2px solid transparent;background:var(--cream);color:var(--navy)}
.pf input:focus,.pf textarea:focus{outline:0;border-color:var(--cyan)}
.pf .tick{display:flex;align-items:center;gap:10px;font-weight:500;margin-bottom:6px;cursor:pointer}
.pf .tick input{width:20px;height:20px;accent-color:var(--cyan);flex:none}
.pf .hp{position:absolute;left:-9999px}
.pf .btn{width:100%;margin-top:6px}
.pf .err{color:var(--cream);margin-top:12px;font-size:16px}
.pf .err a{color:var(--cyan)}
.x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--cream);font:500 30px/1 Poppins,sans-serif;cursor:pointer}
.thanks{padding:40px 28px 44px;text-align:center}
.thanks h3{font:800 30px/1.1 Poppins,sans-serif;margin:0 0 10px}

/* ---------- pups ---------- */
.pups-w{text-align:center}
.pups-w h2{font-size:26px;margin-bottom:4px}
.pups-w p{font:700 38px/1.1 Caveat,cursive;color:var(--pink)}

/* ---------- creation studio signup ---------- */
.signup{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.signup input{font:500 17px/1.3 Poppins,sans-serif;padding:14px 20px;border-radius:999px;border:2px solid var(--navy);background:var(--cream);color:var(--navy);width:100%}
.signup input::placeholder{color:#3b4a66}

/* ---------- hang out ---------- */
.hang-title{text-align:center;padding:30px 20px 0}
.hit{display:none}
.hang-list{display:grid;gap:12px;padding:22px 16px 34px;max-width:680px;margin:0 auto}
.hang-list a{display:block;background:var(--cream);color:var(--navy);text-decoration:none;padding:14px 18px;border-radius:16px;transition:box-shadow .2s}
.hang-list a:hover{box-shadow:0 0 18px var(--cyan)}
.hang-list b{display:block;font-weight:700;font-size:18px;line-height:1.3}
.hang-list span{font-size:16px;line-height:1.4;display:block}
.hang-list .hl{box-shadow:0 0 0 2px var(--cyan)}

/* ---------- footer ---------- */
.foot{padding:26px 20px 18px;text-align:center}
.foot nav{display:flex;flex-wrap:nowrap;justify-content:center;gap:clamp(10px,3.4vw,22px);margin:0 -8px 16px}
.foot nav a{color:var(--cyan);text-decoration:none;font-weight:600;font-size:clamp(13px,3.9vw,17px);white-space:nowrap;padding:8px 0}
.foot nav a:hover{text-decoration:underline}
.foot .c-line{font-size:15px;opacity:.85;margin-bottom:14px}
.shine{font:700 24px/1.2 Caveat,cursive;text-align:center;padding:0 20px 34px;text-wrap:balance}
.shine span{background:linear-gradient(100deg,#FEECD1 0%,#FEECD1 40%,#C9D11A 47%,#F4FF7A 50%,#C9D11A 53%,#FEECD1 60%,#FEECD1 100%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 8s ease-in-out infinite}
@keyframes shine{0%{background-position:100% 0}65%,100%{background-position:0% 0}}

/* ---------- gentle motion ---------- */
.js .rise{opacity:0;transform:translateY(16px);transition:opacity .8s ease-out,transform .8s ease-out}
.js .rise.in{opacity:1;transform:none}
.lit .wd{color:color-mix(in srgb,var(--navy) 38%,transparent);transition:color .25s linear}
.lit .wd.on{color:var(--navy)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sharpen,.shine span{animation:none}
  .js .rise{opacity:1;transform:none;transition:none}
  .lit .wd{color:var(--navy);transition:none}
  .notes .arrow{animation-duration:1ms}
}

/* ==========================================================================
   COMPUTERS: each section is its 16:9 picture with the words on top.
   Every section fits inside one screen height (rule from 10/31).
   ========================================================================== */
@media (min-width:1100px) and (min-height:560px){
  .computer-only{display:revert}
  .phone-only{display:none!important}
  .stage{container-type:inline-size;position:relative;width:min(100vw,calc((100vh - 34px)*16/9));aspect-ratio:16/9;margin:0 auto}
  .frame{position:absolute;inset:0;aspect-ratio:auto;overflow:visible;background:none}
  .art{position:absolute;inset:0;width:100%;left:0;margin:0}
  .on-paper{background:var(--navy)}
  .sec{position:relative;z-index:1;background:var(--navy)}
  h2{margin:0}
  .w{position:absolute;padding:0;margin:0;max-width:none}
  .w p{margin:0}
  .bar{width:3.4cqw;height:.9cqw}
  .panel-sec .stage{display:block;padding:0}
  .panel-sec .frame{margin:0}
  #join .stage{padding:0}
  #join .frame{margin:0}
  .panel-sec .w{background:none;box-shadow:none;border-radius:0;margin:0}

  /* hero: fills the screen, then shrinks and fades as you scroll (Kris 10/30: "oooo fancy") */
  .hero-sec{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .hero-sec .stage{width:min(100vw,calc(100vh*16/9));transform-origin:center;will-change:transform,opacity}
  .menu{position:absolute;right:2.6%;top:2.9%;gap:1.5cqw;padding:0;z-index:5;flex-wrap:nowrap}
  .menu a{font-size:max(15px,1.1cqw);padding:0}
  .words{left:7.4%;top:clamp(13%,calc(17.5% - (1440px - 100cqw)*.02),17.5%);width:33%;color:var(--cream)}
  .words .hi{font-size:max(15px,1.35cqw);line-height:1.2;margin:0 0 .9cqw;opacity:.9}
  .words h1{font-size:2.55cqw;line-height:1.12;margin:0 0 1.1cqw}
  .words .sub{font-size:max(15px,1.15cqw);line-height:1.5;margin:0 0 1.7cqw;max-width:29cqw;opacity:.92}
  .words .btns{flex-wrap:nowrap;gap:.9cqw;margin:0}
  .words .btn{font:600 max(14px,1cqw)/1 Poppins,system-ui,sans-serif;padding:1cqw 1.7cqw;white-space:nowrap}
  .words .btn.ghost{padding:calc(1cqw - 2px) 1.7cqw}
  .words .tiny{font-size:max(14px,1.05cqw);line-height:1.4;margin:.9cqw 0 0 .3cqw;opacity:.95;width:31cqw;text-wrap:balance;text-shadow:0 0 .5cqw #031A3D,0 0 .2cqw #031A3D}

  /* my story */
  .story-w{left:59.5%;top:33%;width:37%;color:var(--navy)}
  .story-w .bar{background:var(--lime);margin:0 0 1.4cqw}
  .story-w h2{font-size:3.1cqw;margin:0 0 1.4cqw}
  .story-w p{font-size:max(15px,1.3cqw);margin:0 0 1.2cqw}
  .story-w .link{font-size:max(15px,1.05cqw)}

  /* my work */
  .work-w{left:51.5%;top:11%;width:36%;text-align:center;color:var(--cream)}
  .work-w h2{font-size:3.6cqw;line-height:1.05;margin:0 0 .7cqw}
  .work-w p{font-size:max(15px,1.2cqw);line-height:1.4;opacity:.9}
  .scr{border-radius:.6cqw;outline-width:.18cqw;cursor:default}
  .scr:hover,.scr.flick{outline-color:var(--g);box-shadow:0 0 1.2cqw .3cqw var(--g),0 0 3.5cqw 1cqw color-mix(in srgb,var(--g) 45%,transparent)}
  .tag{opacity:1;font-size:max(13px,1cqw);padding:.45cqw .9cqw;box-shadow:0 .2cqw .8cqw rgba(0,0,0,.35)}

  /* the cast */
  .cast-w{left:24.6%;top:7%;width:55%;color:var(--navy)}
  .cast-w .bar{background:var(--orange);margin:0 0 1.1cqw}
  .cast-w h2{font-size:3.1cqw;margin:0 0 .7cqw}
  .cast-w p{font-size:max(15px,1.2cqw);line-height:1.5}
  .c{cursor:default}
  .n{display:block;position:absolute;z-index:2;color:var(--navy);opacity:0;transform:translateY(.4cqw);transition:opacity .25s,transform .25s;pointer-events:none}
  .n b{display:block;font:700 2.4cqw/1 Caveat,cursive;margin-bottom:.15cqw}
  .n span{display:block;font:600 max(13px,1cqw)/1.35 Poppins,sans-serif}
  .n.on{opacity:1;transform:none}
  .cast-arrows{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
  .cast-arrows path{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
  .cast-arrows .sh{stroke:#031A3D;stroke-width:10;opacity:.5}
  .cast-arrows g.on path{transition:stroke-dashoffset .6s ease-out .15s;stroke-dashoffset:0}

  /* pull up a chair */
  .chair-w{left:20.3%;top:clamp(25.5%,calc(28% - (1380px - 100cqw)*.012),28%);width:30.5%}
  .chair-w h2{font-size:3.3cqw;line-height:1.05;margin:0 0 1cqw}
  .chair-w p{font-size:max(14px,1.12cqw);line-height:1.42;margin:0 0 .7cqw}

  /* work with me */
  .hire-w{left:20.6%;top:20%;width:42%}
  .hire-w h2{font-size:3.2cqw;line-height:1.05;margin:0 0 .9cqw}
  .hire-w .sub{font-size:max(15px,1.2cqw);line-height:1.45;margin:0 0 1.5cqw}
  .services{margin:0 0 1.8cqw}
  .services li{font-size:max(15px,1.4cqw);line-height:1.25;margin:0 0 .55cqw;padding-left:1.5cqw}
  .services li:before{top:.42cqw;width:.6cqw;height:.6cqw}
  .hire-w .btn{font-size:max(15px,1.15cqw);padding:1.1cqw 2.6cqw}

  /* pups */
  .pups-w{left:42.3%;top:13%;width:40%;text-wrap:balance;text-align:center;color:var(--cream)}
  .pups-w h2{font-size:2.2cqw;line-height:1.15;margin:0 0 .6cqw}
  .pups-w p{font-size:3.2cqw;line-height:1.1}

  /* signup */
  .join-w{left:18.6%;top:25%;width:24.5%}
  .join-w h2{font-size:2.3cqw;line-height:1.08;margin:0 0 .9cqw}
  .join-w p{font-size:max(14px,1.05cqw);line-height:1.45;margin:0 0 .9cqw}
  .signup{gap:.45cqw;margin:0;width:100%}
  .signup input{font-size:max(14px,1cqw);padding:.6cqw 1.2cqw;border-width:.12cqw}
  .signup .btn{font-size:max(14px,1cqw);padding:.75cqw 1.4cqw}

  /* hang out */
  .hang-title{position:absolute;left:0;right:0;top:6.2%;padding:0;font-size:4.4cqw;line-height:1;color:var(--cream);margin:0}
  .hit{display:block;position:absolute;top:67%;height:20%;border-radius:1cqw;transition:box-shadow 250ms}
  .hit:hover,.hit:focus-visible{box-shadow:0 0 1cqw .25cqw var(--cyan),0 0 3cqw .8cqw rgba(3,204,226,.45)}
  .d{position:absolute;top:88.6%;width:16%;transform:translateX(-50%);text-align:center;color:var(--cream);font:500 max(13px,1.05cqw)/1.35 Poppins,sans-serif;text-shadow:0 0 .5cqw #031A3D,0 0 .2cqw #031A3D;text-wrap:balance}

  /* footer: a touch shorter sections would crop the art, so it keeps the full picture */
  .foot{position:absolute;left:0;right:0;top:57.5%;padding:0}
  .foot nav{gap:2.6cqw;margin:0 0 1.5cqw}
  .foot nav a{font:600 max(15px,1.45cqw)/1 Poppins,sans-serif;padding:0}
  .foot .c-line{font:500 max(13px,.95cqw)/1 Poppins,sans-serif;margin:0}
  .shine{position:absolute;left:0;right:0;top:84.6%;padding:0;font-size:max(22px,1.7cqw);margin:0}
  .shine span{filter:drop-shadow(0 0 .35cqw #031A3D)}
}