/* Flicker website: look B2 "Forest" led by Andrew's singing bird logo and the Bricolage wordmark, with the riso flicker drawings as spots
   (picked 2026-11-02). Colors follow ios/Flock/Views/Theme.swift; paper and ink come from the drawings. */

@font-face { font-family: Geist; font-weight: 400; font-display: swap; src: url(/assets/fonts/geist-400.woff2) format("woff2"); }
@font-face { font-family: Geist; font-weight: 500; font-display: swap; src: url(/assets/fonts/geist-500.woff2) format("woff2"); }
@font-face { font-family: Geist; font-weight: 600; font-display: swap; src: url(/assets/fonts/geist-600.woff2) format("woff2"); }
@font-face { font-family: Bricolage; font-weight: 800; font-display: swap; src: url(/assets/fonts/bricolage-800.woff2) format("woff2"); }

:root {
  --forest: #0E4D3A;
  --forest-deep: #0A3A2C;  /* text on coral */
  --coral: #FF7A66;
  --paper: #F2EBDA;
  --page: #F4F5F1;
  --text: #1B2420;
  --text-soft: #4A524E;
  --on-forest: rgba(255, 255, 255, .78);
  --gutter: 32px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 400 18px/1.55 Geist, -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: #fff; padding: 8px 14px; z-index: 9; }

.wm { display: block; font: 800 34px/1 Bricolage, Geist, sans-serif; letter-spacing: -.025em; color: var(--coral); white-space: nowrap; }
.logo { display: block; aspect-ratio: 196 / 210; height: auto; }
/* The app's LogoLockup (#155): the word as tall as the bird (font size = the bird's height, set as the
   lockup's font size), 0.2 of it apart, its letters centered 56% down the bird: .56 - .475 = .085em. */
.lockup, .mark { display: flex; align-items: flex-start; gap: .2em; }
.lockup { font-size: 34px; }
.lockup .glyph, .mark .logo { display: block; height: 1em; width: auto; aspect-ratio: 196 / 210; flex: none; }
.lockup .wm, .mark .wm { font-size: 1em; margin-top: .085em; }

/* forest top */
.top { background: var(--forest); color: #fff; position: relative; z-index: 2; }
.glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.glow::before { content: ""; position: absolute; right: -180px; top: -160px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 122, 102, .32), rgba(255, 122, 102, 0) 70%); }
.glow::after { content: ""; position: absolute; left: -200px; bottom: -60px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(102, 179, 106, .22), rgba(102, 179, 106, 0) 70%); }

.nav { display: flex; align-items: center; justify-content: space-between; padding: 26px 0; position: relative; }
.nav .home { display: block; text-decoration: none; }
.nav .links { display: flex; align-items: center; gap: 28px; font-weight: 500; font-size: 16px; color: rgba(255, 255, 255, .88); }
.nav .links a { text-decoration: none; }
.nav .links a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 26px; border-radius: 999px;
  font: 600 17px Geist, sans-serif; text-decoration: none; white-space: nowrap;
  transition: transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 20px; height: 20px; }
.btn-coral { background: var(--coral); color: var(--forest-deep); }
.btn-small { height: 44px; padding: 0 20px; font-size: 16px; }
.nav .links .btn-small { text-decoration: none; color: var(--forest-deep); }

/* home hero: the bird logo and the wordmark, big */
.hero { text-align: center; padding: 64px 0 0; }
.mark { display: inline-flex; margin: 0; font-size: clamp(96px, 15vw, 216px); }
.tag { font: 600 clamp(26px, 3vw, 38px)/1.2 Geist, sans-serif; letter-spacing: -.02em; margin: 36px 0 12px; }
.lede { font-size: 19px; line-height: 1.5; color: var(--on-forest); max-width: 44ch; margin: 0 auto 30px; }

.phones { display: flex; justify-content: center; align-items: flex-start; gap: 28px; margin-top: 80px; height: 420px; }
.phones .phone { width: 270px; }
.phones .phone.side { margin-top: 70px; width: 250px; }

.phone {
  position: relative; width: 210px; flex: none;
  border-radius: 44px; background: #0b0b0b; padding: 10px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45), inset 0 0 0 1.5px #2a2a2a;
}
.phone img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; border-radius: 35px; }
.phone::after { content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 30%; height: 21px; border-radius: 12px; background: #000; }

/* light page */
main { position: relative; overflow: hidden; padding: 56px 0 80px; }
.p-index main { padding-top: 300px; }
.p-404 main { padding: 0; }
.p-404 { background: var(--forest); }
.blob { position: absolute; border-radius: 50%; pointer-events: none; }
.b1 { top: 300px; right: -160px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(255, 122, 102, .26), rgba(255, 122, 102, 0) 70%); }
.b2 { top: 900px; left: -200px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(62, 154, 114, .18), rgba(62, 154, 114, 0) 70%); }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.card {
  background: rgba(255, 255, 255, .66); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-radius: 30px; padding: 30px 30px 0; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 30px -12px rgba(14, 77, 58, .18);
}
.card .spot { width: 76px; height: 76px; margin: 4px 0 22px 4px; }
.spot { display: block; border-radius: 50%; object-fit: cover; background: var(--paper); box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--coral); }
.card h2 { font: 600 26px/1.2 Geist, sans-serif; letter-spacing: -.02em; color: var(--forest); margin: 0 0 8px; }
.card p { font-size: 17px; line-height: 1.5; color: var(--text-soft); margin: 0 0 26px; max-width: 36ch; }
.card .shot { margin: auto auto 36px; width: min(290px, 74%); }

