/* Small cues at the object edges, with larger invisible touch targets. */
.hero .seated-portrait .commerce-hotspots{position:absolute;inset:0;z-index:5;pointer-events:none}
.commerce-hotspot{position:absolute;display:grid;place-items:center;width:44px;height:44px;transform:translate(-50%,-50%);padding:0;border:0;background:transparent;color:#fff;pointer-events:auto;cursor:pointer;isolation:isolate}
.commerce-hotspot>span:first-child{display:grid;place-items:center;width:12px;height:12px;background:transparent;border:0;opacity:.66;text-shadow:0 1px 2px #142329a6;font:300 14px/1 var(--sans);transition:opacity .2s}
.commerce-hotspot:hover>span:first-child,.commerce-hotspot:focus-visible>span:first-child{opacity:1}
.commerce-tip{position:absolute;bottom:calc(100% - 3px);left:50%;transform:translateX(-50%);padding:6px 9px;border-radius:3px;background:#20373d;color:#fff;font:12px/1.3 var(--sans);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.commerce-hotspot:hover .commerce-tip,.commerce-hotspot:focus-visible .commerce-tip{opacity:1}
.commerce-hotspot-watch{left:74%;top:64%}.commerce-hotspot-shoes{left:24%;top:78%}.commerce-hotspot-shirt{left:38%;top:34%}
.commerce-hotspot-watch>span:first-child{color:#e4cfaa;opacity:.85}
.commerce-hotspot-watch:after{content:"";position:absolute;inset:12px;border:1px solid #c8a363a6;border-right-color:transparent;border-bottom-color:transparent;border-radius:50%;pointer-events:none;transform:rotate(-35deg);animation:commerce-gold-orbit 9s linear 1.5s 2}
@keyframes commerce-gold-orbit{from{transform:rotate(-35deg)}to{transform:rotate(325deg)}}
.commerce-cycle{position:relative;width:106px;flex:0 0 106px}.commerce-cycle .city-cycle{width:100%;display:block}.commerce-hotspot-bike{left:89%;top:13%;color:#49615f}.commerce-cycle .cycle-frame{stroke:#a7473a}
@media(prefers-reduced-motion:reduce){.commerce-hotspot-watch:after{animation:none}.commerce-hotspot span{transition:none}}
@media(max-width:760px){.commerce-cycle{width:72px;flex-basis:72px}}
#commerce-dialog [hidden]{display:none!important}
#commerce-dialog{box-sizing:border-box;width:min(650px,calc(100% - 32px));max-width:650px;max-height:calc(100dvh - 32px);margin:auto;padding:28px;overflow:auto;overscroll-behavior:contain;border:1px solid #d5d9d8;border-radius:8px;background:#fafbf9;color:#20373d;text-align:left;font-family:var(--sans)}
#commerce-dialog::backdrop{background:#10232bc4;backdrop-filter:blur(4px)}body:has(#commerce-dialog[open]){overflow:hidden}
#commerce-dialog .commerce-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;letter-spacing:.12em}
#commerce-dialog button,#commerce-dialog input,#commerce-dialog select,#commerce-dialog a{font:inherit}
#commerce-dialog button{cursor:pointer}#commerce-dialog button:disabled{cursor:wait;opacity:.55}
#commerce-dialog .commerce-top button{background:none;border:0;min-height:44px;padding:8px;color:inherit;font-size:13px;letter-spacing:0}
#commerce-dialog h2{font-family:Newsreader,Georgia,serif;font-size:44px;font-weight:400;line-height:1.05;letter-spacing:-.035em;margin:14px 0}
#commerce-dialog p{font-size:14px;line-height:1.55;margin:12px 0}
#commerce-dialog .commerce-quiet{font-size:12px;color:#526467}
#commerce-dialog .commerce-shortcuts{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
#commerce-dialog .commerce-shortcuts button{min-height:40px;padding:8px 11px;border:1px solid #bdc9c9;border-radius:4px;background:transparent;color:#20373d;font-size:12px}
#commerce-dialog .commerce-shortcuts button[aria-pressed=true]{background:#e2edeb;border-color:#24474c}
#commerce-dialog label{display:block;font-size:13px;margin:12px 0 7px;font-weight:600}#commerce-dialog label span{font-weight:400}
#commerce-dialog input,#commerce-dialog select{box-sizing:border-box;width:100%;min-width:0;min-height:46px;padding:10px;border:1px solid #a8b7b7;border-radius:3px;color:#20373d;background:#fff;font-size:16px}
#commerce-dialog .commerce-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#commerce-dialog .commerce-primary,#commerce-dialog .commerce-buy{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;padding:12px 16px;border:0;border-radius:3px;background:#24474c;color:#fff;font-size:14px;text-decoration:none;box-sizing:border-box}
#commerce-status:empty{display:none}#commerce-status{padding-top:14px;border-top:1px solid #d4dddd}
#commerce-results{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
#commerce-dialog .commerce-product{min-width:0;display:flex;flex-direction:column;border:1px solid #d1dbd9;border-radius:4px;padding:14px;background:#fff}
#commerce-dialog .commerce-product img{width:100%;height:140px;object-fit:contain;margin-bottom:12px}
#commerce-dialog h3{font-size:15px;line-height:1.4;margin:0;font-weight:600;overflow-wrap:anywhere}
#commerce-dialog .commerce-product p{font-size:12px;margin:8px 0}#commerce-dialog .commerce-price{font-size:17px!important;font-weight:600}
#commerce-dialog .commerce-product button{margin-top:auto;min-height:44px;background:none;color:#24474c;border:0;border-top:1px solid #d1dbd9;padding:10px 0 0;text-align:left;font-size:13px}
#commerce-selection{padding-top:20px;border-top:1px solid #d4dddd;outline:none}
#commerce-selection .commerce-back{min-height:44px;background:none;border:0;color:#24474c;padding:0}
#commerce-selection .commerce-buy{margin-top:12px}#commerce-selection a{overflow-wrap:anywhere}
#commerce-dialog .commerce-how{margin-top:24px;border-top:1px solid #d1dbd9;padding-top:16px}
#commerce-dialog .commerce-how summary{font-size:13px;cursor:pointer;min-height:36px}
#commerce-dialog .commerce-how p{font-size:12px;color:#526467}
#commerce-dialog :is(button,input,select,a,summary):focus-visible,.commerce-reveal:focus-visible,.commerce-inline button:focus-visible,.commerce-hotspot:focus-visible,.commerce-bike:focus-visible{outline:3px solid #bd713b;outline-offset:3px}
@media(max-width:760px){#commerce-dialog{width:100%;max-width:100%;max-height:calc(100dvh - 12px);margin:auto auto 0;padding:20px;border-radius:14px 14px 0 0}#commerce-dialog h2{font-size:36px}#commerce-dialog .commerce-product img{height:110px}}
@media(max-width:380px){#commerce-results{grid-template-columns:1fr}#commerce-dialog .commerce-fields{grid-template-columns:1fr;gap:0}#commerce-dialog{padding:16px}}
@media(forced-colors:active){.commerce-hotspot,#commerce-dialog .commerce-primary,#commerce-dialog .commerce-buy{border:2px solid ButtonText}}

#commerce-dialog .commerce-source{color:#24474c;display:inline-block;min-height:44px;line-height:44px;text-underline-offset:5px;font-size:14px}
#commerce-dialog .commerce-market{display:flex;align-items:center;gap:12px;margin:14px 0 18px}
#commerce-dialog .commerce-market label{margin:0;white-space:nowrap;font-weight:400;font-size:12px}#commerce-dialog .commerce-market select{width:auto;min-height:40px;font-size:13px}
#commerce-dialog .commerce-more{margin-top:22px;border-top:1px solid #d1dbd9;padding-top:16px}#commerce-dialog .commerce-more summary{cursor:pointer;font-size:14px;min-height:32px}
#commerce-dialog .commerce-search-row{display:flex;gap:8px}#commerce-dialog .commerce-search-row input{flex:1;width:0}#commerce-dialog .commerce-search-row button{flex:0 0 auto}
#commerce-dialog .commerce-handoff{margin-top:20px;padding:18px;border:1px solid #b8cfca;background:#eaf2ee;border-radius:4px}
#commerce-dialog .commerce-seller{color:#536c6d;letter-spacing:.03em}#commerce-dialog .commerce-buy{max-width:100%;overflow-wrap:anywhere}
/* The wide hero footer must not intercept the shoe marker behind its empty area. */
.hero .hero-bottom{pointer-events:none}.hero .hero-bottom a,.hero .hero-bottom button{pointer-events:auto}
#commerce-dialog{width:min(540px,calc(100% - 24px));max-width:540px;padding:24px}
#commerce-dialog h2{font-size:34px}#commerce-dialog .commerce-selected-image{display:block;width:100%;height:150px;object-fit:contain;margin:10px 0 18px}
#commerce-dialog .commerce-steps{display:flex;list-style:none;gap:0;padding:0;margin:18px 0 10px;font:12px/1.5 var(--sans);color:#6a7777}
#commerce-dialog .commerce-steps li{flex:1;border-bottom:1px solid #d4dddd;padding:6px 0}#commerce-dialog .commerce-steps .is-current{border-bottom:2px solid #24474c;color:#24474c;font-weight:600}
#commerce-dialog .commerce-activity{font-size:12px;color:#5b6e70}#commerce-dialog .commerce-activity summary{cursor:pointer;padding:6px 0}#commerce-activity-log{padding:0;list-style:none;max-height:160px;overflow:auto}#commerce-activity-log li{display:grid;grid-template-columns:100px 1fr;gap:8px;margin:9px 0}#commerce-activity-log code{font-size:10px}
@media(max-width:760px){#commerce-dialog{width:100%;max-width:100%;padding:18px}#commerce-dialog h2{font-size:30px}}

#commerce-dialog .commerce-stock{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:#38654d;font-size:12px;margin:10px 0}
#commerce-dialog .commerce-stock:before{content:"";width:5px;height:5px;border-radius:50%;background:#648b6a}
#commerce-dialog .commerce-refresh{padding:4px 0;background:none;border:0;border-bottom:1px solid #aebdb5;min-height:32px;color:#49635a;font-size:12px}
#commerce-dialog .commerce-retailers{margin-top:16px;font-size:12px}#commerce-dialog .commerce-retailers a{display:inline-block;padding:10px 0;color:#395853;text-underline-offset:4px}
/* Keep the shoe target clear of the mobile work link. */
@media(max-width:760px){.commerce-hotspot-shoes{left:61%;top:91%}}

/* Quiet object cues; one readable entry on touch-sized layouts. */
.commerce-hotspot>span:first-child{width:20px;height:20px;border:1px solid #ffffffa6;border-radius:50%;background:#26343580;opacity:.85;font-size:12px;text-shadow:none}
.commerce-mobile-details{display:none}
#community.community-composition .commerce-cycle>.city-cycle{width:100%;height:auto;margin:0;color:#435554}
.commerce-road-bike{border:0;padding:8px 0;background:transparent;text-align:center;color:#435554;cursor:pointer}
.commerce-road-bike>span{display:block;font:11px/1.4 var(--sans);margin-top:7px;white-space:nowrap;text-underline-offset:4px}
.commerce-road-bike:hover>span{text-decoration:underline}
.commerce-road-bike:focus-visible,.commerce-mobile-details:focus-visible{outline:2px solid #bd713b;outline-offset:4px}
@media(max-width:760px){
.hero .commerce-hotspots{display:none!important}
.hero .hero-bottom{position:relative!important;inset:auto!important;align-self:stretch;flex:none;margin:0 24px;display:flex!important;align-items:center;justify-content:space-between;gap:12px}
.hero .hero-bottom .chapter-count{display:none}
.hero .hero-bottom .next-story{display:flex;align-items:center;gap:10px}
.hero .hero-bottom .round-arrow{display:none}
.commerce-mobile-details{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:1px solid #ffffff70;border-radius:4px;background:#28323850;color:#fff;font:12px/1.3 var(--sans);white-space:nowrap}
.commerce-cycle{width:96px;flex-basis:96px}
#contact footer>a.about-link{grid-column:1;grid-row:3}
#contact footer>a.ai-colophon-link{grid-column:1;grid-row:4}
#contact footer>a.privacy-link{grid-column:1;grid-row:5}
#contact footer>a[href="#hello"]{grid-column:2;grid-row:1}
}
@media(max-width:760px){.hero .hero-bottom{width:calc(100% - 48px)!important}.hero .hero-bottom .next-story{white-space:nowrap;min-height:44px;padding:0}.hero .hero-bottom .next-story>span{margin:0}}

/* Personal details belong to the objects; the portrait interrupts the rule. */
.hero .seated-portrait:before{display:block;content:"";position:absolute;left:-100vw;right:-100vw;bottom:9%;height:1px;background:#f3ede54d;z-index:0;pointer-events:none}
.hero .hero-bottom:before{display:none!important}
.commerce-hotspot>span:first-child{width:16px;height:16px;font-size:20px;line-height:12px;color:#f5eee4;border-color:#f5eee4b3;background:#26343573;opacity:.84}
.commerce-hotspot-watch:after{animation:none;border:0}
.commerce-mobile-details{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:1px solid #ffffff70;border-radius:4px;background:#28323850;color:#fff;font:12px/1.3 var(--sans);white-space:nowrap}
.hero .hero-bottom .chapter-count{display:none}
.detail-symbol{width:20px;height:20px;flex:none}
#commerce-dialog .commerce-shortcuts button{display:inline-flex;align-items:center;gap:6px;min-height:44px}
#commerce-dialog .commerce-shortcuts button[aria-pressed=true]{background:#eee7dc;border-color:#9a7655;color:#453a30}
#commerce-dialog{font-family:var(--sans);background:#fbfaf6}
#commerce-dialog .commerce-source{color:#435e58}
@media(max-width:760px){.hero .commerce-hotspots{display:block!important}.commerce-hotspot>span:first-child{width:14px;height:14px;font-size:18px}}
/* Place the cues just inside each object's outer edge, clear of the hands and watch face. */
.commerce-hotspot-watch{left:73%;top:65%}
.commerce-hotspot-shirt{left:32%;top:32%}
.commerce-hotspot-shoes{left:23%;top:78%}
/* One brief glint at a time hints that the details can be opened. */
.commerce-hotspot>span:first-child{animation:detail-glint 5.4s ease-in-out infinite}
.commerce-hotspot-shirt>span:first-child{animation-delay:1.8s}
.commerce-hotspot-shoes>span:first-child{animation-delay:3.6s}
@keyframes detail-glint{0%,68%,100%{box-shadow:0 0 0 0 #f5eee400;opacity:.84}76%{box-shadow:0 0 0 4px #f5eee42b,0 0 9px #f5eee455;opacity:1}85%{box-shadow:0 0 0 0 #f5eee400;opacity:.84}}
@media(prefers-reduced-motion:reduce){.commerce-hotspot>span:first-child{animation:none}}