@font-face{font-family:Geist;src:url('assets/Geist-Latin.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:Fraunces;src:url('assets/Fraunces-Latin.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{--ink:#24191f;--cream:#ecdfd2;--line:rgba(236,223,210,.2);--accent:#f0d9af;--accent-rgb:240,217,175;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%}
/* The whole page is a drawing surface, so a drag must never start a text selection. */
body{margin:0;background:var(--ink);color:var(--cream);font:14px/1.5 Geist,Arial,sans-serif;overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:transparent;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--cream);outline-offset:6px;border-radius:3px}
::selection{background:#d5acb8;color:var(--ink)}
h1,p{margin:0}
h1{font-family:Fraunces,Georgia,serif;font-weight:350}
em{font-family:Georgia,serif;font-weight:400}
.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.19em;font-weight:500}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.portrait-alt{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.skip{position:fixed;top:10px;left:20px;z-index:20;background:var(--ink);padding:12px;transform:translateY(-150%)}
.skip:focus{transform:none}

/* ---- the photograph, kept alive ---- */
.portrait-wrap{position:fixed;inset:0;overflow:hidden;z-index:0}
.portrait-sway,.portrait-drift,.portrait-breath{position:absolute;inset:0}
.portrait{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block;will-change:transform,filter;transform:scale(1.018)}
.motion-ready .portrait-sway{animation:sway 23s ease-in-out infinite}
.motion-ready .portrait-breath{animation:breathe 9.5s ease-in-out infinite;will-change:transform}
@keyframes sway{0%,100%{transform:translate3d(0,0,0)}33%{transform:translate3d(-9px,4px,0)}66%{transform:translate3d(7px,-5px,0)}}
@keyframes breathe{0%,100%{transform:scale(1) translate3d(0,0,0)}45%{transform:scale(1.013) translate3d(0,-.5%,0)}}
.portrait-light{position:absolute;inset:0;mix-blend-mode:soft-light;background:radial-gradient(38% 46% at 66% 30%,rgba(255,226,214,.75),transparent 70%);opacity:.6}
.motion-ready .portrait-light{animation:skin-light 14s ease-in-out infinite}
@keyframes skin-light{0%,100%{opacity:.42;transform:translate3d(0,0,0) scale(1)}50%{opacity:.78;transform:translate3d(-2.5%,1.5%,0) scale(1.07)}}
.shade{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(23,14,20,.42),rgba(23,14,20,.06) 52%,transparent 66%),linear-gradient(0deg,rgba(28,18,24,.96),rgba(28,18,24,.34) 17%,transparent 34%),linear-gradient(180deg,rgba(28,18,24,.72),transparent 17%)}
.spraying .portrait{animation:inhale 3.4s cubic-bezier(.22,1,.32,1)}
@keyframes inhale{0%{transform:scale(1.018);filter:brightness(1)}14%{transform:scale(1.047);filter:brightness(1.075) contrast(1.02)}100%{transform:scale(1.018);filter:brightness(1)}}

/* ---- live air ---- */
#mist{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.scent-words{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.scent-word{position:absolute;font:italic 27px/1 Georgia,serif;color:rgba(var(--accent-rgb),.92);white-space:nowrap;opacity:0;transform:translate(-50%,-50%);text-shadow:0 0 34px rgba(var(--accent-rgb),.45),0 2px 16px rgba(20,12,17,.55);animation:word-drift var(--dur,4.6s) cubic-bezier(.19,.72,.3,1) forwards;will-change:transform,opacity}
.scent-word.small{font:10px Geist,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--accent-rgb),.72)}
@keyframes word-drift{0%{opacity:0;transform:translate(-50%,-50%) translate(0,0) scale(.82);filter:blur(7px)}18%{opacity:1;filter:blur(0)}70%{opacity:.85;filter:blur(0)}100%{opacity:0;transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(1.12) rotate(var(--rot));filter:blur(5px)}}
.grain{position:fixed;inset:-120px;z-index:3;pointer-events:none;opacity:.055;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(1) infinite}
@keyframes grain{0%{transform:translate(0,0)}10%{transform:translate(-6%,-4%)}20%{transform:translate(-9%,3%)}30%{transform:translate(4%,-8%)}40%{transform:translate(-3%,9%)}50%{transform:translate(-8%,4%)}60%{transform:translate(6%,0)}70%{transform:translate(0,7%)}80%{transform:translate(3%,10%)}90%{transform:translate(-4%,5%)}100%{transform:translate(2%,-3%)}}

