/* A quiet studio between the collection and the craft story. */
.anatomy-section{--gold:#8b642f;--light-gold:#513912;--paper:#30251a;--line:#9b7d4b40;color:var(--paper);color-scheme:light;background:#e8dfce;padding:0;position:relative;scroll-margin-top:-100px}
.study-stage{position:relative;padding:50px 6.3% 28px;max-width:1600px;background:radial-gradient(ellipse at 29% 42%,#fffdf6 0,transparent 62%)}
.anatomy-section[data-scroll=true]{height:340svh}
.anatomy-section[data-scroll=true] .study-stage{position:sticky;top:0;height:100svh;min-height:600px;display:flex;flex-direction:column;padding-top:32px;padding-bottom:20px}
.study-stage .section-heading{flex-direction:row;align-items:flex-end;margin:0 0 24px;gap:24px}
.study-stage .section-heading h2{font-size:clamp(25px,2.5vw,37px)}
.study-stage .eyebrow{font-size:8px;letter-spacing:2.4px;margin-bottom:12px}
.study-stage .anatomy-variant-control{min-width:180px;max-width:230px}
.study-stage .anatomy-variant-control label{color:#7b684f}
.study-stage .anatomy-variant-control select{color:#3e2e1b;padding-block:8px}
.study-stage .anatomy-variant-control option{color:#30251a;background:#eee6d6}
.study-stage .anatomy-layout{grid-template-columns:minmax(0,1.35fr) minmax(260px,1fr);gap:7%;align-items:stretch;flex:1;min-height:0}
.study-stage .anatomy-visual{height:520px;max-width:none;margin:0;--reveal:0;--study-scale:.85}
[data-scroll=true] .anatomy-visual{height:100%}
.study-model{position:absolute;width:460px;height:500px;left:50%;top:0;transform:translateX(-50%) scale(var(--study-scale));transform-origin:50% 0}
.study-stage .anatomy-whole,.study-stage [data-exploded=true] .anatomy-whole{height:440px;opacity:calc(1 - var(--reveal));transform:translateX(-50%) rotate(calc(5deg * (1 - var(--reveal))));filter:drop-shadow(12px 16px 15px #30200c35);transition:none}
.study-stage .anatomy-orbit{border-color:#94733f18;width:445px;height:445px;max-height:none;top:45%}
.study-stage .anatomy-orbit:after{border-color:#94733f10}
.study-stage .anatomy-measure,.study-stage [data-exploded=true] .anatomy-measure{left:29%;border-color:#8b642f50;opacity:calc(1 - var(--reveal));transition:none}
.study-stage .anatomy-measure:before,.study-stage .anatomy-measure:after{background:#8b642f60}
.study-stage .anatomy-parts{inset:0;transform:none;visibility:visible}
.study-stage .anatomy-part,.study-stage [data-exploded=true] .anatomy-part{--layer:0;--alpha:0;opacity:var(--alpha);transform:translateX(calc(-50% + var(--part-x) * var(--layer))) rotate(calc(var(--part-angle) * var(--layer)));transition:none}
.study-stage .part-band,.study-stage [data-exploded=true] .part-band{--part-x:-159px;--part-angle:-3deg}
.study-stage .part-wrapper,.study-stage [data-exploded=true] .part-wrapper{--part-x:-53px;--part-angle:-5deg}
.study-stage .part-binder,.study-stage [data-exploded=true] .part-binder{--part-x:53px;--part-angle:4deg}
.study-stage .part-filler,.study-stage [data-exploded=true] .part-filler{--part-x:159px;--part-angle:3deg}
.study-stage .part-label{color:#645239;letter-spacing:1.7px;transform:translateX(-50%) rotate(calc(-1 * var(--part-angle) * var(--layer)))}
.study-stage .part-label small{color:#9a805a}
.study-stage .anatomy-part[aria-pressed=true] .part-label{color:#2c2014}
.study-stage .band-art{filter:drop-shadow(6px 7px 7px #35200e40)}
.study-stage .leaf-art{box-shadow:inset -12px 3px 16px #0003,8px 10px 15px #3b2b1333;overflow:hidden}
.study-stage .wrapper-art:before{content:'';position:absolute;inset:0;border-radius:inherit;background:url('assets/maduro-cigar.png') center bottom/100% 340% no-repeat;opacity:.7;mix-blend-mode:luminosity}
.study-stage [data-variant=connecticut] .wrapper-art:before{background-image:url('assets/connecticut-cigar.png')}
.study-stage [data-variant=habano] .wrapper-art:before{background-image:url('assets/habano-cigar.png')}
.study-stage .filler-art{filter:drop-shadow(5px 7px 9px #36200d40)}
.study-stage .filler-art i{transform:rotate(calc((var(--leaf-angle,0deg)) * var(--layer)));transform-origin:50% 95%}
.study-stage .filler-art i:nth-child(1){--leaf-angle:-10deg}.study-stage .filler-art i:nth-child(2){--leaf-angle:-5deg}.study-stage .filler-art i:nth-child(3){--leaf-angle:-1deg}.study-stage .filler-art i:nth-child(4){--leaf-angle:5deg}.study-stage .filler-art i:nth-child(5){--leaf-angle:10deg}.study-stage .filler-art i:nth-child(6){--leaf-angle:1deg}
.study-stage .anatomy-toggle{bottom:24px;min-height:40px;padding:11px 20px;min-width:210px;font-size:8px;letter-spacing:1.4px}
.study-stage .anatomy-illustration-note{font-size:9px;color:#807057;bottom:0}
.study-stage .anatomy-detail{align-self:center;padding:0;min-width:0;width:100%;max-width:400px;margin:0}
.study-stage .part-tabs{gap:0;justify-content:space-between;margin-bottom:26px}
.study-stage .part-tabs button{color:#7a684f;font-size:10px;padding:12px 2px 14px}
.study-stage .part-tabs button[aria-pressed=true]{color:#352511}
.study-stage .detail-number{color:#8b6e40;letter-spacing:1.6px;font-size:8px}
.study-stage .detail-title{font-size:clamp(38px,4.6vw,63px);margin:14px 0 8px;line-height:1}
.study-stage .detail-origin{font-size:14px;line-height:1.6;margin-bottom:17px}
.study-stage .detail-description{color:#665744;font-size:13px;font-weight:400;line-height:1.8;min-height:92px;margin-bottom:0}
.study-stage .detail-footnote{color:#836b45;padding-top:18px;margin-top:22px;font-size:7px}
.study-stage .interaction-hint{color:#89775d;font-size:10px;margin:19px 0 0}
.study-footer{display:flex;justify-content:space-between;gap:20px;font-size:8px;letter-spacing:1.5px;color:#816b49;margin-top:20px}
.study-progress{position:absolute;bottom:0;left:0;width:100%;height:2px;background:#92703918;overflow:hidden}
.study-progress span{display:block;width:100%;height:100%;background:#927039;transform:scaleX(var(--study-progress,0));transform-origin:0 50%}
.study-stage button:focus-visible,.study-stage select:focus-visible{outline-color:#604418}
.anatomy-section[data-scroll=false] .study-cue{font-size:0}.anatomy-section[data-scroll=false] .study-cue:after{content:'CHOOSE A LAYER TO EXPLORE';font-size:8px}
@media(max-width:900px){.study-stage{padding-inline:5%}.study-stage .anatomy-layout{gap:4%;grid-template-columns:minmax(0,1.15fr) minmax(250px,1fr)}.study-stage .detail-title{font-size:43px}.study-stage .detail-description{font-size:12px}}
@media(max-width:759px){.study-stage{padding:48px 6% 25px}.study-stage .section-heading{flex-direction:column;align-items:stretch;gap:25px}.study-stage .section-heading h2{font-size:32px}.study-stage .anatomy-variant-control{max-width:none;flex-direction:row;align-items:center;gap:25px;justify-content:space-between}.study-stage .anatomy-variant-control select{font-size:13px;min-width:170px}.study-stage .anatomy-layout{display:flex;flex-direction:column;gap:32px}.study-stage .anatomy-visual{height:470px;max-width:480px;margin:auto}.study-stage .anatomy-detail{max-width:480px;margin:auto}.study-stage .detail-title{font-size:46px}.study-stage .detail-description{font-size:14px;min-height:0}.study-stage .part-tabs button{font-size:11px;min-height:44px}.study-stage .detail-footnote{font-size:8px}.study-footer{margin-top:36px;letter-spacing:.8px;font-size:7px}.study-stage .anatomy-illustration-note{font-size:9px}}
@media(max-width:390px){.study-stage .anatomy-visual{height:420px}.study-stage .anatomy-variant-control{gap:10px}.study-stage .anatomy-variant-control label{font-size:7px}.study-stage .anatomy-variant-control select{min-width:155px}.study-footer{flex-wrap:wrap;gap:12px}}
@media(prefers-reduced-motion:reduce){.study-stage *, .study-stage *:before{transition:none!important;animation:none!important}}

/* filmed take-apart (film-study.js) */
.study-film{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.anatomy-visual.has-film .study-model{display:none}
.anatomy-visual.has-film .anatomy-toggle,.anatomy-visual.has-film .anatomy-illustration-note{z-index:2}
.film-callouts{position:absolute;inset:0;pointer-events:none;z-index:1}
.film-callout{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:3px;padding:6px 10px;background:#f6f0e4e0;border:1px solid #8b642f40;border-radius:2px;color:#2c2014;opacity:0;transition:opacity .45s ease;white-space:nowrap}
.film-callout.on{opacity:1}
.film-callout b{font:600 9px/1 var(--body);letter-spacing:2px}
.film-callout small{font:400 10px/1.2 var(--body);color:#7b5a2a;letter-spacing:.3px}

/* phones: the study pins and scrolls like on desktop, with a compact caption under a large stage */
@media(max-width:759px){
.anatomy-section[data-scroll=true]{height:600svh}
.anatomy-section[data-scroll=true] .study-stage{min-height:0;padding:14px 5% 10px;gap:0}
[data-scroll=true] .study-stage .section-heading{flex-direction:row;align-items:center;justify-content:space-between;margin:0 0 6px;gap:12px}
[data-scroll=true] .study-stage .section-heading h2,[data-scroll=true] .study-stage .anatomy-variant-control label{display:none}
[data-scroll=true] .study-stage .section-heading .eyebrow{margin:0}
[data-scroll=true] .study-stage .anatomy-variant-control select{min-width:150px;font-size:13px;padding-block:6px}
[data-scroll=true] .study-stage .anatomy-layout{gap:6px;flex:1;min-height:0}
[data-scroll=true] .study-stage .anatomy-visual{flex:1;height:auto;min-height:0;max-width:none;width:100%}
[data-scroll=true] .study-stage .anatomy-toggle{display:none}
[data-scroll=true] .study-stage .anatomy-illustration-note{bottom:0;font-size:8px}
[data-scroll=true] .study-stage .anatomy-detail{flex:none;width:100%;max-width:none}
[data-scroll=true] .study-stage .part-tabs button{min-height:34px;font-size:10px}
[data-scroll=true] .study-stage .detail-content{padding-top:8px}
[data-scroll=true] .study-stage .detail-title{font-size:30px;margin:2px 0}
[data-scroll=true] .study-stage .detail-description,[data-scroll=true] .study-stage .detail-footnote,[data-scroll=true] .study-stage .interaction-hint{display:none}
[data-scroll=true] .study-footer{margin-top:6px}
}
.film-layer{position:absolute;left:0;top:0;z-index:1;pointer-events:none;transform-origin:50% 50%;max-width:none;will-change:transform,opacity;opacity:0}
.film-band{z-index:2}
.film-callouts{z-index:3}
html,body{overflow-x:clip}.film-callouts{overflow:clip}.film-callout{width:max-content;max-width:calc(100% - 12px)}.film-callout small{white-space:normal;text-align:center}
/* side labels with leader lines (computers) */
.film-leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.film-leader{opacity:0;transition:opacity .45s ease}.film-leader.on{opacity:1}
.film-leader line{stroke:#8b642f;stroke-width:1}.film-leader circle{fill:#8b642f}
.film-callout.side{background:none;border:0;padding:0;gap:6px;width:max-content;max-width:240px}
.film-callout.side b{font:500 13px/1 var(--display);letter-spacing:3px;color:#2c2014}
.film-callout.side small{font:400 11.5px/1.4 var(--body);color:#5e4a33;white-space:normal}
.film-callout.to-left{transform:translate(-100%,-50%);justify-items:end;text-align:right}
.film-callout.to-right{transform:translate(0,-50%);justify-items:start;text-align:left}
@media (min-width:900px){.film-callouts.side{overflow:visible}}
.film-callout.below{transform:translate(-50%,0);justify-items:center;text-align:center}
@media (max-width:899px){.film-callout.side b{font-size:11px;letter-spacing:2.5px}.film-callout.side small{font-size:11px}}
.film-measure{z-index:2;pointer-events:none}.film-measure>span{left:-26px;font-size:8.5px;letter-spacing:2.6px;color:#8b6a3e}

/* the disclosure sits under the layer tabs, never on the picture, so it can't collide with the layer names */
.anatomy-detail .anatomy-illustration-note,.study-stage .anatomy-detail .anatomy-illustration-note,[data-scroll=true] .study-stage .anatomy-detail .anatomy-illustration-note{position:static;width:auto;text-align:left;margin:16px 0 0;font-size:10.5px;line-height:1.5;letter-spacing:.3px;color:#8f7f68}
@media (max-width:780px){.anatomy-detail .anatomy-illustration-note,.study-stage .anatomy-detail .anatomy-illustration-note,[data-scroll=true] .study-stage .anatomy-detail .anatomy-illustration-note{text-align:left;font-size:9.5px;line-height:1.45;margin-top:8px}}