/* Solace Holdings. The engraved Tipsoo Lake plate (plates/tipsoo-dark.svg) on its own near-black paper, with its
   meadow drawn live on #field by scene.js so the grass and flowers part under the cursor. */

@font-face {
  font-family: 'Inter Tight';
  src: url('fonts/inter-tight.woff2') format('woff2');
  font-weight: 100 900;
  /* block: hold the text (up to about 3 s) until the font is in rather than set it first in a fallback, which is a
     little narrower, so the statement re-wrapped as the font arrived ("grow" jumped between lines); preloaded in
     index.html, so the wait is the page's own load */
  font-display: block;
}

/* The plate's two themes. Dark: paper #1b1913, ink #e4d8b8. Light: paper #f5f4f1, ink #1c2a27. */
:root {
  --bg: #1b1913;
  --ink: #e4d8b8;
  --dim: rgba(228, 216, 184, 0.5);
  --statement: rgba(228, 216, 184, 0.88);
  --hover: rgba(228, 216, 184, 0.8);
  --name-size: 24px; /* the name (Contour Holdings), top left; ?namesize= tries others */
  --pad: 24px;
}
:root[data-theme='light'] {
  --bg: #f5f4f1; /* a warm off-white: Ollie's grey #eae8e3 (Nov 2) taken halfway to white with the tuner, Nov 3; the light plate is built on it too */
  --ink: #1c2a27;
  --dim: rgba(28, 42, 39, 0.55);
  --statement: rgba(28, 42, 39, 0.88);
  --hover: rgba(28, 42, 39, 0.8); /* links under the pointer: the ink at 80% */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter Tight', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  touch-action: none;
  /* Clicking and double-clicking the drawing must not select it; the header and statement stay selectable. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.top,
.bottom {
  user-select: text;
  -webkit-user-select: text;
}

/* The plate sits between the header and the statement; the canvas covers the page and draws only the meadow. */
.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.plate-img {
  position: absolute;
  left: 0;
  right: 0;
  top: 10%;
  bottom: 112px;
  width: 100%;
  height: calc(90% - 112px);
  object-fit: contain;
  object-position: 50% 100%;
  -webkit-user-drag: none;
}
#sky,
#field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.plate-img,
#sky,
#field {
  opacity: 0;
  animation: appear 1.8s ease-out 0.2s forwards;
}
@keyframes appear {
  to {
    opacity: 1;
  }
}

