/* ------------------------------------------------------------------
   FreeState case page, on the 1440 grid like the other case pages.
   ------------------------------------------------------------------ */
.wine{background:var(--wine)}
.dark{background:var(--ink)}
.green{background:var(--green)}
.num{position:absolute;height:21px;min-width:35px;padding:2px 10px;background:var(--green);color:#CDE3E8;
  font-size:14px;font-weight:500;font-style:italic;letter-spacing:.06em;line-height:17px;white-space:nowrap}
.cap14{font-size:14px;font-weight:500;letter-spacing:-.01em;line-height:22px;text-transform:uppercase}
.small{font-size:14px;font-weight:400;letter-spacing:-.01em;line-height:19px}
.big64{font-size:64px;font-weight:500;letter-spacing:-.03em;line-height:64px;white-space:nowrap}

/* ---------- the index ---------- */
.ix{position:absolute;left:0;width:1440px;height:825px}
.ixr{position:relative;display:block;height:75px;color:#FFFDEE;text-decoration:none}
.ixr::before{content:"";position:absolute;inset:0;background:var(--green);opacity:0;transition:opacity .25s var(--e)}
.ixr::after{content:"";position:absolute;left:60px;right:60px;bottom:0;height:1px;background:#FFFDEE;opacity:.18}
.ixr:last-child::after{display:none}
.ixr > span{position:absolute;z-index:1;transition:opacity .25s var(--e)}
.ixr .n{left:60px;top:31px;font-size:12px;font-weight:500;letter-spacing:.18em;line-height:14px;opacity:.45}
.ixr .h{left:130px;top:16px;font-size:44px;font-weight:500;letter-spacing:-.03em;line-height:44px;text-transform:uppercase;opacity:.92}
.ixr .d{left:667px;top:26px;font-size:15px;line-height:22px;letter-spacing:-.01em;opacity:.62}
.ixr .g{right:60px;top:31px;font-size:12px;font-weight:500;letter-spacing:.18em;line-height:14px;text-transform:uppercase;opacity:.45}
.ixr:hover::before,.ixr:focus-visible::before{opacity:1}
.ixr:hover .h{opacity:1}
.ixr:hover .d{opacity:.92}
.ixr:hover .n,.ixr:hover .g{opacity:.75}

/* ---------- a page of the site, running in its frame ---------- */
.pane{position:absolute;overflow:hidden;background:#F4F6F1}
.pf{--pfbg:#F4F6F1}
.pane img{position:absolute;left:0;top:0;width:100%;height:auto;will-change:transform}

/* ---------- pinned sections ---------- */
.pin{position:relative;width:100%}
.pinner{position:sticky;top:var(--ptop,0px);height:var(--ph,900px);overflow:hidden;display:flex;align-items:center;justify-content:center}
.pinblk{position:relative;width:100%;flex:0 0 auto;transform-origin:center center}

/* the calculator */
.calc{position:absolute;width:953px;height:532px;background:#F2F5EE;overflow:hidden;border-radius:10px}
.calc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;transition:opacity .45s var(--e)}
.calc img.on{opacity:1}
.crail{position:absolute;width:196px;height:60px}
.crail i{position:absolute;left:0;top:0;width:196px;height:2px;background:var(--ink);opacity:.16;transition:opacity .3s var(--e)}
.crail i::after{content:"";position:absolute;inset:0;background:var(--wine);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--e)}
.crail .k{position:absolute;left:0;top:17px;font-size:12px;font-weight:500;letter-spacing:.18em;line-height:14px;color:var(--mute)}
.crail .t2{position:absolute;left:0;top:37px;font-size:22px;font-weight:500;letter-spacing:-.01em;line-height:24px;text-transform:uppercase;opacity:.4;transition:opacity .3s var(--e)}
.crail.on i{opacity:1;background:transparent}
.crail.on i::after{transform:none}
.crail.on .t2{opacity:1}

/* the three models */
.card{position:absolute;width:426px;height:580px;background:#FFFDEE;transform-origin:50% 50%}
.card .hs{position:absolute;left:48px;top:20px;width:330px;height:210px}
.card .hs img{object-fit:contain}
.card .ch{position:absolute;left:24px;top:274px;height:18px;padding:2px 5px 0;background:#0C3429;color:#FFFDEE;
  font-size:12px;font-weight:500;letter-spacing:.18em;line-height:14px;text-transform:uppercase;white-space:nowrap}
.card .nm{position:absolute;left:24px;top:307px;font-size:32px;font-weight:500;letter-spacing:-.02em;line-height:40px;text-transform:uppercase}
.card .ds{position:absolute;left:24px;top:372px;width:378px;font-size:15px;line-height:22px;letter-spacing:-.01em;opacity:.85}
.card .rl{position:absolute;left:24px;top:494px;width:378px;height:1px;background:var(--ink);opacity:.14}
.card .who{position:absolute;left:24px;top:510px;width:378px;font-size:14px;line-height:20px;letter-spacing:-.01em;opacity:.6}

/* the photographs */
.phtrack{position:absolute;left:0;top:0;height:900px;display:flex;gap:3px;will-change:transform}
.phtrack figure{margin:0;flex:none;height:900px;overflow:hidden;cursor:zoom-in;background:#0f0d0b}
.phtrack img{height:900px;width:auto;max-width:none;display:block}
.phov{pointer-events:none}
.phov::before{content:"";position:absolute;left:-1000px;right:-1000px;top:620px;height:280px;
  background:linear-gradient(to bottom,rgba(16,14,11,0),rgba(16,14,11,.55))}
.phlab{font-size:12px;font-weight:400;letter-spacing:.18em;line-height:15px;text-transform:uppercase;color:#CDE3E8}

/* posts */
.post{position:absolute;width:210px;height:210px;overflow:hidden;background:#FFFDEE;cursor:zoom-in}
.post.tall{height:262px}
.post img{transition:transform .9s var(--e)}
.post:hover img{transform:scale(1.04)}

/* the knowledge files and the skills */
.file{position:absolute;width:314px;height:58px;background:#FFFDEE}
.file b{position:absolute;left:14px;top:11px;font-size:16px;font-weight:500;letter-spacing:-.01em;line-height:20px}
.file span{position:absolute;left:14px;top:34px;font-size:11px;font-weight:500;letter-spacing:.16em;line-height:13px;text-transform:uppercase;color:var(--mute)}
.skill{position:absolute;width:638px;height:86px;background:var(--green)}
.skill .sn{position:absolute;left:20px;top:20px;height:21px;min-width:35px;padding:2px 10px;background:#FFFAD8;color:var(--ink);
  font-size:14px;font-weight:500;font-style:italic;letter-spacing:.06em;line-height:17px}
.skill b{position:absolute;left:65px;top:20px;font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:21px;text-transform:uppercase;color:#CDE3E8}
.skill .sd{position:absolute;left:20px;top:47px;font-size:14px;line-height:19px;letter-spacing:-.01em;color:#CDE3E8;opacity:.72}

/* the films, still to come */
.film2{position:absolute;width:316px;height:421px;background:#3A1A14}
.film2 .pl,.mfilm .pl{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;border:1px solid #CDE3E8}
.film2 .pl::after,.mfilm .pl::after{content:"";position:absolute;left:21px;top:18px;border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent #CDE3E8}

/* the quote */
/* the box is as wide as its longest line, so the wine always covers the
   whole quote, and it sits on the middle of the page like the name under it */
.qbox2{position:absolute;width:max-content;height:auto;padding:8px 10px;transform:translateX(-50%)}
.qbox2 .qf{position:absolute;inset:0;background:var(--wine);clip-path:inset(0 100% 0 0)}
.qbox2 .qb,.qbox2 .qo{font-size:44px;font-weight:500;letter-spacing:-.025em;line-height:54px;text-transform:uppercase;white-space:nowrap}
.qbox2 .qb{position:relative;display:block}
.qbox2 .qo{position:absolute;left:10px;top:8px}
.qbox2 .qo{color:#CDE3E8;clip-path:inset(0 100% 0 0)}
.qbox2.in .qf,.qbox2.in .qo{clip-path:inset(0 0 0 0)}
html:not(.js) .qbox2 .qf,html:not(.js) .qbox2 .qo{clip-path:none}

/* the stand keeps its own drawing, the section gives it the Figma box */
#fair #fstage{opacity:0}
#fair #fstage.live{opacity:1}

/* ---------- the phone ---------- */
.mix{margin-top:22px;border-top:1px solid rgba(255,253,238,.18)}
.mix a{display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:baseline;padding:12px 0;
  border-bottom:1px solid rgba(255,253,238,.18);color:#FFFDEE;text-decoration:none}
.mix .n,.mix .g{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;opacity:.5}
.mix b{font-size:22px;line-height:26px;font-weight:500;letter-spacing:-.02em;text-transform:uppercase}
.mcardfs{background:#FFFDEE;padding:16px 16px 18px;margin-top:16px}
.mcardfs .ch{display:inline-block;margin-top:12px;padding:2px 5px 0;height:18px;background:#0C3429;color:#FFFDEE;
  font-size:11px;font-weight:500;letter-spacing:.18em;line-height:14px;text-transform:uppercase}
.mcardfs .mh{margin-top:10px}
.mcardfs .mbody{margin-top:8px;opacity:.85}
.mcardfs .who{margin-top:12px;padding-top:10px;border-top:1px solid rgba(45,18,13,.14);font-size:13px;line-height:19px;opacity:.6}
.mfiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:10px}
.mfiles div{background:#FFFDEE;padding:9px 10px 8px}
.mfiles b{display:block;font-size:13px;font-weight:500;line-height:17px;word-break:break-word}
.mfiles span{display:block;margin-top:3px;font-size:9px;font-weight:500;letter-spacing:.14em;line-height:12px;text-transform:uppercase;color:var(--mute)}
.mskill{position:relative;background:var(--green);color:#CDE3E8;padding:14px 14px 14px 58px;margin-top:8px}
.mskill .sn{position:absolute;left:14px;top:14px;padding:2px 8px;background:#FFFAD8;color:var(--ink);font-size:12px;font-weight:500;font-style:italic;line-height:16px}
.mskill b{display:block;font-size:15px;font-weight:500;line-height:19px;text-transform:uppercase}
.mskill span:last-child{display:block;margin-top:4px;font-size:13px;line-height:18px;opacity:.72}
.mfilm{position:relative;display:block;aspect-ratio:316/421;background:#3A1A14}

@media (prefers-reduced-motion:reduce){
  .qbox2 .qf,.qbox2 .qo,.calc img,.crail i::after{transition:none}
}

/* ---------- the three models, opening into the photographs ----------
   One held section. The middle card turns into the first photograph,
   grows until the photograph fills the window, and then the band of
   photographs runs sideways. fs2.js drives it. */
.mph{position:relative;width:100%}
.mph .anchor{position:absolute;left:0;top:0;width:1px;height:1px}
.mphin{position:sticky;top:0;height:var(--vp,100vh);overflow:hidden;background:var(--bone)}
.mlayer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.mblk{position:relative;flex:0 0 auto;width:100%;transform-origin:center center}
#player{position:absolute;inset:0;opacity:0;clip-path:inset(50% 50% 50% 50%);pointer-events:none;background:#FFFDEE}
#player.live{pointer-events:auto}
#player .phtrack{height:100%}
#player .phtrack figure{height:100%}
#player .phtrack img{height:100%;width:auto}
#player .phov{position:absolute;inset:0;pointer-events:none;opacity:0}
#player .phov > *{position:absolute;pointer-events:auto}
#player .phov p,#player .phov .phlab{text-shadow:0 1px 10px rgba(0,0,0,.45)}
#player .phtrack{opacity:0}
#player .phtrack figure{cursor:default}

/* the eight films */
.ftile{position:absolute;top:0;width:316px;height:520px;cursor:pointer}
.ftile .fv{position:absolute;left:0;top:0;width:316px;height:421px;overflow:hidden;background:#3A1A14;border-radius:0}
.ftile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--e)}
.ftile:hover video{transform:scale(1.03)}
.ftile .pl{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;border:1px solid #CDE3E8;
  background:rgba(45,18,13,.25);transition:transform .3s var(--e),background .3s var(--e)}
.ftile .pl::after{content:"";position:absolute;left:21px;top:18px;border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent #CDE3E8}
.ftile:hover .pl{transform:scale(1.08);background:rgba(45,18,13,.85)}
.ftile .num{left:0;top:445px}
.ftile .ft{position:absolute;left:45px;top:445px;width:270px;font-size:14px;font-weight:500;letter-spacing:-.01em;line-height:22px;text-transform:uppercase}
.ftile .fd{position:absolute;left:45px;top:469px;font-size:12px;font-weight:500;letter-spacing:.18em;line-height:14px;text-transform:uppercase;color:var(--mute)}
#player .phov::before,.phov::before{display:none}

/* palette: coffee bean, lemon chiffon, botticelli. The big dark surfaces are
   coffee bean with botticelli type; the small tags are botticelli with dark type */
.chip--num,.num,.row .nm,.mnote .n,.mrow .n,.mnum,.wnum{background:#CDE3E8 !important;color:#2D120D !important}
.flag.base i,.flag.base b,.flag.base::after{background:#CDE3E8 !important;color:#2D120D !important}
.chip.wine,.mchip[style*="var(--wine)"]{background:#CDE3E8 !important;color:#2D120D !important}
.s-hero .cta{background:#CDE3E8 !important;color:#2D120D !important}
.s-hero .cta:hover{background:#FFFAD8 !important;color:#2D120D !important}
.mhero .mcta{background:#CDE3E8 !important;color:#2D120D !important}
#pagebar.onwine nav a:hover{background:#CDE3E8 !important;color:#2D120D !important}
#pagebar.onwine nav .mail:hover{background:#FFFAD8 !important;color:#2D120D !important}