/* The Pifo demo site. One column on a white ground, read from top to bottom, with the way
   to reach Simon at the end. One ink, and one accent that stands only on the focus ring.
   The values come from docs/brand.md in pifo-platform. */

:root {
  --bg: #ffffff;
  --fg: #1b2233; /* Bläck */
  --accent: #0e7c66; /* Sanera: the focus ring, nothing else */
  --arkiv: #8a8f98;
  /* Arkiv three tenths toward the ink, so small secondary text passes AA on white */
  --muted: color-mix(in srgb, var(--arkiv) 70%, var(--fg));
  --line: color-mix(in srgb, var(--arkiv) 45%, var(--bg));
  --placeholder-line: color-mix(in srgb, var(--arkiv) 70%, var(--bg));
  --column: 640px;
  --wide: 960px;
  /* The glass of the language toggle: white that lets the page through, a bright top edge
     where the light catches it, and a soft shade under it. */
  --glass: rgb(255 255 255 / 0.42);
  --glass-top: rgb(255 255 255 / 0.66);
  --glass-edge: rgb(255 255 255 / 0.8);
  --glass-thumb: rgb(255 255 255 / 0.92);
  --glass-shade: rgb(27 34 51 / 0.14);
  --glass-line: rgb(27 34 51 / 0.08);
  --gutter: 16px;
  --part-gap: 96px;
  --raven: 88px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* A serif for the headings carries the older mood. The body stays in the system sans. */
  --font-heading: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --font-name: "Chakra Petch", var(--font-heading);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --radius-card: 4px;
  --radius-control: 3px;
  color-scheme: light;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --part-gap: 128px;
    --raven: 112px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

a,
button {
  touch-action: manipulation;
}

button {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}

/* The column */

.flyer {
  width: 100%;
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 32px var(--gutter) 0;
}

/* The text keeps the narrow column in the middle of the page. A video or a screenshot
   takes the wide column, so the text of the screen in it can be read. */
.flyer > :is(p, footer),
.flyer section > * {
  max-width: var(--column);
  margin-left: auto;
  margin-right: auto;
}

.flyer .wide {
  max-width: var(--wide);
}

/* Type */

/* The name, and only the name, in its own face. The file is in the repository, so
   nothing is fetched from another server. */
@font-face {
  font-family: "Chakra Petch";
  src: url("fonts/ChakraPetch-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* The mark beside the name, at the height of the name. The lines take the ink and the
   block takes Sanera, as in pifo-site. */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mark {
  width: 28px;
  height: 28px;
  flex: none;
}

.wordmark {
  font-family: var(--font-name);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
}

h1,
h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  /* No word alone on the last line, such as "use." under the headline. */
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
  line-height: 1.05;
}

h2 {
  font-size: clamp(1.625rem, 1.3rem + 1.5vw, 2.25rem);
  line-height: 1.15;
}

h3 {
  font-size: 16px;
  font-weight: 600;
}

.eyebrow {
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow .num {
  margin-right: 12px;
  font-variant-numeric: tabular-nums;
}

.lead {
  margin-top: 24px;
  font-size: 20px;
}

.note {
  margin-top: 16px;
  font-size: 15px;
  color: var(--muted);
}

/* The hero */

.hero {
  padding-top: 72px;
}

/* The raven stands on the top edge of the first picture. Its feet end 3 percent above
   the foot of its box, so the box goes down by that much. */
.perch {
  display: grid;
  margin-top: 40px;
}

.raven {
  position: relative;
  z-index: 1;
  justify-self: end;
  height: var(--raven);
  width: auto;
  margin-right: 24px;
  margin-bottom: calc(var(--raven) * -0.03);
}

.perch .media {
  margin-top: 0;
}

/* The three parts */

.part {
  margin-top: var(--part-gap);
}

.part > p:not(.eyebrow) {
  margin-top: 16px;
  font-size: 18px;
}

.part > .for {
  margin-top: 12px;
  font-size: 15px;
  color: var(--muted);
}

/* A picture, a video or a GIF, 16:9. Until the file exists, a dashed box holds its place.
   README.md shows the line that replaces the box. */
.media {
  margin-top: 40px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.media video,
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The screen in a video has a light grey ground, so a thin line marks its edge on the
     white page. */
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

/* A screenshot of a screen, at its own shape, with one sentence under it. */
.shot {
  margin-top: 40px;
}

.shot + .shot {
  margin-top: 56px;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.shot figcaption {
  max-width: 60ch;
  margin-top: 12px;
  font-size: 15px;
  color: var(--muted);
}

.placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 16px;
  border: 1px dashed var(--placeholder-line);
  border-radius: var(--radius-card);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* The way to reach Simon. A thin line opens it. */

.contact {
  max-width: var(--column);
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--part-gap);
  padding-top: var(--part-gap);
  border-top: 1px solid var(--line);
}

.contact > p {
  margin-top: 16px;
  font-size: 18px;
}

.contact a {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line);
  transition: text-decoration-color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .contact a:hover {
    text-decoration-color: currentColor;
  }
}

/* The language toggle: a pill of glass at the top right that stays in place while the
   page scrolls under it. The thumb, a brighter piece of glass, slides to the chosen
   language. */

.lang {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 10;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: 999px;
  background: linear-gradient(to bottom, var(--glass-top), var(--glass));
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    inset 0 -1px 0 var(--glass-line),
    0 0 0 1px var(--glass-line),
    0 8px 24px var(--glass-shade);
}

.lang[hidden] {
  display: none;
}

@media (min-width: 768px) {
  .lang {
    top: 20px;
    right: 24px;
  }
}

.lang-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--glass-thumb);
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 3px var(--glass-shade);
  transition: transform 260ms var(--ease-out);
}

.lang[data-lang="en"] .lang-thumb {
  transform: translateX(100%);
}

.lang--still .lang-thumb {
  transition: none;
}

.lang button {
  position: relative;
  min-width: 48px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  /* Text on glass is a little heavier and wider, so it stays clear over any content. */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  cursor: pointer;
  transition: color 150ms ease, transform 120ms var(--ease-out);
}

.lang button[aria-pressed="true"] {
  color: var(--fg);
}

.lang button:active {
  transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
  .lang-thumb {
    transition: none;
  }
}

/* Less transparency or more contrast: solid white with a clear line. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .lang {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 0 0 1px var(--line), 0 4px 12px var(--glass-shade);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lang {
    background: rgb(255 255 255 / 0.9);
  }
}

/* The page at pifo.ai (home.html): one screen, with the text in the middle of it and the
   end line at the bottom. */

.home {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

/* In a flex column the auto side margins of the column make an element as narrow as its
   text, so each one takes the full width of the column again. */
.home > * {
  width: 100%;
}

.home .hero {
  margin-block: auto;
  padding-block: 64px;
}

.home .end {
  margin-top: 0;
}

.home-mail {
  margin-top: 32px;
  font-size: 18px;
}

.home-mail a {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line);
  transition: text-decoration-color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .home-mail a:hover {
    text-decoration-color: currentColor;
  }
}

/* The end line */

.end {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: var(--part-gap);
  padding: 24px 0 48px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}

.end a {
  text-underline-offset: 4px;
}