/* winterlabsltd.com
   One hand-written stylesheet. Colours, type and spacing are custom properties
   at the top; everything below reads from them. No scripts; the only motion is
   the drawing settling in on load, and that is off under prefers-reduced-motion.

   The look: a technical drawing. A cool grey ground ruled into six columns, one
   annotated wireframe object (a survey mesh of a summit) with square markers,
   leader lines and four callout chips, then ruled plates for the two apps, the
   company note, and a ruled footer grid. Text blocks always sit a gutter inside
   the rules and carry the ground colour, so a rule never runs through words. */

@font-face { font-family: "Archivo"; src: url("/fonts/Archivo-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/fonts/Archivo-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo Expanded"; src: url("/fonts/ArchivoExpanded-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo Expanded"; src: url("/fonts/ArchivoExpanded-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;

  /* Palette. On the ground: ink 14.5:1, ink-2 9.4:1, muted 5.4:1, cobalt 7.6:1.
     Chips are white with ink text (15.9:1). The rules are decorative hairlines. */
  --ground: #F5F7FA;
  --panel: #FFFFFF;
  --ink: #1E2430;
  --ink-2: #3A4250;
  --muted: #5D6675;
  --rule: #E1E5EB;
  --rule-2: #C9D0DA;
  --cobalt: #1233E0;

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wide: "Archivo Expanded", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-h1: clamp(1.625rem, 0.9rem + 2.2vw, 2.625rem);   /* 26 to 42px */
  --t-h2: 1.375rem;
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-mono: 0.75rem;

  --gutter: clamp(1rem, 4vw, 3rem);    /* page edge to the outer rule */
  --cell: 1rem;                        /* a rule to the text beside it */
  --max: 74rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul { margin: 0; }
p, li { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
::selection { background: var(--cobalt); color: #fff; }
address { font-style: normal; }

.page { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
main { flex: 1 0 auto; display: flex; flex-direction: column; }

/* The ruled ground: six hairline column rules down the whole page; a bare frame on phones.
   It sits below the page (z-index -1) and above the canvas, so any block with the
   ground colour hides it. The ground is set on html only, so body paints nothing over it. */
.rules {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto;
  display: grid; grid-template-columns: repeat(6, 1fr);
}
.rules i { border-left: 1px solid var(--rule); }
.rules i:last-child { border-right: 1px solid var(--rule); }
@media (max-width: 56em) {
  .rules { grid-template-columns: 1fr; }
  .rules i:not(:first-child) { display: none; }
  .rules i:first-child { border-right: 1px solid var(--rule); }
}

/* Any block of words carries the ground colour, so a rule stops behind it. */
.mask { background: var(--ground); }

.mono { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.skip { position: absolute; left: var(--gutter); top: -100vh; padding: 0.75rem 1rem; background: var(--ink); color: #fff; z-index: 3; font-size: var(--t-small); }
.skip:focus { top: 1rem; }

/* ----- Header ----- */

.head {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem;
  min-height: 64px; padding-inline: var(--cell);
  border-bottom: 1px solid var(--rule); background: var(--ground);
}
/* The wordmark never breaks; on the narrowest phones the email drops under it. */
.wordmark {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; white-space: nowrap;
  font-family: var(--wide); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.wordmark i { width: 10px; height: 10px; background: var(--cobalt); }
.head nav { display: flex; align-items: center; gap: 0.25rem 1.25rem; }
.head nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-small); font-weight: 500; }
.head nav a:hover { color: var(--cobalt); }
.head nav .mail { font-family: var(--mono); font-size: 0.8125rem; }
@media (max-width: 30em) {
  .head nav .privacy { display: none; }
  .head nav .mail { font-size: 0.75rem; }
}

/* ----- The drawing ----- */

.stage { position: relative; aspect-ratio: 2 / 1; margin-top: 0.5rem; }
.object { position: absolute; left: 27%; top: 4%; width: 46%; aspect-ratio: 1; }
.object svg { width: 100%; height: 100%; display: block; }
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.leaders line { stroke: var(--ink-2); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.6; }
.leaders rect { fill: var(--ink); }

.callout { position: absolute; width: 26%; display: flex; flex-direction: column; gap: 0.75rem; }
.callout.tl, .callout.bl { left: 0; padding-left: var(--cell); }
.callout.tr, .callout.br { right: 0; padding-right: var(--cell); align-items: flex-end; text-align: right; }
.callout.tl { top: calc(22.339% - 22px); }
.callout.tr { top: calc(35.571% - 22px); }
.callout.bl { top: calc(77.661% - 22px); }
.callout.br { top: calc(67.564% - 22px); }
.callout p { font-size: var(--t-small); line-height: 1.5; color: var(--muted); max-width: 30ch; }

.chip {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  width: 100%; height: 44px; padding: 0 0.85rem 0 0.75rem;
  background: var(--panel); border: 1px solid var(--rule-2);
  font-size: var(--t-small); font-weight: 500; white-space: nowrap;
  box-shadow: 0 1px 0 rgb(30 36 48 / 0.04);
}
.chip:hover { border-color: var(--ink); }
.chip b { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chip img { width: 20px; height: 20px; border-radius: 5px; }
.chip i { width: 10px; height: 10px; background: var(--cobalt); margin-inline: 5px; }
.chip .at { font-family: var(--mono); color: var(--cobalt); }
.chip::after { content: "\2197"; font-family: var(--mono); font-size: 0.8125rem; color: var(--muted); }
.chip.mail { font-family: var(--mono); font-size: 0.8125rem; font-weight: 400; }
@media (min-width: 56em) and (max-width: 72em) {
  /* A narrower drawing: the address chip loses its @ and a point of size so it still fits. */
  .chip.mail { font-size: 0.75rem; }
  .chip.mail .at { display: none; }
}

/* ----- Title band: the headline, on the first screen, under the drawing ----- */

.title { display: grid; gap: 1.5rem; padding: 1.75rem var(--cell) 2.5rem; border-top: 1px solid var(--rule); margin-top: 1rem; }
.title .mono { margin-bottom: 0.75rem; }
.title h1 {
  font-family: var(--wide); font-weight: 600; font-size: var(--t-h1); line-height: 1.1; letter-spacing: -0.02em;
  max-width: 16ch; text-wrap: balance;
}
.title .lead { color: var(--ink-2); max-width: 40em; }
@media (min-width: 56em) {
  .title { grid-template-columns: 1fr 1fr; align-items: end; }
  .title .lead { padding-left: var(--cell); }
}

/* ----- The two plates ----- */

.plates { display: grid; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
@media (min-width: 56em) { .plates { grid-template-columns: 1fr 1fr; } .plate + .plate { border-left: 1px solid var(--rule); } }
@media (max-width: 56em) { .plate + .plate { border-top: 1px solid var(--rule); } }
.plate {
  padding: 2.5rem var(--cell); display: grid; gap: 1.25rem 2rem;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: start;
}
.plate > figure { grid-column: 2; grid-row: 1 / 3; margin: 0 0 2.5rem; }
.plate > .links { grid-column: 1; grid-row: 2; }
@media (max-width: 56em) {
  .plate { grid-template-columns: 1fr; grid-template-rows: auto; }
  .plate > figure { grid-column: 1; grid-row: auto; justify-self: start; }
  .plate > .links { grid-row: auto; }
}
.plate .mono { margin-bottom: 1rem; }
.plate h2 { font-family: var(--wide); font-weight: 600; font-size: var(--t-h2); letter-spacing: -0.01em; line-height: 1.15; }
.plate p { margin-top: 0.75rem; color: var(--ink-2); max-width: 32em; }
.plate .note { font-size: var(--t-small); color: var(--muted); }
.links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.85rem;
  border: 1px solid var(--rule-2); background: var(--panel); font-size: var(--t-small); font-weight: 500;
}
.links a:hover { border-color: var(--ink); }

/* A flat device drawing: hairline outline, the real screen inside. */
.device { width: 200px; padding: 7px; border: 1px solid var(--ink-2); border-radius: 30px; background: var(--panel); position: relative; }
.device img { border-radius: 24px; }
.device figcaption { position: absolute; left: 0; right: 0; top: 100%; margin-top: 0.6rem; text-align: center; }

/* ----- The company ----- */

.company { padding: 3rem var(--cell); display: grid; gap: 1.5rem; }
@media (min-width: 56em) { .company { grid-template-columns: 1fr 2fr; padding-inline: 0; } .company > * { padding-inline: var(--cell); } }
.company p { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); line-height: 1.45; letter-spacing: -0.01em; max-width: 30em; }
.company p + p { margin-top: 1em; }

/* ----- Inner pages: the privacy notice and the 404 ----- */

.pagehead { padding: 2.5rem var(--cell) 2.5rem; display: grid; gap: 1.5rem; }
.pagehead .mono { margin-bottom: 0.75rem; }
.pagehead h1 { font-family: var(--wide); font-weight: 600; font-size: var(--t-h1); line-height: 1.1; letter-spacing: -0.02em; max-width: 16ch; text-wrap: balance; }
.pagehead .lead { color: var(--ink-2); max-width: 40em; }
.pagehead .lead a { border-bottom: 1px solid var(--rule-2); }
.pagehead .lead a:hover { color: var(--cobalt); border-color: currentColor; }
@media (min-width: 56em) {
  .pagehead { grid-template-columns: 1fr 1fr; align-items: end; padding-inline: 0; }
  .pagehead > * { padding-inline: var(--cell); }
}

.notice { border-top: 1px solid var(--rule); display: grid; gap: 1.5rem; padding: 2.5rem var(--cell) 4rem; }
@media (min-width: 56em) { .notice { grid-template-columns: 1fr 2fr; padding-inline: 0; } .notice > * { padding-inline: var(--cell); } }
.prose { max-width: 36em; }
.prose h2 { font-family: var(--wide); font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; line-height: 1.2; margin-top: 2.25rem; margin-bottom: 0.6rem; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: 0.75rem; }
.prose ul { padding-left: 1.1em; }
.prose li + li { margin-top: 0.35rem; }
.prose a { color: var(--ink); border-bottom: 1px solid var(--rule-2); }
.prose a:hover { color: var(--cobalt); border-color: currentColor; }
.empty { flex: 1 0 auto; }

/* ----- Footer grid ----- */

.foot { border-top: 1px solid var(--rule); font-size: var(--t-small); color: var(--ink-2); }
.foot .cols { display: grid; }
@media (min-width: 56em) { .foot .cols { grid-template-columns: repeat(3, 1fr); } .foot .cols > div + div { border-left: 1px solid var(--rule); } }
@media (max-width: 56em) { .foot .cols > div + div { border-top: 1px solid var(--rule); } }
.foot .cols > div { padding: 1.75rem var(--cell) 2rem; display: flex; flex-direction: column; gap: 0.35rem; }
.foot .mono { margin-bottom: 0.5rem; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; }
.foot a:hover { color: var(--cobalt); }
.foot .wordmark { align-self: flex-start; }
.foot .legal { border-top: 1px solid var(--rule); padding: 1.25rem var(--cell) 2.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; color: var(--muted); }
.foot .legal p { max-width: 60em; }

/* ----- Motion: the drawing settles in; off when the system asks ----- */

@media (prefers-reduced-motion: no-preference) {
  .object { animation: settle 1.2s ease-out both; }
  .leaders { animation: settle 1s ease-out 0.3s both; }
  .callout { animation: settle 0.8s ease-out both; }
  .callout.tl { animation-delay: 0.35s; } .callout.tr { animation-delay: 0.5s; } .callout.bl { animation-delay: 0.65s; } .callout.br { animation-delay: 0.8s; }
  @keyframes settle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* ----- Phones: kicker and headline first, then the drawing, then the callouts as rows ----- */

@media (max-width: 56em) {
  .title { order: -1; margin-top: 0; padding-top: 2rem; }
  .stage { aspect-ratio: auto; display: flex; flex-direction: column; gap: 1.25rem; margin-top: 0; padding-inline: var(--cell); }
  .object { position: static; width: min(100%, 420px); margin: 0 auto 0.5rem; }
  .leaders { display: none; }
  .callout, .callout.tl, .callout.tr, .callout.bl, .callout.br {
    position: static; width: 100%; padding: 1.25rem 0 0; align-items: flex-start; text-align: left;
    border-top: 1px solid var(--rule); gap: 0.6rem;
  }
  .callout .chip { width: auto; max-width: 100%; }
  .callout .chip.mail { white-space: normal; height: auto; min-height: 44px; padding-block: 0.5rem; overflow-wrap: anywhere; }
  .callout p { max-width: 36em; }
}

@media print {
  .skip, .rules, .leaders { display: none; }
  a { color: inherit; }
}