*{box-sizing:border-box} :root{font-family:Arial,Helvetica,sans-serif;color:#302d29;background:#faf7f1;font-synthesis:none}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #ac723b;outline-offset:6px}button{border:0;background:none} .home{height:calc(100svh - 113px);min-height:610px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 54% 45%,#fffdf8 0%,#faf7f1 67%)}.intro{position:absolute;left:4%;top:11%;z-index:3;pointer-events:none}.intro h1{font-family:'Snell Roundhand','URW Chancery L','Apple Chancery',cursive;font-size:clamp(90px,11vw,190px);font-weight:400;letter-spacing:-.075em;line-height:1.25;margin:0 0 27px;text-shadow:8px 21px 4px #79716a24;transform:rotate(-6deg);transform-origin:left center}.intro p{font-size:clamp(13px,1.16vw,18px);margin:0 0 10px}.intro>span{font-size:12px;color:#77716a;letter-spacing:.12em}.stage{position:absolute;left:55%;top:48%;width:min(65vw,calc(100svh - 145px));aspect-ratio:1;transform:translate(-50%,-50%);perspective:1100px;isolation:isolate}.disc{position:absolute;inset:4%;border-radius:50%;transform-style:preserve-3d;will-change:transform;background:conic-gradient(from 20deg,#b8b7b1,#fdfaf1,#d4d9d9,#ede2ce,#fff,#b8b7b1);box-shadow:0 2px 2px #91877870,0 0 2px 2px #d9d5cd}.rim{position:absolute;inset:0;border:2px solid #fdfdf0b0;border-radius:50%;box-shadow:inset 0 0 0 3px #88857855,inset 0 0 0 5px #fefdf7c0;pointer-events:none}.hub{position:absolute;width:33%;height:33%;top:33.5%;left:33.5%;border-radius:50%;border:4px solid #e8e5dac9;box-shadow:0 0 0 2px #aba89d70,0 0 0 12px #ffffff38,0 0 0 13px #b1ad9e45;pointer-events:none}.portrait{position:absolute;left:34%;top:34%;width:32%;height:32%;border-radius:50%;padding:0;overflow:hidden;z-index:5;transform:translateZ(15px);box-shadow:inset 0 0 5px #5e504c}.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;display:block}.photo-card{position:absolute;width:27%;padding:1.25% 1.25% 1.1%;background:#fcf9f1;box-shadow:1px 5px 9px #58412727;transform:translateZ(25px) rotate(var(--rotation));transition:box-shadow .2s,filter .2s;z-index:6;text-align:left;will-change:transform}.photo-card .photo{display:block;position:relative;aspect-ratio:1.32;overflow:hidden;background:#e5ddce}.photo img{position:absolute;max-width:none;pointer-events:none}.photo-card>span:last-child{display:block;font-size:clamp(10px,1.1vw,17px);padding-top:7%;letter-spacing:.02em}.photo-card:hover,.photo-card.active{box-shadow:2px 13px 22px #69462738;filter:brightness(1.035)}.about{left:16%;top:12%}.experience{right:13%;top:9%}.building{right:3%;top:43%}.article{left:46%;bottom:8%}.connect{left:10%;top:60%}#disc-surface{width:100%;height:100%;position:absolute;inset:0;border-radius:50%;pointer-events:none}#underlight{position:absolute;left:-22%;top:-22%;width:144%;height:144%;z-index:-2;pointer-events:none}.ground-shadow{position:absolute;inset:9% 7% 2%;background:radial-gradient(ellipse,#79613e5a,#80644620 52%,transparent 70%);filter:blur(14px);border-radius:50%;z-index:-1;will-change:transform,opacity}.tap-disc{position:absolute;inset:0;border-radius:50%;z-index:2;transform:translateZ(1px)}.categories{position:absolute;right:4.8%;top:19%;bottom:19%;display:flex;flex-direction:column;justify-content:space-between;z-index:4}.categories button{display:flex;gap:22px;align-items:center;padding:12px 0;text-align:left}.categories small{font-size:10px;color:#a89a87;letter-spacing:.08em}.categories span{font-size:clamp(16px,1.55vw,25px);position:relative}.categories span:after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:1px;background:#9d7147;transform:scaleX(0);transform-origin:left;transition:transform .3s}.categories button:hover span:after,.categories button.active span:after{transform:scaleX(1)}footer{position:absolute;bottom:17px;left:4%;right:4%;display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#8a8177;letter-spacing:.035em}footer button{font-size:10px;color:#8a8177}.demo-dock{height:113px;border-top:1px solid #dfd4c452;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f4efe6;position:relative;z-index:8}.demo-label{font-size:8px;letter-spacing:.25em;color:#98836b;margin-bottom:9px}.modes{display:flex;gap:6px}.modes button{border-radius:50px;padding:10px 20px;font-size:12px;border:1px solid transparent;transition:background .2s}.modes small{font-size:9px;margin-right:9px;opacity:.5}.modes button[aria-pressed=true]{background:#fffaf0;border-color:#d0bda1;box-shadow:0 2px 8px #6246180a}.modes button:hover{background:#fffaf0}.demo-dock p{font-size:10px;color:#8f7d68;margin:9px 0 0}dialog{border:1px solid #d6c7af;background:#fcf8ef;color:#393026;padding:60px 48px 48px;width:min(520px,90vw);border-radius:4px;box-shadow:0 20px 100px #42301626}dialog::backdrop{background:#63534530;backdrop-filter:blur(9px)}.close{position:absolute;right:15px;top:12px;font-size:28px;color:#937e67}.eyebrow{font-size:9px;letter-spacing:.18em;color:#99836c}dialog h2{font-family:Georgia,serif;font-size:44px;font-weight:400;margin:22px 0}dialog p{line-height:1.8;font-size:15px;color:#71604f}dialog a{color:#8b5c2d;text-underline-offset:5px}dialog p:last-child{margin-bottom:0}@media(min-width:1600px){.stage{left:55%;width:min(64vw,calc(100svh - 150px))}}@media(max-width:800px){.home{height:calc(100svh - 136px);min-height:690px}.intro{top:15px;left:7%}.intro h1{font-size:84px;margin:0 0 4px;line-height:1.2}.intro p{font-size:12px;margin-bottom:6px}.intro>span{font-size:9px}.stage{width:96vw;left:50%;top:52%}.categories{left:6%;right:6%;top:auto;bottom:57px;flex-direction:row;gap:9px}.categories button{gap:0;flex-direction:column;align-items:center}.categories small{font-size:8px;margin-bottom:7px}.categories span{font-size:12px}footer{font-size:8px;bottom:19px}footer button{font-size:9px}#hint{display:none}.demo-dock{height:136px}.modes{gap:2px}.modes button{padding:10px 10px;font-size:10px}.modes small{margin-right:4px}.photo-card>span:last-child{font-size:11px}.demo-dock p{max-width:290px;text-align:center;line-height:1.5}.photo-card{box-shadow:1px 4px 7px #58412727}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.photo-card{transition:none}}
/* Original sunset portrait, framed around the face with a little sea and sky. */
.portrait img{object-position:50% 20%;transform:scale(1.16);transform-origin:46% 32%}
.home{overflow:clip}
.home{height:100svh}
/* Original concept signature and its original shadow, kept as one image crop. */
.intro{top:6.5%}
.intro h1{width:clamp(280px,29vw,445px);height:auto;line-height:0;margin:0 0 3px;transform:none;text-shadow:none;mix-blend-mode:multiply}
.shelly-signature{display:block;width:100%;height:auto;overflow:hidden}
.categories{top:auto;bottom:9%;right:4.8%;justify-content:flex-start;gap:28px}
.categories button{gap:19px;padding:10px 0;min-height:44px}
@media(max-width:800px){
 .intro{top:17px;left:7%}
 .intro h1{width:200px;margin-bottom:5px}
 .home{min-height:920px}
 .stage{top:43%;width:86vw;max-width:530px}
 .categories{left:auto;right:7%;top:auto;bottom:58px;flex-direction:column;gap:18.5px;align-items:stretch}
 .categories button{flex-direction:row;align-items:center;gap:15px;padding:7px 0;min-height:37px}
 .categories small{margin:0;font-size:9px}
 .categories span{font-size:16px}
}

/* Lift each photograph independently of the optical-disc tilt. */
.photo-card{transition:transform .52s cubic-bezier(.22,1.45,.36,1),box-shadow .35s ease,filter .3s ease}
.photo-card:hover,.photo-card.active,.photo-card:focus-visible{transform:translate3d(0,-14px,60px) rotate(calc(var(--rotation) * .65)) scale(1.06);box-shadow:3px 21px 25px -8px #69462755;filter:brightness(1.045);z-index:8}
.photo-card:active{transform:translate3d(0,-6px,40px) rotate(calc(var(--rotation) * .8)) scale(1.025);transition-duration:.12s}
.categories span{font-family:Optima,Candara,'Avenir Next','Segoe UI',sans-serif;font-weight:400;font-size:clamp(18px,1.6vw,25px);line-height:1.2;letter-spacing:.025em}
.categories small{font-variant-numeric:tabular-nums;font-size:10px;letter-spacing:.1em;color:#9d9287}
@media(max-width:800px){.categories span{font-size:17px}.categories small{font-size:9px}}
.home[data-motion-paused=true] .photo-card{transition:none}
.home[data-motion-paused=true] .photo-card:is(:hover,.active,:focus-visible,:active){transform:translateZ(25px) rotate(var(--rotation))}
@media(prefers-reduced-motion:reduce){.photo-card{transition:none}.photo-card:is(:hover,.active,:focus-visible,:active){transform:translateZ(25px) rotate(var(--rotation))}}

/* Mobile flows vertically so social links can never overlap the disc. */
@media(max-width:800px){
 .home{display:flex;flex-direction:column;height:auto;min-height:100svh;padding:22px 7% max(20px,env(safe-area-inset-bottom));overflow:clip}
 .intro{position:relative;left:auto;top:auto;flex:none}
 .stage{position:relative;left:auto;top:auto;width:100%;max-width:530px;flex:none;transform:none;margin:32px auto 14px}
 .categories{position:relative;left:auto;right:auto;top:auto;bottom:auto;align-self:flex-end;margin:0 0 24px;gap:0}
 .categories button{min-height:38px;padding:7px 0;gap:15px}
 .home>footer{position:relative;left:auto;right:auto;bottom:auto;margin-top:auto;width:100%;min-height:28px;gap:16px}
}
