/* Lova Content Creation. Cream and olive from the logo, IM Fell for the
   voice, Crimson Pro for reading. The cream is limewashed: wash.svg is two
   layers of stitched fractal noise in olive, drawn once and repeated.

   Motion is spent in three places and nowhere else: the page settling on
   first arrival, the "I noticed" lines that surface as you scroll to them
   (the site doing what it says), and things opening when you open them. */

@font-face { font-family: 'IM Fell Double Pica'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/IMFellDoublePica.woff2) format('woff2'); }
@font-face { font-family: 'IM Fell Double Pica'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/IMFellDoublePica-italic.woff2) format('woff2'); }
@font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/fonts/CrimsonPro.woff2) format('woff2'); }
@font-face { font-family: 'Crimson Pro'; font-style: italic; font-weight: 200 900; font-display: swap; src: url(/fonts/CrimsonPro-italic.woff2) format('woff2'); }

:root {
  /* her palette: the green and cream of the logo, gold for the highlight, and
     a near-black green for the words */
  --cream: #f1e6d3;
  --paper: #f8f2e6;
  --green: #42542f;
  --deep: #34432a;
  --gold: #f1d69e;
  --ink: #152015;
  --soft: #3f4a3a;
  --rule: rgba(66, 84, 47, 0.4);
  --pb: rgba(66, 84, 47, 0.45);
  --pf: rgba(248, 242, 230, 0.7);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --slow: 0.9s;
}

/* moving between the three pages: the header and footer stay put, the page
   between them crossfades. Browsers without it navigate the ordinary way. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.32s; animation-timing-function: var(--ease); }
header.nav { view-transition-name: nav; }
footer.foot { view-transition-name: foot; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--cream) url(/wash.svg);
  color: var(--ink);
  font-family: 'Crimson Pro', Georgia, serif; font-size: 20px; line-height: 1.6;
  font-variant-numeric: oldstyle-nums; font-kerning: normal;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, .big, .said { text-wrap: balance; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }
ul { list-style: none; }
::selection { background: var(--gold); color: var(--ink); }
.fell { font-family: 'IM Fell Double Pica', Georgia, serif; font-weight: 400; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 20px; top: -60px; z-index: 10; background: var(--cream); color: var(--green); padding: 10px 16px; border: 1px solid var(--green); }
.skip:focus { top: 16px; }

/* pictures that are not here yet hold their shape and say what belongs there */
.area { display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--pb); background: var(--pf); }
.area span { font-size: 14px; line-height: 1.45; color: var(--soft); padding: 12px 16px; text-align: center; }

/* the logo: the lily inked in the current colour, the wordmark in its own face */
.lily { display: block; aspect-ratio: 454 / 691; background: currentColor; -webkit-mask: url(/lily.png) center / contain no-repeat; mask: url(/lily.png) center / contain no-repeat; }
.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo .lily { width: 24px; flex: none; color: var(--green); }
.you .logo .lily, .foot .logo .lily { color: var(--cream); }
.logo b { font-family: 'IM Fell Double Pica', Georgia, serif; font-weight: 400; font-size: 13px; line-height: 1.5; letter-spacing: 0.3em; text-transform: uppercase; white-space: nowrap; }

