/* koona.app — root site. Layout follows design/site.sketch, frames «Hub · 1440 · Clean» and «Hub · 390 · Clean». */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #f5f2e8;
  --bg-alt: #efeadb;
  --card: #fffdf7;
  --line: #e6ddc6;
  --line-strong: #d9cfb3;
  --line-header: #e3dcc8;
  --pill-line: #e3d7b4;

  --ink: #1e2a22;
  --ink-soft: #2e302b;
  --text: #45473f;
  --lead: #5c5e54;
  --muted: #5f6157;
  --quiet: #6b6b61;
  --numeral: #e3daca; /* decorative only */

  --green: #1f4a36;
  --green-hover: #173a2a;
  --envy: #2f6b4f;
  /* the mockup's gold #a88433 is 3.1:1 on the page; this shade passes 4.5:1 for small text */
  --gold: #7d6226;
  --gold-light: #d9b864;
  --cream: #f6efd9;
  --cream-text: 243 235 211; /* #f3ebd3 as RGB channels, used with alpha */

  --wrap: 1216px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
}

/* short pages (404) keep the footer at the bottom of the screen */
main {
  flex: 1 0 auto;
}

:focus-visible {
  outline: 2px solid var(--envy);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: min(var(--wrap), 100% - 32px);
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--green);
  color: var(--cream);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 12px;
}

.arrow {
  width: 1em;
  height: 1em;
  flex: none;
}

/* ---------- buttons and links ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 12px;
  background: var(--green);
  color: var(--cream);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color 0.14s ease;
}

.button:hover {
  background: var(--green-hover);
}

.button-small {
  min-height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
}

.button-light {
  min-height: 48px;
  padding: 0 22px;
  background: var(--cream);
  color: var(--green);
}

.button-light:hover {
  background: #fffaea;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.text-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- header ---------- */

.site-header {
  border-bottom: 1px solid var(--line-header);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 80px;
}

.logo img {
  width: auto;
  height: 22px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav {
  display: flex;
  gap: 36px;
}

.nav a {
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.nav a:hover {
  color: var(--envy);
}

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

.hero {
  padding-block: 112px 120px;
}

.news {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px 5px 5px;
  border: 1px solid var(--pill-line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  transition: border-color 0.14s ease;
}

.news:hover {
  border-color: #cdbd8f;
}

.news-badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--envy);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.hero h1 {
  margin-top: 32px;
  font-size: clamp(42px, 21.9px + 5.14vw, 96px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.accent {
  color: var(--envy);
}

.lead {
  max-width: 620px;
  margin-top: 32px;
  color: var(--lead);
  font-size: clamp(17px, 15.5px + 0.4vw, 21px);
  line-height: 1.55;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 32px;
}

/* ---------- section heads ---------- */

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
}

.eyebrow {
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 18px;
  text-transform: uppercase;
}

h2 {
  margin-top: 10px;
  font-size: clamp(30px, 22.6px + 1.62vw, 44px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.015em;
}

/* ---------- apps ---------- */

.apps {
  padding-bottom: 88px;
}

.count {
  color: var(--quiet);
  font-size: 15px;
  font-weight: 500;
}

.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 260px;
  gap: 24px;
  margin-top: 36px;
}

.card-pin {
  display: flex;
  align-items: center;
  grid-column: span 2;
  grid-row: span 2;
  gap: clamp(32px, 4vw, 56px);
  padding: clamp(32px, 4vw, 56px);
  border-radius: 28px;
  background: var(--green);
  color: rgb(var(--cream-text));
}

.pin-icon {
  flex: none;
  width: clamp(180px, 17.2vw, 248px);
  height: auto;
}

.pin-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
}

.pin-pill {
  padding: 4px 12px;
  border: 1px solid rgb(var(--cream-text) / 0.3);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.card-pin h3 {
  color: var(--cream);
  font-size: clamp(36px, 30px + 1.1vw, 52px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.pin-desc {
  max-width: 40ch;
  color: rgb(var(--cream-text) / 0.85);
  font-size: 17px;
  line-height: 1.6;
}

.pin-meta,
.pin-url {
  /* 70 % keeps small text above 4.5:1 on the green */
  color: rgb(var(--cream-text) / 0.7);
  font-size: 14px;
  font-weight: 500;
}

.pin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 10px;
}

.card-soon {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "status status"
    ". ."
    "number rule";
  padding: 28px 28px 26px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--card);
}

.soon-status {
  grid-area: status;
  justify-self: start;
  padding: 3px 10px;
  border: 1px solid var(--pill-line);
  border-radius: 999px;
  color: var(--quiet);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.soon-number {
  grid-area: number;
  align-self: end;
  color: var(--numeral);
  font-size: 96px;
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.03em;
}

.soon-rule {
  grid-area: rule;
  align-self: end;
  color: var(--quiet);
  font-size: 13px;
  font-weight: 500;
}

/* ---------- principles ---------- */

.principles {
  padding-block: 0 112px;
}

.principles .section-head {
  padding-top: 72px;
  border-top: 1px solid var(--line-strong);
}

.sub {
  max-width: 420px;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.53;
}

.principle-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  margin-top: 56px;
}

.principle-list li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--ink);
}

.principle-number {
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
}

.principle-list h3 {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.33;
  letter-spacing: -0.01em;
}

.principle-list p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.56;
}

/* ---------- story ---------- */

.story {
  padding-block: 112px;
  background: var(--bg-alt);
}

.story-row {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 96px;
}

.story h2 {
  margin-top: 16px;
}

.reading {
  margin-top: 16px;
  color: var(--gold);
  font-size: 15px;
  font-weight: 500;
}

.story-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 30px;
}

