/* oiniges. Light, monochrome, precise. The restraint is the style. */

@font-face {
  font-family: "Switzer";
  src: url("assets/fonts/switzer-variable-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/geist-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light only;

  --bg:      #FBFBFA;
  --ink:     #131312;
  --ink-60:  #6F6F6B;
  --ink-40:  #A3A39E; /* reserved: fails AA as text on --bg, see 04-tech.md */
  --line:    #E6E6E2;
  --radius:  0;
  --shadow:  none;

  --sans: "Switzer", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: 24px;
  --bleed: 16px;
  --slot: 69px;
  --ease: 120ms ease-out;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Motion 1 of 2: static grain. Barely visible, mostly felt. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter) 72px;
}

/* ---------------------------------------------------------------- hero */

.hero {
  min-height: 55vh;
  display: flex;
  align-items: center;
  padding: 96px 0 64px;
}

.emblem {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
}

.emblem i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 150ms ease-out;
}

.emblem i.on { transform: scale(1.5); }

.wordmark {
  margin: 0;
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.manifesto {
  margin: 24px 0 0;
  max-width: 46ch;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink-60);
}

/* --------------------------------------------------------------- index */

.index-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 20px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-60);
}

.index-rule {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.index {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.index li { border-bottom: 1px solid var(--line); }

.row {
  --fg: var(--ink);
  --fg-2: var(--ink-60);
  --chip-edge: var(--line);

  display: grid;
  grid-template-columns: auto var(--slot) minmax(0, 1fr) auto 12px;
  grid-template-areas: "num slot body meta arrow";
  align-items: start;
  column-gap: 16px;
  padding: 22px var(--bleed);
  margin: 0 calc(var(--bleed) * -1);
  color: var(--fg);
  text-decoration: none;
  outline: none;
  transition: background-color var(--ease), color var(--ease);
}

.row:hover,
.row:focus-visible {
  --fg: var(--bg);
  --fg-2: var(--bg);
  --chip-edge: var(--bg);
  background: var(--ink);
}

/* the number and metadata are nudged so their optical centres sit on the title line */
.num {
  grid-area: num;
  padding-top: 8px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
  transition: color var(--ease);
}

.slot {
  grid-area: slot;
  position: relative;
  align-self: stretch;          /* the mark fills the height the text block sets */
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--slot);
}

.body {
  grid-area: body;
  display: block;
  min-width: 0;
}

.title {
  display: block;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.line {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--fg-2);
  transition: color var(--ease);
}

.thesis {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--fg-2);
  transition: color var(--ease);
}

.meta {
  grid-area: meta;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding-top: 8px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--fg-2);
  transition: color var(--ease);
}

.arrow {
  grid-area: arrow;
  width: 12px;
  height: 12px;
  margin-top: 6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  opacity: 0;
  transition: opacity var(--ease);
}

.row:hover .arrow,
.row:focus-visible .arrow { opacity: 1; }

/* --------------------------------------------------- marks and characters */

/* One artwork per mark, desaturated at rest so the ledger stays monochrome and
   handed its colour back on hover. Custodos and Klara carry real colour and read
   straight off the ink. haseln and Hygge Suites are pure black, so there is no
   colour to give back; they invert to white instead, which is what 02-design.md
   asked for in the first place. */
.mark {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--ease);
}

.row:hover .mark,
.row:focus-visible .mark { filter: none; }

.row:hover .mark-haseln, .row:focus-visible .mark-haseln,
.row:hover .mark-hygge,  .row:focus-visible .mark-hygge { filter: invert(1); }

.mark-hygge    { background-image: url("assets/logos/hygge-suites.webp"); }
.mark-haseln   { background-image: url("assets/logos/haseln.webp"); }
.mark-custodos { background-image: url("assets/logos/custodos.webp"); }
.mark-klara    { background-image: url("assets/logos/klara.webp"); }

/* Characters never invert. The light circle on the dark row is a punched hole.
   They desaturate at rest with the marks, and get their colour back on hover. */
.chip {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--chip-edge);
  transition: border-color var(--ease);
}

.chip img {
  position: absolute;
  top: 0;
  height: auto;
  filter: grayscale(1);
  transition: filter var(--ease);
}

.row:hover .chip img,
.row:focus-visible .chip img { filter: grayscale(0); }

.chip-romy   img { width: 108.7%; left: -4.5%; }
.chip-emil   img { width: 192.0%; left: -50.7%; }
.chip-frieda img { width: 171.4%; left: -27.4%; }

/* -------------------------------------------------------------- footer */

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 24px;
  margin-top: 64px;
}

.foot p { margin: 0; }

.mail { font-size: 15px; }

/* not uppercased: the wordmark stays lowercase everywhere, including (c) 2026 oiniges */
.coords {
  display: flex;
  gap: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-60);
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 640px) {
  :root { --gutter: 20px; --bleed: 12px; --slot: 45px; }

  .hero { min-height: 40vh; padding: 72px 0 48px; }
  .manifesto { font-size: 18px; }

  .row {
    grid-template-columns: auto var(--slot) minmax(0, 1fr);
    grid-template-areas:
      "num slot body"
      "num slot meta";
    row-gap: 8px;
    column-gap: 12px;
  }

  .title { font-size: 22px; }

  .num { padding-top: 6px; }

  .meta {
    flex-direction: row;
    align-items: baseline;
    gap: 0;
    padding-top: 0;
    white-space: normal;
  }

  .sector::before { content: "\00A0\00B7\00A0"; }

  .arrow { display: none; }

  .foot { margin-top: 48px; }
  .coords { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}