.recap {
  margin: 22px 0 0; background: var(--forest); color: #fff; border-radius: 30px; padding: 56px;
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; overflow: hidden;
}
.recap .n { font: 800 clamp(90px, 12vw, 170px)/.85 Bricolage, Geist, sans-serif; letter-spacing: -.04em; color: var(--coral); }
.recap h2 { font: 800 40px/1.1 Bricolage, Geist, sans-serif; letter-spacing: -.02em; margin: 8px 0 18px; }
.recap p:not(.n) { font-size: 19px; line-height: 1.5; color: var(--on-forest); max-width: 34ch; margin: 0 0 30px; }
.recap .phone { width: 220px; margin-bottom: -150px; align-self: start; }

/* privacy, support */
.doctop { display: flex; align-items: center; gap: 30px; padding: 18px 0 52px; }
.doctop .spot { width: 112px; height: 112px; flex: none; box-shadow: 0 0 0 5px var(--forest), 0 0 0 9px var(--coral); }
.doctop h1 { font: 600 clamp(44px, 5.4vw, 64px)/1 Geist, sans-serif; letter-spacing: -.035em; margin: 0; }
.doctop .date { color: var(--on-forest); font-size: 16px; margin-top: 10px; }
.doc { max-width: 720px; position: relative; }
.doc h2 { font: 600 26px/1.25 Geist, sans-serif; letter-spacing: -.02em; color: var(--forest); margin: 44px 0 12px; }
.doc p, .doc li { color: var(--text-soft); }
.doc p { margin: 0 0 16px; }
.doc ul { padding-left: 22px; margin: 0 0 16px; }
.doc li { margin-bottom: 10px; }
.doc strong { color: var(--text); font-weight: 600; }
.doc a { color: var(--forest); text-underline-offset: 3px; }
.doc .lead { font-size: 21px; line-height: 1.5; color: var(--text); }
.qa { border-top: 1px solid rgba(14, 77, 58, .14); padding: 22px 0 6px; }
.qa h3 { font: 600 19px/1.35 Geist, sans-serif; color: var(--forest); margin: 0 0 8px; }

/* 404 */
.lost { padding: 56px 0 110px; }
.lost .logo { height: 200px; width: auto; margin: 0 auto 30px; }
.lost h1 { font: 600 clamp(36px, 4.4vw, 54px)/1.1 Geist, sans-serif; letter-spacing: -.03em; margin: 0 0 14px; }

/* footer */
.foot { background: var(--forest); color: rgba(255, 255, 255, .82); font-weight: 500; font-size: 15px; }
.foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding-top: 40px; padding-bottom: 44px; }
.foot .lockup { font-size: 27px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 24px; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 760px) {
  :root { --gutter: 16px; }
  body { font-size: 17px; }
  .nav { padding: 18px 0; }
  .nav .links { gap: 18px; }
  .nav .links .hide { display: none; }
  .lockup { font-size: 30px; }
  .hero { padding-top: 40px; }
  .mark { font-size: 21vw; }
  .tag { margin-top: 26px; }
  .lede { font-size: 17px; }
  .lost { padding: 36px 0 72px; }
  .lost .logo { height: 140px; }
  .phones { gap: 0; height: 300px; margin-top: 44px; }
  .phones .phone { width: 200px; border-radius: 34px; padding: 8px; }
  .phones .phone img { border-radius: 27px; }
  .phones .phone.side { display: none; }
  .p-index main { padding-top: 150px; }
  main { padding: 36px 0 56px; }
  .grid { grid-template-columns: 1fr; }
  .card { padding: 26px 24px 0; }
  .card .shot { width: min(250px, 76%); border-radius: 38px; padding: 9px; margin-bottom: 28px; }
  .card .shot img { border-radius: 30px; }
  .card .shot::after { top: 17px; height: 18px; }
  .recap { grid-template-columns: 1fr; padding: 36px 24px 0; }
  .recap h2 { font-size: 32px; }
  .recap p:not(.n) { font-size: 17px; }
  .recap .phone { width: 170px; margin: 0 auto -60px; border-radius: 30px; padding: 7px; }
  .recap .phone img { border-radius: 24px; }
  .recap .phone::after { top: 13px; height: 14px; }
  .doctop { gap: 20px; padding: 8px 0 36px; }
  .doctop .spot { width: 80px; height: 80px; box-shadow: 0 0 0 4px var(--forest), 0 0 0 7px var(--coral); }
  .doc .lead { font-size: 19px; }
  .foot .wrap { flex-direction: column; align-items: flex-start; padding-top: 34px; padding-bottom: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}