:root{--blush:#F4B8B7;--soft-blush:#FBE1E1;--rose:#B85E63;--charcoal:#171312;--gold:#C6A04A;--warm:#FCF6F3;--panel:#FFFAF7}
*{box-sizing:border-box}
html,body{overflow-x:hidden}
html{background:var(--warm)}
body{margin:0;padding:26px 14px 36px;background:var(--warm);color:var(--charcoal);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:12px;top:-90px;background:var(--charcoal);color:var(--warm);padding:12px 18px;z-index:20}
.skip-link:focus{top:12px}
.icon-defs{position:absolute;width:0;height:0;overflow:hidden}
.link-page{width:min(100%,448px);margin:0 auto;padding:18px 12px 29px;border:1px solid #C6A04A80;border-radius:25px;background:var(--panel);box-shadow:0 12px 35px #1713120A,0 2px 6px #17131205}

/* The receiver and shell stay still. Only the dial ring turns. */
.phone-scene{position:relative;isolation:isolate;width:100%;aspect-ratio:1345 / 1170}
.phone-shell{display:block;width:100%;height:auto;pointer-events:none;user-select:none;-webkit-user-drag:none}
.rotary{position:relative;isolation:isolate;aspect-ratio:1;container-type:inline-size;--rotation:0deg;--turn-time:650ms}
.phone-scene .rotary{position:absolute;left:20%;top:22%;width:64%;z-index:2}
.dial-assembly{position:absolute;inset:0;transform-origin:48.2% 50.2%;transform:rotate(var(--rotation));transition:transform var(--turn-time) cubic-bezier(.2,.7,.25,1);will-change:transform}
.dial-art{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.dial-controls{position:absolute;inset:0}
.fixed-center,.fixed-stop{position:absolute;inset:0;display:block;width:100%;height:auto;pointer-events:none}
.fixed-center{clip-path:circle(22% at 48.2% 50.2%);z-index:3}
.fixed-stop{clip-path:polygon(75.4% 63.1%,77.7% 63.4%,80.8% 65.2%,84% 67%,88.4% 68.6%,92% 68.4%,94.8% 67.7%,95.7% 68.3%,95.7% 70.2%,94.5% 72.8%,90% 78%,87.9% 80.8%,85.6% 82%,83.3% 81.5%,81.2% 79.3%,78.8% 76.6%,76.6% 73%,74.7% 69.6%,74.1% 66.7%,74.3% 64.6%);z-index:5}
.name-label{position:absolute;left:30.2%;top:32.2%;width:36%;height:36%;pointer-events:none;display:grid;place-items:center;z-index:4}
.label-arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.label-arc text{font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:700;letter-spacing:1px;fill:var(--charcoal)}
.name{display:block;font-family:Georgia,"Times New Roman",serif;font-size:8.4cqw;font-weight:600;line-height:1.03;letter-spacing:-.6px;text-align:center;transform:translateY(7%);color:var(--charcoal)}
.surname{position:relative;isolation:isolate;display:inline-block;color:var(--charcoal);font-style:italic;font-weight:400}
.surname::before{content:"";position:absolute;left:-.06em;right:-.08em;bottom:-.02em;height:.34em;background:var(--blush);z-index:-1;transform:rotate(-2deg)}

/* Each destination has one icon color, shared by the dial and its list row. */
[data-link="website"],[data-link="brands"]{--icon-color:var(--gold)}
[data-link="meet"],[data-link="portfolio"],[data-link="contact"],[data-link="shop"]{--icon-color:var(--rose)}
[data-link="tiktok"]{--icon-color:var(--charcoal)}
.icon-face>svg,.row-icon{color:var(--icon-color);filter:none}
.dial-link{position:absolute;width:16%;height:16%;min-width:44px;min-height:44px;transform:translate(-50%,-50%);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2;transition:background-color .18s,box-shadow .18s}
.site{left:39.7%;top:19.3%}.meet{left:63.5%;top:19.7%}.work{left:81%;top:38.8%}.mail{left:79.9%;top:62.3%}.brand{left:60.2%;top:81.6%}.shop{left:34.7%;top:81.7%}.tiktok{left:17.6%;top:63.5%}
.dial-link:hover,.dial-link:focus-visible,.dial-link.is-highlighted{background:var(--soft-blush);box-shadow:0 0 0 2px var(--gold)}
.dial-link:focus-visible{outline-offset:2px}
.dial-link.is-selected{box-shadow:0 0 0 2px var(--gold)}
.icon-face{width:52%;height:52%;display:flex;align-items:center;justify-content:center;transform:rotate(calc(-1 * var(--rotation)));transition:transform var(--turn-time) cubic-bezier(.2,.7,.25,1)}
.icon-face>svg{width:82%;height:82%;overflow:visible}
.mail .icon-face{width:47%;height:47%}
.icon-face>.kelly-face{width:100%;height:100%;object-fit:cover;border-radius:50%;border:1px solid var(--gold)}
.dial-tooltip{display:none}
.rotary-tooltip{position:absolute;z-index:10;left:0;top:0;max-width:calc(100% - 16px);width:max-content;padding:9px 13px;border:1px solid var(--gold);border-radius:9px;background:var(--soft-blush);color:var(--charcoal);font:600 12px/1.4 Arial,Helvetica,sans-serif;letter-spacing:.15px;white-space:normal;text-align:center;box-shadow:0 4px 12px #1713121A;cursor:default}
.rotary-tooltip[hidden]{display:none}

/* Instructions belong to the phone; the personal motto introduces the links. */
.dial-hint{margin:-2px auto 0;max-width:100%;text-align:center;font-size:10px;line-height:1.4;letter-spacing:0;white-space:nowrap;color:var(--charcoal)}
.touch-hint{display:none}
.personal-motto{text-align:center;font:400 17px/1.45 Georgia,"Times New Roman",serif;letter-spacing:.05px;margin:20px 0 16px;color:var(--charcoal)}
.personal-motto>span{font-style:italic;color:#93434A}
.link-list{width:86%;margin:0 auto}
.link-list>a{display:flex;align-items:center;justify-content:space-between;gap:11px;min-height:48px;padding:9px 8px;font-size:11px;line-height:1.4;font-weight:700;letter-spacing:.65px;border-bottom:1px solid var(--soft-blush);border-radius:8px;color:var(--charcoal);transition:background-color .18s,box-shadow .18s}
.link-list>a:last-child{border-bottom-color:transparent}
.link-list>a>span{flex:1}
.link-list>a:hover,.link-list>a:focus-visible,.link-list>a.is-highlighted{background:var(--soft-blush);color:var(--charcoal);box-shadow:inset 0 0 0 1px var(--gold)}
.row-icon,.row-portrait{width:18px;height:18px;flex:0 0 18px}
.row-portrait{object-fit:cover;border-radius:50%;border:1px solid var(--gold)}
.link-list svg.arrow{width:17px;height:17px;flex:0 0 17px;color:var(--gold)}
@media(hover:none),(pointer:coarse){.hover-hint{display:none}.touch-hint{display:inline}}
@media(max-width:360px){body{padding:14px 10px 24px}.link-page{padding:14px 8px 23px;border-radius:21px}.dial-link{min-width:40px;min-height:40px}.link-list{width:92%}.link-list>a{font-size:10.5px;gap:9px}.personal-motto{font-size:15px}.dial-hint{font-size:9px}.row-icon,.row-portrait{width:17px;height:17px;flex-basis:17px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

a:focus-visible{outline-color:var(--charcoal)}