@charset "UTF-8";
/* ============================================================================
   Sage & Linen, framed.

   The chosen direction, from the style lab (option E): an ivory linen ground,
   sage as the working colour, and photographs set like prints -- rounded, on
   white cards or sage panels, with soft shadows. Loaded last on every page, so
   it sits over site.css and each page's own sheet.

   Palette unchanged: the client's seven colours and white. Sage is the only
   fill behind text (6.2:1 against the ink); olive, clay and blue miss 4.5:1,
   so they stay as lines and ornament.
   ========================================================================== */
:root{
  --line:var(--sage);--line-soft:var(--sage);
  --round:20px;--round-lg:28px;
  --lift:0 30px 70px rgba(52,55,47,.14);
  --lift-soft:0 14px 34px rgba(52,55,47,.07);
}
body{background:var(--ivory)}
h1,h2{font-weight:300}
section{border-bottom:0}

/* ---------------------------------------------------------------- masthead */
.site-head{background:var(--ivory);border-bottom:1px solid var(--sage)}
.site-nav a[aria-current="page"],.site-nav a:hover,.site-nav a:focus-visible{border-bottom-color:var(--sage)}
@media (max-width:860px){.site-nav{border-top-color:var(--sage)}}

/* ----------------------------------------------------------------- buttons */
.btn{border-radius:999px;padding:.9rem 1.7rem;letter-spacing:.12em;
  border:1px solid var(--sage);background:var(--paper);color:var(--deep)}
.btn:hover,.btn:focus-visible{background:var(--sage);border-color:var(--sage);color:var(--deep)}
.btn-solid{background:var(--sage);border-color:var(--sage);color:var(--deep)}
.btn-solid:hover,.btn-solid:focus-visible{background:var(--paper);border-color:var(--sage);color:var(--deep)}
.card-door:hover .btn,.card-door:focus-within .btn{background:var(--sage);border-color:var(--sage);color:var(--deep)}
.card-door:focus-within{outline-color:var(--sage)}
.site-head .btn{padding:.75rem 1.4rem}

/* eyebrows carry a sage bead */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--sage);flex:none}
.hero-body .eyebrow,.opening .eyebrow,.wstep .eyebrow{display:block}
.hero-body .eyebrow::before,.opening .eyebrow::before,.wstep .eyebrow::before{display:none}

/* -------------------------------------------------------------------- hero */
@media (min-width:1100px){.hero-clock .hero-body{border-radius:var(--round);box-shadow:0 24px 60px rgba(52,55,47,.12)}}
.hero-pause{border-color:var(--sage)}
.hero-photo{border-bottom:0}

/* ------------------------------------------------------------ photographs */
.split img,.card img,.frame,.wstep .frame,.gallery figure,.walk-map,.gx-item{border-radius:var(--round)}
.frame,.gallery figure,.walk-map{overflow:hidden}
.split img{box-shadow:var(--lift-soft)}

/* the home cluster, on a sage panel */
.cluster{position:relative;isolation:isolate}
.cluster::before{content:"";position:absolute;inset:-6% -6% -6% 8%;z-index:-1;
  background:var(--sage);border-radius:48px}
.cluster img,.cluster figure{border-radius:22px;overflow:hidden;box-shadow:var(--lift)}
/* on a phone the panel stays inside the page instead of hanging past its edge */
@media (max-width:900px){.cluster::before{inset:-4% 0 -4% 8%}}

/* the weekend, and the doors, as white cards */
.wk,.card-door{background:var(--paper);border-radius:var(--round-lg);box-shadow:var(--lift-soft)}
.wk{padding:.8rem .8rem 1.3rem}
.wk img{border-radius:var(--round)}
.wk-when{border-top:0;padding-top:.4rem}
.wk > *:not(img):not(figure){padding-left:.4rem;padding-right:.4rem}
.card-door{padding:.8rem .8rem 1.4rem}
.card-door .frame,.card-door img{border-radius:var(--round);overflow:hidden}
.card-door > *:not(.frame){margin-left:.5rem;margin-right:.5rem}

