/* 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;
  font-display: swap;
}

/* The plate's two themes. Dark: paper #1b1913, ink #e4d8b8. Light: paper #f6f2e7, 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: 20px; /* Ethos Holdings, top left; ?namesize= tries others */
  --pad: 24px;
}
:root[data-theme='light'] {
  --bg: #f6f2e7; /* the kit's cream #efe7d3 taken 45% of the way to white; 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);
}
/* Links in the header: no underline; they fade to 80% under the pointer. */
a.label:hover {
  color: var(--hover);
}
.dim {
  color: var(--dim);
}
.statement {
  font:
    400 20px/1.35 'Inter Tight',
    system-ui,
    sans-serif;
  letter-spacing: -0.005em;
  color: var(--statement);
  max-width: 34ch;
  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;
}
@media (max-width: 640px) {
  html[data-meadow='none'] .plate-img {
    --w: calc(var(--lake-size) * min(200vw, (86dvh - 172px) * 12 / 7));
    top: calc(14% + (86% - 172px) / 2 - var(--w) * 7 / 12 * 0.414);
  }
}

/* The paper tuner for the light theme (?paper=0..1: 0 the original cream #efe7d3, 1 white; the page's own paper is
   0.45). The page takes the colour the script in index.html sets, and the plate, whose paper is painted inside its
   own image, goes through the #paper filter, which turns that paper into the same colour and keeps the ink exactly
   as it is. The slider (.tuner) shows only when paper is in the address, and only in the light theme. */
:root[data-theme='light'][data-paper] {
  --bg: var(--paper, #f6f2e7);
}
:root[data-theme='light'][data-paper] .plate-img {
  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;
}
:root[data-theme='dark'] .tuner {
  display: none;
}
.defs {
  position: absolute;
  width: 0;
  height: 0;
}

/* The phone menu (menu.js), after Thrive Holdings' mobile header, measured on their site at 404px wide: three 1px
   lines 18px long and 5px apart, right-aligned in a 32 x 24 button level with the name; the links right-aligned
   under it, the first 59.5px below the button's top and each next one 28.4px lower, arriving with a 5px drop over
   a quarter second. Hidden on wider screens, where the links sit in the corner as usual. */
.menu-button {
  display: none;
}
@keyframes menu-drop {
  from {
    transform: translateY(-5px);
  }
}
@media (max-width: 640px) {
  .menu-button {
    position: absolute;
    top: calc(var(--pad) + var(--name-size) * 0.6 - 12px);
    right: var(--pad);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    width: 32px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .menu-button span {
    width: 18px;
    height: 1px;
    border-radius: 2px;
    background: var(--ink);
  }
  .top nav {
    display: none;
  }
  html.menu-open .top nav {
    position: absolute;
    top: calc(var(--pad) + var(--name-size) * 0.6 - 12px + 59.5px);
    right: var(--pad);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    animation: menu-drop 0.25s ease-out;
  }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  html.menu-open .top nav {
    animation: none;
  }
}

@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% - 172px);
  }
  .bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .bottom .group.right {
    align-items: flex-start;
    text-align: left;
  }
  .statement {
    font-size: 17px;
    max-width: none;
  }
}