/* sugarcube.ch — one stylesheet for every page.
   Identity from the Sugarcube logo: an isometric cube of rounded triangles in three teals
   (sky, teal, deep), on the night blue of the blueFACTORY photograph. Ubuntu Sans throughout. */

@font-face {
  font-family: "Ubuntu Sans";
  src: url("../fonts/UbuntuSans.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  --sky: #80d4d8;        /* logo, top face */
  --teal: #0dafc7;       /* logo, left face */
  --deep: #007c8d;       /* logo, right face: graphics */
  --deep-text: #00697a;  /* the same hue for text and links: 6.3:1 on white, 5.8:1 on mist */
  --night: #07203d;      /* the photograph's sky */
  --night-deep: #041326;
  --ink: #0f2233;
  --muted: #4a5d6b;      /* 6.5:1 on white */
  --mist: #eef5f6;
  --paper: #fff;
  --on-dark: #d7e6ec;    /* body text on night, 12:1 */
  --radius: 6px;         /* the logo's triangles are softly rounded */
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --wide: 76rem;
  --measure: 38rem;
  --font: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.6;
  font-synthesis: none;
}

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

a { color: var(--deep-text); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  font-stretch: 87.5%;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); margin-bottom: 1rem; }
h3 { font-size: 1.3rem; line-height: 1.25; margin-bottom: 0.5rem; }

p { margin: 0 0 1em; }
.lead { font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.5; max-width: var(--measure); color: var(--muted); }
.small { font-size: 0.95rem; color: var(--muted); }

code, pre { font-family: ui-monospace, "Cascadia Mono", "Ubuntu Mono", Consolas, monospace; font-size: 0.9rem; }

address { font-style: normal; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  padding: 0.5rem 1rem;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  z-index: 20;
}
.skip:focus { top: 0.75rem; }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }

/* grid items may shrink below their content (code blocks scroll inside, the page never does) */
.hero-inner > *, .split > *, .features > *, .workbench > *, .pipeline > * { min-width: 0; }

/* ── masthead ─────────────────────────────────────────────────────────── */

.masthead {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 1.1rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  position: relative;
  z-index: 2;
}
.masthead.on-dark { position: absolute; inset: 0 0 auto; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.brand img { width: auto; height: 2.4rem; }
.brand:hover { color: inherit; }

.masthead ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.masthead nav a { color: var(--ink); text-decoration: none; font-weight: 500; }
.masthead nav a:hover { text-decoration: underline; }
.on-dark .brand, .on-dark nav a { color: var(--paper); }

/* ── hero: the one bold moment ────────────────────────────────────────── */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--night);
  color: var(--paper);
  padding: 8.5rem 0 0;
}
@media (min-width: 40rem) { .hero { padding-top: clamp(6.5rem, 12vw, 8.5rem); } }
.backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}
.hero::before { /* keeps text and diagram readable over the photograph */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(4 19 38 / 0.94) 0%, rgb(4 19 38 / 0.78) 45%, rgb(4 19 38 / 0.35) 100%),
    linear-gradient(0deg, rgb(4 19 38 / 0.85) 0%, rgb(4 19 38 / 0) 40%);
}

.hero-inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: 2rem 3rem;
  align-items: center;
}
@media (min-width: 62rem) {
  .hero-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: min(40rem, calc(100svh - 12rem)); }
}

.hero h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); font-weight: 750; font-stretch: 80%; max-width: 12ch; line-height: 1; }
.hero .lead { color: var(--on-dark); margin: 1.5rem 0 2rem; max-width: 34rem; }

.actions { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.button {
  display: inline-block;
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius);
  border: 2px solid var(--sky);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
}
.button.primary { background: var(--sky); color: var(--night); border-color: var(--sky); }


