/* getparta.app home page, in English (/) and Romanian (/ro/).
   The Stamps look from design/tokens.css and design/kit.css, cut down to what
   a static page needs: the ground, perforated stamps, violet for a step that
   is yours. Dark is the default, light follows the system. Sizes are rem so
   the page grows with the browser's text size. */

@font-face {
  font-family: "Martian Mono";
  src: url("/fonts/MartianMono.ttf") format("truetype-variations"), url("/fonts/MartianMono.ttf") format("truetype");
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
}

:root {
  --ground: #14171C;
  --on-ground: #DADDE3;
  --on-ground-2: #9AA1AD;
  --ground-line: rgba(218, 221, 227, .12);
  --paper: #262C36;
  --ink: #E2E5EB;
  --ink-2: #A2A9B5;
  --ghost: #8D94A1;
  --perf: #3D4450;
  --accent: #B3A2EA;
  --on-accent: #17141F;
  --slip-shadow: drop-shadow(0 1px 0 rgba(0, 0, 0, .35));
  --m1: #A9573E; --m2: #3F6C9C; --m3: #7559A3; --m4: #4C7A3B;
  --hole: 4px;
  --font: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --cancel: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'><path d='M0 8q7.5-6 15 0t15 0 15 0 15 0 15 0 15 0 15 0 15 0M0 20q7.5-6 15 0t15 0 15 0 15 0 15 0 15 0 15 0 15 0M0 32q7.5-6 15 0t15 0 15 0 15 0 15 0 15 0 15 0 15 0' fill='none' stroke='black' stroke-width='2'/></svg>");
  --perforated:
    radial-gradient(var(--hole), #0000 97%, #000) round calc(-1.5 * var(--hole)) calc(-1.5 * var(--hole)) / calc(3 * var(--hole)) calc(3 * var(--hole)),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--hole)) calc(100% - 3 * var(--hole));
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --ground: #D9E2EA;
    --on-ground: #1C1F26;
    --on-ground-2: #4E5766;
    --ground-line: rgba(28, 31, 38, .12);
    --paper: #FFFDF8;
    --ink: #1C1F26;
    --ink-2: #5A6271;
    --ghost: #6E7584;
    --perf: #D5D9DF;
    --accent: #5A3D99;
    --on-accent: #FFFFFF;
    --slip-shadow: drop-shadow(0 1px 1px rgba(28, 31, 38, .14)) drop-shadow(0 4px 8px rgba(28, 31, 38, .10));
    color-scheme: light;
  }
}

@media (prefers-contrast: more) {
  :root { --ghost: var(--ink); --ink-2: #C6CBD3; --on-ground-2: #C6CBD3; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
  :root { --ink-2: #3E4552; --on-ground-2: #3E4552; }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--on-ground);
  font-family: var(--font);
  font-variation-settings: "wdth" 87.5;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -.01em;
  text-wrap: pretty;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--on-ground-2); }
a:hover { text-decoration-color: currentColor; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.wrap { width: min(72rem, 100% - 2rem); margin-inline: auto; }

/* ---------- head ---------- */
.site-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; flex-wrap: wrap; padding-block: 1.25rem; }
.brand { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none; min-height: 44px; }
.brand img { width: 2rem; height: 2rem; border-radius: .5rem; }
.brand span { font-weight: 700; font-variation-settings: "wdth" 112.5; text-transform: uppercase; letter-spacing: .08em; }
.lang { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; }

/* ---------- the opening: four steps, then the example board ---------- */
.intro { display: grid; gap: 3rem; align-items: start; padding-block: 1.5rem 4rem; }
@media (min-width: 60rem) {
  .intro { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4rem; padding-top: 3rem; }
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 1.25rem + 3.6vw, 3.5rem);
  line-height: 1.05;
  font-weight: 700;
  font-variation-settings: "wdth" 75;
  letter-spacing: -.035em;
}
h1 span { display: block; }
h1 span + span { margin-top: .12em; }

