/* churr.chat. Tokens and rules follow Churr's style guide (churr/docs/STYLE.md):
   flat colour, no rounded corners, one cut corner on things that matter,
   fills instead of frames, tags sit crooked, reading text never does,
   no terminal props, nothing from other people's servers. */

@font-face {
  font-family: "Archivo";
  src: url(fonts/archivo.woff2) format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url(fonts/martian-mono.woff2) format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #0d1026; --panel: #161a3d; --raise: #1d2250; --line: #2c3170; --grid: #1d2250;
  --ink: #efeaff; --dim: #a09dc9; --faint: #8b88b8; --edge: #6368bd;
  --lav: #b9a0ff; --cyan: #5df0e4; --pink: #ff5ccf; --yel: #ffd95e;
  --on: #0d1026; --on-yel: #15173a;
  --sans: "Archivo", "Arial Narrow", Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, Menlo, Consolas, monospace;
  --gut: clamp(16px, 4vw, 40px);
  --gap: clamp(56px, 9vw, 104px);
  --dots: radial-gradient(var(--grid) 1.2px, transparent 1.3px) 0 0 / 22px 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--pink); color: var(--on); }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 .9em; max-width: 62ch; }
a { color: var(--cyan); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--pink); }
:focus-visible { outline: 3px solid var(--yel); outline-offset: 3px; }
code { font: 400 .85em var(--mono); background: var(--raise); padding: 1px 5px; }
h3 { margin: 0 0 .4em; font: 800 1.3rem/1.15 var(--sans); font-stretch: 85%; }

.meta { font: 400 .72rem/1.6 var(--mono); color: var(--dim); }
.note { color: var(--dim); font-size: .93rem; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; z-index: 5; background: var(--yel); color: var(--on-yel); padding: 8px 12px; }

/* tags sit crooked */
.tag {
  display: inline-block; vertical-align: middle;
  font: 700 .625rem/1 var(--mono);
  text-transform: uppercase; letter-spacing: .06em;
  padding: 5px 7px;
  background: var(--lav); color: var(--on);
  transform: rotate(-2deg);
}
.tag.c { background: var(--cyan); transform: rotate(1.5deg); }
.tag.p { background: var(--pink); transform: rotate(-1.5deg); }
.tag.y { background: var(--yel); color: var(--on-yel); transform: rotate(2deg); }

/* the wordmark: the one place the glitch lives */
.word {
  font: 900 clamp(5rem, 21vw, 14rem)/.86 var(--sans); font-stretch: 112%;
  letter-spacing: -.045em; margin: 0 0 .12em -.04em;
  position: relative; display: inline-block; color: transparent; user-select: none;
}
.word::before, .word::after {
  content: "churr"; position: absolute; inset: 0; color: var(--ink);
  text-shadow: -.028em 0 var(--cyan), .028em .012em var(--pink);
}
.word::before { clip-path: polygon(-10% -10%, 110% -10%, 110% 44%, -10% 44%, -10% 62%, 110% 62%, 110% 140%, -10% 140%); }
.word::after { clip-path: inset(43.6% -10% 37.6% -10%); transform: translateX(.09em); text-shadow: -.05em 0 var(--pink), .045em 0 var(--cyan); }
.word.sm { font-size: 1.9rem; margin: 0; line-height: 1; }

/* top */
.top {
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; justify-content: space-between;
  max-width: 1200px; margin: 0 auto; padding: 14px var(--gut);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.top nav { display: flex; flex-wrap: wrap; gap: 2px; }
.top nav a {
  font: 700 .9rem/1 var(--sans); font-stretch: 85%; text-decoration: none;
  color: var(--dim); padding: 10px 12px;
}
.top nav a:hover { color: var(--ink); background: var(--raise); }
.top nav a.by { color: var(--lav); }
.top nav a[aria-current] { color: var(--ink); background: var(--raise); box-shadow: inset 0 -2px 0 var(--cyan); }

main { max-width: 1200px; margin: 0 auto; padding: 0 var(--gut); display: grid; gap: var(--gap); }
main > * { min-width: 0; }
section { display: grid; gap: 20px; }
section > * { min-width: 0; }

/* hero: the dot grid sits behind the empty space */
.hero {
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 24px 40px; align-items: center;
  background: var(--dots);
  padding: clamp(20px, 5vw, 56px) 0 8px;
}
.lede { font-size: clamp(1.4rem, 3.2vw, 2.1rem); line-height: 1.2; font-weight: 600; font-stretch: 90%; max-width: 24em; width: fit-content; background: var(--bg); }
.lede em { font-style: normal; font-weight: 800; background: var(--yel); color: var(--on-yel); padding: 0 .18em; display: inline-block; transform: rotate(-1.4deg); }
.sub { color: var(--dim); font-size: 1.1rem; background: var(--bg); max-width: 34em; }
.row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 10px; }

