/* channel.is. Paper and ink, one serif for reading, one sans for anything you press or fill in (docs/brand.md). */

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/SourceSerif4.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

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

:root {
  color-scheme: light dark;
  --paper: #fbf9f4;
  --ink: #323232;
  --quiet: #7c7770;
  --hairline: #d9d4cb;
  --espresso: #c8beb4;
  --vermilion: #fb513d;
  --mark-filter: none;
  --size: clamp(17px, min(5.05vw, 2.95dvh), 24px);
  --gutter: clamp(18px, 4vw, 40px);
  --body: calc(var(--size) * .84);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #131210;
    --ink: #f3f0ea;
    --quiet: #8f8a82;
    --hairline: #38352f;
    --espresso: #5c554d;
    --mark-filter: invert(1);
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--size)/1.3 "Source Serif 4", Georgia, serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The app's PaperBackground (Print.swift): the same paper color, and the same grain at the same 128pt tile and 3.5%. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("/paper.png") 0 0 / 128px;
  opacity: .035;
  filter: var(--mark-filter);
}

/* Your handle sits on Lilac, the brand's expressive field, in either appearance. */
body { transition: background-color .5s ease; }
body[data-tab="handle"] {
  --paper: #db8bfa;
  --ink: #323232;
  --quiet: #4a3a52;
  --hairline: #7d5c8c;
  --cross: #323232;
  --mark-filter: none;
}

a { color: inherit; }
a:focus-visible, input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
h1, p, ul { margin: 0; padding: 0; font-size: 1em; }
h1, strong { font-weight: 600; }
ul { list-style: none; }

/* One screen: no page scroll. Main only scrolls if someone's zoom or a tiny window leaves no other way to read it. */
.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

.col {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  padding: env(safe-area-inset-top) max(env(safe-area-inset-right), var(--gutter)) 0 max(env(safe-area-inset-left), var(--gutter));
}

/* The pictures. On a phone, whatever room the words leave, down to nothing on a short screen. */
.art {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  container-type: size;
}

.art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .7s ease;
}

.art img.on { opacity: 1; }
.art img[data-for="channel"] { object-position: 50% 28%; }

@media (min-width: 860px) {
  .app { flex-direction: row; }
  .col { flex: 1 1 54%; min-width: 0; height: 100%; }
  .art { flex: 1 1 46%; background: #0f0f0d; }
}

/* A phone: tabs, words, picture, footer, top to bottom. */
@media (max-width: 859px) {
  .col { display: contents; }
  .tabs, .legal { margin-inline: max(env(safe-area-inset-left), var(--gutter)); }
  .tabs { margin-top: env(safe-area-inset-top); }
  main { flex: 0 1 auto !important; margin-inline: calc(max(env(safe-area-inset-left), var(--gutter)) - 8px) !important; }
  .art { order: 1; margin: .2em var(--gutter) .2em; border-radius: 14px; }
  .legal { order: 2; }
  @container (max-height: 60px) { .art img { display: none; } }
}

main { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; margin: 0 -8px; padding: 0 8px; }
main::-webkit-scrollbar { display: none; }

/* The sans. Inter runs large beside the serif, so it steps down a little. */
.tab, .cta, .line, .forms, .status, .legal { font-family: "Inter", system-ui, sans-serif; letter-spacing: -.011em; }
.tab { font-size: .8em; font-weight: 500; }
.cta { font-size: .84em; }
.line, .forms { font-size: max(.88em, 16px); } /* iOS zooms into any field under 16px. */

/* Tabs */
.tabs {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 5vw, 40px);
  padding: clamp(14px, 2.6dvh, 28px) 0 clamp(14px, 3.4dvh, 40px);
  white-space: nowrap;
}

.tab { text-decoration: none; color: var(--quiet); transition: color .15s; padding: 6px 0; }
.tab:hover, .tab[aria-selected="true"] { color: var(--ink); }
.tab:not(.wordmark)[aria-selected="true"] { text-decoration: underline 1.5px; text-underline-offset: 3px; }
/* The wordmark itself, never under 100px wide (docs/brand.md). */
.logo { display: block; width: 100px; height: auto; filter: var(--mark-filter); }
/* The logo stands on the same line as the selected tab's underline. */
.tab.wordmark { padding: 0; position: relative; top: 4.5px; }

