/* michaelmarte.com start page.
   The closing plate of futurehours.at (index.html .word-band, section.css, styles.css),
   cut out as a standalone page. Tokens come unchanged from Futurehours tokens.css. */
@import "tokens.css?v=4";

@font-face {
  font-family: "Intratopia";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/intratopia-vf.woff2") format("woff2");
}

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

/* :root, not html: must beat the :root defaults in tokens.css (night sky, white ink). */
:root {
  /* The plate is always light. Same as .word-band on Futurehours (--panel-fill). */
  --sky: var(--day);
  --ink: 0, 0, 0;
  background: var(--panel-fill);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--panel-fill);
  color: rgb(var(--ink));
  font-family: var(--font);
  font-synthesis: none;
  font-size: var(--fh-fs);
  font-weight: var(--fh-weight);
  line-height: var(--leading);
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ---------- Chip (styles.css) ---------- */
.chip {
  display: inline-block;
  padding: var(--space-4) var(--space-8);
  border: var(--border);
  border-radius: var(--radius-pill);
  background: rgb(var(--sky));
  color: inherit;
  font: inherit;
  font-size: var(--fh-fs);
  line-height: var(--leading);
  cursor: pointer;
}

.chip:hover {
  text-decoration: none;
  background: linear-gradient(rgba(var(--ink), 0.1), rgba(var(--ink), 0.1)), rgb(var(--sky));
}

.chip:focus-visible,
.sheet-foot-meta a:focus-visible {
  outline: var(--border);
  outline-offset: 2px;
}

/* ---------- Plate (section.css: .word-band, .band-foot, .sheet-foot-meta) ---------- */
.word-band {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--panel-fill);
  overflow: hidden;
}

.word-band-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: none;
  touch-action: pan-y;
}

.band-foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  padding: var(--space-page);
  color: rgb(var(--ink));
}

.band-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}

.band-mail {
  border: 0;
  background: #000;
  color: rgb(var(--day));
  text-decoration: none;
}

.band-mail:hover {
  background: #000;
  text-decoration: none;
  opacity: 0.72;
}

.band-line {
  position: relative;
  margin: 0;
  max-width: min(28em, 100%);
  font-size: calc(var(--fh-fs) * 2.5);
}

.sheet-foot-meta {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-8) var(--space-24);
  margin: 0;
  padding: var(--space-16) var(--space-page) var(--space-page);
  list-style: none;
  color: #000;
}

.sheet-foot-meta a {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

.sheet-foot-meta a:hover {
  color: rgba(var(--ink), 0.45);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Legal page (/impressum/): same plate, scrolls, no halftone ---------- */
.legal-page {
  display: flex;
  flex-direction: column;
}

.legal-page .band-foot {
  padding-bottom: var(--space-48);
}

.legal {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--gutter);
  row-gap: var(--space-48);
  padding: 0 var(--space-page) var(--space-64);
}

.legal-block {
  grid-column: span 6;
  max-width: 36em;
}

.legal-block h2 {
  margin: 0 0 var(--space-16);
  font-size: calc(var(--fh-fs) * 1.5);
  font-weight: var(--fh-weight);
  line-height: 1.25;
}

.legal-block h3 {
  margin: var(--space-24) 0 var(--space-4);
  font-size: var(--fh-fs);
  font-weight: var(--fh-weight);
}

.legal-block p + p {
  margin-top: var(--space-16);
}

.legal-block a {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

.legal-block a:hover {
  color: rgba(var(--ink), 0.45);
}

.legal-sub {
  margin-bottom: var(--space-16);
  opacity: 0.6;
}

/* Placeholder for data that has to come from Michael. Easy to spot, easy to grep: "TODO". */
.todo {
  padding: 0 var(--space-4);
  background: #000;
  color: rgb(var(--day));
}

.legal-page .sheet-foot-meta {
  position: static;
  margin-top: auto;
}

@media (max-width: 52rem) {
  .legal-block {
    grid-column: 1 / -1;
  }
}

/* Mobile (--bp-mobile, 40rem, as in tokens.css): the address leaves the bottom row.
   It stays in the imprint body. */
@media (max-width: 40rem) {
  .foot-place {
    display: none;
  }
}

/* ---------- Ink bleed (static, global) ----------
   Ink soaking into paper: a tight dark core, then two soft halos in the text's own colour.
   Set once on body and inherited, so all HTML text (headline, chips, footer, legal page)
   gets it. Sizes are in em, so large and small type bleed in proportion. currentColor
   follows the text: transparent text (headline before the censor bars) stays invisible. */
body {
  --ink-bleed:
    0 0 0.012em currentColor,
    0 0 0.06em color-mix(in srgb, currentColor 80%, transparent),
    0 0 0.18em color-mix(in srgb, currentColor 45%, transparent);
  text-shadow: var(--ink-bleed);
}

/* Bars and pills are solid shapes, not ink: no halo on their hidden labels. */
.censor-sheet,
.censor-sheet * {
  text-shadow: none;
}

/* ---------- Grain (static) ----------
   Paper grain over the flat plate: same PNG tile as the Futurehours atmosphere, no animation.
   Fixed overlay above the page, never catches clicks. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  background: url("grain.png") repeat;
  background-size: 180px 180px;
  mix-blend-mode: soft-light;
  opacity: 0.55;
  pointer-events: none;
}

/* ---------- Censor-bar reveal (censor.js; ported from Futurehours styles.css) ----------
   Until censor.js has put the bars on, the headline text stays invisible (no flash of
   uncovered text). The head script removes .mm-censor after 3s as a failsafe.
   Bars are absolutely placed on the measured box of each word, so they follow the real wraps. */
html.mm-censor [data-censor],
html.mm-censor [data-censor-pill] {
  color: transparent;
}

html.mm-censor [data-censor-pill] {
  background: rgb(var(--ink));
}

.pill-censor::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(var(--ink));
  pointer-events: none;
  animation: censor-pull-r var(--censor-pinch, 560ms) var(--ease-out) var(--censor-at, 0ms) both;
}

.bubble-writing {
  position: relative;
}

.censor-sheet {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  color: transparent;
}

.bubble-writing .censor {
  position: absolute;
  background-color: rgb(var(--ink));
  border-radius: 1px;
  animation-duration: var(--censor-pinch, 560ms);
  animation-timing-function: var(--ease-out);
  animation-fill-mode: both;
  animation-delay: var(--censor-at, 0ms);
}

.bubble-writing .censor.censor-pill {
  border-radius: 999px;
}

.bubble-writing .censor.pull-r {
  animation-name: censor-pull-r;
}

.bubble-writing .censor.pull-l {
  animation-name: censor-pull-l;
}

@keyframes censor-pull-r {
  from { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(0 0 0 100%); }
}

@keyframes censor-pull-l {
  from { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(0 100% 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  html.mm-censor [data-censor] {
    color: inherit;
  }

  html.mm-censor [data-censor-pill] {
    color: rgb(var(--sky));
  }

  .pill-censor::after,
  .censor-sheet {
    display: none;
  }
}

/* The pill's cover bar (.pill-censor::after) is positioned against the pill itself. */
[data-censor-pill] {
  position: relative;
}