/* ---- the frame around the air ---- */
.top,.stage,.rail,.base{position:fixed;z-index:6}
.top{top:0;left:0;right:0;padding:26px 3.4vw;display:flex;justify-content:space-between;align-items:center;gap:20px}
.wordmark{font:40px/.9 Fraunces,Georgia,serif;letter-spacing:-2px}
.wordmark span{display:inline-block;font:10px Geist,sans-serif;letter-spacing:0;vertical-align:top;padding:3px 0 0 6px}
.tagline{display:flex;align-items:center;gap:11px;color:#d3b7b8}
.little-star{font-size:18px;font-weight:300;display:inline-block}
.motion-ready .little-star{animation:turn 18s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
.sound{display:flex;gap:10px;align-items:center;padding:10px 0;font-size:10px}
.sound-bars{display:flex;gap:3px;align-items:center;height:14px}
.sound-bars i{display:block;height:5px;width:1px;background:currentColor}
.sound-bars i:nth-child(2){height:12px}
.sound-bars i:nth-child(3){height:8px}
.sound[aria-pressed=true] .sound-bars i{animation:sound 1s ease-in-out infinite alternate}
.sound-bars i:nth-child(2){animation-delay:-.3s!important}
.sound-bars i:nth-child(3){animation-delay:-.7s!important}
@keyframes sound{to{transform:scaleY(.4)}}

.stage{inset:0;pointer-events:none}
.stage>*{pointer-events:auto}
.copy{position:absolute;left:5.4vw;top:22%;max-width:min(560px,46vw)}
h1{font-size:clamp(76px,9.4vw,158px);line-height:.93;letter-spacing:-.062em;padding-bottom:.06em;transition:font-size .9s cubic-bezier(.16,1,.3,1),opacity .7s}
h1 em{letter-spacing:-.065em;color:#d6acb6}
.exploring h1{font-size:clamp(48px,5.4vw,92px)}
.card{margin-top:30px;display:grid;align-items:start}
.card-rest,.card-subject{grid-area:1/1}
.card-rest{font-size:14px;line-height:1.7;color:#d4c2be;transition:opacity .5s,transform .7s cubic-bezier(.16,1,.3,1)}
.card-subject{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .8s cubic-bezier(.16,1,.3,1);pointer-events:none}
.exploring .card-rest{opacity:0;transform:translateY(-12px)}
.exploring .card-subject{opacity:1;transform:none}
.card-role{display:flex;align-items:baseline;gap:14px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#b294a1}
.card-index{font:italic 15px Georgia,serif;letter-spacing:0;text-transform:none;color:var(--accent);transition:color .8s}
.card-name{font:350 clamp(34px,3.5vw,54px)/1.12 Fraunces,Georgia,serif;letter-spacing:-.04em;margin-top:8px}
.card-line{font-size:12.5px;line-height:1.82;color:#c2acb4;margin-top:13px}
.card-value{margin-top:16px;font:italic 14px Georgia,serif;color:var(--accent);transition:color .8s}
.card-value:empty{display:none}

.bottle-target{position:absolute;border-radius:25%;transition:box-shadow .4s}
.bottle-target:hover{box-shadow:0 0 0 1px rgba(236,223,210,.2)}
.bottle-target:active{transform:none}
.bottle-halo{position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.3),transparent 68%);opacity:0;transition:opacity .5s}
.bottle-target:hover .bottle-halo{opacity:.85}
.motion-ready .bottle-halo{animation:pulse-halo 4.5s ease-in-out infinite}
@keyframes pulse-halo{0%,100%{opacity:.12}50%{opacity:.34}}
.spray-cue{position:absolute;display:flex;align-items:center;gap:17px;text-align:right;flex-direction:row-reverse;padding:0;white-space:nowrap}
.spray-circle{display:grid;place-items:center;border:1px solid rgba(244,225,210,.6);border-radius:50%;height:54px;width:54px;background:rgba(49,28,37,.18);transition:background .4s,transform .4s}
.spray-circle:after{content:'';position:absolute;width:22px;height:1px;background:rgba(244,225,210,.55);right:-22px}
.spray-cue:hover .spray-circle{background:rgba(233,203,200,.18);transform:scale(1.09)}
.spray-circle svg{width:29px;fill:none;stroke:currentColor;stroke-width:1}
.spray-caption{font:italic 14px Georgia,serif}
.spray-caption>span{display:block;font:9px Geist,sans-serif;text-transform:uppercase;letter-spacing:.16em;margin-top:7px;color:#bca3a8}
.spraying .spray-circle{animation:press-ring .7s ease-out}
@keyframes press-ring{0%{box-shadow:0 0 0 0 #eed3cf66}100%{box-shadow:0 0 0 25px #eed3cf00}}

/* ---- the ending, earned rather than scrolled to ---- */
.ending{position:absolute;right:5.4vw;top:50%;transform:translateY(-50%);text-align:right;max-width:300px}
.ending[hidden]{display:none}
.ending-eyebrow{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#b294a1}
.ending-line{font:350 clamp(26px,2.4vw,38px)/1.25 Fraunces,Georgia,serif;letter-spacing:-.04em;margin-top:14px}
.ending-button{display:inline-flex;align-items:center;gap:30px;border:1px solid #92727f;padding:15px 23px;border-radius:100px;margin-top:26px;font-size:11px;transition:background .3s,border-color .5s,box-shadow .5s}
.ending-button:hover{background:#4a313e;border-color:var(--accent);box-shadow:0 0 42px -12px rgba(var(--accent-rgb),.6)}
.ending-button>span:last-child{font-size:20px;line-height:1}
.motion-ready .ending{animation:arrive 1.3s cubic-bezier(.16,1,.3,1)}
@keyframes arrive{from{opacity:0;transform:translateY(-50%) translateX(26px)}}
.signed .ending-eyebrow,.signed .ending-button{opacity:0;transition:opacity .6s;pointer-events:none}
.signed .ending-line{font-size:clamp(30px,2.8vw,46px)}

/* ---- the rail: six things the air can draw ---- */
.rail{left:3.4vw;bottom:86px;max-width:min(560px,60vw)}
.rail-title{display:flex;align-items:baseline;gap:16px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#b294a1;margin-bottom:13px}
#progress{font:italic 13px Georgia,serif;letter-spacing:0;text-transform:none;color:var(--accent);transition:color .8s}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:flex;align-items:baseline;gap:9px;border:1px solid var(--line);border-radius:100px;padding:9px 16px 10px;font-size:11px;position:relative;overflow:hidden;transition:border-color .5s,background .5s,color .5s}
.chip:before{content:'';position:absolute;inset:0;background:rgba(var(--accent-rgb),.13);opacity:0;transition:opacity .5s}
.chip:hover{border-color:rgba(236,223,210,.5)}
.chip:hover:before{opacity:.55}
.chip b{font:italic 12px Georgia,serif;font-weight:400;color:#a9899a;transition:color .5s}
.chip span,.chip b{position:relative}
.chip.drawn b{color:var(--accent)}
.chip[aria-pressed=true]{border-color:var(--accent);color:#fbf1e8}
.chip[aria-pressed=true]:before{opacity:1}

.base{left:3.4vw;right:3.4vw;bottom:24px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;font-size:10px}
.hint{color:#bfaaad;max-width:40ch;line-height:1.7;transition:color .5s}
.drawing .hint{color:var(--accent)}
.fine{font-size:8px;letter-spacing:.11em;color:#9e8490;text-align:right}
.fine span{display:block;margin-top:7px}
.no-script{position:fixed;left:0;right:0;bottom:0;background:var(--ink);padding:16px 3.4vw;z-index:10;font-size:11px;line-height:1.8}

@media(max-width:1100px){
  .copy{max-width:58vw;top:21%}
  .spray-caption{display:none}
  .rail{max-width:66vw}
}
@media(max-width:820px),(max-height:620px){
  .top{padding:18px 22px}
  .wordmark{font-size:30px}
  .tagline{display:none}
  /* The crop moves to her face and the bottle; the copy sits in the dark below them. */
  .portrait{object-position:71% 42%}
  .shade{background:linear-gradient(0deg,rgba(28,18,24,.99),rgba(28,18,24,.97) 26%,rgba(28,18,24,.55) 44%,transparent 62%),linear-gradient(180deg,rgba(28,18,24,.82),transparent 15%)}
  .copy{left:22px;right:22px;max-width:none;top:auto;bottom:242px}
  .scent-word{font-size:19px}
  h1{font-size:clamp(54px,15vw,92px)}
  .exploring h1{font-size:clamp(34px,9vw,54px)}
  .card{margin-top:20px}
  .card-rest{font-size:12px}
  .card-name{font-size:30px}
  .card-line{font-size:11.5px;line-height:1.8;margin-top:10px}
  .card-value{font-size:12px;margin-top:11px}
  .spray-circle{width:44px;height:44px}
  .spray-circle svg{width:25px}
  .spray-circle:after{width:15px;right:-15px}
  /* On one narrow screen the call to action takes the copy's place, then hands it back. */
  .ending{right:22px;left:22px;top:auto;bottom:242px;transform:none;text-align:left;max-width:none}
  .ending-open .copy{display:none}
  .signed .ending{display:none}
  .signed .copy{display:block}
  .motion-ready .ending{animation:arrive-up 1.1s cubic-bezier(.16,1,.3,1)}
  @keyframes arrive-up{from{opacity:0;transform:translateY(18px)}}
  .ending-line{font-size:26px}
  .ending-button{margin-top:18px;padding:13px 19px;gap:22px}
  .rail{left:22px;right:22px;bottom:72px;max-width:none}
  .rail-title{margin-bottom:10px;font-size:8px}
  .chips{gap:6px}
  .chip{padding:7px 13px 8px;font-size:10px;gap:7px}
  .base{left:22px;right:22px;bottom:18px;align-items:flex-end}
  .hint{font-size:9px;max-width:24ch;line-height:1.65}
  .fine span{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .portrait{will-change:auto}
  .grain{display:none}
}