/*
 * kaylokay website: one stylesheet, no framework, no outside files.
 * Fonts are bundled in /fonts (see fonts/LICENSE.txt), so visiting the site loads nothing from other companies.
 *
 * The look comes from the thing kaylokay replaces: a flyer taped to a pole, with tear-off tabs.
 * Colours are the app's own: navy ink, blue, white and pale blue, and the same dark mode. Yellow is only the flyer's paper.
 */

@font-face { font-family: "Kay Display"; src: url("/fonts/inter-display-black.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Kay UI"; src: url("/fonts/inter-semibold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Kay Text"; src: url("/fonts/lora.woff") format("woff"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Kay Text"; src: url("/fonts/lora-italic.woff") format("woff"); font-weight: 400 700; font-style: italic; font-display: swap; }

:root {
  --paper: #ffffff;
  --wash: #eef4ff;
  --line: #d6e2f7;
  --ink: #0b1b3a;
  --muted: #4f5f7e;
  --blue: #1a6cf0;
  --blue-ink: #1557cf;
  --on-blue: #ffffff;
  --display: "Kay Display", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ui: "Kay UI", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text: "Kay Text", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #000000;
    --wash: #0f1522;
    --line: #1f2a40;
    --ink: #f3f6fc;
    --muted: #a3b2cf;
    --blue: #3d8bff;
    --blue-ink: #8db4ff;
    --on-blue: #04101f;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--text);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }

h1, h2 { margin: 0; font-family: var(--display); font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
h3 { margin: 0; font-family: var(--ui); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
p { margin: 0 0 1rem; }

a { color: var(--blue-ink); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.15em; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: 70rem; margin-inline: auto; padding-inline: 1.25rem; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 10; padding: 0.6rem 1rem; background: var(--blue); color: var(--on-blue); font-family: var(--ui); border-radius: 0.5rem; text-decoration: none; }
.skip:focus { top: 1rem; }

/* ---------- top bar ---------- */
.top { padding-block: 1.1rem; }
.top .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.35rem 1.5rem; }
.mark { font-family: var(--display); font-weight: 900; font-size: 1.65rem; line-height: 1; letter-spacing: -0.045em; color: var(--blue-ink); text-decoration: none; }
.nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; font-family: var(--ui); font-size: 0.95rem; }
.nav a { padding-block: 0.4rem; color: var(--ink); text-decoration: none; }
.nav a:hover { text-decoration: underline; text-decoration-thickness: 0.12em; text-underline-offset: 0.25em; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 0.2em; text-underline-offset: 0.3em; }

/* ---------- home: the flyer ---------- */
.hero { padding-block: 2.25rem 4rem; }
.hero .wrap { display: grid; gap: 3rem; align-items: center; }
.hero h1 { font-size: clamp(2.6rem, 9.5vw, 4.4rem); max-width: 11ch; }
.lede { margin: 1.5rem 0 0; max-width: 33rem; font-size: 1.25rem; line-height: 1.55; }
.soon { margin: 1.75rem 0 0.25rem; font-family: var(--ui); font-size: 1.05rem; }
.soon + p { margin: 0; color: var(--muted); font-size: 1rem; }

.art { position: relative; padding: 5.6rem 0.5rem 1rem; display: grid; place-items: center; }
.flyer { position: relative; width: min(20.5rem, 100%); transform: rotate(-2.5deg); color: #0b1b3a; filter: drop-shadow(0 0.7rem 1.1rem rgba(11, 27, 58, 0.25)); }
.flyer::before, .flyer::after { content: ""; position: absolute; top: -0.6rem; width: 4.2rem; height: 1.4rem; background: rgba(255, 255, 255, 0.62); box-shadow: 0 0 0 1px rgba(11, 27, 58, 0.08); z-index: 2; }
.flyer::before { left: -0.9rem; transform: rotate(-38deg); }
.flyer::after { right: -0.9rem; transform: rotate(36deg); }
.flyer__sheet { background: #ffd84d; padding: 1.9rem 1.5rem 1.4rem; }
.flyer__title { font-family: var(--display); font-weight: 900; font-size: 3.1rem; line-height: 0.92; letter-spacing: -0.045em; }
.flyer__body { margin: 1.1rem 0 0; font-size: 1.12rem; line-height: 1.4; }
.flyer__body strong { font-weight: 700; }
.flyer__tabs { display: flex; align-items: flex-start; border-top: 2px dashed rgba(11, 27, 58, 0.6); }
.flyer__tab { flex: 1 1 0; min-width: 0; height: 9.6rem; padding-top: 0.75rem; display: flex; justify-content: center; background: #ffd84d; border-left: 1.5px dashed rgba(11, 27, 58, 0.45); }
.flyer__tab:first-child { border-left: 0; }
.flyer__tab span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--ui); font-size: 0.8rem; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; }
.flyer__tab--gone { height: 1.15rem; padding: 0; border-left-color: transparent; clip-path: polygon(0 0, 100% 0, 100% 55%, 82% 100%, 64% 50%, 46% 100%, 28% 55%, 10% 100%, 0 60%); }

.flyer-back { position: absolute; top: 0.4rem; right: 0.6rem; width: min(14.5rem, 74%); padding: 1rem 1.1rem 5rem; background: #bcd5ff; color: #0b1b3a; transform: rotate(5deg); filter: drop-shadow(0 0.5rem 0.8rem rgba(11, 27, 58, 0.2)); }
.flyer-back p { margin: 0; }
.flyer-back .flyer-back__title { font-family: var(--display); font-weight: 900; font-size: 1.5rem; line-height: 1; letter-spacing: -0.03em; }
.flyer-back .flyer-back__body { margin-top: 0.45rem; font-size: 0.95rem; line-height: 1.35; }

@media (min-width: 56rem) {
  .hero { padding-block: 3.5rem 5.5rem; }
  .hero .wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 4rem; }
  .art { padding: 6rem 1rem 1.5rem; }
}
@media (max-width: 30rem) {
  .flyer-back { right: -0.2rem; }
}

/* ---------- home: the rest ---------- */
.band { padding-block: 3.5rem; border-top: 1px solid var(--line); }
.band h2 { font-size: clamp(1.8rem, 5vw, 2.4rem); max-width: 22ch; }
.band--wash { background: var(--wash); border-top: 0; }

.rows { margin: 2rem 0 0; padding: 0; }
.rows > div { display: grid; gap: 0.35rem 3rem; padding-block: 1.25rem; border-top: 1px solid var(--line); }
.rows > div:last-child { border-bottom: 1px solid var(--line); }
.rows dt { font-family: var(--display); font-weight: 900; font-size: 1.4rem; letter-spacing: -0.03em; line-height: 1.15; }
.rows dd { margin: 0; max-width: 38rem; }
@media (min-width: 48rem) { .rows > div { grid-template-columns: 15rem minmax(0, 1fr); } }

.steps { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.steps li { padding-block: 1.25rem; border-top: 1px solid var(--line); }
.steps h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.steps p { margin: 0; font-size: 1rem; line-height: 1.55; }
@media (min-width: 56rem) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps li { padding: 1.25rem 1.5rem 0 1.25rem; border-top: 0; border-left: 1px solid var(--line); }
  .steps li:first-child { padding-left: 0; border-left: 0; }
}

.big { margin: 0; max-width: 24ch; font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 6vw, 3.1rem); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.band p.after { margin: 1.5rem 0 0; max-width: 36rem; }
.list { margin: 1.5rem 0 0; padding-left: 1.25rem; max-width: 38rem; }
.list li { margin-bottom: 0.6rem; }
.more { margin: 1.5rem 0 0; font-family: var(--ui); }

/* ---------- footer ---------- */
.foot { margin-top: 2rem; padding-block: 2.5rem 2rem; border-top: 1px solid var(--line); font-size: 0.97rem; }
.foot__grid { display: grid; gap: 2rem; }
.foot .mark { display: inline-block; margin-bottom: 0.6rem; }
.foot ul { margin: 0; padding: 0; list-style: none; font-family: var(--ui); font-size: 0.95rem; }
.foot li { margin-bottom: 0.4rem; }
.foot li a { color: var(--ink); }
.foot p { margin: 0 0 0.8rem; color: var(--muted); }
.foot p a { color: var(--blue-ink); }
.foot__legal { margin-top: 2rem; color: var(--muted); font-size: 0.9rem; }
.foot__legal p { margin: 0; }
@media (min-width: 48rem) { .foot__grid { grid-template-columns: 1.3fr 1fr 1.3fr; gap: 3rem; } }

/* ---------- document pages: terms, privacy, guidelines, support, delete ---------- */
.doc { display: grid; gap: 2.25rem 4rem; padding-block: 2rem 4rem; grid-template-areas: "head" "toc" "body"; }
.doc__head { grid-area: head; max-width: 44rem; }
.doc__head h1 { font-size: clamp(2.2rem, 7vw, 3.4rem); }
.doc__meta { margin: 0.9rem 0 0; font-family: var(--ui); font-size: 0.95rem; color: var(--muted); }
.doc__intro { margin: 1.5rem 0 0; font-size: 1.2rem; line-height: 1.55; }
.doc__body { grid-area: body; min-width: 0; max-width: 42rem; }
.toc { grid-area: toc; font-family: var(--ui); font-size: 0.93rem; }
.toc summary { cursor: pointer; padding-block: 0.5rem; }
.toc ol { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.toc li { margin: 0; }
.toc a { display: block; padding-block: 0.28rem; color: var(--ink); text-decoration: none; line-height: 1.35; }
.toc a:hover { color: var(--blue-ink); text-decoration: underline; }
@media (min-width: 64rem) {
  .doc { grid-template-columns: 15rem minmax(0, 42rem); grid-template-areas: "head head" "toc body"; padding-top: 3rem; }
  .doc--plain { grid-template-columns: minmax(0, 42rem); grid-template-areas: "head" "body"; }
  .toc { position: sticky; top: 1.5rem; align-self: start; }
  .toc summary { pointer-events: none; font-weight: 600; cursor: default; }
  .toc summary::-webkit-details-marker { display: none; }
  .toc summary { list-style: none; }
}

.prose h2 { font-size: 1.5rem; margin: 0 0 0.8rem; }
.prose section + section { margin-top: 3rem; }
.prose h3 { font-size: 1.05rem; margin: 1.7rem 0 0.4rem; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.prose li { margin-bottom: 0.45rem; }
.prose li::marker { color: var(--muted); }
.prose strong { font-weight: 700; }
.prose a { overflow-wrap: anywhere; }

.short { margin: 0 0 2.5rem; padding: 1.25rem 1.4rem 0.9rem; border-left: 5px solid var(--blue); background: var(--wash); }
.short h2 { font-size: 1.25rem; margin: 0 0 0.7rem; }
.short ul { margin: 0 0 0.5rem; padding-left: 1.2rem; }

.mail { display: inline-block; margin: 0.5rem 0 0.25rem; font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 6.5vw, 2.4rem); letter-spacing: -0.035em; line-height: 1.1; color: var(--blue-ink); overflow-wrap: anywhere; }
.note { color: var(--muted); font-size: 0.98rem; }

.prose .steps-list { margin: 0 0 1.5rem; padding: 0; list-style: none; counter-reset: s; }
.prose .steps-list li { position: relative; margin: 0; padding: 0.7rem 0 0.7rem 3rem; border-top: 1px solid var(--line); counter-increment: s; }
.prose .steps-list li:last-child { border-bottom: 1px solid var(--line); }
.prose .steps-list li::before { content: counter(s); position: absolute; left: 0; top: 0.62rem; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: var(--on-blue); font-family: var(--ui); font-size: 0.95rem; }

.lost { padding-block: 5rem 3rem; max-width: 36rem; }
.lost h1 { font-size: clamp(2.4rem, 8vw, 3.6rem); }
.lost p { margin-top: 1.25rem; font-size: 1.2rem; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  .top, .foot, .toc, .skip { display: none; }
  body { font-size: 11pt; background: #fff; color: #000; }
  a { color: #000; }
}