.facts {
  list-style: none;
  max-width: var(--wide);
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding: 1.1rem var(--gutter) 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  border-top: 1px solid rgb(128 212 216 / 0.3);
  color: var(--on-dark);
  font-weight: 500;
}
.facts li { display: flex; align-items: center; gap: 0.6rem; }
.facts li::before, .points li::before, .feature h3::before {
  /* a triangle from the logo */
  content: "";
  flex: none;
  width: 0.62em;
  height: 0.72em;
  background: var(--sky);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* the exploded page */
.diagram { width: 100%; height: auto; overflow: visible; }
.diagram .d-paper { fill: #fff; }
.diagram .d-ink { fill: #1d3346; }
.diagram .d-grey { fill: #a9b8c2; }
.diagram .d-fig { fill: var(--sky); }
.diagram .d-chart { fill: none; stroke: var(--deep); stroke-width: 3; stroke-linejoin: round; }
.diagram .d-sheet { fill: rgb(13 175 199 / 0.08); stroke: var(--sky); stroke-width: 1.2; stroke-dasharray: 5 4; }
.diagram .d-glyph { fill: var(--teal); }
.diagram .d-block { fill: rgb(128 212 216 / 0.16); stroke: var(--sky); stroke-width: 1.4; }
.diagram .d-order { fill: var(--teal); }
.diagram .d-num { fill: var(--night); font: 700 12px var(--font); text-anchor: middle; }
.diagram .guides line { stroke: rgb(128 212 216 / 0.45); stroke-width: 1; stroke-dasharray: 3 5; }
.diagram .tag line { stroke: var(--sky); stroke-width: 1.2; }
.diagram .tag-name { fill: #fff; font: 700 17px var(--font); }
.diagram .tag-note { fill: var(--on-dark); font: 400 13.5px var(--font); }
@media (max-width: 40rem) {
  .diagram .tag-name { font-size: 26px; }
  .diagram .tag-note { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .diagram .layer { animation: lift 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s backwards; }
  .diagram .tag, .diagram .guides { animation: appear 0.6s ease-out 1.5s backwards; }
}
@keyframes lift { from { transform: translateY(var(--rise)); } }
@keyframes appear { from { opacity: 0; } }

/* ── bands ────────────────────────────────────────────────────────────── */

.band { padding: clamp(4rem, 9vw, 7rem) 0; }
.band.mist { background: var(--mist); }
.band.dark { background: var(--night); color: var(--paper); }
.band.dark .lead, .band.dark p, .band.dark li, .band.dark address { color: var(--on-dark); }
.band.dark a { color: var(--sky); }

.split { display: grid; gap: 2.5rem 4rem; align-items: start; }
@media (min-width: 58rem) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.links { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; font-weight: 600; }

/* jexter: the conversion map, in → OCD → outputs grouped by use.
   Connectors are drawn in CSS: each output group draws its own piece of the trunk,
   so the tree follows the content's height without measuring anything. */
.pipeline {
  --line: var(--teal);
  --reach: 1.75rem;              /* horizontal length of a connector */
  display: grid;
  gap: 1.5rem;
  margin: 2.5rem 0 1.5rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: calc(var(--radius) * 2);
  background: var(--mist);
}
.pipe-label { margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 600; color: var(--muted); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chips li { padding: 0.3rem 0.75rem; border-radius: var(--radius); background: var(--paper); border: 1px solid #c9dde2; font-weight: 500; }
.pipe-in .chips li { font-weight: 700; }

.pipe-hub {
  position: relative;
  align-self: center;
  padding: 1.25rem 1.5rem 1.1rem;
  border-radius: calc(var(--radius) * 2);
  background: var(--night);
  color: var(--paper);
  text-align: center;
}
.pipe-hub img { width: 4rem; height: auto; margin: 0 auto 0.6rem; }
.hub-name { margin: 0; font-size: 1.9rem; font-weight: 800; line-height: 1; letter-spacing: 0.04em; color: var(--sky); }
.hub-note { margin: 0.35rem 0 0; font-size: 0.85rem; line-height: 1.3; color: var(--on-dark); }

.pipe-out { list-style: none; margin: 0; padding: 0; }
.pipe-out > li { position: relative; padding-bottom: 1.1rem; }
.pipe-out > li:last-child { padding-bottom: 0; }
.out-name { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-weight: 700; }
.out-name::before { /* arrowhead: a triangle of the logo */
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.75rem;
  background: var(--line);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.out-note { margin: 0 0 0.45rem 1.1rem; font-size: 0.95rem; color: var(--muted); }
.pipe-out > li .chips { margin-left: 1.1rem; }

@media (min-width: 56rem) {
  .pipeline { grid-template-columns: auto auto minmax(0, 1fr); gap: 0; align-items: center; }
  .pipe-in { position: relative; margin-right: var(--reach); }
  .pipe-in .chips { flex-direction: column; align-items: stretch; text-align: center; }
  .pipe-in::after { /* in → hub */
    content: "";
    position: absolute;
    top: calc(50% + 0.75rem);
    right: calc(-1 * var(--reach));
    width: var(--reach);
    height: 2px;
    background: var(--line);
  }
  .pipe-hub { margin-right: var(--reach); min-width: 11rem; }
  .pipe-hub::after { /* hub → trunk */
    content: "";
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--reach));
    width: var(--reach);
    height: 2px;
    background: var(--line);
  }
  .pipe-out { padding-left: var(--reach); }
  .pipe-out > li::before { /* trunk → group */
    content: "";
    position: absolute;
    top: 0.8rem;
    left: calc(-1 * var(--reach));
    width: var(--reach);
    height: 2px;
    background: var(--line);
  }
  .pipe-out > li::after { /* this group's piece of the trunk */
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(-1 * var(--reach));
    width: 2px;
    background: var(--line);
  }
  .pipe-out > li:first-child::after { top: 0.8rem; }
  .pipe-out > li:last-child::after { bottom: auto; height: 0.9rem; }
  .out-name::before { margin-left: -0.1rem; }
}

.principle {
  max-width: 48rem;
  margin: 2rem 0 3rem;
  padding-left: 1.25rem;
  border-left: 4px solid var(--teal);
  font-size: 1.2rem;
  line-height: 1.55;
}

.features { display: grid; gap: 2rem 3rem; }
@media (min-width: 44rem) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature p { color: var(--muted); margin: 0; }
.feature h3 { display: flex; align-items: baseline; gap: 0.6rem; }
.feature:nth-child(3n + 1) h3::before { background: var(--sky); }
.feature:nth-child(3n + 2) h3::before { background: var(--teal); }
.feature:nth-child(3n + 3) h3::before { background: var(--deep); }

.workbench {
  display: grid;
  gap: 2rem 4rem;
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid #d3e3e7;
}
@media (min-width: 58rem) { .workbench { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.workbench pre {
  margin: 0.5rem 0 0.75rem;
  padding: 1rem 1.25rem;
  white-space: pre-wrap;         /* never a scrollbar: long tokens break on very narrow screens */
  overflow-wrap: anywhere;
  border-radius: var(--radius);
  background: var(--night);
  color: var(--on-dark);
  line-height: 1.5;
}
@media (max-width: 26rem) { .workbench pre { font-size: 0.78rem; padding: 0.9rem 1rem; } }

/* sugarcloud */
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.points li { display: flex; gap: 0.75rem; align-items: baseline; }
.points li::before { background: var(--teal); }

/* ZigZag demo */
.demo { margin: 0; width: 100%; max-width: calc(80svh * var(--ar, 0.75)); justify-self: center; }
.stage {
  --cut: 50%;
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar, 0.75);
  background: var(--mist);
  border-radius: var(--radius);
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 0 0 1px #d3e3e7;
}
.stage.ready { cursor: ew-resize; }
.stage.dragover { outline: 3px dashed var(--teal); outline-offset: 4px; }
.stage.dragover::after {   /* the drop hint, over the photo while a file is dragged above the demo */
  content: attr(data-drop-hint);
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgb(7 32 61 / 0.88);
  color: var(--paper);
  font-weight: 600;
  text-align: center;
}
.stage .before, .stage .after { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.stage .after { clip-path: inset(0 0 0 var(--cut)); background: var(--paper); }
.seam { position: absolute; top: 0; bottom: 0; left: var(--cut); width: 2px; margin-left: -1px; background: var(--deep); }
.seam .grip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.75rem;
  height: 2.75rem;
  transform: translate(-50%, -50%);
  border-radius: var(--radius);
  background: var(--deep);
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-size: 2px 1.1rem;
  background-position: calc(50% - 5px) 50%, calc(50% + 5px) 50%;
  background-repeat: no-repeat;
}
.seam:focus-visible { outline: none; }
.seam:focus-visible .grip { outline: 3px solid var(--ink); outline-offset: 2px; }

.demo figcaption { margin-top: 1rem; font-size: 1rem; color: var(--muted); }
.demo figcaption p { margin-bottom: 0.75rem; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.modes { display: flex; margin: 0; padding: 0; border: 0; }
.modes label { position: relative; padding: 0.35rem 0.8rem; border: 1px solid var(--deep-text); color: var(--deep-text); cursor: pointer; }
.modes label:first-of-type { border-radius: var(--radius) 0 0 var(--radius); }
.modes label:last-of-type { border-radius: 0 var(--radius) var(--radius) 0; }
.modes label + label { border-left: 0; }
.modes input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.modes label:has(input:checked) { background: var(--deep-text); color: var(--paper); }
.modes label:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: 2px; z-index: 1; }
.pick { font: inherit; padding: 0.35rem 0.9rem; border: 1px solid var(--deep-text); border-radius: var(--radius); background: var(--paper); color: var(--deep-text); cursor: pointer; }
.status { min-height: 1.6em; font-size: 0.95rem; }

/* about */
.licence-title { margin-top: 2.5rem; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid #cfe0e4; }
.timeline .year { font-weight: 700; color: var(--deep-text); font-variant-numeric: tabular-nums; }

/* contact */
.contact { background: var(--night-deep); }
.mail { font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 600; margin: 1.25rem 0 1.5rem; }

/* ── plain pages ──────────────────────────────────────────────────────── */

.page { max-width: var(--wide); margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) var(--gutter) clamp(3rem, 8vw, 5rem); }
.page h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 1.5rem; }
.page h2 { font-size: 1.6rem; margin: 2.5rem 0 1rem; }
.page p, .page ul, .page address { max-width: var(--measure); margin-bottom: 1em; }
.page li { margin-bottom: 0.5em; }

/* ── colophon ─────────────────────────────────────────────────────────── */

.colophon { background: var(--night-deep); color: var(--on-dark); font-size: 0.95rem; }
.home .colophon { border-top: 1px solid rgb(128 212 216 / 0.2); }
.colophon-inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 2rem var(--gutter) 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem 3rem;
}
.colophon p { margin: 0; }
.colophon a { color: var(--sky); }
.colophon .brand { color: var(--paper); font-size: 1.2rem; }
.colophon .brand img { height: 1.9rem; }
.hero :focus-visible, .dark :focus-visible, .colophon :focus-visible { outline-color: var(--paper); }

/* back to top: sits at the end of the page, where the reader arrives */
.to-top {
  margin-left: auto;
  align-self: center;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--sky);
  border-radius: var(--radius);
}
.to-top::before { /* a triangle of the logo, pointing up */
  content: "";
  width: 0.9rem;
  height: 0.78rem;
  background: var(--sky);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* hover effects only where a pointer really hovers: no effect stuck on after a tap */
@media (hover: hover) {
  .button:hover { background: rgb(128 212 216 / 0.15); }
  .button.primary:hover { background: var(--paper); border-color: var(--paper); }
  .pick:hover { background: var(--deep-text); color: var(--paper); }
  .to-top:hover { background: var(--sky); }
  .to-top:hover::before { background: var(--night-deep); }
}

/* the conversion map's output groups appear one after another, once (reveal.js adds .is-visible) */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .pipe-out > li { opacity: 0; transition: opacity 0.6s ease; }   /* opacity only: the trunk pieces stay aligned */
  .js-reveal .pipeline.is-visible .pipe-out > li { opacity: 1; }
  .js-reveal .pipeline.is-visible .pipe-out > li:nth-child(1) { transition-delay: 0.35s; }
  .js-reveal .pipeline.is-visible .pipe-out > li:nth-child(2) { transition-delay: 0.5s; }
  .js-reveal .pipeline.is-visible .pipe-out > li:nth-child(3) { transition-delay: 0.65s; }
  .js-reveal .pipeline.is-visible .pipe-out > li:nth-child(4) { transition-delay: 0.8s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}