/* Panels */
.panel {
  max-width: 28em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(.62em, 2.1dvh, 1.05em);
  padding-bottom: .5em;
  outline: none;
}

.panel[hidden] { display: none; }

html.js .panel > * { animation: rise .6s cubic-bezier(.22, 1, .36, 1) both; }
html.js .panel > :nth-child(2) { animation-delay: 60ms; }
html.js .panel > :nth-child(3) { animation-delay: 120ms; }
html.js .panel > :nth-child(4) { animation-delay: 180ms; }
html.js .panel > :nth-child(5) { animation-delay: 240ms; }
html.js .panel > :nth-child(6) { animation-delay: 300ms; }
html.js .panel > :nth-child(7) { animation-delay: 360ms; }
html.js .panel > :nth-child(8) { animation-delay: 420ms; }
html.js .panel > :nth-child(9) { animation-delay: 480ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* An ink symbol, drawn again and again: the app's stop-motion primitives. */
.figure { display: block; margin-left: -.3em; filter: var(--mark-filter); }
.figure img { display: block; width: clamp(40px, 8.4dvh, 68px); height: auto; }

/* The warrior: the same stop-motion, as a film strip of 15 frames at the app's 7.5 a second. */
.warrior {
  --cell: clamp(44px, 9.4dvh, 80px);
  width: var(--cell);
  height: var(--cell);
  margin-left: 0;
  background: url("/marks/Warrior.png") 0 0 / calc(var(--cell) * 15) var(--cell) no-repeat;
}

html.js .panel > .warrior { animation: rise .6s cubic-bezier(.22, 1, .36, 1) both, film 2s steps(15) infinite; }

@keyframes film { to { background-position-x: calc(var(--cell) * -15); } }

/* One body size on every tab and document. */
.panel { font-size: var(--body); max-width: 32em; gap: clamp(.5em, 1.6dvh, .85em); }
.panel .cta { font-size: max(.9em, 14px); }
.panel .ctas { gap: .25em; margin-top: .1em; }
@media (max-width: 859px) and (max-height: 900px) { .warrior { --cell: 44px; } }

/* Business has the most to say, so on a phone or short laptop it gives up its symbol, and on a short one some type size. */
@media (max-width: 859px), (max-height: 760px) { #business .figure { display: none; } }
/* So does the handle tab now, to make room for the claim. */
@media (max-width: 859px) and (max-height: 900px) { #handle .figure { display: none; } }
@media (max-width: 859px) and (max-height: 620px) { .forms { display: none; } }

/* Small phones give the mark's room to the words, and a little type. */
@media (max-width: 859px) and (max-height: 760px) { .figure { display: none; } }
@media (max-width: 859px) {
  :root { --body: max(calc(var(--size) * .8), 14px); }
}

@media (max-width: 859px) and (max-height: 620px) {
  :root { --size: 15.5px; }
  .app .legal { flex-wrap: nowrap; gap: .75em; font-size: 12px; white-space: nowrap; }
}

/* Things you can do: hover or tap one and its mark pops up. */
.task {
  cursor: pointer;
  text-decoration: underline 1px var(--hairline);
  text-underline-offset: .16em;
  transition: text-decoration-color .15s;
  -webkit-tap-highlight-color: transparent;
}

.task:hover, .task.lit { text-decoration-color: var(--ink); }

.pop {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
}

.pop img {
  position: absolute;
  z-index: 2;
  left: .1em;
  bottom: .95em;
  width: 1.8em;
  height: 1.8em;
  padding: .34em;
  border-radius: 50%;
  background: var(--espresso);
  opacity: 0;
  transform: scale(0);
  transform-origin: 0 100%;
  transition: transform .15s, opacity .15s;
  pointer-events: none;
}

@media (prefers-color-scheme: dark) { .pop img { filter: invert(1); background: #a39a90; } }

.task:hover .pop img, .task.lit .pop img {
  opacity: 1;
  transform: none;
  transition: transform .5s linear(0, .092, .296, .528, .736, .897, 1.004, 1.063, 1.085, 1.084, 1.068, 1.049, 1.029, 1.014, 1.003, .996, .993, .995, .998, 1), opacity .12s;
}

/* Calls to action */
.ctas { display: flex; flex-direction: column; align-items: flex-start; gap: .42em; margin-top: .35em; }

.cta {
  display: inline-flex;
  align-items: center;
  gap: .42em;
  padding: .12em 0;
  font-weight: 600;
  text-decoration: none;
}

.cta::after {
  content: "";
  width: .4em;
  height: .4em;
  border: solid currentColor;
  border-width: 1.5px 1.5px 0 0;
  transform: rotate(45deg);
  transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}

.cta:hover::after { transform: translateX(.18em) rotate(45deg); }

/* Your handle: a line to sign on, as on a document. */
.line {
  display: flex;
  align-items: baseline;
  width: 100%;
  margin-top: .2em;
  padding-bottom: .22em;
  border-bottom: 1.5px solid var(--ink);
  cursor: text;
}

.x { color: var(--cross, var(--vermilion)); font-weight: 600; margin-right: .42em; }
.prefix { color: var(--quiet); }

.line input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  letter-spacing: -.01em;
}

.line input::placeholder { color: var(--hairline); font-weight: 400; }
.line:focus-within { border-bottom-width: 2px; padding-bottom: calc(.22em - .5px); }

.status { min-height: 1.3em; margin-top: -.3em; color: var(--quiet); font-size: max(.78em, 12px); }
.status.yes { color: var(--ink); }

.forms { display: flex; flex-direction: column; gap: .1em; }
.forms b { font-weight: 600; }
.forms b.empty { font-weight: 400; color: var(--quiet); }
.forms li { overflow-wrap: anywhere; }

.countdown { color: var(--quiet); white-space: nowrap; }

/* The claim: the same field lines, and an ink button like the app's primary (ThreadsButtonStyle). */
.claim { display: flex; flex-direction: column; align-items: flex-start; gap: inherit; width: 100%; margin: 0; }
.claim .line input[type="email"] { margin-left: .5em; font-weight: 400; }
.claim[hidden] { display: none; }
.claim button {
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: #fbf9f4;
  font: 600 15px "Inter", system-ui, sans-serif;
  cursor: pointer;
  transition: opacity .15s;
}
.claim button:hover { opacity: .85; }
.claim button:disabled { opacity: .5; cursor: default; }
.claim button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.trap { position: absolute; left: -9999px; }
.claimed { display: flex; flex-direction: column; gap: inherit; outline: none; }
.claimed[hidden] { display: none; }

/* Footer */
.legal {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: .3em 1.4em;
  padding: .5em 0 clamp(10px, 2dvh, 22px);
  color: var(--quiet);
  font-size: 13px;
}

.legal a { text-decoration: none; }
.legal a:hover { color: var(--ink); }

/* Documents: terms, privacy, guidelines, and the page for a name. These scroll. */
.doc { max-width: 38em; margin: 0 auto; padding: clamp(18px, 4vw, 40px) var(--gutter) 64px; font-size: var(--body); line-height: 1.5; }
.doc > .wordmark { display: inline-block; margin-bottom: 2.4em; }
.doc h1 { font-size: 1.7em; line-height: 1.2; letter-spacing: -.01em; }
.doc h2 { margin: 1.9em 0 .3em; font-size: 1.05em; font-weight: 600; }
.doc p, .doc ul { margin: .65em 0; }
.doc ul { padding-left: 1.1em; list-style: disc; }
.doc li { margin: .3em 0; }
.doc .note { color: var(--quiet); font-size: .86em; }
.doc .legal { margin-top: 3em; padding: 0; }

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

/* With no script every panel shows, one after another, and the page scrolls. */
html:not(.js) .app { height: auto; overflow: visible; }
html:not(.js) .art { display: none; }
html:not(.js) .panel[hidden] { display: flex; margin-top: 3em; }