@charset "UTF-8";
/* ============================================================================
   The Valley Venues — prototype scaffolding

   Deliberately plain. The visual direction has not been chosen yet, so this
   sheet carries structure, spacing and hierarchy and almost no personality.
   Everything that would express a direction — palette, type, rhythm — is a
   token at the top, so choosing a direction later means editing this block
   rather than eleven pages.

   Palette values are the estate's own, taken from the brand framework
   appendix, which took them from the live site CSS. Type is Option One from
   the framework (Cormorant Garamond + Montserrat). Both are placeholders
   pending the client's decision.
   ========================================================================== */

:root{
  /* ------------------------------------------------------------ the palette
     Exactly as the client gave it. Nothing here is mixed, tinted or derived:
     every colour on this site is one of these seven, plus white. */
  --ivory:#F5F1EA;
  --cream:#FFF0DA;
  --olive:#9A9F83;
  --clay:#B38A64;
  --blue:#679AA7;
  --sage:#AABEB3;
  --deep:#34372F;
  --paper:#FFFFFF;

  /* ------------------------------------------------------------- the jobs
     Of the seven, only the deep olive can carry text on a light ground: it
     reads 10.8:1 on ivory and on cream, where the olive manages 2.4:1 and the
     clay 2.9:1 against a 4.5:1 floor. So it is the only ink, and hierarchy
     comes from size, weight and space rather than from three greys.

     The olive and the sage do the ruling, which is what they were given for.

     python _tools/contrast.py measures every pairing against this block. */
  --ground:var(--ivory);
  --ground-2:var(--cream);
  --ink:var(--deep);
  --ink-soft:var(--deep);
  --ink-faint:var(--deep);
  --accent:var(--deep);
  --label:var(--deep);
  --line:var(--olive);
  --line-soft:var(--sage);

  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  /* Libre Franklin, not Montserrat. Montserrat came out of the brand framework
     marked "Option One, placeholder" and it is the single most-used sans on
     wedding venue sites -- geometric, perfectly circular, and anonymous at the
     small letterspaced sizes this site leans on hardest. Libre Franklin is
     Franklin Gothic's line, which is American editorial rather than European
     luxury pastiche, and it holds its shape at 0.68rem in caps where the
     geometric faces turn to beads. */
  --sans:"Libre Franklin",system-ui,-apple-system,"Segoe UI",sans-serif;

  --pad:clamp(1.15rem,5vw,3.5rem);
  --measure:38rem;
  --gap:clamp(2.5rem,7vh,5rem);
}

*{box-sizing:border-box}
html{scroll-behavior:auto}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* The estate map is exempt, like the hero film: its motion is the point of
     it, and the owner wants it to play for everyone. */
  :where(:not(.park-stage, .park-stage *, .wx, .wx *)){animation:none!important;transition:none!important}
}

body{
  margin:0;background:var(--ground);color:var(--ink);
  font:400 16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0;line-height:1.12}
h1{font-size:clamp(2.5rem,6.5vw,4.2rem);letter-spacing:-.01em}
h2{font-size:clamp(1.8rem,4vw,2.6rem)}
h3{font-size:1.25rem;line-height:1.25}
p{margin:0;max-width:var(--measure)}

.eyebrow{
  font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--label);
}

/* ---------------------------------------------------------------- masthead */
.site-head{
  position:sticky;top:0;z-index:20;background:var(--paper);
  border-bottom:1px solid var(--line);
}
.site-head .inner{
  max-width:82rem;margin:0 auto;padding:1rem var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
/* The client's mark, then the name. The supplied artwork is one stacked
   lockup and it is half again as tall as it is wide -- in a sticky header that
   is either a 6rem bar following you down every page, or a wordmark four
   pixels tall. So the masthead takes the bloom on its own and the name is set
   beside it; the full lockup goes in the footer, where there is room. */
.wordmark{
  font-family:var(--display);font-size:1.35rem;letter-spacing:.02em;
  text-decoration:none;white-space:nowrap;
  display:flex;align-items:center;gap:.6rem;
}
.wordmark img{
  width:2.35rem;height:2.35rem;flex:none;
  /* The artwork is pure black and the site's ink is a warm near-black. A hair
     of transparency settles it into the palette without touching the file. */
  opacity:.88;
}
@media (max-width:400px){
  .wordmark{font-size:1.15rem;gap:.45rem}
  .wordmark img{width:2rem;height:2rem}
}

.foot-mark{
  display:block;max-width:82rem;margin:0 auto;
  padding:clamp(2.5rem,6vh,4rem) var(--pad) 0;
}
.foot-mark img{width:clamp(9rem,16vw,11.5rem);height:auto;opacity:.85}
.site-nav ul{display:flex;gap:1.7rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.site-nav a{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--ink-soft);text-decoration:none;padding:.35rem 0;
  border-bottom:1px solid transparent;
}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--ink);border-bottom-color:var(--accent)}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

