@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Italianno&family=Instrument+Serif:ital@0;1&family=Cormorant+Garamond:wght@500&display=swap");

/* Footer · round 1. Five styles share these pieces; each style has its own block below.
   Colours come from the site's blush palette (v6.css), written out so the placeholder
   pages (which don't load v6.css) look the same. */

.site-footer {
  --f-ink: #262A22;
  --f-text: #575C51;
  --f-soft: #8A8D83;
  --f-line: #EFE6D8;
  --f-accent: #4E6B48;
  --f-kicker: #A6566B;
  --f-surface: #FFF7EE;
  --f-bg: #FBF8F3;
  --f-ease: cubic-bezier(.22, .8, .24, 1);
  position: relative;
  z-index: 1;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  color: var(--f-text);
  text-align: left;
}
.site-footer *, .site-footer *::before, .site-footer *::after { box-sizing: border-box; }
.site-footer p { margin: 0; }
/* The placeholder pages style every link as a green pill; start footer links from plain */
.site-footer :where(a) {
  display: inline;
  padding: 0;
  border-radius: 0;
  font-weight: inherit;
  color: inherit;
  background: none;
}
.site-footer .f-inner {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Placeholder pages: escape the body's centring and padding */
.site-footer.is-bare {
  justify-self: stretch;
  align-self: end;
  width: calc(100% + 32px);
  margin: 40px -16px -16px;
}

.f-sign {
  font-family: "Italianno", cursive;
  font-size: clamp(44px, 6vw, 62px);
  font-weight: 400;
  line-height: 0.95;
  color: var(--f-ink);
}
.f-sub { margin-top: 8px !important; line-height: 1.6; }

.f-links { display: flex; flex-wrap: wrap; gap: 10px; }
.f-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.3s var(--f-ease), box-shadow 0.3s, background 0.3s;
}
.f-btn svg { width: 18px; height: 18px; flex: none; }
.f-btn.is-primary { color: #fff; background: var(--f-accent); box-shadow: 0 6px 16px rgba(78, 107, 72, 0.22); }
.f-btn.is-ghost { color: var(--f-ink); background: rgba(255, 255, 255, 0.75); box-shadow: inset 0 0 0 1.5px #DCCFBA; }
a.f-btn:hover { transform: translateY(-2px); }
a.f-btn.is-primary:hover { box-shadow: 0 10px 22px rgba(78, 107, 72, 0.3); }
.f-btn.is-soon, .fi-app.is-soon { opacity: 0.55; cursor: default; }

.f-copy {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 36px !important;
  padding-top: 18px;
  border-top: 1px solid rgba(87, 92, 81, 0.15);
  font-size: 13px;
  color: var(--f-soft);
}
.f-top { color: inherit; text-decoration: none; }
.f-top:hover { color: var(--f-ink); }

.site-footer a:focus-visible,
.site-footer button:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 3px; }

/* ---------- The dock steps away while the footer is on screen ---------- */
.dock.is-docked { transition: transform 0.8s var(--ease, ease), opacity 0.8s; }
.dock.is-docked.is-footer-away { transform: translateY(calc(100% + 30px)); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .dock.is-docked.is-footer-away { transform: none; }
}

/* ---------- F1 · Garden edge ---------- */
.f-garden {
  margin-top: 96px;
  padding: 56px 0 28px;
  background: linear-gradient(180deg, #E4ECDB, #D6E2CB);
}
.f-garden .fg-grass {
  position: absolute;
  left: 0;
  right: 0;
  top: -38px;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='40' viewBox='0 0 180 40'%3E%3Cg fill='%23E4ECDB'%3E%3Cpath d='M0 40V30Q8 28 14 31Q22 22 30 31Q40 27 48 32Q56 20 64 31Q74 26 82 32Q92 24 100 31Q110 27 118 32Q126 21 136 31Q146 26 154 32Q164 23 172 31Q176 29 180 30V40Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%238DA67E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 34Q10 24 6 18M16 34Q17 22 22 16M58 34Q56 26 52 22M62 34Q64 24 70 20M120 34Q118 25 114 20M126 34Q128 26 133 22M160 34Q160 26 164 21'/%3E%3C/g%3E%3Cg fill='none' stroke='%237E9A74' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M92 34Q92 20 92 14M150 34Q147 28 144 26M38 34Q36 28 33 25'/%3E%3C/g%3E%3Ccircle cx='92' cy='11' r='4.5' fill='%23F2C4CE'/%3E%3Ccircle cx='92' cy='11' r='1.8' fill='%23F7C4AA'/%3E%3Ccircle cx='33' cy='22' r='3.4' fill='%23F7C4AA'/%3E%3Ccircle cx='33' cy='22' r='1.3' fill='%23FFF7EE'/%3E%3Ccircle cx='144' cy='23' r='3.2' fill='%23E8AEBB'/%3E%3Ccircle cx='144' cy='23' r='1.2' fill='%23FFF7EE'/%3E%3C/svg%3E") repeat-x left bottom / 180px 40px;
  pointer-events: none;
}
.f-garden .f-inner { text-align: center; }
.f-garden .f-sign { font-size: clamp(42px, 6vw, 64px); }
.f-garden .f-sub { margin-bottom: 22px !important; }
.f-garden .f-links { justify-content: center; }
.f-garden .f-copy { border-top-color: rgba(78, 107, 72, 0.2); color: #6E7A66; }
.f-garden .fg-pup {
  position: absolute;
  right: clamp(12px, 6vw, 80px);
  top: -78px;
  width: clamp(58px, 7vw, 78px);
  aspect-ratio: 520 / 700;
  transform-origin: 50% 100%;
  transition: transform 0.5s var(--f-ease);
  pointer-events: auto;
}
.f-garden .fg-pup:hover { transform: rotate(-6deg) translateY(-4px); }
.f-garden .fg-pup svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Sitting, not walking: only the blink, ears and tail move */
.fg-pup .bp .upper, .fg-pup .bp .head, .fg-pup .bp .foot, .fg-pup .bp .hand { animation: none; }
@media (max-width: 600px) {
  .f-garden .fg-pup { top: -66px; }
}

/* ---------- F2 · Cream strip ---------- */
.f-cream, .f-cream2 {
  margin-top: 80px;
  padding: 44px 0 24px;
  background: var(--f-surface);
  border-top: 1px solid var(--f-line);
}
.f-cream .fc-row, .f-cream2 .fc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
}
.f-cream .f-sign, .f-cream2 .f-sign { font-size: clamp(42px, 5vw, 54px); }
.f-cream .f-copy, .f-cream2 .f-copy { margin-top: 28px !important; }

/* ---------- F3 · Postcard ---------- */
.f-postcard {
  margin-top: 80px;
  padding: 24px 0 28px;
}
.f-postcard .fp-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 36px);
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent calc(53.5% - 0.75px), #E7DCCB calc(53.5% - 0.75px) calc(53.5% + 0.75px), transparent calc(53.5% + 0.75px)),
    #FFFDF8;
  box-shadow: 0 1px 0 #EFE6D8, 0 18px 40px rgba(60, 50, 35, 0.14);
  transform: rotate(-1.2deg);
  transition: transform 0.6s var(--f-ease);
}
.f-postcard .fp-card:hover,
.f-postcard .fp-card:focus-within { transform: rotate(0deg); }
.f-postcard .fp-message { padding-right: clamp(18px, 3vw, 32px); }
.f-postcard .fp-note {
  margin-top: 14px;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  color: var(--f-ink);
}
.f-postcard .fp-from {
  margin-top: 14px;
  font-family: "Italianno", cursive;
  font-size: 40px;
  line-height: 1;
  color: var(--f-kicker);
}
.f-postcard .fp-from::before { content: "— "; }
.f-postcard .fp-address {
  position: relative;
  min-height: 220px;
  padding-left: clamp(18px, 3vw, 32px);
}
.f-postcard .fp-stamp {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  padding: 6px;
  /* perforated edge: a white sheet with round holes; the picture covers all but the edge holes */
  background: radial-gradient(circle at 50% 50%, transparent 2.6px, #fff 3px) -4.5px -4.5px / 9px 9px;
  filter: drop-shadow(0 1px 1.5px rgba(60, 50, 35, 0.25));
  transform: rotate(3deg);
}
.f-postcard .fp-stamp svg { display: block; width: 100%; height: auto; }
.f-postcard .fp-postmark {
  position: absolute;
  top: 34px;
  right: 46px;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 1.5px solid rgba(166, 86, 107, 0.55);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(166, 86, 107, 0.7);
  transform: rotate(-14deg);
  pointer-events: none;
}
.f-postcard .fp-postmark::after {
  content: "";
  position: absolute;
  left: -46px;
  top: 30px;
  width: 54px;
  height: 18px;
  background: repeating-linear-gradient(180deg, rgba(166, 86, 107, 0.5) 0 1.5px, transparent 1.5px 6px);
  border-radius: 40%;
}
.f-postcard .fp-lines {
  list-style: none;
  margin: 0;
  padding: 128px 0 0;
}
.f-postcard .fp-lines li {
  padding: 10px 0 6px;
  border-bottom: 1.5px solid #E7DCCB;
}
.f-postcard .fp-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 32px;
  font-size: 15px;
  font-weight: 500;
  color: var(--f-ink);
  text-decoration: none;
}
.f-postcard .fp-link svg { width: 18px; height: 18px; color: var(--f-accent); }
.f-postcard a.fp-link:hover span { text-decoration: underline; text-underline-offset: 4px; }
.f-postcard .fp-link.is-soon { opacity: 0.55; }
.f-postcard .f-copy { max-width: 780px; margin-left: auto; margin-right: auto; border-top: 0; }
@media (max-width: 640px) {
  .f-postcard .fp-card {
    grid-template-columns: 1fr;
    background: #FFFDF8;
    transform: rotate(-0.8deg);
  }
  .f-postcard .fp-message { padding: 0 90px 20px 0; border-bottom: 1.5px solid #E7DCCB; }
  .f-postcard .fp-address { position: static; min-height: 0; padding: 0; }
  .f-postcard .fp-stamp { top: 22px; right: 22px; width: 62px; }
  .f-postcard .fp-postmark { display: none; }
  .f-postcard .fp-lines { padding-top: 6px; }
}

/* ---------- F4 · Garden gate ---------- */
.f-gate {
  margin-top: 96px;
  padding: 0 0 28px;
}
.f-gate .f-inner { display: grid; justify-items: center; }
/* A low hedge either side of the arch, standing on the path */
.f-gate .fgt-hedge {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(min(400px, 108vw) - 64px);
  height: 64px;
  background:
    radial-gradient(circle at 30px 34px, #A9BE9B 0 28px, transparent 29px) 0 0 / 56px 64px repeat-x,
    linear-gradient(transparent 34px, #A9BE9B 34px);
  border-radius: 30px 30px 0 0;
  opacity: 0.85;
}
.f-gate .fgt-arch {
  position: relative;
  z-index: 1;
  width: min(360px, 96vw);
  height: min(400px, 108vw);
  padding: 14px 14px 0;
  border-radius: 50% 50% 0 0 / 46% 46% 0 0;
  background: repeating-conic-gradient(from -90deg at 50% 100%, #F1E7D6 0deg 8.4deg, #DDCDB2 8.4deg 9deg);
  box-shadow: inset 0 0 0 1px #D9C9AD;
}
.f-gate .fgt-inside {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  height: 100%;
  padding: 60px 22px 28px;
  border-radius: 50% 50% 0 0 / 44% 44% 0 0;
  background: linear-gradient(180deg, #FBEDF0, #FFF7EE 60%);
  text-align: center;
  perspective: 900px;
  overflow: hidden;
}
.f-gate .f-sign { font-size: clamp(46px, 7vw, 58px); }
.f-gate .f-sub { margin-bottom: 14px !important; }
.f-gate .f-links { flex-direction: column; align-items: stretch; width: min(220px, 100%); }
.f-gate .f-links .f-btn { justify-content: center; }
.f-gate .fgt-door {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 50%;
  background:
    linear-gradient(180deg, transparent 0 26%, #5E7A55 26% 29%, transparent 29% 74%, #5E7A55 74% 77%, transparent 77%),
    repeating-linear-gradient(90deg, #87A27C 0 26px, #7A9570 26px 28px);
  box-shadow: inset 0 0 0 4px #6F8A66;
  backface-visibility: hidden;
  transition: transform 1.2s var(--f-ease);
}
.f-gate .fgt-door.l { left: 0; transform-origin: 0 50%; }
.f-gate .fgt-door.r { right: 0; transform-origin: 100% 50%; }
.f-gate .fgt-door i {
  position: absolute;
  top: 56%;
  width: 16px;
  height: 16px;
  border: 3px solid #EFE3C8;
  border-radius: 50%;
}
.f-gate .fgt-door.l i { right: 10px; }
.f-gate .fgt-door.r i { left: 10px; }
.f-gate.is-open .fgt-door { pointer-events: none; }
.f-gate.is-open .fgt-door.l { transform: rotateY(-108deg); }
.f-gate.is-open .fgt-door.r { transform: rotateY(108deg); }
.f-gate .f-copy { width: min(560px, 100%); margin-top: 0 !important; border-top: 0; padding-top: 16px; }
@media (prefers-reduced-motion: reduce) {
  .f-gate .fgt-door { transition: none; }
}

/* ---------- F5 · iPad ---------- */
.f-ipad {
  margin-top: 80px;
  padding: 0 0 32px;
}
.f-ipad .fi-ipad {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(10px, 1.8vw, 16px);
  border-radius: clamp(26px, 4vw, 40px);
  background: #2B2E28;
  box-shadow: inset 0 0 0 2px #464A42, 0 24px 50px rgba(30, 35, 28, 0.22);
}
.f-ipad .fi-screen {
  position: relative;
  padding: 14px clamp(16px, 3vw, 30px) 34px;
  border-radius: clamp(18px, 3vw, 28px);
  background:
    radial-gradient(120% 90% at 0% 0%, #FBEDF0 0%, transparent 60%),
    radial-gradient(120% 100% at 100% 100%, #DCE8D2 0%, transparent 60%),
    #FFF7EE;
  overflow: hidden;
}
.f-ipad .fi-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--f-ink);
}
.f-ipad .fi-batt {
  position: relative;
  width: 24px;
  height: 11px;
  border: 1.5px solid currentColor;
  border-radius: 3.5px;
  opacity: 0.8;
}
.f-ipad .fi-batt::after { content: ""; position: absolute; right: -4px; top: 2.5px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: currentColor; }
.f-ipad .fi-batt i { position: absolute; inset: 1.5px; border-radius: 1.5px; background: #4E6B48; }
.f-ipad .fi-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(14px, 3vw, 28px);
  align-items: center;
  margin-top: 22px;
}
.f-ipad .fi-note {
  padding: 18px 20px 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 22px rgba(60, 50, 35, 0.1);
  backdrop-filter: blur(8px);
}
.f-ipad .fi-note-head {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #C9973B;
}
.f-ipad .fi-note .f-sign { margin-top: 6px; font-size: clamp(40px, 5vw, 50px); }
.f-ipad .fi-note .f-sub { font-size: 14px; }
.f-ipad .fi-apps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
  justify-items: center;
}
.f-ipad .fi-app {
  display: grid;
  justify-items: center;
  gap: 6px;
  color: var(--f-ink);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
}
.f-ipad .fi-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 6px 14px rgba(40, 40, 30, 0.16);
  transition: transform 0.3s var(--f-ease);
}
.f-ipad a.fi-app:hover .fi-icon { transform: translateY(-3px) scale(1.04); }
.f-ipad .fi-icon svg { width: 30px; height: 30px; color: #fff; }
.f-ipad .fi-icon.is-mail { background: linear-gradient(180deg, #7E9A74, #4E6B48); }
.f-ipad .fi-icon.is-in { background: linear-gradient(180deg, #F7C4AA, #F2A17A); }
.f-ipad .fi-icon.is-top { background: linear-gradient(180deg, #F8DCE2, #E8AEBB); }
/* A calendar-style widget holding the copyright */
.f-ipad .fi-cal {
  display: grid;
  justify-items: center;
  align-content: start;
  width: 62px;
  height: 62px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 14px rgba(40, 40, 30, 0.12);
  color: var(--f-ink);
}
.f-ipad .fi-cal-head { width: 100%; padding: 2px 0 1px; font-size: 11px; font-weight: 600; text-align: center; color: #fff; background: #A6566B; }
.f-ipad .fi-cal-year { font-size: 19px; font-weight: 600; line-height: 1.15; margin-top: 3px; }
.f-ipad .fi-cal-name { font-size: 7.5px; font-weight: 500; color: var(--f-soft); white-space: nowrap; }
.f-ipad .fi-home {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 132px;
  height: 14px;
  padding: 0;
  translate: -50% 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.f-ipad .fi-home::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 4.5px;
  height: 5px;
  border-radius: 3px;
  background: rgba(38, 42, 34, 0.75);
  transition: transform 0.3s var(--f-ease);
}
.f-ipad .fi-home:hover::after { transform: translateY(-3px); }
@media (max-width: 600px) {
  .f-ipad .fi-grid { grid-template-columns: 1fr; }
  .f-ipad .fi-apps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .f-ipad .fi-icon, .f-ipad .fi-cal { width: 56px; height: 56px; }
}

/* ---------- The round 1 switch (for comparing; not part of the footer) ---------- */
.f-switch {
  position: fixed;
  top: 54px;
  right: 12px;
  z-index: 300;
  padding: 6px 8px 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(40, 40, 30, 0.14);
  font: 500 12.5px/1 "Inter", system-ui, sans-serif;
  color: #575C51;
}
.f-switch label { display: flex; align-items: center; gap: 8px; }
.f-switch select {
  font: inherit;
  color: #262A22;
  padding: 4px 6px;
  border: 1px solid #DCCFBA;
  border-radius: 999px;
  background: #FFF7EE;
}

/* Hide the switch over the home page hero until you step in */
.js:not(.entered) .f-switch { opacity: 0; pointer-events: none; }
.f-switch { transition: opacity 0.6s; }

/* ---------- F6 · Cream strip with postcard links ----------
   F2's cream band, but Email and LinkedIn are written on ruled lines like the postcard,
   with a small green icon, instead of buttons. */
.f-cream2 .fc-lines {
  list-style: none;
  width: min(300px, 100%);
  margin: 0;
  padding: 0;
}
.f-cream2 .fc-lines li {
  padding: 8px 0 6px;
  border-bottom: 1.5px solid #E7DCCB;
}
.f-cream2 .fp-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 32px;
  font-size: 15px;
  font-weight: 500;
  color: var(--f-ink);
  text-decoration: none;
}
.f-cream2 .fp-link svg { width: 18px; height: 18px; color: var(--f-accent); }
.f-cream2 a.fp-link:hover span { text-decoration: underline; text-underline-offset: 4px; }

/* F6 link text in Cormorant Garamond (her pick, no. 4 on the font page) */
.f-cream2 .fp-link span { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 16px; }