/* Shared by every page on sveebs.com.

   Libron, SIL Open Font License — see fonts/OFL-Libron.txt.
   Regular and italic are shipped; its small caps (smcp/c2sc) are real
   glyphs, so all-small-caps below is not the browser faking them. */
@font-face {
  font-family: "Libron";
  src: url("fonts/Libron-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libron";
  src: url("fonts/Libron-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Light mode only for now. The "white" is #F8EED4, the brightest cream in
   the painting itself: the ground in light mode, the text in dark mode.

   To follow the OS again (light or dark), make two changes here:
     1. color-scheme: light;  ->  color-scheme: light dark;
     2. delete the two lines marked DARK MODE around the block below.
   Everything else on the site already works in both. */
:root {
  color-scheme: light;
  --ink: #17130E;
  --ground: #F8EED4;
}

/* DARK MODE: off. Delete this line and the matching one below to turn it on.
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F8EED4;
    --ground: #0E0C09;
  }
}
   DARK MODE: off. Delete this line too. */

/* One scale for both gibbons, in CSS px per source pixel, so they are
   always drawn the same size. The images are cropped to their artwork:
   left is 936×1155, right is 973×1337.
   Desktop: the wider one never exceeds a third of the viewport, so neither
   can reach the middle third, and neither is taller than 85% of it.
   Heights here are svh, the viewport with the browser's toolbars showing,
   not dvh: on a phone dvh changes continuously as the toolbars slide away
   during a scroll, and everything sized by it would resize with them. */
:root {
  --s: min(calc(32vw / 973), calc(85svh / 1337));
}

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

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--ground);
  color: var(--ink);
  font-family: "Libron", Georgia, serif;
  display: grid;
  /* Pinned from the top rather than centred, so a long note grows the
     page downwards instead of pushing everything above it up. */
  place-items: start center;
  overflow-x: hidden;
  position: relative;
}

.site {
  position: absolute;
  top: clamp(16px, 2.5vw, 32px);
  left: clamp(16px, 2.5vw, 32px);
  margin: 0;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 400;
  z-index: 1;
}
.site a { color: inherit; text-decoration: none; }

/* Where each page puts them is at the end of this file. */
.gibbon {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
}
.gibbon.left  { left: 0;  bottom: 0; width: calc(936 * var(--s)); }
.gibbon.right { right: 0; top: 0;    width: calc(973 * var(--s)); }

/* Lives entirely inside the middle third, set like a page of a book. Pages
   with images use the wider measure. */
main {
  width: min(33.33vw, 440px);
  padding: clamp(48px, 26svh, 280px) 0 48px;
  text-align: left;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.5;
}
main.wide { width: min(62vw, 820px); }

h1 {
  margin: 0 0 1.6em;
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 400;
  line-height: 1.2;
}

h2 {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  font-weight: 400;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.list {
  list-style: none;
  margin: 0 0 1.8em;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.list li { display: flex; align-items: flex-start; gap: 0.6em; }
.list a { color: inherit; text-decoration: none; }
.list a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Icons are one line tall and centred on the first line of their item. */
svg { width: 1.1em; height: 1.5em; flex: none; }

/* Notes and the password are typed straight onto the page: no box, just
   the line, with a faint italic prompt while it is empty. */
.field {
  outline: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: text;
}
.field:empty::before {
  content: attr(data-placeholder);
  font-style: italic;
  opacity: 0.5;
}
.grow { flex: 1; min-width: 0; }

.password { -webkit-text-security: disc; text-security: disc; }
.password:empty { -webkit-text-security: none; text-security: none; }

/* The signature appears once the note has something in it. */
.sig {
  margin-top: 0.2em;
  text-align: right;
  font-style: italic;
}
.sig[hidden] { display: none; }
.name { display: inline-block; min-width: 2em; text-align: left; }

.status { font-style: italic; opacity: 0.6; }

/* An empty field, nudged when Enter is pressed. */
.shake { animation: shake 0.35s; }
@keyframes shake {
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .shake { animation: none; text-decoration: underline wavy; }
}

/* Narrow or portrait screens: the gibbons go above and below the text
   instead of beside it. They join the page's flow, so the text sits between
   them and nothing can overlap. "sveebs.com" stays pinned top-left beside
   the top gibbon, which is kept narrow enough (the 160px term) never to
   reach it. They still share one scale. */
@media (max-width: 820px), (orientation: portrait) {
  :root {
    --s: min(calc(68vw / 973), calc(34svh / 1337), calc((100vw - 160px) / 973));
  }
  body {
    display: flex;
    flex-direction: column;
  }
  .site { position: absolute; top: 16px; left: 16px; }
  .gibbon { position: static; }
  .gibbon.right { align-self: flex-end; }
  main, main.wide { align-self: center; width: 100%; max-width: 440px; padding: 24px 16px; }
  .gibbon.left { align-self: flex-start; margin-top: auto; }
}

/* ---- the lock page ----
   Nothing on it but the one line, in the middle of the screen. */
body.lock { place-items: center; }
body.lock main { padding: 0; }
body.lock .list { margin: 0; }
@media (max-width: 820px), (orientation: portrait) {
  body.lock { justify-content: center; }
}

/* ---- portfolio ----
   Each section is one large piece across the top, then the rest in a row
   beneath it. The row's pieces share one height and take widths in
   proportion to their own shapes (--ar, width over height), so nothing is
   cropped however many there are or whatever their sizes. */
.gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 3em;
}
.gallery .row { display: flex; gap: 12px; }
.gallery .row > * { flex: var(--ar) 1 0; min-width: 0; }
.gallery img,
.gallery video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar);
  border-radius: 2px;
}
/* On a phone the row would be too small to see; it stacks instead. */
@media (max-width: 820px), (orientation: portrait) {
  .gallery, .gallery .row { gap: 8px; }
  .gallery .row { flex-direction: column; }
}