.btn{
  display:inline-block;font-family:var(--sans);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  padding:.7rem 1.3rem;text-decoration:none;border:1px solid var(--accent);
  color:var(--accent);background:transparent;white-space:nowrap;
  transition:background .3s,color .3s;
}
.btn:hover,.btn:focus-visible{background:var(--accent);color:var(--ground)}
.btn-solid{background:var(--accent);color:var(--ground)}
.btn-solid:hover,.btn-solid:focus-visible{background:transparent;color:var(--accent)}

@media (max-width:860px){
  .site-head .inner{flex-wrap:wrap;gap:.9rem}
  .site-nav{order:3;width:100%;border-top:1px solid var(--line-soft);padding-top:.7rem}
  .site-nav ul{gap:1.1rem}
}

/* ------------------------------------------------------------------- hero */
.hero{position:relative;border-bottom:1px solid var(--line)}
.hero-img{
  aspect-ratio:16/8;background:var(--ground-2) center/cover no-repeat;
}
.hero-body{
  max-width:82rem;margin:0 auto;padding:clamp(2rem,5vh,3.5rem) var(--pad) clamp(2.5rem,6vh,4rem);
  display:flex;flex-direction:column;gap:1.2rem;align-items:flex-start;
}
.hero-body h1{max-width:18ch}
.hero-body p{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--ink-soft)}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.6rem}
@media (max-width:640px){.hero-img{aspect-ratio:4/3}}

/* ------------------------------------------------ the hero, with a photograph
   The first arrangement here put the photograph in a 16:8 band and the words
   in a pale strip underneath it. That is the safe layout and it is also the
   one that makes every page look like the same template with a different
   picture at the top. The words sit on the picture now.

   The scrim is the same idea as the home page's and for the same reason: white
   type on a white house is 1:1, and a photograph cannot be trusted to have a
   dark corner where the words happen to go. It is spent sideways rather than
   downwards, because the copy occupies the left of the frame and the right of
   the frame is the half worth keeping.

   Measured against pure white, which is the worst case any of these frames can
   present. Left edge at the top of the copy: .72 ink, which puts white type at
   7.4:1. Bottom left, where the two ramps overlap: about .79, or 10:1. The
   right third of the photograph is untouched. */
/* The photograph is not a background and nothing is laid over it. It runs the
   width of the page at its own aspect, and the words follow underneath on
   ivory. Every scrim on this site existed so white type could sit on a
   picture; the direction is that the photography is not to be darkened, so
   the type moved instead. */
.hero-photo{
  position:relative;display:block;overflow:hidden;
  border-bottom:1px solid var(--line);background:var(--ivory);
}
.hero-photo .hero-bg{
  position:static;display:block;width:100%;height:auto;max-width:none;
  aspect-ratio:2/1;object-fit:cover;
}
.hero-photo .hero-body{
  position:relative;z-index:2;width:100%;
  padding-top:clamp(2rem,5vh,3.25rem);
  padding-bottom:clamp(2.5rem,7vh,4rem);
}
.hero-photo h1{max-width:18ch}
.hero-photo .hero-body p{max-width:38rem}
@media (max-width:760px){
  .hero-photo .hero-bg{aspect-ratio:4/3}
}

