@font-face{font-family:ImpactFallback;src:local('Impact');font-display:swap}
:root{--amber:#ffab4b;--cream:#f8f2e9;--muted:#b5aaa0;--bg:#151311;--blue:#77b6ff;--purple:#d8afff;font-family:Arial,Helvetica,sans-serif;color:var(--cream);background:var(--bg);font-synthesis:none;color-scheme:dark}
*{box-sizing:border-box}
html{min-width:280px;overflow-x:clip}
body{margin:0;min-height:100svh;-webkit-font-smoothing:antialiased;overflow-x:clip;background:radial-gradient(ellipse at 16% 30%,#79421c24,transparent 55%),radial-gradient(ellipse at 92% 85%,#25296616,transparent 40%)}
::selection{color:#16120e;background:var(--amber)}
.ambient{position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 28% 35%,#ce721915,transparent 48%)}
.site-shell{max-width:1180px;min-height:100svh;margin:auto;padding:34px 48px 22px;display:flex;flex-direction:column;justify-content:center}

.profile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:88px;align-items:center;flex:1;padding:42px 0 38px}
.portrait-column{position:relative;perspective:1000px;min-width:0}
.tag-drop{width:min(100%,366px);margin:auto;transform:rotate(-6deg);transform-origin:50% 5%}
.dog-tag{margin:0;position:relative;padding:4px;border-radius:69px;background:linear-gradient(133deg,#8c512b 0%,#ffd69b 17%,#9f5b2d 30%,#ec9b4a 45%,#572e18 67%,#ecab63 88%,#a36536 100%);box-shadow:-13px 24px 25px #0003,0 36px 75px #0008,0 0 80px #f4972620;transform:rotateZ(var(--tilt-z,0deg)) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .45s ease-out;will-change:transform}
.tag-inner{position:relative;isolation:isolate;overflow:hidden;padding:0 11px 11px;border-radius:65px;border:1px solid #36271d;background:linear-gradient(115deg,#362c24,#171512 50%,#292119);box-shadow:inset 0 0 0 1px #ffe6c14d,inset 0 0 0 5px #17120c}
.tag-top{height:48px;display:flex;align-items:center;justify-content:center}
.tag-slot{height:9px;width:45px;border-radius:10px;background:#090807;border:1px solid #6e5036;box-shadow:0 1px 1px #ffd69b66,inset 0 3px 3px #000}
.portrait-window{position:relative;overflow:hidden;border:1px solid #cd996741;border-radius:39px 39px 19px 19px;aspect-ratio:3/4;background:#151422}
.portrait{width:100%;height:100%;display:block;object-fit:cover}
.portrait-window::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 28px #0006;pointer-events:none;border-radius:inherit}
.portrait-grain{position:absolute;inset:0;background:linear-gradient(130deg,#ffffff0a,transparent 40%,#08041812);pointer-events:none}
.tag-caption{text-align:center;padding:14px 0 11px}
.good-boy{display:block;color:#ffc174;font-size:1.375rem;font-weight:800;letter-spacing:3px;text-shadow:0 1px 1px #000}
.good-boy span{color:#8d7258;margin:0 4px;font-weight:400}
.tag-engraving{display:block;font-family:monospace;font-size:0.625rem;letter-spacing:3px;color:#d5bb9b;margin-top:7px}
.tag-glint{position:absolute;inset:-70%;background:linear-gradient(110deg,transparent 43%,#fff3df19 49%,#fff3df4a 50%,#fff3df10 51%,transparent 58%);transform:translateX(-60%);pointer-events:none;z-index:2;opacity:0}

.identity{max-width:470px;min-width:0;padding-bottom:10px}
.nameplate{margin-bottom:29px}
.eyebrow{margin:0 0 9px;color:#e3ba8b;font-family:monospace;font-size:0.875rem;letter-spacing:6px;display:flex;gap:13px;align-items:center}
.eyebrow>span{width:28px;height:1px;background:var(--amber)}
h1{margin:0;font-family:ImpactFallback,Impact,'Arial Narrow',Arial,sans-serif;font-weight:900;line-height:.91;letter-spacing:-2px;font-size:clamp(4.875rem,7.5vw,6.625rem)}
h1>span{display:block}
h1 .pup{color:var(--amber)}

.social-links{display:grid;gap:10px}
.social-link{--tint:119,182,255;position:relative;isolation:isolate;display:flex;align-items:center;gap:16px;min-height:80px;padding:15px 20px 15px 17px;border:1px solid #ffffff16;border-radius:15px;color:var(--cream);text-decoration:none;background:linear-gradient(112deg,rgba(var(--tint),.07),rgba(var(--tint),.018) 80%),#201e1d;box-shadow:inset 0 1px #ffffff03,0 3px 8px #0001;transition:transform .2s ease,border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
.social-link::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:2px;border-radius:2px;background:rgba(var(--tint),.45);transition:background-color .2s ease}
.x{--tint:230,225,217}
.telegram{--tint:91,197,234}
.instagram{--tint:205,149,245}
.platform-icon{width:39px;flex:0 0 39px;display:grid;place-items:center;color:rgb(var(--tint))}
.platform-icon img{filter:brightness(0) invert(1);opacity:.93}
.link-copy{display:grid;gap:5px;min-width:0;flex:1}
.platform-name{overflow-wrap:anywhere;font-size:1.125rem;line-height:1.1;font-weight:700;letter-spacing:-.2px}
.formerly{font-weight:400;color:#c5bfb7;font-size:1.0rem}

.age-badge{font-family:monospace;color:#ffbe72;border:1px solid #fbaa4838;background:#ffa7460c;border-radius:6px;padding:5px 6px;font-size:0.75rem;line-height:1;flex-shrink:0}
.link-arrow{flex:0 0 20px;color:#a89b8d;margin-left:1px;transition:transform .2s ease,color .2s ease}
.social-link:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.social-link:active{transform:translateY(1px) scale(.986);background-color:#302720}

@media(hover:hover) and (pointer:fine){.social-link:hover{transform:translateY(-2px);border-color:#b7885359;background-color:#29241f;box-shadow:0 7px 18px #0003}.social-link:hover::before{background:var(--amber)}.social-link:hover .link-arrow{transform:translate(2px,-2px);color:var(--amber)}html:not(.intro) .dog-tag:hover .tag-glint{animation:glint 1s ease both}}
.intro .tag-drop{animation:tag-arrive 3s cubic-bezier(.2,.65,.3,1) both}
.intro .tag-glint{animation:glint 2.5s .3s ease both}
.intro .nameplate{animation:arrive .55s .08s both}
.intro .social-link{animation:arrive .45s calc(.14s + var(--order)*.07s) backwards}
@keyframes tag-arrive{0%{transform:translateY(-48px) rotate(9deg);opacity:0}12%{opacity:1}57%{transform:translateY(3px) rotate(-9deg)}82%{transform:translateY(-1px) rotate(-4deg)}100%{transform:translateY(0) rotate(-6deg)}}
@keyframes glint{0%{transform:translateX(-60%);opacity:0}20%{opacity:1}75%{opacity:.7}100%{transform:translateX(60%);opacity:0}}
@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1200px) and (min-height:950px){.profile{padding-top:65px;padding-bottom:70px}.tag-drop{width:390px}.nameplate{margin-bottom:35px}.social-link{min-height:86px}}
@media(max-width:1000px) and (min-width:701px){.site-shell{padding:27px 35px 22px}.profile{gap:47px}.tag-drop{width:295px}.tag-inner{padding:0 8px 8px}.tag-top{height:38px}.portrait-window{border-radius:34px 34px 15px 15px}.tag-caption{padding:12px 0}.good-boy{font-size:1.125rem}.tag-engraving{font-size:0.5625rem}.social-link{padding:14px 12px;gap:10px;min-height:76px}.platform-icon{width:30px;flex-basis:30px}.platform-name{overflow-wrap:anywhere;font-size:1.0625rem}.formerly{font-size:0.875rem}h1{font-size:4.875rem}.age-badge{padding:4px 5px}}
@media(max-width:700px){.site-shell{max-width:470px;padding:20px 25px 19px}.profile{grid-template-columns:1fr;gap:23px;padding:28px 0 26px;align-items:start;flex:none}.tag-drop{width:183px}.dog-tag{border-radius:39px;padding:3px;box-shadow:-8px 14px 18px #0003,0 20px 40px #0007,0 0 60px #f497261a}.tag-inner{border-radius:36px;padding:0 6px 6px}.tag-top{height:26px}.tag-slot{width:30px;height:6px}.portrait-window{border-radius:24px 24px 11px 11px}.tag-caption{padding:9px 0 5px}.good-boy{font-size:0.8125rem;letter-spacing:2px}.good-boy span{margin:0 2px}.tag-engraving{display:none}.identity{width:100%;padding:0}.nameplate{margin-bottom:21px;text-align:center}.eyebrow{justify-content:center;font-size:0.6875rem;letter-spacing:4px;margin-bottom:8px;gap:10px}.eyebrow>span{width:17px}.eyebrow::after{content:"";width:17px;height:1px;background:var(--amber)}h1{font-size:clamp(2.625rem,11vw,3.3125rem);letter-spacing:-1px;line-height:.94;white-space:normal}h1>span{display:inline}.social-links{gap:9px}.social-link{min-height:69px;padding:12px 15px;gap:12px;border-radius:13px}.platform-icon{width:31px;flex-basis:31px}.platform-icon img{width:23px;height:23px}.platform-name{overflow-wrap:anywhere;font-size:1.0625rem}.link-copy{gap:4px}.age-badge{font-size:0.6875rem;padding:4px 5px}.link-arrow{width:18px;height:18px;flex-basis:18px}.formerly{font-size:0.9375rem}}
@media(max-width:360px){.site-shell{padding-inline:18px}.tag-drop{width:165px}.profile{gap:21px;padding-top:24px}.social-link{gap:9px;padding-inline:12px}.platform-name{overflow-wrap:anywhere;font-size:1.0rem}.formerly{font-size:0.875rem}.age-badge{padding:4px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.dog-tag{transform:none!important}.tag-glint{display:none}.social-link:hover{transform:none}}

@media(max-width:360px){h1{font-size:clamp(1.875rem,11vw,2.4375rem)}}

.tag-drop{transform-style:preserve-3d}
.dog-tag[role="button"]{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.dog-tag[role="button"]:focus-visible{outline:2px solid var(--amber);outline-offset:7px}
.dog-tag.is-phone-tilting{transform-origin:50% 6%;transition:none}
.motion-hint{margin:25px 0 0;text-align:center;color:var(--amber);font-size:.8125rem;line-height:1.5;letter-spacing:.15px}
.motion-hint[hidden]{display:none}
@media(max-width:700px){.motion-hint{margin-top:18px}}

.motion-hint{display:flex;align-items:flex-end;justify-content:center;gap:5px;cursor:pointer;min-height:38px}.motion-copy{padding-bottom:1px}.motion-arrow{flex:0 0 48px;align-self:center}