.faint { font-style: italic; opacity: 0.5; margin: 0 0 1.8em; }

/* ---- the homepage ----
   Its gibbons and "sveebs.com" stay where they are while the page scrolls.
   On narrow or portrait screens it uses the shared layout above. */
body.home .site,
body.home .gibbon { position: fixed; }
@media (max-width: 820px), (orientation: portrait) {
  body.home .site { position: absolute; }
  body.home .gibbon { position: static; }
}

/* ---- the other pages ----
   Only the bottom-left gibbon, at the homepage's size, as a footer: it comes
   after the content in the page's flow, so a long page pushes it down
   rather than running over it, and a short one still has it at the bottom. */
body:not(.home) { grid-template-rows: 1fr auto; }
body:not(.home) .gibbon.left { position: static; justify-self: start; }
/* On a phone there is no top gibbon to push the content down past
   "sveebs.com", so it takes its own line above the page instead of sitting
   over the top of it. */
@media (max-width: 820px), (orientation: portrait) {
  body:not(.home) .site { position: static; align-self: flex-start; margin: 16px 16px 0; }
}

/* ---- admin.sveebs.com ----
   The notes as a table, served by the site's server. Wide, since a note can
   run long, and scrolls sideways on its own rather than the page doing it. */
body.admin main,
body.admin main.wide { width: min(94vw, 1200px); max-width: none; padding: 48px 0; }
.table-wrap { overflow-x: auto; }
table.notes {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  line-height: 1.4;
}
table.notes th {
  text-align: left;
  font-weight: 400;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  opacity: 0.8;
}
table.notes th,
table.notes td {
  padding: 0.5em 0.8em 0.5em 0;
  vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
}
table.notes td { white-space: nowrap; }
table.notes td.text { white-space: pre-wrap; min-width: 16em; }
table.notes td.ua { white-space: normal; font-size: 0.85em; opacity: 0.6; min-width: 14em; }

/* ---- image preview ----
   A clicked portfolio image, as large as the screen allows. Any click or
   Escape closes it. */
.gallery img { cursor: zoom-in; }
.viewer {
  max-width: none;
  max-height: none;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  padding: clamp(16px, 4vw, 48px);
  border: 0;
  background: transparent;
  cursor: zoom-out;
}
.viewer[open] { display: grid; place-items: center; }
.viewer::backdrop { background: color-mix(in srgb, var(--ground) 92%, transparent); }
.viewer img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 2px;
}

/* Settings toggles on the admin page, in the ink colour. */
.toggle { display: flex; align-items: center; gap: 0.6em; cursor: pointer; }
.toggle input { margin: 0; width: 1em; height: 1em; accent-color: var(--ink); }
#settings { margin-bottom: 1.2em; }
#settings .status:empty { display: none; }

/* Quiet text buttons, like the admin page's save and clear. */
button.quiet {
  flex: none;
  padding: 0;
  font: inherit;
  font-size: 0.85em;
  line-height: 1.75;
  color: inherit;
  background: none;
  border: 0;
  opacity: 0.5;
  cursor: pointer;
}
button.quiet:hover,
button.quiet:focus-visible { opacity: 0.9; text-decoration: underline; text-underline-offset: 3px; }

/* A message of the day can run to a few lines. */
#greeting { white-space: pre-line; }