.history-editorial{height:100svh;min-height:720px;background:#fff;color:#14263D;position:relative;overflow:hidden;font-family:Onest,Arial,sans-serif;padding:7svh 5.5vw;box-sizing:border-box}
.he-heading{position:absolute;left:5.5vw;top:9svh;width:41vw}.he-heading p{font-size:clamp(10px,.6vw,19px);letter-spacing:.16em;text-transform:uppercase;color:#64758a;margin:0 0 24px}.he-heading h2{font:500 clamp(36px,3vw,96px)/.95 'Cormorant Garamond',serif;letter-spacing:-.025em;margin:0}
.he-years{position:absolute;left:5.5vw;top:49svh;display:grid;gap:18px}.he-years button{font:400 clamp(14px,.8vw,25px) Onest,sans-serif;border:0;border-left:2px solid transparent;background:none;text-align:left;padding:4px 0 4px 16px;color:#7a8798;cursor:pointer}.he-years button[aria-current]{color:#14263D;border-color:#A32638}
.he-story{position:absolute;left:17vw;top:46svh;width:27vw}.he-date{font:400 clamp(60px,5.3vw,174px)/1 Onest,sans-serif;letter-spacing:-.065em;margin-bottom:30px}.he-story h3{font:500 clamp(25px,1.6vw,50px)/1.08 'Cormorant Garamond',serif;margin:0 0 18px}.he-story p{font-size:clamp(16px,.8vw,26px);line-height:1.6;color:#42546a;margin:0;white-space:pre-line}
.he-photo{position:absolute;left:50vw;right:5.5vw;top:9svh;bottom:13svh;overflow:hidden;border-radius:4px;background:#14263D}.he-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.he-strip{position:absolute;right:5.5vw;bottom:7svh;display:flex;gap:10px}.he-strip button{width:clamp(42px,3.5vw,110px);height:clamp(30px,2.5vw,80px);border:0;padding:0;opacity:.45;cursor:pointer;background:#14263D}.he-strip button[aria-current]{opacity:1;outline:1px solid #14263D;outline-offset:4px}.he-strip img{width:100%;height:100%;object-fit:cover}
.he-note{position:absolute;left:50vw;bottom:8svh;max-width:23vw;font-size:clamp(10px,.55vw,17px);line-height:1.5;color:#738196}.he-pause{position:absolute;left:5.5vw;bottom:7svh;border:0;background:none;color:#14263D;font:14px Onest,sans-serif;cursor:pointer}.history-editorial button:focus-visible{outline:2px solid #A32638;outline-offset:5px}
@media(max-height:800px) and (min-width:701px){.he-story{top:43svh}.he-date{font-size:64px;margin-bottom:20px}.he-story p{font-size:15px;line-height:1.5}.he-story h3{font-size:26px}}
@media(max-width:700px){.history-editorial{height:auto;min-height:1250px}.he-heading{top:48px;left:7vw;width:86vw}.he-heading h2{font-size:40px}.he-photo{top:250px;left:7vw;right:7vw;bottom:auto;height:360px}.he-years{left:7vw;top:680px;gap:20px}.he-story{top:670px;left:30vw;width:63vw}.he-date{font-size:56px}.he-story p{font-size:16px}.he-strip{top:630px;bottom:auto;right:7vw}.he-note{left:7vw;bottom:60px;max-width:86vw;font-size:11px}.he-pause{left:7vw;bottom:20px}}

.he-date{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;letter-spacing:-.045em}

/* The selected year grows quietly and shares the rounded burgundy marker. */
.he-years button{position:relative;border-left:0;transform-origin:left center;transition:transform 650ms cubic-bezier(.22,.61,.36,1),color 450ms ease;font-weight:400}
.he-years button::before{content:'';position:absolute;left:0;top:50%;width:3px;height:24px;border-radius:999px;background:#A32638;opacity:0;transform:translateY(-50%) scaleY(.5);transition:opacity 450ms ease,transform 650ms cubic-bezier(.22,.61,.36,1)}
.he-years button[aria-current]{color:#A32638;transform:scale(1.18)}
.he-years button[aria-current]::before{opacity:1;transform:translateY(-50%) scaleY(1)}
.he-photo{border-radius:12px}
.he-strip button,.he-strip img{border-radius:4px}
@media(prefers-reduced-motion:reduce){.he-years button,.he-years button::before{transition:none}}

/* Conceal native scroll rails while retaining touch and keyboard access. */
html,body{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}

/* Match the marker to the visible capital/digit height, rather than the line box. */
.he-years button{font-size:clamp(18px,.95vw,30px);line-height:1;padding:8px 0 8px clamp(16px,.65vw,24px);font-variant-numeric:lining-nums tabular-nums}
.he-years button::before{height:.72em;width:3px}
/* A navy timeline band; heading and narrative share the same left edge. */
@media(min-width:1101px){
.history-editorial:before{content:"";position:absolute;inset:0 auto 0 0;width:11vw;background:linear-gradient(165deg,#203950 0%,#14263d 48%,#05090e 100%);pointer-events:none}
.he-heading{left:17vw;width:29vw}
.he-heading p{line-height:1.5;max-width:100%}
.he-years{left:3vw}
.he-years button{color:#aebdce}
.he-years button[aria-current]{color:#fff}
.he-pause{left:2.8vw;color:#fff;font-size:clamp(10px,.55vw,17px)}
}

/* A bounded date drum with a fixed watch index and rotating type. */
.he-years.he-drum{--drum-step:64px;top:calc(54svh - 120px);left:1.2vw;width:8.6vw;height:240px;display:block;overflow:hidden;padding:0;perspective:500px;user-select:none;mask-image:linear-gradient(transparent,#000 23%,#000 77%,transparent)}
.he-drum-track{position:absolute;left:0;right:0;top:calc(50% - var(--drum-step)/2)}
.he-years.he-drum button{position:absolute;top:calc(var(--slot)*var(--drum-step));left:17px;width:calc(100% - 17px);height:var(--drum-step);padding:0 0 0 8px;display:flex;align-items:center;white-space:nowrap;color:#9bacbf;font-size:clamp(18px,1.15vw,28px);transform:rotateX(var(--tilt));opacity:var(--fade);transition:color 400ms;outline-offset:-3px}
.he-drum button[data-slot="-2"]{--slot:-2;--tilt:38deg;--fade:.25}.he-drum button[data-slot="-1"]{--slot:-1;--tilt:22deg;--fade:.56}.he-drum button[data-slot="0"]{--slot:0;--tilt:0deg;--fade:1}.he-drum button[data-slot="1"]{--slot:1;--tilt:-22deg;--fade:.56}.he-drum button[data-slot="2"]{--slot:2;--tilt:-38deg;--fade:.25}
.he-years.he-drum button[aria-current]{color:#fff;transform:rotateX(var(--tilt)) scale(1.18)}
.he-years.he-drum button:before{display:none}
.he-drum-ticks{position:absolute;inset:0 auto 0 0;width:14px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.he-drum-ticks i{display:block;width:5px;height:1px;background:#aac0d5;opacity:.3}.he-drum-ticks i.major{width:12px;opacity:.55}
.he-drum-index{position:absolute;left:0;top:50%;width:14px;height:2px;border-radius:1px;background:#bb3147;box-shadow:0 0 10px #bb314740;pointer-events:none}
@media(min-width:761px) and (max-width:1100px){.he-years.he-drum{left:3vw;width:11vw}.he-years.he-drum button[aria-current]{color:#14263d}.he-drum-ticks i{background:#42546a}}
@media(max-width:760px),(max-width:1100px) and (hover:none) and (pointer:coarse){.history-editorial>.he-years.he-drum{--drum-step:56px;position:relative;inset:auto;height:196px;width:100%;display:block;background:linear-gradient(155deg,#203950,#0b1726);border-radius:12px;margin:0;padding:0;flex:none;mask-image:none}.he-drum-track{left:calc(50% - 65px);width:150px;right:auto}.he-years.he-drum button{font-size:19px}.he-drum-ticks{left:calc(50% - 85px);top:12px;bottom:12px}.he-drum-index{left:calc(50% - 85px)}}

.history-editorial .he-years.he-drum button:focus-visible{outline:none;color:#fff}.he-drum:focus-within .he-drum-index{box-shadow:0 0 12px #bb314770}

/* Golden-section history composition: .382 squared band, .618 photo axis. */
@media(min-width:1101px){
.history-editorial:before{width:14.6vw}
.he-heading,.he-story{left:20.2vw;width:35.8vw}
.he-photo{left:61.8vw}
.he-years.he-drum{--drum-step:80px;left:1.5vw;width:11.6vw;height:304px;top:calc(54svh - 152px)}
.he-years.he-drum button{font-size:clamp(20px,1.65vw,48px);left:22px;width:calc(100% - 22px);padding-left:8px}
.he-drum-ticks{width:18px}.he-drum-ticks i{width:7px}.he-drum-ticks i.major{width:16px}.he-drum-index{width:18px}
}

/* Soft photographic atmosphere, always below the readable white composition. */
.he-ambience{position:absolute;inset:0 0 0 14.6vw;overflow:hidden;pointer-events:none;opacity:0;contain:paint}
.he-ambience img{position:absolute;inset:-5%;width:110%;height:110%;object-fit:cover;filter:grayscale(1) blur(18px)}
@media(min-width:1101px){
.history-editorial:before{background:linear-gradient(180deg,#00000080 0%,#00000022 14.6%,transparent 38.2%),linear-gradient(165deg,#203950 0%,#14263d 48%,#05090e 100%)}
.he-years.he-drum{--drum-step:88px;left:.9vw;width:12.8vw;height:336px;top:calc(50% - 168px);perspective:380px;mask-image:linear-gradient(transparent,#000 28%,#000 72%,transparent)}
.he-drum-track{left:20px;right:0}
.he-years.he-drum button{left:0;width:100%;padding:0;justify-content:center;text-align:center;transform-origin:center;font-size:clamp(21px,1.8vw,52px);transform:rotateX(var(--tilt)) scale(.9)}
.he-years.he-drum button[aria-current]{transform:rotateX(0deg) scale(1.18)}
.he-drum button[data-slot="-2"]{--tilt:64deg}.he-drum button[data-slot="-1"]{--tilt:32deg}.he-drum button[data-slot="1"]{--tilt:-32deg}.he-drum button[data-slot="2"]{--tilt:-64deg}
.he-drum-ticks{left:0;width:18px}.he-drum-ticks i{flex-shrink:0;opacity:.38}.he-drum-ticks i.major{opacity:.62}
}
@media(max-width:1100px){.he-ambience{inset:0;opacity:0}}

/* Keep watch divisions close to the labels as one centered mechanism. */
@media(min-width:1101px){
.he-years.he-drum{left:calc(7.3vw - clamp(75px,5.4vw,156px));width:clamp(150px,10.8vw,312px)}
.he-drum-track{left:30px;right:0}
.he-years.he-drum button{justify-content:flex-start;text-align:left;transform-origin:left center}
}

/* Quiet white silk folds, independent of the rotating photographs. */
.history-editorial{background:linear-gradient(#ffffff8c,#ffffff8c),url("/mgimo/club/white-silk-generated.webp") center/cover no-repeat,#fff}