/* Patois Pal home page: the app's cut-paper look.
   Sand paper page, poster headings in brand red and gold, green buttons, torn-paper bands. */

:root {
  --paper: #f3e6c8;
  --paper-deep: #ead8b0;
  --cream: #fff8e6;
  --fringe: #fdf5e3;
  --ink: #1d2a1c;
  --ink-soft: #4b5440;
  --red: #96211a;
  --red-deep: #6e1210;
  --gold: #ffcf40;
  --gold-deep: #c79112;
  --green: #266f33;
  --green-deep: #12421c;
  --leaf: #37a84a;
  --sky: #8cc4ea;
  --sea: #2fa3d6;
  --orange: #fa7a1f;
  --shadow: rgba(61, 36, 13, 0.22);

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --display: "Archivo", "Arial Black", system-ui, sans-serif;
  --text: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sign: "Londrina Solid", "Archivo", system-ui, sans-serif;

  /* Fibre texture laid over every paper surface */
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
  --tear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 26' preserveAspectRatio='none'%3E%3Cpath d='M0 0H600L600 11.2L596 21.2L584 11.9L574 6.1L565 15.4L554 9.7L546 8.8L538 21.3L524 11.7L513 10.5L499 19.1L484 14.8L473 7.3L459 12.3L450 8.1L437 6.9L429 8.7L419 6.4L406 12.2L397 19.2L381 16.4L368 7.0L356 13.6L340 19.4L330 15.3L318 17.1L309 20.0L297 18.2L284 6.6L273 8.4L260 12.7L253 21.7L244 17.7L229 14.4L217 9.9L204 18.7L195 13.3L183 11.0L173 16.9L165 7.0L158 14.8L149 16.2L137 8.9L123 10.9L116 8.3L107 19.7L100 21.6L90 15.2L75 16.0L66 8.0L52 12.8L45 7.1L35 6.6L24 6.9L14 14.6L8 16.4L0 11.2Z'/%3E%3C/svg%3E");
  --tear-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 26' preserveAspectRatio='none'%3E%3Cpath d='M0 0H600L600 14.2L594 8.3L580 20.5L572 8.0L564 17.6L549 12.4L539 21.5L525 11.3L511 8.9L500 18.0L486 20.6L474 7.4L460 16.4L449 19.4L434 16.0L426 9.1L418 9.5L408 21.3L392 21.0L382 21.3L369 10.1L360 6.4L354 11.7L342 9.6L329 19.1L315 19.6L299 19.0L291 11.3L277 14.5L263 8.7L254 10.2L241 19.8L225 14.4L219 14.7L211 14.5L196 6.4L188 19.3L180 11.5L172 7.4L162 13.5L146 19.6L139 11.8L129 10.0L122 15.8L107 6.4L97 7.6L90 6.0L83 11.4L76 9.3L69 7.0L56 7.7L46 12.3L33 20.0L19 20.4L12 16.8L0 14.2Z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fibre), var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 10; padding: 8px 14px; background: var(--cream); border-radius: 8px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

/* Type */

.poster {
  font-family: var(--display);
  font-stretch: 125%;
  font-style: italic;
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--red);
  text-shadow: 0.045em 0.05em 0 var(--gold);
  text-wrap: balance;
}

.h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }

.lede {
  font-size: clamp(1.06rem, 1.6vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 34em;
  text-wrap: pretty;
}

.kicker {
  display: inline-block;
  font-family: var(--sign);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green);
}

/* Paper pieces */

.paper {
  position: relative;
  background: var(--fibre), var(--cream);
  border-radius: 6px 9px 7px 10px / 9px 6px 10px 7px;
  box-shadow: 1px 2px 0 rgba(61, 36, 13, 0.1), 3px 6px 14px var(--shadow);
}

.tape {
  position: absolute;
  top: -11px;
  left: 50%;
  width: 84px;
  height: 24px;
  translate: -50% 0;
  rotate: -3deg;
  background: rgba(255, 214, 92, 0.78);
  box-shadow: 0 1px 2px rgba(61, 36, 13, 0.15);
  clip-path: polygon(2% 8%, 98% 0, 100% 92%, 1% 100%);
}

