@charset "UTF-8";
/* ============================================================================
   The opening band.

   A dated announcement sitting between the masthead and the hero. It is the
   one thing on the site with an expiry, and it removes itself when it passes
   -- a countdown that has gone negative is worse than no countdown, and a
   grand opening still being advertised in October says more about the agency
   than about the estate.

   Deliberately not a countdown as usually built. No seconds: a digit flickering
   once a second is the cheapest-looking element on the web and this brand does
   not raise its voice. Days, hours and minutes, set in the estate's own display
   face so it reads as part of the site rather than something bolted to the top
   of it.

   Ground is the palette sage. Measured: the deep olive on it
   is 9.0:1 and ivory is 7.4:1, so both clear AAA. The brand forest itself
   as given (#9A9F83) manages 2.0:1 with white, nowhere near enough for something meant
   to be read at a glance on the way past.
   ========================================================================== */
.opening{
  background:var(--sage);color:var(--deep);
  border-bottom:1px solid var(--olive);
}
.opening-inner{
  max-width:82rem;margin:0 auto;padding:1.15rem var(--pad);
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem clamp(1.2rem,4vw,3rem);flex-wrap:wrap;
}

.opening .eyebrow{color:var(--deep);display:block;margin-bottom:.25rem}
.opening-what p{margin:0;max-width:none;font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.45}
.opening-what b{font-weight:600}
.opening-with{color:var(--deep);font-size:.92rem !important;margin-top:.2rem !important}

/* The numerals.

   Seconds are in, and the objection to them was never really about seconds --
   it was that a flickering digit usually looks cheap. It looks cheap when it
   jitters, when it is set in the same face as the body copy, and when nothing
   acknowledges the change. So: tabular figures, so the row never shifts width;
   Cormorant at display size, so it belongs to this site rather than to a
   shopping cart; and each numeral lifts very slightly as it turns over, which
   is the difference between a clock running and a number being replaced.

   This is the one place the site is allowed to be excited. Everything else
   here is about being unhurried, but a grand opening is a date you count to. */
.opening-count{
  margin:0;display:flex;align-items:flex-start;
  gap:clamp(.8rem,2.6vw,1.9rem);white-space:nowrap;
}
.opening-unit{
  display:flex;flex-direction:column;align-items:center;gap:.15rem;
}
.opening-unit b{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.1rem,6vw,3.2rem);line-height:.95;color:var(--deep);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.opening-unit span{
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--deep);
}
/* Once it has started, the numbers give way to saying so. */
.opening-count.is-now{
  font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.1rem);
  color:var(--deep);letter-spacing:normal;text-transform:none;align-items:center;
}
@keyframes turn{
  from{opacity:.25;transform:translateY(.16em)}
  to{opacity:1;transform:none}
}

@media (max-width:640px){
  .opening-inner{flex-direction:column;align-items:flex-start;gap:.9rem}
  .opening-count{gap:1.4rem}
}

/* It arrives with the page rather than on scroll -- it is above the fold and
   there is no scroll to trigger it. */
@media (prefers-reduced-motion:no-preference){
  .js .opening-inner{
    transform:translateY(.3rem);
    animation:opening-rise .6s cubic-bezier(.16,.8,.24,1) .1s forwards;
  }
  /* Its own keyframes. The band is on every page, and the only other `rise`
     lives in home.css: on any other page an animation with no keyframes never
     runs, and the content stays at the opacity it starts from. */
  @keyframes opening-rise{to{transform:none}}
}