/* buttons fill with ink from the left; the ink is whichever colour the text is not */
.btn {
  display: inline-block; position: relative; isolation: isolate;
  border: 1px solid var(--green); padding: 11px 30px 14px;
  font-family: 'IM Fell Double Pica', Georgia, serif; font-style: italic; font-size: 22px; line-height: 1.2;
  background: none; color: inherit; cursor: pointer;
  transition: color 0.4s var(--ease);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.btn:hover, .btn:focus-visible { color: var(--cream); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.you .btn, .foot .btn { border-color: var(--cream); }
.you .btn::before, .foot .btn::before { background: var(--gold); }
.you .btn:hover, .you .btn:focus-visible, .foot .btn:hover, .foot .btn:focus-visible { color: var(--ink); }

/* text links carry a rule that draws itself in */
.link, .nav .me a:not(.btn) { background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1px; padding-bottom: 2px; transition: background-size 0.35s var(--ease); }
.link:hover, .link:focus-visible, .nav .me a:not(.btn):hover, .nav .me a:not(.btn):focus-visible, .nav .me a[aria-current] { background-size: 100% 1px; }

/* the split: the couple's half on olive, Sierra's half on the washed cream */
.row { display: grid; grid-template-columns: 1fr 1fr; }
.row > * { padding: 44px clamp(24px, 5vw, 88px); }
.row .you { background: var(--green); color: var(--cream); }
.you a:not(.btn):hover, .you a:not(.btn):focus-visible { color: var(--gold); }
.row + .row .you { border-top: 1px solid rgba(241, 230, 211, 0.22); }
.row + .row .me { border-top: 1px solid var(--rule); }

.nav > * { padding-top: 22px; padding-bottom: 22px; display: flex; align-items: center; }
.nav .me { justify-content: flex-end; gap: 30px; font-style: italic; font-size: 21px; }
.nav .me .btn { font-size: 19px; padding: 6px 20px 8px; }

/* the opening frame is a film on a loop, full width, with nothing printed over it */
.loop .area { border-left: 0; border-right: 0; }

.head > * { padding-top: clamp(48px, 8vw, 110px); padding-bottom: clamp(44px, 6vw, 84px); border-top: 0 !important; }
.big { font-size: clamp(40px, 5.6vw, 88px); line-height: 1.02; letter-spacing: -0.01em; }
.head p.sub { font-size: 21px; max-width: 30ch; margin-top: 26px; }
.head .me p.sub { color: var(--soft); margin-bottom: 30px; }

.said { font-size: clamp(26px, 2.8vw, 42px); line-height: 1.15; max-width: 16ch; }
.row .me .said { max-width: 20ch; margin-bottom: 22px; }
.row .me .area { max-width: var(--w, 420px); }
@media (min-width: 901px) { .row:not(.nav):not(.head) .you .said { position: sticky; top: 40px; } }

/* the answer paragraph, between two lilies from her logo, the second turned to face in */
.answer { max-width: 1120px; margin: 0 auto; padding: 56px 40px 44px; display: grid; grid-template-columns: 1fr minmax(0, 40em) 1fr; gap: 40px; align-items: center; color: var(--soft); text-align: center; }
.answer .lily { width: 96px; justify-self: end; color: var(--green); opacity: 0.75; }
.answer .lily:last-child { justify-self: start; transform: scaleX(-1); }

/* a printed menu card: what she notices, three courses */
.menu { max-width: 640px; margin: 96px auto; background: var(--paper); border: 1px solid var(--rule); padding: 12px; box-shadow: 0 30px 60px -40px rgba(21, 32, 21, 0.5); }
.menu .in { border: 1px solid var(--rule); padding: 52px 48px 56px; text-align: center; }
.menu .lily { width: 44px; margin: 0 auto 30px; }
.menu h3 { font-style: italic; font-size: 30px; line-height: 1.2; margin-bottom: 10px; }
.menu p { color: var(--soft); max-width: 25em; margin: 0 auto; }
.menu .course + .course { margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--rule); }

.band { background: var(--deep); color: var(--cream); text-align: center; padding: 96px 24px; }
.band h2 { font-size: clamp(32px, 4.4vw, 60px); line-height: 1.14; max-width: 18ch; margin: 0 auto; }
.band p { max-width: 36em; margin: 24px auto 0; color: #dfd6c1; }
.band p + p { margin-top: 14px; font-style: italic; }

.more { max-width: 1120px; margin: 0 auto; padding: 100px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px 72px; align-items: center; }
.more h2 { font-style: italic; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.15; margin-bottom: 20px; }
.more p { max-width: 30em; color: var(--soft); }
.more p + p { margin-top: 14px; }
.link { color: var(--green); font-style: italic; }
.frame { border: 1px solid var(--rule); padding: 12px; }

/* inner pages: prices and the inquiry form */
.page { padding: clamp(40px, 6vw, 80px) 0 110px; }
.page h1 { font-style: italic; font-size: clamp(38px, 4.6vw, 64px); line-height: 1.08; }
.page .lead { max-width: 34em; margin: 18px 0 44px; color: var(--soft); font-size: 21px; }

/* prices: each block opens on its number, and opens smoothly where the browser can */
.tier { border-top: 1px solid var(--green); interpolate-size: allow-keywords; }
.tier:last-of-type { border-bottom: 1px solid var(--green); }
.tier summary { display: grid; grid-template-columns: 1fr 1fr auto; gap: 24px; align-items: baseline; padding: 26px 0; cursor: pointer; list-style: none; }
.tier summary::-webkit-details-marker { display: none; }
.tier summary .name { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; }
.tier summary .hours { color: var(--soft); }
.tier summary .tog { font-style: italic; font-size: 21px; white-space: nowrap; background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 100% 1px; padding-bottom: 2px; }
.tier summary .tog::after { content: "The details"; }
.tier[open] summary .tog::after { content: "Close"; }
.tier::details-content { block-size: 0; overflow: clip; transition: block-size 0.5s var(--ease), content-visibility 0.5s allow-discrete; }
.tier[open]::details-content { block-size: auto; }
.tier .body { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 0 0 36px; }
.tier .body p.say { font-style: italic; font-size: 24px; line-height: 1.4; }
.tier .body ul { color: var(--soft); }
.tier .body li { padding: 6px 0; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 16px; }
.tier .body li b { font-weight: 400; color: var(--ink); white-space: nowrap; font-variant-numeric: lining-nums; }
.tier .price { font-family: 'IM Fell Double Pica', Georgia, serif; font-size: clamp(34px, 3.6vw, 48px); line-height: 1; margin: 22px 0 18px; }
.tier .price small { font-family: 'Crimson Pro', Georgia, serif; font-size: 18px; color: var(--soft); margin-left: 10px; }
.notes { max-width: 40em; margin-top: 44px; }
.notes h2 { font-style: italic; font-size: 28px; line-height: 1.2; margin: 34px 0 10px; }
.notes p { color: var(--soft); }
.notes p + p { margin-top: 12px; }

.faq { max-width: 44em; margin-top: 64px; }
.faq h2 { font-style: italic; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.15; margin-bottom: 18px; }
.faq .q { border-top: 1px solid var(--rule); interpolate-size: allow-keywords; }
.faq .q:last-of-type { border-bottom: 1px solid var(--rule); }
.faq .q summary { cursor: pointer; list-style: none; padding: 16px 0; font-size: 24px; line-height: 1.3; display: flex; justify-content: space-between; gap: 20px; }
.faq .q summary::-webkit-details-marker { display: none; }
.faq .q summary::after { content: "+"; flex: none; transition: transform 0.4s var(--ease); }
.faq .q[open] summary::after { transform: rotate(45deg); }
.faq .q::details-content { block-size: 0; overflow: clip; transition: block-size 0.45s var(--ease), content-visibility 0.45s allow-discrete; }
.faq .q[open]::details-content { block-size: auto; }
.faq .q p { color: var(--soft); padding: 0 0 20px; max-width: 36em; }

.cta { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--green); }
.cta p { font-style: italic; font-size: 26px; line-height: 1.3; margin-bottom: 22px; max-width: 26em; }

/* the inquiry form, one column, big fields */
.form { max-width: 640px; }
.form .field { display: block; margin-bottom: 26px; }
.form .field > span { display: block; font-style: italic; font-size: 22px; margin-bottom: 8px; }
.form .field small { display: block; color: var(--soft); font-size: 17px; margin-top: 6px; }
.form input:not([type="checkbox"]), .form select, .form textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); padding: 12px 14px; border-radius: 0;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.form input:not([type="checkbox"]):focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(241, 214, 158, 0.55); }
.form textarea { min-height: 180px; resize: vertical; }
.form .check { display: flex; align-items: baseline; gap: 12px; font-size: 20px; }
.form .check input { width: 18px; height: 18px; accent-color: var(--green); }
.form .hidden-field { display: none; }
.form .btn { margin-top: 10px; }