/* --------------------------------------------------------------- sections */
main{max-width:82rem;margin:0 auto;padding:0 var(--pad)}
section{padding:var(--gap) 0;border-bottom:1px solid var(--line-soft)}
section:last-of-type{border-bottom:0}
.lede{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.lede p{color:var(--ink-soft)}

/* a plain two-column split, image beside words */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.split.flip .split-text{order:2}
.split-text{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
/* height:auto, for the same reason as .card img below: these carry width and
   height attributes now, and a presentational height defeats aspect-ratio. */
.split img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto}
@media (max-width:760px){
  .split{grid-template-columns:1fr}
  .split.flip .split-text{order:0}
}

/* a row of equal things */
.grid{display:grid;gap:clamp(1.4rem,3vw,2.4rem);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-top:2.2rem}
.card{display:flex;flex-direction:column;gap:.7rem}
/* height:auto because the imgs carry width and height attributes, and a
   presentational height defeats aspect-ratio. */
.card img{aspect-ratio:3/2;object-fit:cover;width:100%;height:auto;background:var(--paper)}
.card .eyebrow{margin-top:.2rem}
.card p{font-size:.94rem;color:var(--ink-soft)}

/* the numbered weekend sequence — a real sequence, so it is numbered */
.steps{display:flex;flex-direction:column;margin-top:2rem;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:5rem 1fr;gap:.4rem 1.5rem;
  padding:1.4rem 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.step .when{font-family:var(--display);font-size:1.5rem;color:var(--label);
  font-variant-numeric:tabular-nums}
.step b{font-weight:500}
.step p{font-size:.94rem;color:var(--ink-soft);margin-top:.25rem}
@media (max-width:560px){.step{grid-template-columns:1fr}}

/* a plain list of named things */
.named{display:grid;gap:.1rem 2rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  margin-top:1.6rem;list-style:none;padding:0}
.named li{padding:.7rem 0;border-bottom:1px solid var(--line-soft);font-size:.95rem}
.named li span{display:block;font-size:.84rem;color:var(--ink-faint)}

/* callout used for prototype notes and open questions */
.note{border-left:2px solid var(--clay);padding:.2rem 0 .2rem 1.2rem;
  display:flex;flex-direction:column;gap:.5rem;margin-top:2rem}
.note p{font-size:.9rem;color:var(--ink-soft)}
.note b{font-weight:600;color:var(--ink)}

/* The one place this scaffold raises its voice. Pillar One of the framework and
   the brand essence itself — the claim the rest of the page is evidence for. It
   gets a panel, a larger setting, and room around it, and nothing else on the
   page competes at this size. */
.statement{
  background:var(--ground-2);border:1px solid var(--line);
  padding:clamp(1.8rem,5vw,3.4rem);
  display:flex;flex-direction:column;gap:1.2rem;align-items:flex-start;
}
.statement h2{font-size:clamp(2rem,4.8vw,3.1rem);max-width:16ch}
.statement p{max-width:46rem;color:var(--ink-soft)}
.statement .close{color:var(--ink);font-size:1.05rem}
.nots{
  list-style:none;padding:0;margin:.8rem 0 0;width:100%;
  display:grid;gap:0 clamp(1.5rem,4vw,3rem);
  /* four points, so two rows of two rather than three and a widow */
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
}
.nots li{
  padding:.85rem 0;border-bottom:1px solid var(--line-soft);
  font-size:.95rem;display:flex;gap:.7rem;align-items:baseline;
}
@media (max-width:620px){.nots{grid-template-columns:1fr}}
.nots li::before{
  content:"";flex:none;display:inline-block;
  width:.95rem;height:1px;background:var(--clay);transform:translateY(-.35em);
}

/* ------------------------------------------------------------- the closing
   Every page ends the same way: a full-bleed frame, the last thing the page
   has to say, and the invitation. It was the home page's alone at first, and
   that was the mistake -- the other ten simply stopped, and a page that stops
   has not asked for anything.

   The frame goes dark under a heavy scrim, so the photograph chosen for it
   should already be low-key. A bright frame under this much ink reads as a
   bright frame that has been spoiled. */
.closing{
  margin:var(--gap) calc(var(--pad) * -1) 0;
  display:grid;grid-template-rows:auto auto;overflow:hidden;
  background:var(--cream);border-top:1px solid var(--line);
}
.closing-img{
  width:100%;aspect-ratio:2.6/1;
  background:var(--cream) center/cover no-repeat;
}
.closing-body{
  width:100%;max-width:82rem;margin:0 auto;
  padding:clamp(2.5rem,7vh,4.5rem) var(--pad);
  display:flex;flex-direction:column;gap:1rem;align-items:flex-start;
}
.closing-body > *{max-width:46rem}
@media (max-width:620px){.closing-img{aspect-ratio:16/10}}

/* ============================================================================
   The claim.

   This is the sentence the whole site is evidence for, and for a while it was
   the flattest thing on the page: a grey panel of type. Directly beneath it sat
   a full-bleed photograph carrying the same argument in one line. Two sections
   saying one thing, one of them plain and one of them handsome. They are one
   section now.

   The obvious move was to put the words on the photograph, and it was measured
   and rejected. The frame is a flat, bright aerial with no dark corner
   anywhere in it, so the ramp needed to hold white type at 7:1 left the
   picture visible over 5% of itself -- a good photograph spoiled to serve as a
   background. Loosening it to show a quarter of the frame dropped the type to
   3.8:1.

   So they are adjacent instead: the land across the top, untouched and
   uncovered, and the argument underneath it on ink. The type is at 15:1
   because it is on a solid ground, the photograph is at full strength because
   nothing is over it, and neither is compromising for the other.

   The four denials are the only decorated thing on the page, and the
   decoration means something: each is struck through by a rule that draws
   itself as you reach it. They are things that do not happen here, so they
   cross themselves out.
   ========================================================================== */
.claim{
  position:relative;margin:var(--gap) calc(var(--pad) * -1);
  background:var(--cream);padding:0;border-bottom:0;overflow:hidden;
}
.claim-img{
  display:block;width:100%;height:auto;max-width:none;
  aspect-ratio:2.6/1;object-fit:cover;object-position:center 58%;
}
/* The strip does not stop, it goes into the ground it sits on. */
.claim{display:grid;grid-template-rows:auto auto}
/* Pulled up over the foot of the strip by its own height, so the photograph
   dissolves into the ground rather than stopping at a ruled edge. */
.claim-fade{
  height:clamp(4rem,9vw,8rem);margin-top:calc(clamp(4rem,9vw,8rem) * -1);
  position:relative;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,240,218,0),var(--cream));
}
.claim-body{
  position:relative;z-index:2;width:100%;max-width:82rem;margin:0 auto;
  padding:clamp(2.5rem,6vh,4rem) var(--pad) clamp(3rem,8vh,5rem);
  display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem;
}
.claim-body > *{max-width:44rem}
.claim-body .eyebrow{color:var(--ink)}
.claim-body h2{
  color:var(--ink);max-width:13ch;
  font-size:clamp(2.4rem,6vw,4rem);line-height:1.04;
}
.claim-body p{color:var(--ink)}
.claim-body .close{
  color:var(--ink);font-family:var(--display);font-size:clamp(1.3rem,2.6vw,1.9rem);
  line-height:1.25;max-width:26ch;margin-top:.4rem;
}
.claim-body .btn{margin-top:.6rem}


