/* Homepage. Fonts, base styles, header and footer are in base.css. */
a:hover{text-decoration-color:var(--accent)}
.hl{display:inline-block;padding:9px 0;margin:-9px 0;text-decoration:none}
.nl{display:inline-block;padding:9px 5px;margin:-9px -5px;color:#5A5F69;text-decoration:none}
.nl:hover{color:#16181D}
/* wide layout: intro beside the standing pendulum; photo column (with room to hang above it) beside the text */
.band{position:relative;margin-top:20px;touch-action:pan-y}
.cv{position:absolute;left:0;top:0;width:100%;height:calc(100% + 180px);display:block;pointer-events:none}
.band-in{position:relative;max-width:1120px;margin:0 auto;padding:48px clamp(20px,4vw,48px) 0;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 48px}
.intro{flex:1 1 380px;max-width:32rem;margin:0 0 64px;font-size:clamp(19px,1.75vw,22px);line-height:1.48;letter-spacing:-0.012em;text-wrap:pretty}
.zone{flex:1 1 240px;height:190px;touch-action:pan-y}
.zone:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.content{position:relative;max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,48px);box-sizing:border-box;display:flex;flex-direction:row-reverse;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:0 48px}
.pcol{flex:1 1 240px;max-width:280px;display:flex;flex-direction:column}
.hang{height:172px;touch-action:pan-y}
.fig{margin:0;display:flex;flex-direction:column;gap:6px}
.frame{position:relative;overflow:hidden;aspect-ratio:4/5;background:#E8EBEE;border-radius:3px;touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab}
.frame:active{cursor:grabbing}
.frame:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.zone:focus:not(:focus-visible),.frame:focus:not(:focus-visible){outline:none}
.track{display:flex;height:100%;transition:transform 480ms cubic-bezier(.22,.61,.36,1);will-change:transform}
.track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.cap{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;line-height:20px;color:#6B7079}
.count{font-variant-numeric:tabular-nums}
.arws{display:flex;gap:0;margin-right:-12px}
.arw{appearance:none;-webkit-appearance:none;border:0;background:none;margin:0;padding:0;width:40px;height:36px;font:inherit;font-size:15px;line-height:36px;color:#5A5F69;cursor:pointer;border-radius:3px}
.arw:hover{color:var(--accent)}
.arw:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.rows{flex:1 1 520px;min-width:0;max-width:47rem;padding-top:56px;display:flex;flex-direction:column;gap:30px}
.sec{display:flex;flex-wrap:wrap;gap:2px 32px}
.sec-h{flex:0 0 116px;margin:0;font-size:14px;line-height:26px;font-weight:500;color:#6B7079}
.sec-p{flex:1 1 320px;min-width:0;margin:0;text-wrap:pretty}
.bl{list-style:none;padding:0}
.bl li{position:relative;padding-left:18px}
.bl li + li{margin-top:5px}
.bl li::before{content:"";position:absolute;left:2px;top:11px;width:4px;height:4px;border-radius:50%;background:#8A9099}
.acc{display:none;appearance:none;-webkit-appearance:none;border:0;background:none;margin:0;padding:13px 0;width:100%;min-height:52px;box-sizing:border-box;align-items:center;gap:12px;text-align:left;font:inherit;color:inherit;cursor:pointer;border-radius:2px}
.acc:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.acc-l{flex:0 0 92px;font-size:14px;line-height:20px;font-weight:500;color:#6B7079}
.acc-s{flex:1 1 auto;min-width:0;font-size:15.5px;line-height:22px}
.acc-i{flex:none;width:20px;text-align:center;font-size:19px;line-height:20px;color:#6B7079;transition:transform 220ms cubic-bezier(.22,.61,.36,1)}
@keyframes rise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
/* narrow layouts (below the width where the full desktop fits): the intro sits beside the pendulum; the sections become an accordion.
   Phone (under 580px): photo and hanging room side by side, in a column of at most 480px. Tablet (580-879px): see the block after this one. */
@media (max-width: 879.98px){
.hd{max-width:480px;padding:22px 20px 0;gap:12px}
.nav{gap:18px;line-height:26px}
.band{margin-top:18px;--hb:clamp(124px, calc(20vw + 46px), 150px)}
.cv{height:calc(100% + var(--hb))}
.band-in{max-width:480px;padding:4px 20px 20px;flex-wrap:nowrap;gap:14px}
.intro{flex:0 0 58%;max-width:none;margin:0;font-size:clamp(17px, calc(1.6vw + 11px), 19px);line-height:1.47;letter-spacing:-0.01em}
.zone{flex:1 1 0;min-width:0;height:auto;align-self:stretch;min-height:calc(var(--hb) + 8px);margin-bottom:-20px}
.content{display:block;max-width:480px;padding:0 20px}
.pcol{max-width:none;flex-direction:row-reverse;align-items:stretch;gap:16px;padding-top:14px}
.hang{flex:1 1 0;min-width:0;height:auto}
.fig{flex:0 0 52%;min-width:0;gap:2px}
.arw{width:44px;height:44px;line-height:44px}
.rows{max-width:none;padding-top:30px;gap:0}
.sec{display:block;border-bottom:1px solid #E3E6EA}
.sec.first{border-top:1px solid #E3E6EA}
.sec-h{display:none}
.acc{display:flex}
.sec-p{display:none;margin:-2px 0 18px;font-size:15px;line-height:23px;color:#3A3E46}
.bl li::before{top:10px}
.sec[data-open="true"] .sec-p{display:block;animation:rise 260ms cubic-bezier(.22,.61,.36,1) both}
.sec[data-open="true"] .acc-i{transform:rotate(45deg)}
.sec.static{border-bottom:0;padding-top:30px}
.sec.static .sec-h{display:block;margin:0 0 4px;line-height:22px}
.sec.static .sec-p{display:block;margin:0;font-size:16px;line-height:26px;color:#16181D;animation:none}
.sec.static .bl li::before{top:11px}
.ft{max-width:480px;padding:56px 20px 32px}
}
/* tablet-width window: same band as the phone; below it the sections sit beside a small photo, with the pendulum's hanging room above the photo (as on desktop) */
@media (min-width: 580px) and (max-width: 879.98px){
.hd,.band-in,.content,.ft{max-width:840px}
.content{display:flex;flex-wrap:nowrap;gap:0 48px}
.pcol{flex:0 0 clamp(190px,27vw,240px);flex-direction:column;gap:0;padding-top:0}
.hang{flex:none;height:164px}
.fig{flex:none}
.rows{flex:1 1 0}
}
@media (prefers-reduced-motion: reduce){.sec-p{animation:none!important}.acc-i{transition:none}}