/* zinodj.com, in the app's paper and ink (Design's "zino" system, "The website" and Web1Home): light and dark by the
   visitor's system, the same tokens as the app. The night swim picture is the page's one cover; no full-bleed hero,
   no footer art, no gradients, no tinted cards, no pills. A primary action is a word in the accent, a secondary one
   an underlined word in ink, and the accent shows once on a page. */

/* Geist, served from here (SIL OFL, fonts/OFL.txt) so visiting asks nothing of anyone else */
@font-face { font-family: Geist; src: url(/fonts/Geist.ttf) format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url(/fonts/GeistMono.ttf) format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light dark;
  --ground: #fbfbf9; --raised: #f0efea; --ink: #161616; --ink-2: #6a6965; --ink-3: #908f8a; --line: #e3e2dc; --accent: #2457e3;
  --sans: Geist, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, Consolas, monospace;
  --m: 40px;              /* side margin */
  --gap: 64px;            /* between sections */
}
@media (prefers-color-scheme: dark) {
  :root { --ground: #111110; --raised: #1c1c1a; --ink: #f2f1ec; --ink-2: #a09f98; --ink-3: #6c6b66; --line: #2b2b28; --accent: #efd08f; }
}
@media (max-width: 759px) { :root { --m: 20px; --gap: 48px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--ground); color: var(--ink); font: 400 16px/24px var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
b { font-weight: 500; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* one column: 920 on the home page, 560 for text */
.col { width: min(920px, 100% - 2 * var(--m)); margin: 0 auto; }
.col.text { width: min(560px, 100% - 2 * var(--m)); }

.dim { color: var(--ink-2); }
.small { font: 400 14px/20px var(--sans); color: var(--ink-2); }
h1.word { font: 600 56px/56px var(--sans); letter-spacing: -.03em; }
h1.page { font: 600 28px/34px var(--sans); letter-spacing: -.02em; }
h2.label { font: 500 13px/18px var(--sans); margin-bottom: 16px; }
.lead { font: 400 20px/28px var(--sans); margin-top: 14px; }
.lead + .dim { margin-top: 4px; }

/* the two actions: a word in the accent, and an underlined word in ink; each 44 tall */
.acts { display: flex; flex-wrap: wrap; gap: 0 28px; align-items: center; margin-top: 18px; }
.act { display: inline-flex; align-items: center; min-height: 44px; font: 500 17px/24px var(--sans); text-underline-offset: 4px; }
.act.pri { color: var(--accent); text-decoration: none; }
.act.pri:hover { text-decoration: underline; text-decoration-thickness: 1px; }

/* the home page is a list header grown up: the cover, the name, one sentence, a line of facts, two word actions */
.hero { display: flex; gap: 48px; align-items: flex-end; padding: 72px 0; }
.cover { position: relative; flex: none; width: 400px; max-width: 100%; aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: var(--raised); }
.cover img { display: block; width: 100%; height: 100%; }
.cover::after, .shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 .5px rgba(22, 22, 22, .16); }
@media (prefers-color-scheme: dark) { .cover::after, .shot::after { box-shadow: inset 0 0 0 .5px rgba(242, 241, 236, .16); } }
.hero .facts { margin-top: 18px; }
/* on a computer the way in is the sync, on a phone it's the app: the accent goes to that one, and it comes first */
.hero .act.sync { color: var(--accent); text-decoration: none; }
.hero .act.sync:hover { text-decoration: underline; text-decoration-thickness: 1px; }
@media (max-width: 759px), (hover: none) and (pointer: coarse) {
  .hero .act.app { color: var(--accent); text-decoration: none; order: -1; }
  .hero .act.sync { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; }
}
@media (max-width: 759px) {
  .hero { flex-direction: column; align-items: flex-start; gap: 28px; padding: 28px 0 48px; }
  .cover { width: 100%; }
  h1.word { font-size: 44px; line-height: 44px; }
  .lead { font-size: 18px; line-height: 26px; }
  h1.page { font-size: 24px; line-height: 30px; }
}

.sec { padding-bottom: var(--gap); }

/* three real screens: no device around them, the phone's own corners (12% of the width) and a hairline */
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 280px)); justify-content: space-between; gap: 24px; }
.shot { position: relative; border-radius: 12% / 5.52%; overflow: hidden; background: var(--raised); margin-bottom: 14px; }
.shot img { display: block; width: 100%; height: auto; }
.shots figcaption span { color: var(--ink-2); }
@media (max-width: 759px) {
  /* a strip to swipe on a phone */
  .shots { width: 100vw; margin-left: calc(50% - 50vw); padding: 0 var(--m) var(--gap); grid-template-columns: none; grid-auto-flow: column;
           grid-auto-columns: 72%; gap: 16px; justify-content: start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .shots::-webkit-scrollbar { display: none; }
  .shots figure { scroll-snap-align: center; }
}

.list p { max-width: 560px; margin-bottom: 8px; color: var(--ink-2); }
.list b { color: var(--ink); }
.list a { color: var(--ink); }
ol.steps { list-style: none; counter-reset: s; }
ol.steps li { counter-increment: s; display: flex; gap: 14px; max-width: 560px; margin-bottom: 8px; }
ol.steps li::before { content: counter(s); flex: none; width: 12px; font: 400 13px/24px var(--mono); color: var(--ink-2); }
/* links in running text and in the footer are 44 tall to the touch without moving the lines */
.list a, ol.steps a, .foot a, .prose a { padding: 10px 0; margin: -10px 0; }

.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 24px 0 44px; border-top: 1px solid var(--line);
        font-size: 14px; line-height: 20px; }
.foot .brand { display: inline-flex; align-items: center; gap: 9px; font: 600 20px/24px var(--sans); letter-spacing: -.02em; text-decoration: none; }
/* under 32 px the mark is the solid one (river blue on light, cream on dark: the file reads the system itself) */
.foot .brand img { display: block; width: 30px; height: 24px; }
.foot .sp { flex: 1; }
.foot small { font-size: 14px; color: var(--ink-2); }
@media (max-width: 759px) { .foot .sp { flex-basis: 100%; height: 0; } }

/* a page of text (privacy, the app's link): the mark and the name on top, a title, then the words */
.top { display: flex; align-items: center; gap: 9px; padding: 28px 0 36px; }
.top .brand { display: inline-flex; align-items: center; gap: 9px; font: 600 22px/26px var(--sans); letter-spacing: -.02em; text-decoration: none; }
.top .brand img { display: block; width: 33px; height: 26px; }
.prose { padding: 28px 0 var(--gap); display: grid; gap: 16px; }
.prose b { color: var(--ink); }
.prose a { color: var(--ink); }