/* --------------------------------------------- the claim: ivory card on sage */
.claim{background:var(--sage);border-radius:var(--round-lg);margin-left:0;margin-right:0;
  padding:clamp(1rem,2.5vw,1.8rem)}
.claim-img{border-radius:22px}
.claim-fade{display:none}
.claim-body{background:var(--ivory);border-radius:22px;margin-top:clamp(1rem,2.5vw,1.8rem);box-shadow:var(--lift)}
.claim .nots{border-top-color:var(--sage)}
.claim .nots li::before{background:var(--clay)}
.claim .nots li::after{background:var(--sage)}

/* the statement panels on inner pages: the same card, on its own */
.statement{background:var(--paper);border:0;border-radius:var(--round-lg);box-shadow:var(--lift-soft)}
.nots{border-top-color:var(--sage)}

/* the band: a framed photograph and its line, on sage */
.band{background:var(--sage);border-radius:var(--round-lg);margin-left:0;margin-right:0;
  padding:clamp(1rem,2.5vw,1.8rem) clamp(1rem,2.5vw,1.8rem) 0}
.band-img{border-radius:22px}

/* the closing, on sage */
.closing{background:var(--sage);border-top:0;border-radius:var(--round-lg);margin-left:0;margin-right:0;
  padding:clamp(1rem,2.5vw,1.8rem) clamp(1rem,2.5vw,1.8rem) 0}
.closing-img{border-radius:22px}
.closing .btn{background:var(--paper);border-color:var(--paper)}
.closing .btn:hover,.closing .btn:focus-visible{background:var(--ivory);border-color:var(--ivory)}

/* ---------------------------------------------------------- lists & rules */
.names{border-color:var(--sage)}
.facts li,.named li,.step{border-bottom-color:var(--sage)}
.steps{border-top-color:var(--sage)}
.onward{border-color:var(--sage)}

/* ------------------------------------------------------------------ forms */
.field input,.field select,.field textarea{border:1px solid var(--sage);border-radius:12px;background:var(--paper)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline-color:var(--olive)}
.field select{appearance:none;-webkit-appearance:none;padding-right:2.4rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--deep) 50%),linear-gradient(135deg,var(--deep) 50%,transparent 50%);
  background-position:calc(100% - 1.2rem) 55%,calc(100% - .9rem) 55%;background-size:.3rem .3rem;background-repeat:no-repeat}
.field-set{border-color:var(--sage);border-radius:var(--round)}
.form-done{border-radius:var(--round);border-left:0;padding:1.4rem 1.6rem}

/* ----------------------------------------------------------------- footer */
.site-foot{background:var(--sage);border-top:0}
.colophon{border-top-color:var(--paper)}

/* ============================================================================
   Phones.

   Most visitors arrive on a phone, and the header was eating 221px of an
   844px screen on every page: wordmark, then a full-width pamphlet button,
   then two rows of links, all sticky. Now it is the wordmark and a Menu
   button (about 64px), the links open as a panel, and the pamphlet button
   sits in a bar at the foot of the screen where a thumb already is.

   Everything here is gated on .js where the script matters, so without
   nav.js the header falls back to listing its links as before.
   ========================================================================== */
