/* Lexicove — lexicove.app
   The tide pool at low tide, ported to a page. Same tokens as App/Theme.swift,
   so the site and the game are the same object in two places. */

:root {
  --ground:    #D8C0A0;   /* dry sand */
  --ground-2:  #CBB08C;   /* damper sand, for the wash */
  --card:      #EADCC6;
  --card-2:    #F3E6D2;
  --ink:       #2E2216;
  --ink-soft:  #6B5539;
  --ink-faint: #91795A;
  --kelp:      #0C5765;
  --sea:       #146A78;
  --glass:     #1A7F8E;
  --sandglass: #BC8C48;
  --rule:      rgba(46, 34, 22, .14);
  --shadow:    rgba(46, 34, 22, .18);
  --bezel:     #1C1610;
  --radius:    20px;
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --sans: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
          "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:    #150F09;
    --ground-2:  #0C0805;
    --card:      #241A10;
    --card-2:    #2C2013;
    --ink:       #EADCC6;
    --ink-soft:  #B9A588;
    --ink-faint: #8A7659;
    --kelp:      #7FC7CF;
    --sea:       #59BCC8;
    --glass:     #166F7E;
    --sandglass: #C08F4F;
    --rule:      rgba(234, 220, 198, .16);
    --shadow:    rgba(0, 0, 0, .5);
    --bezel:     #000;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--sea); text-underline-offset: .2em; }

.wrap { width: min(70rem, 100% - 3rem); margin-inline: auto; }
.narrow { width: min(42rem, 100% - 3rem); margin-inline: auto; }

/* ---- type ---- */

h1, h2, h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -.015em; line-height: 1.15; }
h1 { font-size: clamp(2.3rem, 6.5vw, 3.7rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0 0 .9rem; }
h3 { font-size: 1.22rem; margin: 0 0 .4rem; color: var(--kelp); }
p  { margin: 0 0 1.1rem; }
.lede { font-size: 1.15rem; color: var(--ink-soft); }
.kicker {
  font: 600 .8rem/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 1.2rem;
}
.fine { font-size: .9rem; color: var(--ink-faint); }

/* ---- header ---- */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.6rem 0 0;
}
.topbar img { width: 148px; height: auto; }
/* The home page carries the full wordmark in the hero immediately below, so
   its bar does not repeat it. The bar is not sticky, so both were on screen
   at once and then both scrolled away together. */
.topbar--bare { justify-content: flex-end; }
.topbar nav { display: flex; gap: 1.4rem; font-size: .95rem; }
.topbar nav a { color: var(--ink-soft); text-decoration: none; }
.topbar nav a:hover { color: var(--sea); text-decoration: underline; }
@media (max-width: 34rem) {
  /* the section anchors are a convenience, not the point — on a phone the
     scroll is short enough that they only crowd the wordmark */
  .topbar nav a[href^="#"] { display: none; }
}

/* ---- hero ---- */

.hero {
  position: relative;
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(3rem, 7vw, 5rem);
}
.hero::before {
  /* a wash of damper sand through the middle of the hero, returning to dry
     sand at both ends so no seam shows where the section stops */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
      var(--ground) 0%, var(--ground-2) 58%, var(--ground) 100%);
}
.hero-grid {
  display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 60rem) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; }
}
.hero .mark { width: min(330px, 68%); margin: 0 0 1.4rem; }
.hero h1 { font-size: clamp(2rem, 5.2vw, 3.1rem); }
.tagline {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}

/* ---- buttons ---- */

.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.8rem 0 .9rem; }

.badge {
  display: inline-flex; align-items: center; gap: .7rem;
  background: var(--bezel); color: #fff; text-decoration: none;
  border-radius: 13px; padding: .62rem 1.15rem .68rem;
  box-shadow: 0 2px 10px var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.badge:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--shadow); }
.badge svg { width: 26px; height: 32px; flex: none; fill: #fff; }
.badge span { display: block; font-size: .68rem; line-height: 1.15; opacity: .82; letter-spacing: .01em; }
.badge strong { display: block; font-size: 1.16rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
@media (prefers-color-scheme: dark) {
  .badge { background: #F2EADD; color: #14100B; }
  .badge svg { fill: #14100B; }
}

/* ---- device frames ---- */

.phone {
  position: relative;
  width: min(300px, 74vw);
  margin-inline: auto;
  border-radius: 42px;
  padding: 9px;
  background: linear-gradient(160deg, #3a322a, var(--bezel) 42%, #241d17);
  box-shadow: 0 26px 50px -18px var(--shadow), 0 3px 10px var(--shadow);
}
.phone img { border-radius: 34px; }
/* The device shots are 603x1311. Left alone they are the tallest thing in
   their row and set the section height on their own. */
.phone { max-width: 260px; }
.phone.tilt { transform: rotate(-2.2deg); }
@media (prefers-reduced-motion: reduce) { .phone.tilt { transform: none; } }

.phones {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.5rem, 5vw, 3.5rem); margin-top: 2.5rem;
}
.phones .phone { margin: 0; }

/* ---- sections ---- */

section { padding: clamp(2.5rem, 5.5vw, 4rem) 0; }
section + section { border-top: 1px solid var(--rule); }

@media (min-width: 60rem) {
}

/* ---- cards ---- */

.cards { display: grid; gap: 1.1rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 46rem) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--card); border-radius: var(--radius);
  padding: 1.5rem 1.4rem; box-shadow: 0 1px 3px var(--shadow);
}
.card p:last-child { margin-bottom: 0; }
.card p { color: var(--ink-soft); font-size: .98rem; }

/* ---- the swell ladder ---- */


/* ---- the "not in it" list ---- */

.nots { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 46rem) { .nots { grid-template-columns: 1fr 1fr; gap: .75rem 2rem; } }
.nots li { line-height: 1.55; }
.nots b { font-weight: 700; color: var(--kelp); }
.nots span { color: var(--ink-soft); }

/* ---- pull quote ---- */


/* ---- final CTA ---- */

.closer { text-align: center; }
.closer .cta { justify-content: center; }
.closer .icon {
  width: 104px; height: 104px; border-radius: 23px; margin: 0 auto 1.6rem;
  box-shadow: 0 10px 26px -8px var(--shadow);
}

/* ---- footer ---- */

footer {
  border-top: 1px solid var(--rule);
  padding: 2.2rem 0 3rem; color: var(--ink-faint); font-size: .9rem;
}
footer .row { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; justify-content: space-between; }
footer a { color: var(--ink-faint); }
footer a:hover { color: var(--sea); }

/* ---- prose pages (privacy) ---- */

.prose { padding: clamp(2.5rem, 6vw, 4rem) 0 3rem; }
.prose h1 { font-size: clamp(2rem, 5vw, 2.7rem); margin-bottom: .3rem; }
.prose h2 { font-size: 1.35rem; margin: 2.4rem 0 .6rem; color: var(--kelp); }
.prose .date { color: var(--ink-faint); font-size: .9rem; margin-bottom: 2rem; }
.prose .box {
  background: var(--card); border-radius: var(--radius);
  padding: 1.4rem 1.5rem; margin: 0 0 1.6rem;
}
.prose .box p:last-child { margin-bottom: 0; }