/* Little Lock Book — homepage styles.
   Built from the 2026-09-18 homepage mock-up (desktop 1440 and mobile 390
   boards). Scoped to index.html on purpose: styles.css is shared by the legal,
   support and share pages and keeps their older Inter + navy look. The colours
   below are the mock-up's, which are a touch warmer than the app tokens in
   styles.css; if the two palettes ever need to converge, do it here. */

:root {
  --ground: #f5f0e8;
  --ground-deep: #efe8da;
  --sand: #e2d9c8;
  --sand-soft: #ebe3d3;
  --ink: #111a27;
  --ink-soft: #3d4556;
  --ink-mute: #5b6170;
  --gold: #d3ac56;
  --gold-deep: #7a5c1e;
  --navy-card: #1a2436;
  --navy-card-cover: #2a3650;
  --on-navy-mute: #c9ccd3;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --gutter: 24px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--ground);
}

a { color: var(--ink); }
a:hover { color: #3a4457; }

img { max-width: 100%; display: block; }

h1, h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
}

p { margin: 0; }

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ─── Header ─────────────────────────────────────────────────────────── */

/* Navy, as the app's header (Sophie, 2026-09-18: "the top banner in navy").
   Everything on it takes its colour from here: gold wordmark, cream links,
   and the Get the app pill inverts to gold so it still reads as the button. */
.top {
  background: var(--ink);
  color: var(--ground);
}

/* The keyhole mark and the wordmark together on the left, the actions on the
   right. (A centred mark was tried and reverted the same day; Sophie,
   2026-09-18: "Put the Logo back on the far left in front of Little Lock
   Book".) */
.top .wrap {
  min-height: 76px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: 0;
}

.brand .mark {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

/* Gold, as in the app's header (Sophie, 2026-09-18). The app sets it on
   navy; here it sits on cream, so the wordmark is a mark, not running text. */
.wordmark {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold);
}