.lede { margin: 1.5rem 0 0; max-width: 34ch; font-size: 1.0625rem; color: var(--on-ground-2); }

.get { margin-top: 2rem; display: grid; gap: .75rem; justify-items: start; }
.soon {
  display: inline-flex; align-items: center; min-height: 3.25rem; padding: .5rem 1.25rem; border-radius: 999px;
  font-weight: 700; font-variation-settings: "wdth" 100; border: 1.5px dashed var(--on-ground-2);
}
.get p { margin: 0; max-width: 38ch; font-size: .9375rem; color: var(--on-ground-2); }

/* ---------- the example board ---------- */
.board { margin: 0; display: grid; gap: .75rem; max-width: 26.5rem; width: 100%; }
@media (min-width: 60rem) { .board { justify-self: end; } }
.board figcaption { font-size: .8125rem; color: var(--on-ground-2); }
.hero { display: grid; gap: .25rem; margin-bottom: .25rem; }
.hero .n {
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height: .95; font-weight: 700; font-variation-settings: "wdth" 75;
  letter-spacing: -.045em; font-variant-numeric: tabular-nums;
}
.hero .l { font-size: .9375rem; color: var(--on-ground-2); }
.hero .l b { color: var(--on-ground); font-weight: 650; }

.day {
  width: fit-content; margin-top: .5rem; padding: 3px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--on-ground-2);
  font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--on-ground-2);
}

.stamps { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }

/* A bill is a stamp: perforated all round, its value beside who paid. */
.slip {
  display: grid; grid-template-columns: 1fr auto; gap: 2px .75rem; padding: 16px 18px 14px;
  position: relative; isolation: isolate; color: var(--ink); filter: var(--slip-shadow);
}
.slip::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); -webkit-mask: var(--perforated); mask: var(--perforated); }
.slip .title { grid-column: 1 / -1; font-weight: 650; line-height: 1.25; }
.slip .who { align-self: baseline; font-size: .8125rem; color: var(--ink-2); }
.slip .amt { align-self: baseline; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.slip .next {
  grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem;
  min-height: 44px; margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--perf); font-size: .9375rem; font-weight: 650;
}
.slip.yours .next > span:first-child { color: var(--accent); }
.pill {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 1rem; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-weight: 700; font-variation-settings: "wdth" 100; white-space: nowrap;
}
.slip.cleared, .slip.cleared .who { color: var(--ghost); }
.slip.cleared .title, .slip.cleared .amt { font-weight: 500; }
/* a cleared bill is a used stamp: wavy cancel lines across its value */
.slip.cleared::after {
  content: ""; position: absolute; inset: 10px 10px 10px auto; width: 46%; z-index: 1; pointer-events: none;
  background: var(--ghost); opacity: .35; -webkit-mask: var(--cancel) center / 100% 100% no-repeat; mask: var(--cancel) center / 100% 100% no-repeat;
}

/* ---------- how it works ---------- */
.how { padding-block: 3rem 4rem; border-top: 1px solid var(--ground-line); }
.how h2 {
  margin: 0 0 1.5rem; font-size: .8125rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--on-ground-2);
}
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: step; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li { counter-increment: step; display: grid; gap: .5rem; align-content: start; padding: 1.25rem; background: var(--paper); color: var(--ink); border-radius: 3px; }
.steps li::before { content: "0" counter(step); font-size: .75rem; font-weight: 700; letter-spacing: .12em; color: var(--ink-2); }
.steps h3 { margin: 0; font-size: 1.125rem; font-weight: 700; font-variation-settings: "wdth" 100; line-height: 1.25; }
.steps p { margin: 0; font-size: .9375rem; color: var(--ink-2); }

/* ---------- foot ---------- */
.site-foot { padding-block: 2rem 3rem; border-top: 1px solid var(--ground-line); font-size: .875rem; color: var(--on-ground-2); }
.site-foot ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.site-foot li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-ground); }
.site-foot p { margin: 0; overflow-wrap: anywhere; }