/* the four denials */
.claim .nots{
  border-top:1px solid var(--line);
  margin-top:1.2rem;max-width:44rem;
}
.claim .nots li{
  position:relative;border-bottom:0;color:var(--ink);
  padding:.95rem 0;
}
.claim .nots li::before{background:var(--clay);opacity:1}
.claim .nots li::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--olive);transform-origin:left;
}
@media (min-width:620px){.claim .nots{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.claim-img{aspect-ratio:16/10}}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* Each rule draws across as its line is read. Staggered, because they are
       read in order and arriving together would look like a table loading. */
    .io .claim .nots:not(.in) li::after{transform:scaleX(0)}
.claim .nots li::after{
      
      transition:transform .9s var(--arrive) .35s;
    }
    .claim .nots li:nth-child(2)::after{transition-delay:0.47s}
    .claim .nots li:nth-child(3)::after{transition-delay:0.59s}
    .claim .nots li:nth-child(4)::after{transition-delay:0.71s}

    /* The land drifts against its letterbox, very slightly. It is a still
       aerial of an empty field; anything faster would be a screensaver. */
    .claim-img{
      animation:claim-drift linear both;
      animation-timeline:view();animation-range:cover 0% cover 100%;
    }
  }
}
@keyframes claim-drift{
  from{transform:scale(1.07) translate3d(0,-1.4%,0)}
  to{transform:scale(1.07) translate3d(0,1.4%,0)}
}

