/* Promenade site. Colors come from the Grain Gradient theme in
   ArtSources/themes.py; Kalam for titles, the system font for everything else,
   the same split the app uses. */

@font-face {
  font-family: "Kalam";
  src: url("Kalam-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #483c74;
  --text: #3d3450;
  --muted: #574e6e;
  --card: #ffffff;
  --tape: rgba(240, 200, 180, 0.9);
  --line: rgba(72, 60, 116, 0.18);
  --mint: #faf6ee;
  /* Held at plain mint for the first 96px so the sticky title bar, which
     Safari needs to be one solid colour, sits on matching page. */
  --page:
    radial-gradient(ellipse at 100% 60%, rgba(250, 224, 214, 0.55), transparent 50%),
    linear-gradient(180deg, var(--mint) 0, var(--mint) 96px, #e6daf4 75%);
}

* { box-sizing: border-box; }

/* Safari paints the strips behind its toolbars flat from this colour, with no
   grain. The grain below has light and dark specks that cancel out, so the
   textured page averages to this same colour and those strips can't show. */
html { -webkit-text-size-adjust: 100%; background-color: #f5f1eb; }

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

/* Watercolour washes, held still behind the page as it scrolls. They fade to
   plain paper well before the top and bottom of the screen, so the header and
   Safari's toolbars only ever sit on flat paper and can't show a seam. */
body::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 30% at 10% 42%, rgba(190, 230, 210, 0.95), transparent 72%),
    radial-gradient(ellipse 70% 32% at 92% 60%, rgba(222, 208, 244, 0.95), transparent 72%),
    radial-gradient(ellipse 45% 18% at 88% 30%, rgba(250, 212, 198, 0.85), transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 90px, #000 230px, #000 calc(100% - 240px), transparent calc(100% - 110px));
  mask-image: linear-gradient(to bottom, transparent 0, transparent 90px, #000 230px, #000 calc(100% - 240px), transparent calc(100% - 110px));
}

/* Film grain, like the app's page: purple specks and warm light specks,
   balanced to average out to the page colour (measured within half a shade). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.28 0 0 0 0 0.24 0 0 0 0 0.45 0 0 0 0.088 0'/%3E%3C/filter%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.984 0 0 0 0 0.88 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23d)'/%3E%3Crect width='100%' height='100%' filter='url(%23l)'/%3E%3C/svg%3E");
}

a { color: var(--ink); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

.kalam { font-family: "Kalam", "Bradley Hand", cursive; font-weight: 700; }

main, header, footer { position: relative; }

.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 680px; }

/* Home */

.hero {
  display: grid;
  gap: 36px;
  justify-items: center;
  text-align: center;
  padding: 36px 0 8px;
}
@media (min-width: 820px) {
  .hero { padding-top: 64px; gap: 44px; }
  .phone { width: 300px; }
}
.hero h1 {
  font-family: "Kalam", cursive; font-weight: 700;
  color: var(--ink);
  font-size: clamp(2.6rem, 9vw, 4.4rem);
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
}
.lead { font-size: 1.25rem; margin: 18px 0 0; }

/* The app, on a phone. */
.phone {
  width: min(250px, 66vw);
  padding: 6px;
  border-radius: 40px;
  background: #3a3350;
  box-shadow: 0 18px 40px rgba(61, 52, 80, 0.22);
}
.phone img { display: block; width: 100%; height: auto; border-radius: 34px; }

.features {
  display: grid;
  gap: 64px;
  max-width: 820px; margin: 0 auto;
  padding: 72px 0 16px;
}

/* Each postcard beside its words, swapping sides down the page. */
.card { display: grid; gap: 22px; text-align: center; }
.card .pc { position: relative; justify-self: center; width: min(360px, 88%); }
/* The postcard art has a soft paper margin with rounded corners round it.
   Cropping to just inside the card gives every postcard a clean edge. */
.card .crop {
  display: block; aspect-ratio: 653 / 443; overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(61, 52, 80, 0.12), 0 10px 24px rgba(61, 52, 80, 0.16);
  transform: rotate(-2deg);
}
.card:nth-of-type(even) .crop { transform: rotate(1.8deg); }
.card .crop img {
  display: block; width: 110.26%; max-width: none; height: auto;
  margin: -5.054% 0 0 -5.054%;
}
.card .pc::before {
  content: "";
  position: absolute; z-index: 1;
  top: -10px; left: 50%;
  width: 76px; height: 20px; margin-left: -38px;
  background: var(--tape);
  transform: rotate(-4deg);
}
.card h2 {
  font-family: "Kalam", cursive; font-weight: 700;
  color: var(--ink);
  font-size: 1.9rem; line-height: 1.2;
  margin: 0 0 6px;
}
.card p { margin: 0 auto; max-width: 34ch; font-size: 1.05rem; }
@media (min-width: 720px) {
  .card { grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; text-align: left; }
  .card:nth-of-type(even) .pc { order: 2; }
  .card .pc { width: 100%; }
  .card p { margin: 0; }
}

.promise { text-align: center; padding: 40px 0 8px; }
.promise blockquote {
  font-family: "Kalam", cursive; font-weight: 700;
  color: var(--ink);
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  line-height: 1.35;
  margin: 0;
}
.promise p { margin: 18px 0 0; }
.promise blockquote span { display: inline-block; }

.soon {
  display: inline-block;
  margin-top: 26px;
  padding: 10px 22px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
}

/* Inner pages */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  /* One solid colour: Safari only fills the strip behind the clock from that. */
  /* The page's paper as it looks under the grain, which the bar sits above. */
  background: #f5f1eb;
}
.bar-inner {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 16px;
}
.bar-inner .home-link { margin-right: auto; }
.bar-right { display: flex; align-items: center; gap: 6px; }
.bar-contact { display: none; }

.pill {
  display: inline-flex; align-items: center;
  min-height: 34px; padding: 0 14px;
  border-radius: 999px;
  background: var(--ink); color: #fff;
  font-size: 0.9rem; font-weight: 600; white-space: nowrap;
}

.menu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; height: 44px; margin-right: -8px; padding: 0 8px;
  border: 0; background: none; color: var(--ink); cursor: pointer;
  font: inherit; font-weight: 600;
}
.menu-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-btn .icon-close, .menu-btn[aria-expanded="true"] .icon-open { display: none; }
.menu-btn[aria-expanded="true"] .icon-close { display: block; }
.menu-label { display: none; }

/* On wider screens the bar spans the whole window in three parts, like a
   storefront: Contact on the left, the name in the middle, Menu on the right. */
@media (min-width: 720px) {
  .bar-inner {
    display: grid; grid-template-columns: 1fr auto 1fr;
    padding: 14px 48px;
  }
  .bar-inner .home-link { margin: 0; font-size: 1.9rem; gap: 12px; }
  .bar-inner .home-link img { width: 42px; height: 42px; border-radius: 10px; }
  .bar-contact {
    display: inline-flex; align-items: center; gap: 8px; justify-self: start;
    min-height: 44px;
    color: var(--ink); font-weight: 600; text-decoration: none;
  }
  .bar-contact:hover { text-decoration: underline; }
  .bar-contact svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
  .bar-right { justify-self: end; gap: 18px; }
  .menu-label { display: inline; }
  .menu-btn { margin-right: 0; }
}

/* The menu: a sheet of paper torn off the top of the page, like the app's
   panels. Only used on phones; the links sit in the bar on wider screens. */
.menu {
  position: fixed; left: 0; right: 0; top: 56px;
  z-index: 9;
  filter: drop-shadow(0 10px 14px rgba(61, 52, 80, 0.18));
}
.menu nav {
  display: flex; flex-direction: column;
  padding: 8px 16px 34px;
  background: #f5f1eb;
  clip-path: polygon(0 0, 100% 0, 100.0% calc(100% - 2.9px), 97.0% calc(100% - 5.9px), 94.3% calc(100% - 4.8px), 90.7% calc(100% - 0.5px), 86.7% calc(100% - 0.3px), 82.9% calc(100% - 0.6px), 80.1% calc(100% - 3.8px), 75.2% calc(100% - 1.1px), 72.0% calc(100% - 5.6px), 66.6% calc(100% - 5.2px), 63.0% calc(100% - 8.8px), 60.3% calc(100% - 7.7px), 56.9% calc(100% - 1.3px), 54.1% calc(100% - 2.8px), 49.1% calc(100% - 1.6px), 44.9% calc(100% - 5.8px), 41.3% calc(100% - 4.9px), 38.6% calc(100% - 0.5px), 35.5% calc(100% - 6.1px), 31.7% calc(100% - 2.8px), 27.4% calc(100% - 4.1px), 24.0% calc(100% - 7.1px), 19.4% calc(100% - 2.2px), 15.2% calc(100% - 4.7px), 10.1% calc(100% - 6.6px), 6.7% calc(100% - 8.8px), 3.9% calc(100% - 3.8px), 0 calc(100% - 4px));
}
.menu a {
  display: flex; align-items: center;
  min-height: 56px;
  font-family: "Kalam", cursive; font-weight: 700;
  font-size: 1.9rem; color: var(--ink); text-decoration: none;
  border-bottom: 1px dashed var(--line);
}
.menu a:last-child { border-bottom: 0; }
@media (min-width: 720px) {
  .menu { top: 72px; left: auto; right: 28px; width: 340px; }
  .menu nav { padding: 12px 28px 40px; }
}
.home-link {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  text-decoration: none;
  font-family: "Kalam", cursive; font-weight: 700;
  font-size: 1.6rem;
  color: var(--ink);
}
.home-link img { width: 40px; height: 40px; border-radius: 9px; }

.page h1 {
  font-family: "Kalam", cursive; font-weight: 700;
  color: var(--ink);
  font-size: clamp(2.4rem, 7vw, 3rem);
  line-height: 1.15;
  margin: 28px 0 4px;
}
.page h2 { color: var(--ink); font-size: 1.15rem; margin: 1.9em 0 0.3em; }
.page p, .page li { max-width: 68ch; }
.updated { color: var(--muted); font-size: 0.95rem; margin-top: 0; }

.sheet {
  background: var(--card);
  padding: 24px 24px 28px;
  margin-top: 20px;
  box-shadow: 0 2px 4px rgba(61, 52, 80, 0.08), 0 10px 24px rgba(61, 52, 80, 0.10);
}
.sheet > :first-child { margin-top: 0; }
.email { font-size: 1.15rem; font-weight: 600; word-break: break-word; }

/* Footer */

footer { padding: 56px 0 40px; text-align: center; font-size: 0.95rem; }
footer nav { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
footer nav a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 10px;
}
footer nav span { align-self: center; color: var(--muted); }

/* Computer: the postcards sit in a pile. Pointing at it shuffles through them:
   the top one slides off and tucks under the others, and the words beside it
   change to match. Nothing moves unless someone points at it or clicks. */
.pile-next { display: none; }
@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1.1fr 0.9fr; align-items: center;
    justify-items: start; text-align: left; gap: 24px;
    padding-top: 40px;
  }
  .hero .phone { justify-self: center; width: 260px; transform: rotate(3deg); }

  .features.pile {
    position: relative; display: grid;
    grid-template-columns: 440px 1fr; column-gap: 64px; align-items: center;
    max-width: 880px; padding: 88px 0 24px;
  }
  .features.pile .card {
    grid-area: 1 / 1 / 2 / 3;
    display: grid; grid-template-columns: 440px 1fr; column-gap: 64px; align-items: center;
    text-align: left; pointer-events: none;
  }
  .features.pile .card .pc { order: 0; width: 100%; transition: transform 0.6s cubic-bezier(.2,.7,.2,1), opacity 0.4s; }
  .features.pile .card .crop, .features.pile .card:nth-of-type(even) .crop { transform: none; }
  /* No tape here: these postcards move, so nothing would be holding them. */
  .features.pile .card .pc::before { display: none; }
  .features.pile .card .txt { opacity: 0; transform: translateY(8px); transition: opacity 0.4s, transform 0.4s; }
  .features.pile .card[data-depth="0"] { z-index: 4; }
  .features.pile .card[data-depth="0"] .txt { opacity: 1; transform: none; transition-delay: 0.15s; }
  .features.pile .card[data-depth="1"] { z-index: 3; }
  .features.pile .card[data-depth="1"] .pc { transform: translate(-14px, 10px) rotate(-5deg); }
  .features.pile .card[data-depth="2"] { z-index: 2; }
  .features.pile .card[data-depth="2"] .pc { transform: translate(16px, 14px) rotate(4.5deg); }
  .features.pile .card[data-depth="3"] { z-index: 1; }
  .features.pile .card[data-depth="3"] .pc { transform: translate(2px, 20px) rotate(-1.5deg); }
  .features.pile .card.leaving { z-index: 5; }
  .features.pile .card.leaving .pc { transform: translate(-125%, 30px) rotate(-14deg); opacity: 0; }
  .features.pile .card.leaving .txt { opacity: 0; transition-delay: 0s; }
  .features.pile .card .txt h2 { font-size: 2.2rem; }
  .features.pile .card .txt p { margin: 0; font-size: 1.15rem; max-width: 30ch; }

  .features.pile .pile-next {
    display: block; position: absolute; z-index: 6;
    left: 0; top: 88px; width: 440px; aspect-ratio: 653 / 443;
    border: 0; background: none; cursor: pointer; border-radius: 4px;
  }
  .features.pile .pile-next:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .features.pile .card .pc, .features.pile .card .txt { transition: none !important; }
}

/* Between phone and computer (an iPad held upright), the alternating postcards
   came within a few pixels of the window edge. */
@media (min-width: 720px) and (max-width: 899px) {
  main.wrap { padding-left: 48px; padding-right: 48px; }
}