.sticker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 8px;
  background: var(--gold);
  color: var(--red-deep);
  font-family: var(--sign);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  rotate: -2deg;
  box-shadow: 2px 3px 0 var(--red-deep);
  clip-path: polygon(0 6%, 4% 0, 97% 3%, 100% 90%, 95% 100%, 2% 96%);
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 14px;
  background: var(--green);
  color: var(--cream);
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 5px 0 var(--green-deep);
  transition: translate 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:hover { background: #2d8040; }
.btn:active { translate: 0 4px; box-shadow: 0 1px 0 var(--green-deep); }
.btn--small { min-height: 42px; padding: 0 18px; font-size: 0.8rem; border-radius: 12px; box-shadow: 0 4px 0 var(--green-deep); }
.btn--gold { background: var(--gold); color: var(--red-deep); box-shadow: 0 5px 0 var(--gold-deep); }
.btn--gold:hover { background: #ffd95e; }
.btn--cream { background: var(--cream); color: var(--green-deep); box-shadow: 0 5px 0 #c9b98d; }
.btn--cream:hover { background: #fff; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 22px 0 18px;
  border-radius: 14px;
  background: #111;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 5px 0 #000, 3px 10px 18px var(--shadow);
  transition: translate 0.15s ease, box-shadow 0.15s ease;
}
.badge:active { translate: 0 4px; box-shadow: 0 1px 0 #000; }
.badge svg { width: 28px; height: 28px; fill: currentColor; }
.badge-text { display: grid; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 600; font-size: 1.4rem; line-height: 1.05; letter-spacing: -0.01em; }
.badge-text small { font-size: 0.72rem; font-weight: 500; letter-spacing: 0; }

/* Sister-app bar */

.promo-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px var(--gutter);
  background: var(--green-deep);
  color: var(--cream);
  font-weight: 700;
  font-size: 0.92rem;
  text-align: center;
  text-decoration: none;
}
.promo-bar:hover { background: var(--green); }
.promo-tag { padding: 1px 9px 2px; border-radius: 6px; background: var(--gold); color: var(--red-deep); font-family: var(--sign); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.8rem; }
@media (max-width: 600px) { .promo-bar { font-size: 0.82rem; } .promo-more { display: none; } }

/* Nav */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: var(--display);
  font-stretch: 125%;
  font-style: italic;
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--red);
}
.brand img { width: 46px; height: 46px; border-radius: 23%; box-shadow: 2px 3px 0 var(--shadow); }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a:not(.btn) {
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}
.nav-links a:not(.btn):hover { background: var(--paper-deep); }
@media (max-width: 760px) { .nav-links a:not(.btn) { display: none; } .brand span { font-size: 1.15rem; } }


/* Panels: big rounded colour cards, each with a cut-paper sun */

body { background: var(--fibre), #fbf0d6; }

.panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100% - 2 * var(--gutter), 1320px);
  margin: 0 auto 28px;
  border-radius: clamp(28px, 4vw, 52px);
  background: var(--fibre), var(--bg, var(--gold));
  box-shadow: 0 2px 0 rgba(61, 36, 13, 0.08), 0 18px 40px -18px rgba(61, 36, 13, 0.45);
}
.panel-inner { position: relative; z-index: 2; width: min(100% - 2 * clamp(20px, 5vw, 72px), 1120px); margin-inline: auto; padding-block: clamp(48px, 7vw, 96px); }

.sun {
  position: absolute;
  z-index: -1;
  width: var(--size, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--fibre), var(--sun, var(--orange));
  box-shadow: 0 0 0 var(--ring, 46px) var(--sun-ring, rgba(255, 255, 255, 0.22)), 0 0 0 calc(var(--ring, 46px) * 2) var(--sun-ring2, rgba(255, 255, 255, 0.12));
}

.sea { position: absolute; z-index: 1; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(70px, 11vw, 150px); pointer-events: none; }

.on-dark .poster { color: var(--cream); text-shadow: 0.045em 0.05em 0 var(--red-deep); }
.on-dark .lede { color: rgba(255, 248, 230, 0.88); }
.on-dark .kicker { color: var(--gold); }

/* Hero */