.btn {
  display: inline-block;
  font: 800 .9rem/1 var(--sans); font-stretch: 85%; text-transform: uppercase; letter-spacing: .04em;
  padding: 14px 18px; text-decoration: none;
  background: var(--cyan); color: var(--on);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  transition: transform .08s steps(2);
}
.btn:hover { background: var(--pink); color: var(--on); transform: translate(1px, 1px); }
.btn:focus-visible { clip-path: none; }
.ghost {
  display: inline-block;
  font: 700 .9rem/1 var(--sans); padding: 13px 16px; text-decoration: none;
  background: var(--raise); color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--edge);
}
.ghost:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--cyan); }

.hero-art { position: relative; justify-self: center; max-width: 340px; width: 100%; }
.sticker { transform: rotate(4deg); }
.stamp {
  position: absolute; left: -6%; top: 6%;
  font: 700 .8rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em;
  background: var(--pink); color: var(--on); padding: 8px 10px;
  transform: rotate(-8deg);
  box-shadow: 4px 4px 0 var(--ink);
}

/* screenshots float, so they get a hard offset block */
figure { margin: 0; display: grid; gap: 12px; align-content: start; }
figcaption { font: 400 .75rem/1.6 var(--mono); color: var(--dim); max-width: 70ch; }
.shot { padding-right: 8px; padding-bottom: 8px; }
.shot img { border: 2px solid var(--lav); box-shadow: 8px 8px 0 var(--line); width: 100%; }

/* section heading */
.bar {
  display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: baseline; justify-content: space-between;
  border-bottom: 2px solid var(--lav); padding-bottom: 10px;
}
.bar h2 { margin: 0; font: 900 clamp(1.5rem, 3.6vw, 2.2rem)/1 var(--sans); font-stretch: 75%; text-transform: uppercase; letter-spacing: .01em; }
.bar p { margin: 0; font: 500 .75rem/1.4 var(--mono); color: var(--dim); }
.big { font: 800 clamp(1.5rem, 3.6vw, 2.4rem)/1.1 var(--sans); font-stretch: 85%; max-width: 24em; margin-bottom: .4em; }

.page-head { padding: clamp(20px, 5vw, 56px) 0 0; background: var(--dots); gap: 12px; }
.page-head h1 { margin: 0; font: 900 clamp(2.6rem, 9vw, 5.5rem)/.92 var(--sans); font-stretch: 70%; text-transform: uppercase; width: fit-content; background: var(--bg); }
.page-head .lede { font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 500; font-stretch: 100%; line-height: 1.4; max-width: 36em; }

/* three reasons */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2px; }
.pillars div { background: var(--panel); padding: 24px 20px; }
.pillars b { display: block; font: 900 3rem/.8 var(--sans); font-stretch: 125%; color: transparent; -webkit-text-stroke: 1.5px var(--lav); margin-bottom: 16px; }
.pillars div:nth-child(2) b { -webkit-text-stroke-color: var(--cyan); }
.pillars div:nth-child(3) b { -webkit-text-stroke-color: var(--pink); }
.pillars p { margin: 0; color: var(--dim); }

/* the tour */
.tour { gap: clamp(40px, 6vw, 72px); }
.tour-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px 48px; align-items: center; }
.tour-row.flip > :first-child { order: 2; }
.tour-row.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.tour-row h3 { font-size: clamp(1.5rem, 3vw, 2rem); font-stretch: 80%; font-weight: 900; text-transform: uppercase; line-height: 1; margin-bottom: .6em; }
.tour-row p { color: var(--dim); }
.pair { display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }

/* three-column tables made of fills */
.grid3 { display: grid; gap: 2px; }
.grid3 > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 4fr); gap: 4px 24px; background: var(--panel); padding: 13px 16px; }
.grid3 > .grid3-head { background: none; padding-block: 0 4px; font: 700 .7rem/1.3 var(--sans); font-stretch: 85%; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); }
.grid3 b { font-weight: 700; }
.grid3 span { color: var(--dim); }
.grid3 .us { color: var(--ink); box-shadow: inset 4px 0 0 var(--cyan); padding-left: 14px; }
.grid3 > div:last-child .us { box-shadow: inset 4px 0 0 var(--pink); }
.catch .grid3 > div { background: var(--raise); }

/* the catch: a pink bar on the left marks a problem */
.catch { background: var(--panel); box-shadow: inset 6px 0 0 var(--pink); padding: clamp(20px, 4vw, 40px); padding-left: calc(clamp(20px, 4vw, 40px) + 6px); }
.catch .bar { border-color: var(--pink); }
.catch p:last-child { margin-bottom: 0; }