.top,
.bottom {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: var(--pad);
  gap: 24px;
}
.top {
  top: 0;
  align-items: flex-start;
}
.bottom {
  bottom: 0;
  align-items: flex-end;
}
.group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.group.right {
  align-items: flex-end;
  text-align: right;
}
.label {
  font:
    400 12px/1.2 'Inter Tight',
    system-ui,
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
/* The name, top left: the label's capitals and spacing at its own size. */
.label.name {
  font-size: var(--name-size);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
/* The Ethos peak (export/ethos-mark.svg) before the name: as tall as the capitals, standing on their baseline, in
   the text's own ink in either theme. */
/* The contour mark: 25 fine lines, so it is drawn larger than the label and with a stroke that comes to about a
   pixel at this size; the lines stay as drawn, only their weight changes. */
.mark {
  height: 36px;
  width: calc(36px * 81.74 / 86.65);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
/* Links in the header: no underline; under the pointer their colour eases to 80% ink over a fifth of a second. */
a.label {
  transition: color 0.2s ease;
}
a.label:hover {
  color: var(--hover);
}
.dim {
  color: var(--dim);
}
/* The @ in the email, raised so it centres on the capitals around it: in Inter Tight its centre sits 0.11em below
   the cap height's middle (measured from the font: caps 0 to 1490, the @ -392 to 1434, of 2048). */
.at {
  position: relative;
  top: -0.11em;
}
/* A link in the dim ink (the email) does the reverse: it rises from the dim grey to 80% ink under the pointer. */
a.label.dim:hover {
  color: var(--hover);
}
/* "Backed by" and the Y Combinator mark, above the city: a square of woven engraved cords in the label's own
   colour (plates/yc-<theme>.svg), the Y left as paper, a little taller than the capitals. */
.backed {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.yc-link {
  display: block;
  flex: none;
  line-height: 0;
}
/* The mark fades under the pointer as the header links do (their ink at 80%). */
.yc-link:hover .yc {
  opacity: 0.8;
}
.yc {
  width: 20px;
  height: 20px;
  display: block;
}
.statement {
  font:
    400 24px/1.35 'Inter Tight',
    system-ui,
    sans-serif;
  letter-spacing: -0.005em;
  color: var(--statement);
  max-width: 38ch;
  text-wrap: pretty;
}

/* The lake alone (the page as it stands; a meadow comes back with ?meadow=original, bloom or bloom2): no meadow,
   and the plate at --lake-size of its usual size with a meadow (85%; ?size=0.7 and the like override it), placed so its arch, shore and lake (the top 0.83 of it, centred at 0.414) sit in the middle
   of the space between the header and the statement. The plate's lower part, where the meadow stood, is bare paper. */
html[data-meadow='none'] {
  --lake-size: 0.85;
}
html[data-meadow='none'] .plate-img {
  --w: calc(var(--lake-size) * min(100vw, (90dvh - 112px) * 12 / 7));
  left: calc(50% - var(--w) / 2);
  right: auto;
  width: var(--w);
  height: calc(var(--w) * 7 / 12);
  top: calc(10% + (90% - 112px) / 2 - var(--w) * 7 / 12 * 0.414);
  bottom: auto;
}
/* Phones: the lake alone is not cropped like the meadow plate below; it is shown whole at --lake-size of the screen's
   width, leaving a margin of paper at either side. */
@media (max-width: 640px) {
  html[data-meadow='none'] .plate-img {
    --w: calc(var(--lake-size) * min(100vw, (86dvh - 230px) * 12 / 7));
    top: calc(14% + (86% - 230px) / 2 - var(--w) * 7 / 12 * 0.414);
  }
}

/* The paper tuner (?paper=0..1: 0 the paper #f5f4f1 the page is built on, 1 white; shown at 0 on localhost without
   the parameter). The page takes the colour the script in index.html sets, and the plate and the YC mark, whose paper
   is painted inside their own images, go through the #paper filter, which turns that paper into the same colour and
   keeps the ink exactly as it is. */
:root[data-theme='light'][data-paper] {
  --bg: var(--paper, #f5f4f1);
}
:root[data-theme='light'][data-paper] .plate-img,
:root[data-theme='light'][data-paper] .yc {
  filter: url(#paper);
}
.tuner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--dim);
}
.tuner input {
  width: 200px;
  accent-color: var(--ink);
}
.tuner output {
  min-width: 13ch;
  font-variant-numeric: tabular-nums;
}
.defs {
  position: absolute;
  width: 0;
  height: 0;
}

@media (prefers-reduced-motion: reduce) {
  .plate-img,
  #sky,
  #field {
    animation: none;
    opacity: 1;
  }
}

/* Phones: the plate is cropped at the sides so the mountain and the meadow stay large enough to read and brush. */
@media (max-width: 640px) {
  :root {
    --pad: 18px;
  }
  .plate-img {
    left: -50%;
    width: 200%;
    top: 14%;
    height: calc(86% - 230px);
  }
  .bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
    padding-bottom: 28px;
  }
  .bottom .group.right {
    align-items: flex-start;
    text-align: left;
    gap: 12px;
  }
  /* The header shows the peak alone: the name's words are left out. */
  .name .wordmark {
    display: none;
  }
  .statement {
    font-size: 18px;
    line-height: 1.4;
    max-width: none;
    margin-bottom: 16px; /* the statement sits a little higher above the Y Combinator line */
  }
  /* The compound stays on one line rather than breaking at its hyphen. */
  .statement .nobreak {
    white-space: nowrap;
  }
}