/* ------------------------------------------------------------- the doors
   The two cards at the foot of the page are links, and until now only their
   button said so. The whole card is the hit area now, via a pseudo-element
   stretched from the button -- one link per card, no nested anchors, and the
   keyboard still lands on exactly one thing. */
.card-door{position:relative;isolation:isolate}
.card-door .btn::after{content:"";position:absolute;inset:0;z-index:1}
.card-door .frame{cursor:pointer}
.card-door img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.card-door:hover img,.card-door:focus-within img{transform:scale(1.05)}
.card-door h3{transition:color .3s}
.card-door:hover h3,.card-door:focus-within h3{color:var(--accent)}
.card-door .btn{transition:background .3s,color .3s,border-color .3s}
.card-door:hover .btn,.card-door:focus-within .btn{
  background:var(--accent);color:var(--ground)}
/* The focus ring belongs on the card, since the card is what is clickable. */
.card-door:focus-within{outline:2px solid var(--accent);outline-offset:6px}
.card-door .btn:focus-visible{outline:none}

/* ------------------------------------------------------------------ forms */
.form{display:flex;flex-direction:column;gap:1.5rem;max-width:34rem;margin-top:2rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  font:400 1rem/1.5 var(--sans);color:var(--ink);background:var(--paper);
  border:1px solid var(--line);padding:.75rem .85rem;width:100%;
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.field textarea{min-height:7rem;resize:vertical}
/* The one place a softer value is worth its contrast. With a single ink a
   placeholder renders identically to a typed value, and a field that looks
   filled when it is empty is the bug we already fixed once. Olive is clearly
   a hint rather than an entry; every field carries a visible label above it,
   so nothing is conveyed by the placeholder alone. */
.field ::placeholder,.field input::placeholder,.field textarea::placeholder{
  color:var(--olive);opacity:1}

/* ----------------------------------------------------------------- footer */
.site-foot{
  border-top:1px solid var(--line);background:var(--ground-2);margin-top:var(--gap);
}
.site-foot .inner{
  max-width:82rem;margin:0 auto;padding:clamp(2.5rem,6vh,4rem) var(--pad);
  display:grid;gap:2rem clamp(2rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
}
.site-foot h3{font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;color:var(--ink-faint);margin:0 0 .9rem}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.site-foot a{font-size:.92rem;color:var(--ink-soft);text-decoration:none}
.site-foot a:hover,.site-foot a:focus-visible{color:var(--ink);text-decoration:underline}
.site-foot .addr{font-size:.92rem;color:var(--ink-soft);font-style:normal}
.colophon{
  max-width:82rem;margin:0 auto;padding:1.2rem var(--pad) 2.5rem;
  border-top:1px solid var(--line-soft);font-size:.78rem;color:var(--ink-faint);
  display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;
}

/* ------------------------------------------------------- moving between pages
   A cross-document view transition. The browser snapshots the page you are
   leaving and the page you are arriving at and tweens between them, so the
   masthead holds still and the hero photograph grows into the next hero
   instead of the screen going white and starting again.

   Nothing here needs JavaScript and nothing breaks without support: a browser
   that does not implement it simply navigates. Off entirely under reduced
   motion, where a full-screen cross-fade is exactly the wrong thing. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

.site-head{view-transition-name:masthead}
.hero-photo .hero-bg{view-transition-name:hero-frame}
::view-transition-group(hero-frame){animation-duration:.5s}
::view-transition-old(root),::view-transition-new(root){animation-duration:.4s}
::view-transition-old(masthead),::view-transition-new(masthead){animation:none}

/* --------------------------------------------------- the working notes
   Hidden unless the address asks for them. They are notes to ourselves about
   open decisions, and in front of a client they read as unfinished rather than
   as thinking. /about/?notes brings them back. */
.note{display:none}
.notes .note{display:flex}
.colophon .notes-off,.notes .colophon .notes-on{display:none}
.notes .colophon .notes-off{display:inline}
.colophon a{color:var(--ink-faint);text-decoration:underline;
  text-underline-offset:2px}
.colophon a:hover,.colophon a:focus-visible{color:var(--ink-soft)}

/* skip link */
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:.6rem;z-index:50;background:var(--ground);
  padding:.6rem 1rem;border:1px solid var(--accent);font-size:.8rem}