.hero { --bg: #ffcf40; margin-top: 4px; }
.hero .sun { --size: clamp(380px, 46vw, 640px); --sun: #fa7a1f; --sun-ring: rgba(255, 150, 60, 0.35); --sun-ring2: rgba(255, 170, 80, 0.18); right: -6%; top: 50%; translate: 0 -55%; }
.hero .panel-inner { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 24px; padding-bottom: clamp(110px, 13vw, 170px); }
.hero .poster { font-size: clamp(2.7rem, 6.4vw, 5.4rem); text-shadow: 0.04em 0.045em 0 var(--cream); }
.hero .poster span { display: block; }
.hero .lede { margin-top: 20px; color: #4a3010; font-weight: 500; }
.hero .sticker { margin-bottom: 22px; background: var(--cream); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 30px; }
.meta { font-weight: 700; color: #4a3010; }

.hero-art { position: relative; height: clamp(420px, 44vw, 560px); }
.phone {
  position: absolute;
  width: clamp(180px, 19vw, 240px);
  border: 7px solid #17140f;
  border-radius: 34px;
  overflow: hidden;
  background: #17140f;
  box-shadow: 4px 8px 0 rgba(61, 36, 13, 0.25), 10px 26px 40px -10px rgba(61, 36, 13, 0.55);
}
.phone img { width: 100%; aspect-ratio: 600 / 1304; object-fit: cover; object-position: top; border-radius: 27px; }
.hero .phone--front { left: 6%; bottom: 0; rotate: -6deg; z-index: 2; }
.hero .phone--back { right: 4%; top: 0; rotate: 7deg; }

@media (max-width: 860px) {
  .hero .panel-inner { grid-template-columns: 1fr; padding-bottom: 90px; }
  .hero .sun { top: auto; bottom: -60px; right: -30%; translate: 0 0; --size: 460px; }
  .hero-art { height: 470px; max-width: 420px; width: 100%; margin-inline: auto; }
  .hero .phone { width: 190px; }
  .hero .phone--front { left: 2%; }
  .hero .phone--back { right: 2%; }
}

/* Story Mode: round windows into the places */

.story { --bg: var(--green); }
.story .sun { --size: 460px; --sun: var(--gold); --sun-ring: rgba(255, 207, 64, 0.16); --sun-ring2: rgba(255, 207, 64, 0.08); right: -150px; top: -190px; }
@media (max-width: 700px) { .story .sun { --size: 300px; right: -170px; top: -150px; } }
.story .head { max-width: 40em; }
.story .lede { margin-top: 16px; }

.places {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(22px, 3vw, 40px) clamp(16px, 2.6vw, 34px);
  margin-top: clamp(36px, 5vw, 56px);
}
.place { display: grid; justify-items: center; gap: 12px; text-align: center; }
.place:nth-child(odd) .disc { rotate: -3deg; }
.place:nth-child(even) .disc { rotate: 3deg; translate: 0 14px; }
.place:nth-child(even) h3 { translate: 0 14px; }
.disc {
  width: 100%;
  max-width: 230px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 8px solid var(--cream);
  box-shadow: 3px 6px 0 rgba(0, 0, 0, 0.22), 0 18px 30px -12px rgba(0, 0, 0, 0.5);
  background: var(--cream);
}
.disc img { width: 100%; height: 100%; object-fit: cover; }
.place h3 { font-family: var(--sign); font-weight: 900; font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.1; color: var(--cream); letter-spacing: 0.01em; }

.story .foot { display: flex; justify-content: center; margin-top: clamp(44px, 6vw, 64px); }

@media (max-width: 700px) {
  .places { grid-template-columns: repeat(8, 62%); overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 28px; margin-inline: -4px; scrollbar-width: none; }
  .places::-webkit-scrollbar { display: none; }
  .place { scroll-snap-align: center; }
}

/* Avatar */

.avatar { --bg: #8cc4ea; }
.avatar .sun { --size: clamp(380px, 40vw, 520px); --sun: #ffd96b; --sun-ring: rgba(255, 255, 255, 0.28); --sun-ring2: rgba(255, 255, 255, 0.14); right: 8%; top: 50%; translate: 0 -50%; }
.avatar .panel-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; }
.avatar .lede { margin-top: 18px; color: #173a52; }
.avatar .kicker { color: var(--red); }
.avatar-art { position: relative; height: clamp(440px, 42vw, 540px); }
.avatar .phone { left: 50%; top: 50%; translate: -50% -50%; rotate: 4deg; width: clamp(200px, 21vw, 250px); }
.avatar .sea { height: clamp(60px, 8vw, 110px); }

@media (max-width: 860px) {
  .avatar .panel-inner { grid-template-columns: 1fr; }
  .avatar .sun { top: auto; bottom: 0; right: 50%; translate: 50% 20%; --size: 420px; }
  .avatar-art { height: 470px; }
}

/* App tiles */

.tiles-head { text-align: center; margin: clamp(64px, 8vw, 100px) auto clamp(30px, 4vw, 44px); }
.tiles-head .poster { font-size: clamp(2.2rem, 5vw, 3.8rem); }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; width: min(100% - 2 * var(--gutter), 1320px); margin: 0 auto clamp(64px, 8vw, 100px); }
.tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 460px;
  padding: 28px 24px 0;
  border-radius: 36px;
  background: var(--fibre), var(--bg);
  box-shadow: 0 18px 34px -18px rgba(61, 36, 13, 0.45);
}
.tile::before { content: ""; position: absolute; z-index: -1; width: 300px; aspect-ratio: 1; border-radius: 50%; left: 50%; bottom: -120px; translate: -50% 0; background: var(--disc); }
.tile h3 { font-family: var(--display); font-stretch: 125%; font-style: italic; font-weight: 900; font-size: 1.6rem; line-height: 1; color: var(--head, var(--cream)); }
.tile p { margin-top: 8px; font-weight: 500; color: var(--body, rgba(255, 248, 230, 0.9)); }
.tile .phone { position: relative; width: 74%; margin: 26px auto 0; border-bottom: 0; border-radius: 30px 30px 0 0; box-shadow: 0 -2px 24px -6px rgba(0, 0, 0, 0.35); }
.tile .phone img { aspect-ratio: 600 / 760; border-radius: 23px 23px 0 0; }
.tile--gold { --bg: var(--gold); --disc: #fa9a3c; --head: var(--red); --body: #4a3010; }
.tile--red { --bg: #c8372b; --disc: #e86a45; }
.tile--sea { --bg: #2f8fc4; --disc: #67b7e0; }
.tile--green { --bg: var(--green); --disc: #3f9150; }

@media (max-width: 1040px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .tiles { grid-template-columns: repeat(4, 80%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
  .tiles::-webkit-scrollbar { display: none; }
  .tile { scroll-snap-align: center; min-height: 430px; }
}

/* Free on the web: one row of chunky links */

.web { text-align: center; margin-bottom: clamp(64px, 8vw, 100px); }
.web .kicker { color: var(--red); }
.web h2 { font-family: var(--display); font-stretch: 125%; font-style: italic; font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 4px; }
.web-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.web-links a {
  display: inline-flex; align-items: center; min-height: 50px; padding: 0 22px;
  border-radius: 999px; background: var(--cream); border: 3px solid var(--ink);
  font-weight: 800; text-decoration: none; box-shadow: 0 4px 0 var(--ink);
  transition: translate 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.web-links a:hover { background: var(--gold); }
.web-links a:active { translate: 0 3px; box-shadow: 0 1px 0 var(--ink); }

/* Closer */

.closer { --bg: var(--red); text-align: center; }
.closer .sun { --size: 620px; --sun: #c23a24; --sun-ring: rgba(255, 207, 64, 0.1); --sun-ring2: rgba(255, 207, 64, 0.06); left: 50%; top: 50%; translate: -50% -50%; }
.closer .panel-inner { display: grid; justify-items: center; gap: 22px; }
.closer-icon { width: 120px; border-radius: 27px; box-shadow: 4px 6px 0 rgba(0, 0, 0, 0.25); rotate: -4deg; }
.closer .poster { font-size: clamp(2.4rem, 6vw, 4.6rem); color: var(--gold); text-shadow: 0.045em 0.05em 0 var(--red-deep); }
.closer .lede { color: rgba(255, 248, 230, 0.9); }

/* Bless Up */

.sibling { display: flex; align-items: center; gap: 22px; width: min(100% - 2 * var(--gutter), 760px); margin: clamp(48px, 6vw, 72px) auto; padding: 20px 24px; border-radius: 28px; background: var(--cream); box-shadow: 0 12px 26px -16px rgba(61, 36, 13, 0.5); }
.sibling img { width: 76px; border-radius: 18px; flex: none; }
.sibling h2 { font-family: var(--display); font-stretch: 125%; font-style: italic; font-weight: 900; font-size: 1.35rem; color: var(--red); }
.sibling p { color: var(--ink-soft); font-size: 0.98rem; }
.sibling .btn { margin-left: auto; flex: none; }
@media (max-width: 600px) { .sibling { flex-wrap: wrap; } .sibling .btn { margin-left: 0; } }

/* Footer */

.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding-block: 28px 44px; border-top: 2px dashed rgba(75, 84, 64, 0.3); }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-links a { font-weight: 700; text-decoration: none; }
.footer-links a:hover { color: var(--red); text-decoration: underline; }
.footer-note { width: 100%; color: var(--ink-soft); font-size: 0.9rem; }
.footer-note a { color: inherit; }