/* perspicuity.app, in the look the owner picked ("Phone"): a soft tint settling into white,
   the app's Today screen front and centre, soft cards with thin borders, small numbered tags.
   The same look as the app, which is light by default. No scripts, no outside requests;
   ui-serif is New York on Apple devices. */

:root {
  color-scheme: light;
  --mist: #eaf0ee;
  --white: #ffffff;
  --surface: #f6f9f8;
  --ink: #0b2226;
  --body: #38504f;
  --secondary: #64807d;
  --hairline: #d5e0dd;
  --mint: #2c7a70;
  --blue: #1673c4;
  --blue-soft: #dcefff;
  /* The app's dark screen, inside the phone. */
  --night: #0c1619;
  --night-deep: #0f2126;
  --night-ink: #f2f7f5;
  --night-soft: #869f9b;
  --night-mint: #8fe3cf;
  /* Covers are pictures: the same inks everywhere, one ground per field. */
  --cover-ink: #14252b;
  --paper: #f5eddf;

  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--white); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: linear-gradient(var(--mist), var(--white) 46%);
  background-repeat: no-repeat;
  background-color: var(--white);
  color: var(--ink);
  font: 17px/1.5 var(--sans);
  padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
}

.wrap { max-width: 720px; margin: 0 auto; padding-inline: 22px; }

h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

/* Header */

.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-block: 22px 0; }
.wordmark { font: 600 20px/1 var(--serif); }
.pill { font: 600 13px/1 var(--sans); padding: 8px 12px; border-radius: 999px; background: var(--white); color: var(--mint); border: 1px solid #cfdcd9; }

/* Hero */

.hero { text-align: center; padding-top: 44px; }
.hero h1 { font: 600 clamp(34px, 9vw, 52px)/1.06 var(--serif); letter-spacing: -0.02em; text-wrap: balance; }
.lead { font-size: 18px; color: var(--body); margin: 14px auto 0; max-width: 30em; }

/* The phone, with the app's Today screen */

.phone { width: min(300px, 78vw); margin: 34px auto 0; background: #0b1416; border-radius: 46px; padding: 11px; box-shadow: 0 30px 60px -24px rgb(11 34 38 / 0.45); }
.screen { background: linear-gradient(var(--night), var(--night-deep)); border-radius: 36px; padding: 22px 16px 14px; color: var(--night-ink); }
.s-head { display: flex; justify-content: space-between; align-items: baseline; }
.s-head b { font: 500 26px/1 var(--serif); }
.s-head span { font-size: 11px; color: var(--night-soft); }
.dots { display: flex; justify-content: space-between; margin-top: 14px; }
.dots i { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #22393e; }
.dots .on { background: var(--night-mint); border-color: var(--night-mint); }
.dots .now { border-color: var(--night-mint); }
.s-cover { background: #ffc043; color: var(--cover-ink); border-radius: 16px; padding: 12px 13px 14px; margin-top: 16px; }
.mast { display: flex; justify-content: space-between; font: 700 8.5px/1 var(--sans); padding-bottom: 6px; border-bottom: 1px solid rgb(20 37 43 / 0.4); }
.field { font: 800 8px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; margin-top: 9px; }
.s-title { font: 600 18px/1.1 var(--serif); margin-top: 6px; }
.s-sub { font: 500 11.5px/1.3 var(--serif); margin-top: 5px; }
.s-art { height: 54px; margin-top: 10px; border-radius: 8px; background: var(--paper); position: relative; }
.s-art::before { content: ""; position: absolute; left: 12px; right: 52%; top: 12px; height: 3px; background: rgb(20 37 43 / 0.3); box-shadow: 0 9px 0 rgb(20 37 43 / 0.3), 0 18px 0 rgb(20 37 43 / 0.3), 0 27px 0 rgb(20 37 43 / 0.3); }
.s-art::after { content: ""; position: absolute; right: 22px; top: 8px; width: 24px; height: 40px; border-radius: 6px; background: var(--cover-ink); }
.s-btn { background: var(--night-mint); color: var(--night); border-radius: 999px; text-align: center; font: 700 14px/1 var(--sans); padding: 13px; margin-top: 12px; }
.s-note { font-size: 10.5px; color: var(--night-soft); margin-top: 9px; }
.s-tabs { display: flex; justify-content: space-around; margin-top: 14px; padding: 10px 6px 6px; border-radius: 22px; background: rgb(255 255 255 / 0.06); font-size: 10px; color: var(--night-soft); }
.s-tabs b { color: var(--night-mint); font-weight: 700; }

/* Sections */

h2 { font: 600 28px/1.15 var(--serif); letter-spacing: -0.01em; padding-block: 56px 18px; }

.parts { display: grid; gap: 12px; }
.part { background: var(--surface); border: 1px solid var(--hairline); border-radius: 20px; padding: 16px 18px 18px; }
.tag { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1 var(--sans); }
.tag i { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13px; background: var(--blue-soft); color: var(--blue); }
.peek { margin-top: 12px; background: var(--white); border-radius: 14px; padding: 12px 14px; font-size: 15px; border: 1px solid #e1e9e7; color: var(--body); }
.between { font-size: 15px; color: var(--secondary); margin-top: 14px; }

.tiles { display: grid; gap: 14px; }
.tile { display: grid; grid-template-columns: 108px 1fr; gap: 14px; align-items: center; }
.mini { border-radius: 12px; padding: 10px; color: var(--cover-ink); min-height: 128px; }
.mini small { font: 800 7.5px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.mini b { display: block; font: 600 12.5px/1.12 var(--serif); margin-top: 6px; }
.t-title { font: 600 17px/1.25 var(--serif); }
.t-note { font-size: 14px; color: var(--secondary); margin-top: 6px; }

.coral { background: #ff8162; }
.periwinkle { background: #86a6ff; }
.marigold { background: #ffc043; }
.lilac { background: #b7a9f7; }
.lime { background: #c6e267; }
.rose { background: #ff9db5; }

.notes { display: grid; gap: 20px; margin-top: 52px; }
.notes h3 { font: 600 20px/1.2 var(--serif); }
.notes p { font-size: 16px; color: var(--body); }

.name { margin-top: 34px; padding-block: 20px; border-block: 1px solid var(--hairline); }
.entry dfn { font: 600 22px/1 var(--serif); font-style: normal; margin-right: 8px; }
.entry span { font-size: 14px; color: var(--secondary); }
.meaning { font: 400 18px/1.4 var(--serif); margin-top: 4px; }

footer { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; font-size: 14px; padding-block: 24px 36px; color: var(--secondary); }
footer nav { display: flex; gap: 16px; }
footer a { color: var(--secondary); text-underline-offset: 3px; }

@media (min-width: 700px) {
  .parts { grid-template-columns: repeat(3, 1fr); }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .tile { grid-template-columns: 1fr; align-items: start; align-content: start; }
  .mini { min-height: 150px; }
  .notes { grid-template-columns: repeat(3, 1fr); }
}