.nav-toggle,.cta-bar{display:none}
@media (max-width:860px){
  .site-head .inner{flex-wrap:nowrap;padding:.5rem var(--pad);gap:.8rem}
  .wordmark{min-height:44px}
  .js .site-head .inner > .btn{display:none}
  .js .nav-toggle{
    display:inline-flex;align-items:center;gap:.6rem;margin-left:auto;min-height:44px;
    padding:.5rem 1rem;border-radius:999px;border:1px solid var(--sage);background:var(--paper);
    color:var(--deep);font:600 .78rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
  .nav-toggle:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
  .nav-bars{position:relative;width:18px;height:10px;display:block}
  .nav-bars i{position:absolute;left:0;right:0;height:1.6px;border-radius:2px;background:currentColor;
    transition:transform .3s ease,top .3s ease}
  .nav-bars i:first-child{top:0}
  .nav-bars i:last-child{top:8.4px}
  .nav-open .nav-bars i:first-child{top:4.2px;transform:rotate(45deg)}
  .nav-open .nav-bars i:last-child{top:4.2px;transform:rotate(-45deg)}
  .nav-open .nav-toggle{background:var(--sage)}

  .js .site-nav{display:none;position:absolute;left:0;right:0;top:100%;width:auto;order:0;
    background:var(--ivory);border-top:1px solid var(--sage);border-bottom:1px solid var(--sage);
    padding:.3rem var(--pad) 1.4rem;box-shadow:0 26px 50px rgba(52,55,47,.14);max-height:calc(100vh - 64px);overflow-y:auto}
  .js .nav-open .site-nav{display:block;animation:nav-in .28s ease both}
  @keyframes nav-in{from{transform:translateY(-8px)}}
  .js .site-nav ul{flex-direction:column;flex-wrap:nowrap;gap:0}
  .js .site-nav li{border-bottom:1px solid var(--sage)}
  .js .site-nav a{display:flex;align-items:center;min-height:52px;padding:.2rem 0;border-bottom:0;
    font-family:var(--display);font-size:1.45rem;letter-spacing:0;text-transform:none;font-weight:400}
  .js .site-nav a[aria-current="page"]::after{content:"";width:.45rem;height:.45rem;border-radius:50%;
    background:var(--sage);margin-left:.7rem}

  /* the pamphlet, a thumb away */
  .js .cta-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:45;
    padding:.6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom));
    background:var(--ivory);border-top:1px solid var(--sage);box-shadow:0 -12px 30px rgba(52,55,47,.08)}
  .js .cta-bar .btn{display:flex;justify-content:center;align-items:center;width:100%;min-height:48px;font-size:.8rem}
  .js body{padding-bottom:calc(4.4rem + env(safe-area-inset-bottom))}
}

/* ----------------------------------------------------- readable on a phone
   The letterspaced capitals were set for a desktop and came out at 10.6-11.2px
   on a phone. Nothing that carries words goes under 12px now. */
@media (max-width:760px){
  .eyebrow,.btn,.site-foot h3,.wk-when,.place-dist,.onward a span,.gx-count,.field label,
  .field-set legend,.form label,.opening .eyebrow{font-size:.78rem!important}
  .gx-credit,.wd-hours-row figcaption,.kobi-photo figcaption,.hero-pause{font-size:.76rem}
  .wd-stamp{font-size:.72rem}
  .facts li span,.gx-chip span,.onward .up{font-size:.76rem!important}
  /* a long label wraps inside its pill rather than pushing past the screen */
  .btn{padding:.95rem 1.4rem;white-space:normal;text-align:center;max-width:100%}
  .gx-by{min-width:0}
  .gx-select{min-width:0;width:100%}

  /* tap targets: 44px or more */
  .hero-pause{min-height:44px;padding:.6rem 1rem}
  .gx-chip{min-height:44px;padding:.7rem 1rem}
  .gx-select{min-height:44px;font-size:16px}
  .gx-names button{min-height:44px}
  .onward .up{display:inline-flex;align-items:center;min-height:44px}
  .colophon a{display:inline-flex;align-items:center;min-height:44px}
}

/* ------------------------------------------------ the estate's own GHL form
   Their GoHighLevel form in an iframe. Its inside is styled in GHL's form
   builder; this only frames it. The height is set by GHL's form_embed.js to
   fit the form; min-height keeps room for it before that script runs. */
.ghl-form{max-width:40rem;margin-top:1rem;background:var(--paper);border:1px solid var(--sage);
  padding:clamp(1rem,3vw,1.8rem)}
.ghl-form iframe{display:block;width:100%;min-height:635px;border:0}
.ghl-note{font-size:.9rem;color:var(--ink-soft);margin:0 0 1rem}