/*
 * awhi.io: one calm page. The logo is the owner's kiwis (two adults touching
 * beaks, and in the band their two chicks) beside the word Awhi. The organising
 * motif of the layout is a pair of brackets, an embrace: the opening lines sit
 * between two large brackets, and each app is held in its own pair. Brackets are drawn with CSS borders (a curved left or right
 * border that tapers to nothing at the ends), so they stretch to any height
 * and take the theme's colours.
 *
 * Colours are the owner's palette (23 Oct 2026): basalt #182125, deep forest
 * #173d35, silver fern #a9b8ae, cool off-white #f3f5f2, ocean teal #287f83.
 * The few other tones are mixes of those five, made only where a colour needs
 * more contrast. Custom properties on :root, redefined for dark mode. Text
 * colours (--ink, --ink-2, --ink-3, --link) are at least 4.5:1 on both
 * surfaces (--bg, --bg-2) in both themes; --brand, --accent and --fern are for
 * drawing only (brackets, dots, the fern) and are at least 3:1.
 * The logo has its own colours, the owner's (24 Oct 2026), as written in the
 * owner's vector logos: --kiwi-green, --kiwi-clay and --kiwi-word, for the logo only,
 * never for text. They are exempt from the contrast rule (logos are); the
 * light clay is 2.98:1 on the page. tests/site.test.mjs checks every pair.
 *
 * Fonts are the system's own (nothing is downloaded): a sans-serif for words,
 * a monospace for the small labels. Motion is optional and
 * lives only inside prefers-reduced-motion: no-preference. Brackets are always
 * painted behind the words (an isolated stacking context, z-index: -1), and no
 * frame of the opening ever brings a bracket over a letter.
 */

:root {
  color-scheme: light;
  --bg: #f3f5f2; /* cool off-white */
  --bg-2: #e6eae6; /* a wash of silver fern on the off-white */
  --ink: #182125; /* basalt */
  --ink-2: #4f5658; /* basalt, toward the off-white */
  --ink-3: #5e6567;
  --link: #257074; /* ocean teal, a shade deeper: #287f83 itself is 4.3:1 here, short of 4.5 */
  --brand: #173d35; /* deep forest */
  --accent: #287f83; /* ocean teal */
  --fern: #6f877e; /* silver fern, deepened enough to be seen on a light page */
  --rule: #d5ddd7;
  --kiwi-green: #1a442f; /* the logo's kiwi green */
  --kiwi-clay: #cd7856; /* the logo's terracotta */
  --kiwi-word: #1a442f; /* the word Awhi in the logo: the kiwi green */

  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --gutter: clamp(16px, 5vw, 48px);
  --max: 72rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #182125; /* basalt */
    --bg-2: #173d35; /* deep forest */
    --ink: #f3f5f2; /* cool off-white */
    --ink-2: #ced7d0; /* off-white, toward silver fern */
    --ink-3: #a9b8ae; /* silver fern */
    --link: #79aeaf; /* ocean teal, lightened to read on basalt and forest */
    --brand: #a9b8ae; /* silver fern: deep forest would vanish on a dark page */
    --accent: #65a2a4;
    --fern: #a9b8ae;
    --rule: #353f40;
    --kiwi-green: #7fb89a; /* the logo's mint, from the owner's dark logo */
    --kiwi-clay: #e09a7c; /* the logo's terracotta on dark */
    --kiwi-word: #f3f5f2; /* the word in the owner's dark logo: the cool off-white */
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

/* Read by screen readers, not shown. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

::selection {
  background: var(--link);
  color: var(--bg);
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Skip link: out of sight until it has focus. */
.skip {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 10;
  padding: 0.5rem 0.9rem;
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 4px;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

/* ---------- Top bar ---------- */

.top-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding-block: 0.9rem;
}

.logo-link {
  display: block;
  color: inherit;
}

.logo {
  display: block;
  width: auto;
  height: clamp(2.5rem, 2.2rem + 1vw, 3rem);
}

/* The logo's colours: the header lockup and the family in the band. Eyes are
 * holes in the drawing, so they show whatever is behind. */
.kiwi-green {
  fill: var(--kiwi-green);
}

.kiwi-clay {
  fill: var(--kiwi-clay);
}

.kiwi-word {
  fill: var(--kiwi-word);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1rem, 2.5vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

/* At least 44px tall, so each link is an easy target for a thumb. */
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  text-decoration: none;
}

.nav a:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* ---------- Opening: the page opens like a pair of brackets ---------- */

.hero {
  padding-block: clamp(3.5rem, 11vw, 9rem) clamp(4rem, 12vw, 10rem);
}

/* --bw is the bracket's width, --room the clear space between a bracket and
 * the words, --measure the widest the words may run: 10.5 times the headline’s
 * size, just over its longer line when it sits on two lines. So the box is only
 * as wide as the words need, and the brackets hold them snugly at every width. */
.hero-held {
  --h1: clamp(2.1rem, 1.1rem + 5vw, 5rem);
  --bw: clamp(0.9rem, 3.2vw, 2.4rem);
  --room: clamp(1rem, 3vw, 1.75rem);
  --measure: calc(10.5 * var(--h1));
  position: relative;
  isolation: isolate;
  max-width: calc(var(--measure) + 2 * (var(--bw) + var(--room)));
  margin-inline: auto;
  padding: 0.5rem calc(var(--bw) + var(--room));
  text-align: center;
}

.hero-held::before,
.hero-held::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1.25rem;
  bottom: -1.25rem;
  width: var(--bw);
  border: 0 solid var(--brand);
}

