:root{
  --paper:#f8fbfd;--grid:#d9e8f4;--ink:#1d2a4a;--blue:#2b59c3;--red:#e8453c;
  --yellow:#ffe45c;--green:#7fd8a6;--pink:#ffb3d1;--sky:#a9d4ff;
  --hand:"Caveat Brush","Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  --body:"Patrick Hand","Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  --r1:255px 18px 225px 18px/18px 225px 18px 255px;
  --r2:18px 255px 18px 225px/225px 18px 255px 18px;
  --rs:14px 6px 16px 8px/8px 16px 6px 14px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font:1.25rem/1.55 var(--body);color:var(--ink);background-color:var(--paper);
  background-image:linear-gradient(rgba(217,232,244,.9) 1px,transparent 1px),linear-gradient(90deg,rgba(217,232,244,.9) 1px,transparent 1px),radial-gradient(ellipse at 8% 8%,rgba(169,212,255,.2),transparent 38rem),radial-gradient(ellipse at 92% 38%,rgba(255,179,209,.13),transparent 34rem);
  background-size:32px 32px,32px 32px,auto,auto;overflow-x:hidden;-webkit-text-size-adjust:100%}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--hand);font-weight:400;line-height:1.05;margin:0}
h3{font-size:1.7rem}
p{margin:0 0 1rem}
ul{list-style:none;margin:0;padding:0}
.wrap{width:min(1100px,100% - 2.5rem);margin-inline:auto;position:relative}
section{padding:clamp(2.8rem,6vw,4.5rem) 0}
:focus-visible{outline:3px dashed var(--blue);outline-offset:4px}