.foot { position: relative; overflow: hidden; background: var(--green); color: var(--cream); padding: 100px clamp(24px, 5vw, 88px) 44px; }
/* a large lily sits in the ink of the footer, barely there */
.foot::before { content: ""; position: absolute; right: -4vw; bottom: -6vw; width: 34vw; min-width: 320px; aspect-ratio: 454 / 691; background: var(--gold); opacity: 0.1; -webkit-mask: url(/lily.png) center / contain no-repeat; mask: url(/lily.png) center / contain no-repeat; pointer-events: none; }
.foot > * { position: relative; }
.foot h2 { font-size: clamp(40px, 5.6vw, 88px); line-height: 1.02; margin-bottom: 36px; }
.foot .btn { overflow-wrap: anywhere; }
.foot .fine { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 90px; padding-top: 24px; border-top: 1px solid rgba(241, 230, 211, 0.25); font-size: 18px; color: #dfd6c1; }
.foot .fine > span:last-child { max-width: 40ch; }
.foot .fine a { background: linear-gradient(var(--gold), var(--gold)) no-repeat left bottom / 100% 1px; }
.foot .fine a:hover { color: var(--gold); }

/* ---- motion ------------------------------------------------------------ */

/* arrival: the olive half wipes in, the lily inks up from its stem, the
   wordmark settles into its tracking, then the words. Once, on the home page,
   and not when you came from another page of the site. */
.arrive .head .you { animation: wipe var(--slow) var(--ease) both; }
.arrive .head .you > *, .arrive .head .me > * { animation: rise 0.8s var(--ease) both; }
.arrive .head .you > * { animation-delay: 0.35s; }
.arrive .head .me > :nth-child(1) { animation-delay: 0.55s; }
.arrive .head .me > :nth-child(2) { animation-delay: 0.65s; }
.arrive .head .me > :nth-child(3) { animation-delay: 0.75s; }
.arrive .nav .logo .lily { animation: ink 0.9s var(--ease) 0.1s both; }
.arrive .nav .logo b { animation: settle 1.1s var(--ease) 0.2s both; }
.arrive .nav .me > * { animation: rise 0.7s var(--ease) both; }
.arrive .nav .me > :nth-child(1) { animation-delay: 0.5s; }
.arrive .nav .me > :nth-child(2) { animation-delay: 0.58s; }
.arrive .nav .me > :nth-child(3) { animation-delay: 0.66s; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ink { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { opacity: 0; letter-spacing: 0.55em; } to { opacity: 1; letter-spacing: 0.3em; } }

/* noticing: each "I noticed" line surfaces as it comes into view, tied to
   the scroll where the browser supports it, otherwise once when it appears */
.row .me .said { animation: notice linear both; animation-timeline: view(); animation-range: entry 15% entry 55%; }
@keyframes notice { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@supports not (animation-timeline: view()) {
  .row .me .said { animation: none; opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
  .row .me .said.seen, .no-js .row .me .said { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .row .me .said { opacity: 1 !important; transform: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

@media (max-width: 900px) {
  body { font-size: 19px; }
  .wrap { padding: 0 20px; }
  .logo b { font-size: 12px; letter-spacing: 0.22em; }
  .arrive .nav .logo b { animation: none; }
  .row { grid-template-columns: 1fr; }
  .row > * { padding: 30px 20px; }
  .row + .row .me { border-top: 0; }
  /* on a phone the links sit under the logo, all on olive, none hidden */
  .nav { grid-template-columns: 1fr; }
  .nav > * { padding: 14px 20px; }
  .nav .you { padding-bottom: 4px; }
  .nav .me { background: var(--green); color: var(--cream); justify-content: flex-start; flex-wrap: wrap; gap: 6px 18px; font-size: 19px; }
  .nav .me .btn { border-color: var(--cream); margin-left: auto; }
  .nav .me .btn::before { background: var(--gold); }
  .nav .me .btn:hover, .nav .me .btn:focus-visible { color: var(--ink); }
  .loop .area { aspect-ratio: 4 / 3 !important; }
  .head .you { padding-bottom: 36px; }
  .head .me { padding-top: 36px; }
  .row .you .said { max-width: none; }
  .answer { grid-template-columns: 1fr; gap: 22px; padding: 36px 20px 30px; }
  .answer .lily { width: 56px; justify-self: center; }
  .answer .lily:last-child { display: none; }
  .menu { margin: 56px auto; padding: 8px; }
  .menu .in { padding: 36px 20px 40px; }
  .band { padding: 64px 20px; }
  .more { grid-template-columns: 1fr; gap: 34px; padding: 64px 20px; }
  .page { padding-bottom: 72px; }
  .tier summary { grid-template-columns: 1fr auto; }
  .tier summary .hours { grid-column: 1 / -1; margin-top: -14px; }
  .tier .body { grid-template-columns: 1fr; gap: 20px; }
  .foot { padding: 64px 20px 36px; }
  .foot::before { width: 60vw; right: -12vw; }
  .foot .fine { margin-top: 56px; }
}