.hero-held::before {
  left: 0;
  border-left-width: clamp(3px, 0.6vw, 7px);
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
}

.hero-held::after {
  right: 0;
  border-right-width: clamp(3px, 0.6vw, 7px);
  border-radius: 0 100% 100% 0 / 0 50% 50% 0;
}

h1 {
  font-size: var(--h1, clamp(2.1rem, 1.1rem + 5vw, 5rem));
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}

.lead {
  max-width: 34rem;
  margin: clamp(1.25rem, 3vw, 2rem) auto 0;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---------- Sections ---------- */

.section {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  border-top: 1px solid var(--rule);
}

h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  letter-spacing: -0.02em;
}

/* ---------- The apps, each held in its own pair of brackets ---------- */

/* Two columns as soon as each card can be at least 19rem wide, never more
 * than two (four apps make two even rows). In one column a card is at most
 * 36rem wide, so the brackets stay close to the words. */
.apps {
  --col-gap: clamp(2rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(19rem, (100% - var(--col-gap)) / 2)), 1fr));
  gap: clamp(2rem, 5vw, 3.5rem) var(--col-gap);
  margin: clamp(2.25rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.app {
  position: relative;
  isolation: isolate;
  max-width: 36rem;
  padding: 1.5rem clamp(1.6rem, 4vw, 2.5rem);
}

.app::before,
.app::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  width: 1.1rem;
  border: 0 solid var(--brand);
}

.app::before {
  left: 0;
  border-left-width: 3px;
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
}

.app::after {
  right: 0;
  border-right-width: 3px;
  border-radius: 0 100% 100% 0 / 0 50% 50% 0;
}

/* Not out yet: the brackets are drawn, the embrace not closed. */
.app--soon::before,
.app--soon::after {
  border-color: var(--fern);
  border-style: dashed;
}

/* The heading holds the name and then its label ("2cme, Maths" to a screen
 * reader); the label is shown above the name. */
.app-head {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 0.35rem;
}

.app-kind {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.app-name {
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem);
  letter-spacing: -0.025em;
}

.app-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-2);
}

.app-status::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  border: 2px solid var(--accent);
}

.app-status--live::before {
  background: var(--accent);
}

.app-status--soon::before {
  border-color: var(--fern);
}

.app-tag {
  margin-top: 1.1rem;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}

.app-text {
  margin-top: 0.75rem;
  max-width: 32rem;
  color: var(--ink-2);
}

.app-link {
  margin-top: 1.1rem;
}

.out {
  font-weight: 600;
}

.out-icon {
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.2em;
  vertical-align: -0.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.more {
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
  color: var(--ink-3);
  font-size: 1.05rem;
}

/* ---------- The band: the kiwi family and the owner's line ---------- */

.name {
  background: var(--bg-2);
}

.name-in {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.mark-big {
  display: block;
  width: min(80%, 26rem);
  height: auto;
  margin-inline: auto;
}

.name-text p,
.app-text,
.app-tag,
.contact-line {
  text-wrap: pretty;
}

.name-text p {
  margin-top: 1rem;
  max-width: 34rem;
  color: var(--ink-2);
}

.name-text p:first-of-type {
  margin-top: 0;
  font-weight: 500;
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.9rem);
  line-height: 1.35;
  color: var(--ink);
}

@media (min-width: 52rem) {
  .name-in {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Contact ---------- */

.contact-line {
  margin-top: 1.25rem;
  max-width: 40rem;
  font-weight: 500;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  line-height: 1.4;
  color: var(--ink);
}

.mail {
  white-space: nowrap;
}

/* ---------- Footer ---------- */

.foot {
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--ink-3);
}

.foot-in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 2rem;
}

/* Where Awhi is from, said quietly: a small silver fern frond beside the
 * words. It is the Barnsley fern, a fractal (scripts/fern.mjs draws it): a
 * frond, never a koru. Each stem carries its own width. */
.from {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

.fern {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  fill: none;
  stroke: var(--fern);
  stroke-linecap: round;
}

/* ---------- The 404 page ---------- */

.lost {
  padding-block: clamp(4rem, 14vw, 10rem);
}

/* Here the lead is the longer line, so the box follows it. */
.lost .hero-held {
  --measure: 36rem;
}

.lost .lead a {
  white-space: nowrap;
}

/* ---------- Motion (optional; the page is complete without it) ----------
 * Only the decorative brackets move: the words are never hidden, even for a
 * moment. The opening brackets draw in from their middle and ease outward by
 * half a rem into place. They start that half rem nearer the words than where
 * they rest, which still leaves at least half a rem clear (--room is never
 * less than 1rem), and they are painted behind the words in any case. */

@media (prefers-reduced-motion: no-preference) {
  .hero-held::before {
    animation: open-left 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .hero-held::after {
    animation: open-right 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .app::before,
  .app::after {
    transition: transform 300ms ease;
  }

  /* An app being pointed at, or with a link in focus, is held a little closer. */
  .app:hover::before,
  .app:focus-within::before {
    transform: translateX(5px);
  }

  .app:hover::after,
  .app:focus-within::after {
    transform: translateX(-5px);
  }

  @keyframes open-left {
    from {
      opacity: 0;
      transform: translateX(0.5rem) scaleY(0.2);
    }
  }

  @keyframes open-right {
    from {
      opacity: 0;
      transform: translateX(-0.5rem) scaleY(0.2);
    }
  }
}