/* features: fills with the ground showing between them */
.feats { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 2px; }
.feat { background: var(--panel); padding: 20px 18px 16px; display: grid; gap: 8px; align-content: start; justify-items: start; }
.feat h3 { margin: 4px 0 0; font-size: 1.15rem; }
.feat p { margin: 0; color: var(--dim); font-size: .95rem; }
/* dashed is provisional */
.feat.soon { background: none; outline: 2px dashed var(--edge); outline-offset: -3px; }

.two { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px 48px; align-items: start; }
.warn { outline: 2px dashed var(--pink); outline-offset: -2px; padding: 20px; display: grid; gap: 12px; justify-items: start; }
.warn p { margin: 0; }

.code { margin: 0 0 1em; font: 400 .8rem/1.7 var(--mono); background: var(--raise); padding: 12px 14px; overflow-x: auto; box-shadow: inset 3px 0 0 var(--cyan); }
.code code { font: inherit; background: none; padding: 0; }
.specs { margin: 0; display: grid; gap: 2px; }
.specs div { background: var(--panel); padding: 12px 16px; display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 4px 16px; }
.specs dt { font: 700 .7rem/1.7 var(--sans); font-stretch: 85%; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); }
.specs dd { margin: 0; }

.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2px; }
.ways > div { background: var(--panel); padding: 20px 18px; min-width: 0; }
.ways h3 { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 14px; }
.ways p { color: var(--dim); font-size: .95rem; margin: 0; }

.conns { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 2px; }
.conns li { background: var(--panel); padding: 11px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 20px; align-items: center; }
.conns span { color: var(--dim); font-size: .93rem; grid-column: 1; }
.sw { grid-column: 2; grid-row: 1 / span 2; font: 500 .7rem/1 var(--mono); font-style: normal; color: var(--dim); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sw::before { content: ""; width: 9px; height: 9px; box-shadow: inset 0 0 0 2px var(--faint); }
.sw.on { color: var(--cyan); }
.sw.on::before { background: var(--cyan); box-shadow: none; }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 2px; margin-bottom: 8px; }
.col { background: var(--panel); padding: 22px 20px; }
.col.built { box-shadow: inset 4px 0 0 var(--cyan); }
.col.soon { box-shadow: inset 4px 0 0 var(--pink); }
.col.never { box-shadow: inset 4px 0 0 var(--yel); }
.col h3 { margin: 0 0 14px; font-size: 1.05rem; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.col ul { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; color: var(--dim); font-size: .95rem; }

/* closing call: empty space, so the grid comes back */
.cta { background: var(--dots); padding: clamp(28px, 6vw, 64px) 0; justify-items: start; gap: 12px; }
.cta h2 { margin: 0; font: 900 clamp(2.2rem, 7vw, 4.4rem)/.95 var(--sans); font-stretch: 70%; text-transform: uppercase; background: var(--bg); }
.cta h2 em { font-style: normal; background: var(--yel); color: var(--on-yel); padding: 0 .12em; display: inline-block; transform: rotate(-1.4deg); }
.cta p { background: var(--bg); color: var(--dim); font-size: 1.05rem; }

.foot {
  max-width: 1200px; margin: var(--gap) auto 0; padding: 32px var(--gut) 48px;
  background: var(--panel);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px 48px; align-items: start;
}
.foot p { color: var(--dim); margin: 10px 0 0; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: flex-end; }
.foot nav a { font: 700 .9rem/2 var(--sans); font-stretch: 85%; color: var(--ink); text-decoration: none; }
.foot nav a:hover { color: var(--cyan); }
.foot .meta { grid-column: 1 / -1; max-width: none; }

@media (max-width: 820px) {
  .hero, .two, .foot { grid-template-columns: minmax(0, 1fr); }
  .tour-row, .tour-row.flip { grid-template-columns: minmax(0, 1fr); }
  .tour-row.flip > :first-child { order: 0; }
  .hero-art { max-width: 220px; order: -1; justify-self: start; margin-left: 4%; }
  .foot nav { justify-content: flex-start; }
  .grid3 > div { grid-template-columns: minmax(0, 1fr); }
  .grid3 > .grid3-head { display: none; }
  .grid3 span::before { content: attr(data-l) ": "; font: 700 .7rem/1.3 var(--sans); font-stretch: 85%; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); }
  .grid3 .us { box-shadow: none; padding-left: 0; }
  .specs div { grid-template-columns: minmax(0, 1fr); }
  .top nav a { padding: 8px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}