/* scroll progress line */
.progress{position:fixed;inset:0 0 auto 0;height:7px;z-index:60}
.progress i{display:block;height:100%;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;border-radius:0 6px 6px 0;position:relative}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(248,251,253,.94);backdrop-filter:blur(12px);border-bottom:2px solid var(--ink);transition:background-color .25s,box-shadow .25s}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:76px;transition:height .25s}
.nav.scrolled{background:rgba(255,255,255,.97);box-shadow:0 5px 18px rgba(29,42,74,.12)}
.nav.scrolled .wrap{height:64px}
.logo{font:1.9rem/1 var(--hand);text-decoration:none;display:inline-flex;align-items:center;gap:.55rem;transform:rotate(-1deg);transition:transform .2s;flex:none}
.logo-mark{width:42px;height:42px;transition:width .25s,height .25s}
.logo-copy{display:flex;flex-direction:column;gap:.2rem}
.logo-copy small{font:600 .58rem/1 var(--body);letter-spacing:.13em;color:var(--blue)}
.nav.scrolled .logo-mark{width:36px;height:36px}
.nav.scrolled .logo{font-size:1.7rem}
.logo:hover{transform:rotate(2deg) scale(1.08)}
.nav ul{display:flex;align-items:center;gap:clamp(.35rem,1.1vw,1rem);padding:0;background:none;border:0;border-radius:0}
.nav ul a{text-decoration:none;font-size:1.2rem;padding:.45rem .7rem;border-radius:var(--rs);position:relative;transition:background-color .2s,color .2s,transform .2s}
.nav ul a:hover{background:rgba(255,228,92,.55);transform:translateY(-1px)}
.nav ul a.on{background:var(--yellow);text-decoration:none;box-shadow:2px 2px 0 var(--ink);transform:rotate(-1deg)}
.burger{display:none;width:44px;height:44px;background:var(--yellow);border:2px solid var(--ink);border-radius:var(--rs);box-shadow:2px 2px 0 var(--ink);cursor:pointer;padding:0;position:relative;transform:rotate(2deg);transition:transform .2s,box-shadow .2s}
.burger:hover{transform:rotate(0) translateY(-2px);box-shadow:3px 4px 0 var(--ink)}
.burger span{position:absolute;left:9px;right:9px;height:3px;background:var(--ink);border-radius:3px;transition:transform .25s,opacity .2s}
.burger span:nth-child(1){top:11px}.burger span:nth-child(2){top:19px}.burger span:nth-child(3){top:27px}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* buttons */
.btn{display:inline-block;font:1.4rem var(--hand);text-decoration:none;background:#fff;color:var(--ink);padding:.35rem 1.4rem;border:3px solid var(--ink);border-radius:var(--r1);box-shadow:4px 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-2px,-3px) rotate(-2deg);box-shadow:7px 8px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.y{background:var(--yellow)}.g{background:var(--green)}.b{background:var(--sky)}.p{background:var(--pink)}
.actions{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;margin-top:1.6rem}

/* hero */
.hero{padding-top:clamp(2.5rem,6vw,4.5rem)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center}
.copy{position:relative;z-index:1}
.hi{font-size:clamp(1.6rem,4vw,2.3rem);font-family:var(--hand);color:var(--blue);margin-bottom:.2rem;transform:rotate(-2deg);display:inline-block}
h1{font-size:clamp(3.4rem,12vw,7.2rem);display:flex;flex-direction:column;line-height:.95}
.write{clip-path:inset(-20% 100% -20% 0);animation:write .9s .2s cubic-bezier(.6,.1,.3,1) forwards}
h1 .name{animation-delay:.9s}
@keyframes write{to{clip-path:inset(-20% -5% -20% 0)}}
.h1ul{width:min(100%,520px);height:22px;margin:.1rem 0 .6rem;overflow:visible}
.h1ul path,.ul path{fill:none;stroke:var(--red);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.h1ul path{animation:draw .8s 1.9s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.role{font-size:clamp(1.6rem,4vw,2.2rem);margin:0 0 1rem;font-family:var(--hand)}
#typed{background:linear-gradient(transparent 55%,var(--yellow) 55%);padding:0 .25em}
.caret{display:inline-block;width:3px;height:1.1em;background:var(--ink);vertical-align:-.15em;margin-left:3px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.lead{max-width:50ch}
.hero-note{display:flex;align-items:center;gap:.55rem;margin:1.2rem 0 0;font-size:1.05rem;color:var(--blue)}
.hero-note span{display:grid;place-items:center;width:1.6rem;height:1.6rem;border:2px dashed currentColor;border-radius:50%;flex:none}
.hero-note svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.doodle{position:absolute;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.d2{width:70px;bottom:-8px;left:42%;stroke:var(--blue);animation:spin 20s linear infinite}
@keyframes float{from{transform:translateY(0) rotate(-8deg)}to{transform:translateY(-14px) rotate(10deg)}}
@keyframes spin{to{transform:rotate(360deg)}}

.pic{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.polaroid{margin:0;background:#fff;padding:12px 12px 8px;border:3px solid var(--ink);border-radius:var(--rs);box-shadow:7px 8px 0 var(--ink);transform:rotate(3deg);width:min(100%,340px);position:relative;transition:transform .3s}
.polaroid:hover{transform:rotate(-1deg) scale(1.03)}
.polaroid::before{content:"";position:absolute;top:-18px;left:50%;width:100px;height:32px;background:rgba(255,228,92,.8);border:2px dashed rgba(29,42,74,.35);transform:translateX(-50%) rotate(-4deg)}
.polaroid .frame img{position:absolute;inset:3%;width:94%;height:94%;object-fit:cover}
figcaption{font:1.9rem var(--hand);text-align:center;padding-top:6px}
.arrow{position:absolute;width:90px;left:-30px;bottom:34%;fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-12deg)}
.tag{position:absolute;left:-52px;bottom:24%;font:1.5rem var(--hand);color:var(--red);transform:rotate(-8deg)}
.bubble{position:relative;background:#fff;border:3px solid var(--ink);border-radius:var(--r2);padding:.8rem 1.2rem;margin:0;max-width:340px;transform:rotate(-1.5deg);box-shadow:4px 4px 0 var(--sky)}
.bubble::before{content:"";position:absolute;top:-12px;left:50%;width:20px;height:20px;background:#fff;border-left:3px solid var(--ink);border-top:3px solid var(--ink);transform:translateX(-50%) rotate(45deg)}

/* image frames + fallback */
.frame{background:repeating-linear-gradient(45deg,#fff 0 9px,#eaf2fa 9px 18px);position:relative;overflow:hidden;border:2px solid var(--ink)}
.frame::after{content:"add photo in assets/images";position:absolute;inset:0;display:none;place-items:center;text-align:center;padding:1rem;font:1.3rem var(--hand);color:var(--blue)}
.noimg::after{display:grid}
.noimg img{display:none}
.polaroid .frame{aspect-ratio:4/5}

/* section headings */
.sub{font:1.6rem var(--hand);color:var(--blue);margin:0;transform:rotate(-1.5deg);display:inline-block}
.h{font-size:clamp(2.4rem,7vw,4rem);margin-bottom:2.2rem;display:block}
.h span{display:inline-block}
.ul{display:block;width:min(100%,360px);height:14px;margin-top:2px;overflow:visible}
.in .ul path,.h.in .ul path{stroke-dashoffset:0;transition:stroke-dashoffset .9s ease-out}

/* cards */
#work{background:rgba(255,255,255,.58);border-block:1px dashed var(--grid)}
#process{background:rgba(255,255,255,.58);border-block:1px dashed var(--grid)}
#service{background:rgba(169,212,255,.14)}
.project-filters{display:flex;flex-wrap:wrap;gap:.65rem;margin:-.7rem 0 .55rem}
.project-filter{padding:.25rem .9rem;border:2px solid var(--ink);border-radius:var(--r1);background:#fff;color:var(--ink);font:1.15rem var(--hand);cursor:pointer;transition:transform .18s,background-color .18s,box-shadow .18s}
.project-filter:hover{transform:translateY(-2px) rotate(-1deg);box-shadow:2px 3px 0 var(--ink)}
.project-filter.active{background:var(--yellow);box-shadow:2px 3px 0 var(--ink)}
.project-count{min-height:1.3em;margin:0 0 1.25rem;color:var(--blue);font-size:1rem}
.grid3>.card[hidden]{display:none}
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:2.4rem}
.process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
.process-grid{margin:0;padding:0;list-style:none}
.process-card{padding:1.1rem 1rem 1.2rem}
.process-step{display:grid;place-items:center;width:2.5rem;height:2.5rem;margin-bottom:.8rem;border:2px dashed var(--ink);border-radius:50%;background:var(--yellow);font:1.25rem/1 var(--hand)}
.process-card h3{font-size:1.5rem}
.process-card p{margin:.45rem 0 0;font-size:1.08rem}
.card{display:flex;flex-direction:column;background:#fff;border:3px solid var(--ink);border-radius:17px 7px 15px 9px/9px 16px 6px 14px;padding:1.2rem 1.2rem 1.4rem;box-shadow:6px 6px 0 var(--ink);position:relative;isolation:isolate;transform:rotate(var(--rot,0deg));transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
.card:hover{transform:rotate(0) translateY(-8px);box-shadow:9px 14px 0 var(--ink)}
.card::before{content:"";position:absolute;top:-13px;left:50%;width:22px;height:22px;background:var(--red);border:3px solid var(--ink);border-radius:50%;transform:translateX(-50%);z-index:2}
.card:not(.process-card)::after{content:"";position:absolute;z-index:-1;inset:3px -4px -4px 3px;border:1px solid rgba(29,42,74,.48);border-radius:8px 14px 6px 12px/12px 5px 10px 7px;transform:rotate(.35deg);pointer-events:none}
.process-card{border:3px solid var(--ink);border-radius:11px 5px 9px 6px/6px 10px 4px 8px;box-shadow:5px 5px 0 var(--ink)}
.process-card::after{content:"";position:absolute;z-index:-1;inset:3px -5px -5px 3px;border:2px solid var(--ink);border-radius:6px 10px 5px 8px/9px 4px 7px 5px;transform:rotate(.45deg);pointer-events:none}
.process-card>*{position:relative;z-index:1}
.card .frame{aspect-ratio:16/10;margin-bottom:1rem}
.card .frame img{width:100%;height:100%;object-fit:cover}
.card .frame img{transition:transform .35s ease}
.card:hover .frame img{transform:scale(1.04)}
.card h3{margin-bottom:.4rem}
.project-type,.service-since{display:inline-flex;align-self:flex-start;width:max-content;margin:0 0 .5rem;padding:.1rem .65rem;border:1.5px dashed var(--ink);border-radius:999px;background:rgba(255,255,255,.75);font-size:.95rem;line-height:1.4;color:var(--blue)}
.service-since{color:var(--ink);font-family:var(--hand);font-size:1.15rem}
.link{font:1.4rem var(--hand);text-decoration:underline wavy var(--blue) 2px;text-underline-offset:6px;margin-top:auto;align-self:flex-start}
.link:hover{color:var(--red)}
.note{background:var(--yellow)}
.note:nth-child(2){background:var(--sky)}.note:nth-child(3){background:var(--pink)}

/* about */
.about-layout{display:grid;grid-template-columns:minmax(240px,.78fr) minmax(0,1.22fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.about-profile{max-width:390px;width:100%;margin-inline:auto}
.about-photo-card{position:relative;isolation:isolate;margin:0;padding:1rem 1rem .8rem;background:#fff;border:3px solid var(--ink);border-radius:17px 5px 13px 8px/6px 14px 4px 11px;box-shadow:7px 7px 0 var(--yellow);transform:rotate(-1.5deg);transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s}
.about-photo-card::after{content:"";position:absolute;z-index:-1;inset:3px -3px -3px 3px;border:1px solid rgba(29,42,74,.7);border-radius:6px 14px 5px 12px/13px 4px 11px 6px;transform:rotate(.35deg);pointer-events:none}
.about-pin{position:absolute;z-index:1;top:-12px;left:50%;width:66px;height:22px;background:rgba(255,228,92,.82);border:1.5px dashed rgba(29,42,74,.45);transform:translateX(-50%) rotate(-4deg)}
.about-photo{aspect-ratio:4/5;border-width:2px}
.about-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.about-photo-card figcaption{font:1.65rem var(--hand);line-height:1.15;padding:.8rem .2rem .1rem}
.about-photo-card figcaption span{display:block;margin-top:.3rem;font: .95rem var(--body);color:var(--blue)}
.about-details>.sub{margin:0 0 .25rem}
.about-intro{max-width:none;margin:0 0 1.25rem}
.focus{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem}
.focus li{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:3px solid var(--ink);border-radius:var(--r2);padding:1rem 1.2rem;box-shadow:5px 5px 0 var(--green);transform:rotate(var(--rot))}
#about .focus li{min-height:0;align-items:center;gap:.8rem;padding:1rem 1.2rem;border:3px solid var(--ink);border-radius:var(--r2);box-shadow:5px 5px 0 var(--green);transform:rotate(var(--rot));transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s}
#about .focus li:nth-child(1){--rot:1deg}
#about .focus li:nth-child(2){--rot:-1deg}
#about .focus li:nth-child(3){--rot:.8deg}
#about .focus li:nth-child(4){--rot:-.7deg}
.focus li p{margin:0}
.focus h3{margin:0 0 .1rem;font-size:1.35rem}
.focus b{flex:none;width:42px;height:42px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:var(--yellow)}
.focus b{transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.focus b svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.focus b svg{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover) and (pointer:fine){
  .about-photo-card:hover{transform:translateY(-5px) rotate(0);box-shadow:10px 11px 0 var(--yellow)}
  .about-photo-card:hover .about-photo img{transform:scale(1.035)}
  #about .focus li:hover{transform:translateY(-4px) rotate(0);box-shadow:7px 8px 0 var(--green)}
  #about .focus li:hover b svg{transform:rotate(-8deg)}
}
.stamps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:2.5rem 0 0}
.stamps li{border:3px dashed var(--ink);border-radius:var(--r1);text-align:center;padding:.8rem .5rem;background:rgba(255,255,255,.7);transition:transform .2s}
.stamps li:nth-child(odd){transform:rotate(-1deg)}.stamps li:nth-child(even){transform:rotate(1deg)}
.stamps li:hover{transform:rotate(0) scale(1.06);background:var(--yellow)}
.stamps b{display:block;margin-bottom:.1rem;font:2.2rem/1.05 var(--hand);font-weight:400;color:var(--blue)}

/* chips + tools */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 0}
.chips span{border:2px solid var(--ink);border-radius:var(--r2);padding:0 .8rem;background:#fff;transition:transform .2s}
.chips span:hover{transform:rotate(-4deg) scale(1.1)}
.tools{margin-top:3rem;background:#fff;border:3px dashed var(--ink);border-radius:var(--r1);padding:1.6rem 2rem;transform:rotate(var(--rot))}
.tools p:first-of-type{margin:.3rem 0 0}
.tools .chips span:nth-child(odd){background:var(--yellow)}.tools .chips span:nth-child(even){background:var(--green)}

/* contact */
.hello{position:relative;isolation:isolate;background:#fff;border:3px solid var(--ink);border-radius:15px 6px 13px 8px/7px 14px 5px 12px;box-shadow:8px 8px 0 var(--ink);padding:clamp(1.6rem,5vw,3.4rem);text-align:center;transform:rotate(var(--rot))}
.hello::after{content:"";position:absolute;z-index:-1;inset:3px -4px -4px 3px;border:1px solid rgba(29,42,74,.5);border-radius:7px 13px 5px 11px/11px 4px 10px 6px;transform:rotate(.3deg);pointer-events:none}
.hello .h{margin-bottom:1rem}.hello .ul{margin-inline:auto}
.socials{display:flex;flex-wrap:nowrap;justify-content:center;gap:1rem;margin-top:1.6rem}
.socials .btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.3rem .55rem;font-size:1.2rem;white-space:nowrap}
.social-icon{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.social-icon.filled{fill:currentColor;stroke:none}
.social-icon .icon-dot{fill:currentColor;stroke:none}
.socials .btn:hover{animation:wiggle .4s}
.socials a:focus-visible,.link:focus-visible{outline-offset:5px}
@keyframes wiggle{25%{rotate:-4deg}75%{rotate:4deg}}

footer{padding:2rem 0 2.6rem;text-align:center;border-top:3px dashed var(--ink);margin-top:2rem}

.back-to-top{position:fixed;right:1.5rem;bottom:1.5rem;z-index:55;width:44px;height:44px;display:grid;place-items:center;background:var(--yellow);color:var(--ink);border:2.5px solid var(--ink);border-radius:47% 53% 49% 51%/52% 48% 52% 48%;box-shadow:3px 4px 0 var(--ink);cursor:pointer;transform:rotate(-3deg);transition:transform .2s,box-shadow .2s}
.back-to-top:hover{transform:rotate(2deg) translateY(-3px);box-shadow:5px 7px 0 var(--ink)}
.back-to-top:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.back-to-top[hidden]{display:none}
.back-to-top svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* scroll-in (only when JS is on and motion is allowed) */
@media (prefers-reduced-motion:no-preference){
  .js .drop:not(.in){opacity:0;transform:translateY(-40px) rotate(calc(var(--rot,0deg) * -4))}
  .drop{transition:opacity .5s,transform .7s cubic-bezier(.3,1.6,.5,1)}
  .card.drop:hover{transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .write{clip-path:none}.h1ul path,.ul path{stroke-dashoffset:0}
}

/* tablet + phone */
@media (max-width:900px){
  .hero .wrap,.two{grid-template-columns:1fr}
  .about-layout{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .about-profile{max-width:420px}
  .about-details{width:100%}
  .pic{margin-top:1.5rem}
  .process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .d2{display:none}
  .socials{flex-direction:column;align-items:stretch}
}
@media (max-width:640px){
  .stamps{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:2rem}
}
@media (max-width:780px){
  .burger{display:block}
  .nav .wrap{height:68px}
  .nav.scrolled .wrap{height:60px}
  .nav ul{position:absolute;top:calc(100% + 10px);right:1.25rem;width:min(280px,calc(100vw - 2.5rem));align-items:stretch;flex-direction:column;gap:.25rem;background:rgba(255,255,255,.98);border:2px solid var(--ink);border-radius:var(--r2);padding:.7rem;box-shadow:5px 6px 0 var(--ink);transform-origin:top right;transform:translateY(-8px) scale(.96);opacity:0;pointer-events:none;visibility:hidden;transition:transform .22s ease,opacity .18s,visibility .22s}
  .nav ul.open{transform:none;opacity:1;pointer-events:auto;visibility:visible}
  .nav ul a{font-size:1.35rem;display:block;padding:.45rem .8rem;border-radius:var(--rs)}
  #about .about-layout{display:flex;flex-direction:column;align-items:stretch;gap:0}
  #about .about-profile,#about .about-details{display:contents}
  #about .about-details>.sub{order:1}
  #about .about-details>.h{order:2}
  #about .about-details>.h{margin-bottom:.8rem}
  #about .about-photo-card{order:3;align-self:center;width:min(100%,420px);margin:0 0 1.25rem}
  #about .about-intro{order:4}
  #about .about-details>.focus{order:5}
}
@media (max-width:480px){
  body{font-size:1.15rem}
  .logo{font-size:1.65rem}
  .logo-mark{width:38px;height:38px}
  .logo-copy small{font-size:.52rem}
  .nav.scrolled .logo{font-size:1.55rem}
  .nav.scrolled .logo-mark{width:34px;height:34px}
  .arrow,.tag{display:none}
  .tools{padding:1.2rem}
  .back-to-top{right:1rem;bottom:1rem}
  .hero-note{font-size:1rem}
  .about-layout{gap:2rem}
  .about-profile{max-width:340px}
  .about-photo-card{padding:.75rem .75rem .65rem}
  .about-photo-card figcaption{font-size:1.45rem}
  .focus{grid-template-columns:1fr;gap:.7rem}
  #about .focus li{padding:.7rem .8rem}
  .stamps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-grid{grid-template-columns:1fr;gap:1.2rem}
  .process-card{transform:none}
  .js .process-card:not(.in){transform:translateY(-40px)}
  .process-card:hover{transform:translateY(-3px)}
}