/* DDiary's own page. Colours and the serif are the app's "Glød" theme in its
   light form, so the page and the screenshots on it read as one thing.
   The rest of the site keeps the neutral look in /style.css. */

@font-face {
  font-family: "Instrument Serif";
  src: url("/ddiary/fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("/ddiary/fonts/InstrumentSerif-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #f6efe7;
  --surface: #fffaf4;
  --raised: #efe4d8;
  --ink: #2a1c14;
  --muted: #655245;
  --accent: #a9541d;
  --accent-text: #924616;
  --rule: #e4d6c7;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --maxw: 66rem;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent-text);
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- Top bar ---------- */

.top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 1.75rem;
}

.wordmark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--accent-text);
  text-decoration: none;
}

.lang {
  font-size: 0.95rem;
  text-decoration: none;
}

.lang:hover {
  text-decoration: underline;
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 3.5rem;
  align-items: center;
  padding: 3.5rem 0 4.5rem;
}

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.9rem, 6.2vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
}

h1 em {
  color: var(--accent-text);
}

.lead {
  font-size: 1.3rem;
  line-height: 1.5;
  margin: 0 0 1.75rem;
  max-width: 32rem;
}

.soon {
  display: inline-block;
  margin: 0;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
}

a.soon:hover {
  background: var(--accent-text);
}

a.soon:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

.fine {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---------- Phone ---------- */

/* The screenshots are full-screen captures with square corners. The radii are
   given per axis so the corner stays round on a tall image. */
.phone {
  margin: 0 auto;
  width: 100%;
  max-width: 19rem;
  padding: 0.5rem;
  border-radius: 3.1rem;
  background: var(--ink);
  box-shadow: 0 1.5rem 3.5rem rgba(42, 28, 20, 0.22),
    0 0.25rem 0.75rem rgba(42, 28, 20, 0.12);
}

.phone img,
.phone video {
  width: 100%;
  border-radius: 2.6rem;
  background: var(--surface);
}

/* ---------- Feature rows ---------- */

.label {
  margin: 0 0 0.75rem;
  color: var(--accent-text);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  line-height: 1.08;
  margin: 0 0 1.1rem;
}

h2 em {
  color: var(--accent-text);
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
  padding: 4.5rem 0;
  border-top: 1px solid var(--rule);
}

.row.flip .text {
  order: 2;
}

.row p {
  margin: 0 0 1rem;
  max-width: 34rem;
}

.row ul {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  max-width: 34rem;
}

.row li {
  margin-bottom: 0.45rem;
}

.quiet {
  color: var(--muted);
}

/* ---------- Private by design ---------- */

.band {
  border-top: 1px solid var(--rule);
  padding: 4.5rem 0;
}

.band h2 {
  max-width: 36rem;
}

.band > p {
  max-width: 40rem;
}

.cards {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.cards li {
  margin: 0;
  padding: 1.35rem 1.4rem;
  border-radius: 1.4rem;
  background: var(--surface);
  border: 1px solid var(--rule);
}

.cards strong {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 1.05rem;
}

.cards span {
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.5;
}

.note {
  margin-top: 2.25rem;
  padding: 1.4rem 1.5rem;
  border-radius: 1.4rem;
  background: var(--raised);
  max-width: 46rem;
}

.note p {
  margin: 0 0 0.75rem;
}

.note p:last-child {
  margin-bottom: 0;
}

/* ---------- Closing ---------- */

.closing {
  border-top: 1px solid var(--rule);
  padding: 4.5rem 0 4rem;
  text-align: center;
}

.closing h2 {
  margin-bottom: 1.5rem;
}

.closing .fine {
  margin-top: 1.25rem;
}

footer {
  border-top: 1px solid var(--rule);
  padding: 1.5rem 0 3rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

footer nav {
  margin-bottom: 0.75rem;
}

footer nav a {
  margin-right: 1.25rem;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 760px) {
  .hero,
  .row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .hero {
    padding: 2.5rem 0 3.5rem;
  }

  .row,
  .band,
  .closing {
    padding: 3.25rem 0;
  }

  /* On a phone the picture always follows its text. */
  .row.flip .text {
    order: 0;
  }

  .cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .phone {
    max-width: 16.5rem;
  }

  .lead {
    font-size: 1.18rem;
  }
}