.brand:hover .wordmark { color: #e0bd6c; }

.top nav {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 15px;
}

.top nav a { text-decoration: none; color: var(--ground); }
.top nav a:hover { color: var(--gold); }

.top .pill {
  background: var(--gold);
  color: var(--ink);
}

.top .pill:hover { background: #e0bd6c; color: var(--ink); }

/* The two text links only fit beside the wordmark from tablet up. */
.top nav .nav-link { display: none; }

/* ⛔ THE PILL MUST NOT RUN OFF A PHONE. At 390px the mark, the wordmark and
   "Get the app" at 12px 16px were about 392px with the gutters, so the pill's
   right edge was clipped on the homepage (seen in a 400px render, 2026-09-18).
   Smaller padding on the header pill alone below 480px; the wordmark stays. */
@media (max-width: 479px) {
  .top .pill { padding: 9px 12px; font-size: 13px; }
  .top .wrap { gap: 8px; }
}
/* And on the narrowest phones (360px) the wordmark itself comes down a size,
   or the pill sat on top of it. Checked in a 360px frame. */
@media (max-width: 399px) {
  .wordmark { font-size: 13px; letter-spacing: 0.06em; }
  .brand .mark { width: 44px; height: 44px; }
}

.pill {
  display: inline-block;
  background: var(--ink);
  color: var(--ground);
  padding: 12px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.pill:hover { color: var(--ground); background: #26304a; }

/* ─── Store buttons ──────────────────────────────────────────────────── */

/* A grid, not a flex row, so the two pills are the same width: sized by
   their text, Google's drew visibly shorter and read as the lesser option.
   Do not reword either button; the phrasings are the ones each store
   prescribes. */
.store-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 8px;
}

.store-btn {
  display: block;
  text-align: center;
  background: var(--ink);
  color: var(--ground);
  padding: 18px 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.store-btn:hover { color: var(--ground); background: #26304a; }

.availability {
  font-size: 14px;
  color: var(--ink-mute);
}

/* ─── Hero ───────────────────────────────────────────────────────────── */

.hero .wrap {
  padding-top: 40px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero h1 {
  font-size: 44px;
  line-height: 1.04;
}

.hero .lede {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* The mock-up trims some copy on mobile. .more is the desktop-only part of a
   sentence; .less is a shorter mobile-only version of a whole sentence. */
.more { display: none; }
.less { display: inline; }

/* A phone screenshot on a coloured plinth. The plinth's height comes from
   the image, so a taller image never clips. */
.plinth {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  border-radius: 24px;
  background: var(--sand-soft);
}

.plinth.gold { background: var(--gold); }
.plinth.sand { background: var(--sand); }

.plinth img {
  width: 280px;
  height: auto;
}

.plinth.wide img { width: 320px; }

.hero .plinth { margin-top: 12px; }
.hero .plinth img { width: 300px; }

/* Two phones in the hero: the home screen and a card. Stacked on a phone,
   side by side from tablet up. */
.plinth.pair {
  flex-direction: column;
  gap: 32px;
}

/* ─── People, places, products ───────────────────────────────────────── */

.kinds {
  border-top: 1px solid var(--sand);
  border-bottom: 1px solid var(--sand);
}

.kinds .wrap {
  padding-top: 48px;
  padding-bottom: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.kind {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kind h2 {
  font-size: 28px;
}

.kind p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ─── Feature sections ───────────────────────────────────────────────── */

.feature .wrap {
  padding-top: 56px;
  padding-bottom: 56px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.feature.deep { background: var(--ground-deep); }

.feature-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.feature h2 {
  font-size: 36px;
  line-height: 1.06;
}

.feature p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.feature .plinth { margin-top: 14px; }

/* ─── Starter lists ──────────────────────────────────────────────────── */

.starters {
  background: var(--ink);
  color: var(--ground);
}

.starters .wrap {
  padding-top: 56px;
  padding-bottom: 56px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.starters h2 {
  font-size: 36px;
  line-height: 1.06;
}

.starters .intro {
  font-size: 16px;
  line-height: 1.55;
  color: var(--on-navy-mute);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 170px;
  padding: 16px;
  border: 1px solid var(--gold);
  border-radius: 14px;
  background: var(--navy-card);
  color: var(--ground);
  text-decoration: none;
}

.tile:hover { color: var(--ground); background: #22304a; }

/* The six Australia-wide editorial lists, with the same hero photographs the
   app's tiles use (assets/images/tiles). Names and one-line descriptions are
   copied from Firestore; if a list is renamed there, change it here too. */
.tile {
  padding: 0;
  overflow: hidden;
}

.tile .cover {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.tile .body { padding: 14px 16px 16px; }

.tile .body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.tile .name {
  display: block;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.1;
}

.tile .teaser {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--on-navy-mute);
}

.tile .open {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--gold);
}

.tile .open svg { flex-shrink: 0; }

/* ─── For curators / for businesses ──────────────────────────────────── */

.partners .wrap {
  padding-top: 56px;
  padding-bottom: 56px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 28px;
  background: #ffffff;
  border: 1px solid var(--sand);
  border-radius: 18px;
}

.card .card-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card h2 { font-size: 30px; }

.card p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.card .cta {
  display: inline-block;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 600;
}

/* ─── Get the app ────────────────────────────────────────────────────── */

.get {
  background: var(--gold);
  text-align: center;
}

.get .wrap {
  padding-top: 64px;
  padding-bottom: 64px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}

.get h2 {
  font-size: 42px;
  line-height: 1.05;
}

.get p {
  font-size: 17px;
  line-height: 1.5;
}

.get .store-links { margin-top: 0; }

/* ─── Footer ─────────────────────────────────────────────────────────── */

/* Centred, as the current site's footer is (Sophie, 2026-09-18): the links
   in a row, then the copyright mark and the company line under them. */
.foot .wrap {
  padding-top: 32px;
  padding-bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
}

.foot nav {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.foot nav a { padding: 12px 0; }

/* The copyright mark and company line, as on every other page of the site. */
.foot .entity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.site-copyright {
  width: 110px;
  height: auto;
  opacity: 0.85;
}

.site-entity {
  font-size: 13px;
  color: var(--ink-mute);
}

/* ─── Tablet and up ──────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .store-links { grid-template-columns: 1fr 1fr; }
  .get .store-links { justify-content: center; grid-template-columns: repeat(2, minmax(0, 280px)); }
  .get .wrap { align-items: center; }
  .kinds .wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .partners .wrap { grid-template-columns: 1fr 1fr; gap: 24px; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plinth.pair { flex-direction: row; align-items: flex-start; }
  .hero .plinth.pair img { width: 260px; }
}

/* ─── Desktop ────────────────────────────────────────────────────────── */

/* ⛔ THE TEXT LINKS ONLY WHERE THEY FIT (Sophie, 2026-09-18: "the fonts at top
   cover each other if the screen is shrunk"). At 1024px the 80px mark, the
   26px wordmark and three nav items do not share one row: the links wrapped
   to two lines under the wordmark. Up to 1200px the header is the mark, the
   wordmark and the pill; the two text links join from there, on one line. */
@media (min-width: 1200px) {
  .top nav .nav-link { display: inline; white-space: nowrap; }
}

@media (min-width: 1024px) {
  :root { --gutter: 96px; }

  .top .wrap { min-height: 116px; padding-top: 16px; padding-bottom: 16px; }
  .brand { gap: 18px; }
  .brand .mark { width: 80px; height: 80px; }
  .wordmark { font-size: 26px; letter-spacing: 0.14em; }
  .more { display: inline; }
  .less { display: none; }
  .pill { padding: 13px 22px; font-size: 15px; }

  .hero .wrap {
    padding-top: 80px;
    padding-bottom: 80px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
  }

  .hero-copy { max-width: 520px; gap: 24px; }
  .hero h1 { font-size: 64px; line-height: 1.02; letter-spacing: -0.01em; }
  .hero .lede { font-size: 20px; }
  .hero .store-links { grid-template-columns: repeat(2, minmax(0, 280px)); }

  .hero .plinth {
    margin-top: 0;
    flex-shrink: 0;
    width: 460px;
    padding: 38px 0;
    border-radius: 28px;
  }
  .hero .plinth img { width: 350px; }
  .hero .plinth.pair { width: 640px; padding: 40px 0; gap: 28px; }
  .hero .plinth.pair img { width: 290px; }

  .kinds .wrap { padding-top: 64px; padding-bottom: 64px; gap: 48px; }
  .kind h2 { font-size: 32px; }
  .kind p { font-size: 17px; }

  .feature .wrap {
    padding-top: 96px;
    padding-bottom: 96px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 96px;
  }

  /* Alternate the picture's side, as the mock-up does. */
  .feature.flip .wrap { flex-direction: row-reverse; }

  .feature-copy { max-width: 600px; gap: 22px; }
  .feature h2 { font-size: 56px; line-height: 1.05; }
  .feature p { font-size: 19px; line-height: 1.55; }

  .feature .plinth {
    margin-top: 0;
    flex-shrink: 0;
    width: 460px;
    padding: 40px 0;
    border-radius: 28px;
  }
  .feature .plinth img { width: 330px; }
  .feature .plinth.wide { width: 500px; }
  .feature .plinth.wide img { width: 450px; }

  .starters .wrap { padding-top: 88px; padding-bottom: 88px; gap: 48px; }
  .starters h2 { font-size: 56px; max-width: 560px; }
  .starters .intro { font-size: 17px; max-width: 640px; }

  .tiles { gap: 20px; margin-top: 0; }

  .tile {
    flex-direction: row;
    justify-content: flex-start;
    min-height: 200px;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
  }

  .tile .cover {
    width: 150px;
    height: auto;
    aspect-ratio: auto;
    align-self: stretch;
    flex-shrink: 0;
  }

  .tile .body { padding: 22px; }

  .tile .name { font-size: 28px; }

  .tile .teaser { margin-top: 8px; font-size: 14px; line-height: 1.45; }

  .tile .open { margin-top: 0; gap: 8px; font-size: 13px; }

  .partners .wrap { padding-top: 80px; padding-bottom: 80px; gap: 32px; }
  .card { padding: 40px; border-radius: 20px; min-height: 280px; }
  .card .card-copy { gap: 12px; }
  .card h2 { font-size: 36px; }
  .card p { font-size: 17px; line-height: 1.55; }
  .card .cta { padding: 0; }

  .get .wrap { padding-top: 96px; padding-bottom: 96px; gap: 28px; }
  .get h2 { font-size: 64px; }
  .get p { font-size: 19px; }

  .foot .wrap { padding-top: 48px; padding-bottom: 48px; }
  .foot nav a { padding: 0; }
}