.story-text p {
  max-width: 680px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.67;
}

/* ---------- article pages (privacy, 404) ---------- */

.page {
  padding-block: 80px 112px;
}

.page-body {
  max-width: 680px;
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.back:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.back .arrow {
  transform: scaleX(-1);
}

.page h1 {
  margin-top: 24px;
  font-size: clamp(36px, 28px + 1.8vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.updated {
  margin-top: 12px;
  color: var(--quiet);
  font-size: 15px;
}

.page-body > p:not(.updated):not(.eyebrow) {
  margin-top: 20px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.67;
}

.page-body > h2 {
  margin-top: 40px;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.page-body a:not(.button):not(.back) {
  color: var(--green);
  font-weight: 600;
  text-underline-offset: 3px;
}

.page .cta {
  margin-top: 36px;
}

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

.site-footer {
  padding-block: 72px 40px;
  background: var(--green);
  color: rgb(var(--cream-text));
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 48px;
}

.footer-brand img {
  width: auto;
  height: 25px;
}

.footer-brand p {
  margin-top: 12px;
  color: rgb(var(--cream-text) / 0.7);
  font-size: 16px;
}

.footer-nav {
  display: flex;
  gap: 80px;
}

.footer-head {
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 18px;
  text-transform: uppercase;
}

.footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.footer-nav a,
.footer-nav li span {
  font-size: 15px;
  line-height: 22px;
}

.footer-nav a {
  color: rgb(var(--cream-text) / 0.9);
  text-decoration: none;
}

.footer-nav a:hover {
  color: rgb(var(--cream-text));
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-nav li span {
  color: rgb(var(--cream-text) / 0.7);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid rgb(var(--cream-text) / 0.2);
  color: rgb(var(--cream-text) / 0.7);
  font-size: 13px;
}

.site-footer :focus-visible {
  outline-color: var(--gold-light);
}

/* ---------- narrower screens ---------- */

/* below the 3 x 3 grid: Koona Pin full width, the workshop cards become rows */
@media (max-width: 1023px) {
  .bento {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 12px;
  }

  .card-pin {
    grid-column: auto;
    grid-row: auto;
  }

  .card-soon {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto;
    grid-template-areas: "number status rule";
    align-items: center;
    column-gap: 14px;
    padding: 14px 20px;
    border-radius: 18px;
  }

  .soon-status {
    justify-self: start;
    padding: 0;
    border: 0;
    font-size: 15px;
    line-height: 20px;
  }

  .soon-number {
    align-self: center;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .soon-rule {
    align-self: center;
    font-size: 12px;
  }

  .principle-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
  }
}

@media (max-width: 899px) {
  .story-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .story-text {
    padding-top: 0;
  }
}

@media (max-width: 719px) {
  .header-row {
    height: 60px;
  }

  .logo img {
    height: 19px;
  }

  .nav {
    display: none;
  }

  .button-small {
    min-height: 34px;
    padding: 0 14px;
    font-size: 13px;
  }

  .site-footer {
    padding-block: 48px 32px;
  }

  .footer-top {
    flex-direction: column;
    gap: 32px;
  }

  .footer-brand img {
    height: 22px;
  }

  .footer-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .footer-head {
    font-size: 11px;
  }

  .footer-nav a,
  .footer-nav li span {
    font-size: 14px;
    line-height: 20px;
  }

  .footer-nav ul {
    gap: 10px;
    margin-top: 10px;
  }

  .footer-bottom {
    margin-top: 32px;
    font-size: 12px;
  }
}

@media (max-width: 639px) {
  .hero {
    padding-block: 48px 56px;
  }

  .hero h1 {
    margin-top: 22px;
  }

  .lead,
  .cta {
    margin-top: 22px;
  }

  .cta {
    flex-direction: column;
    align-items: stretch;
  }

  .cta .text-link {
    align-self: flex-start;
    font-size: 15px;
  }

  .news {
    gap: 8px;
    padding: 4px 14px 4px 4px;
    font-size: 13px;
  }

  .eyebrow {
    font-size: 12px;
  }

  .apps {
    padding-bottom: 56px;
  }

  .count {
    font-size: 14px;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .bento {
    margin-top: 20px;
  }

  .card-pin {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 24px 28px 28px;
    border-radius: 24px;
  }

  .pin-icon {
    width: 120px;
  }

  .pin-info {
    gap: 16px;
  }

  .pin-pill {
    font-size: 12px;
    line-height: 17px;
  }

  .pin-desc {
    font-size: 15px;
    line-height: 1.6;
  }

  .pin-meta {
    font-size: 12px;
  }

  .pin-actions {
    align-self: stretch;
    margin-top: 4px;
  }

  .pin-actions .button {
    width: 100%;
  }

  .pin-url {
    display: none;
  }

  .principles {
    padding-bottom: 64px;
  }

  .principles .section-head {
    padding-top: 40px;
  }

  .sub {
    font-size: 16px;
    line-height: 1.5;
  }

  .principle-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-top: 30px;
  }

  .principle-list li {
    gap: 10px;
  }

  .principle-number {
    font-size: 12px;
  }

  .principle-list h3 {
    font-size: 19px;
  }

  .principle-list p {
    font-size: 15px;
    line-height: 1.53;
  }

  .story {
    padding-block: 56px;
  }

  .reading {
    font-size: 13px;
  }

  .story-text p {
    font-size: 16px;
    line-height: 1.625;
  }

  .page {
    padding-block: 40px 64px;
  }

  .page-body > p:not(.updated):not(.eyebrow) {
    font-size: 16px;
  }
}

/* very narrow phones: the workshop rows keep only the number and the status */
@media (max-width: 359px) {
  .soon-rule {
    display: none;
  }
}