/* The family look for oriiahq.com, kowrey.app and the founder's page (Ẹwà, Design, 2026-11-11).
   One stylesheet, three sites. Static: no scripts, two web fonts (Literata, IBM Plex Sans), every colour a token.
   Branded marks are images used as they are: never recoloured, never redrawn. Gold is not used: nothing here is earned. */

@font-face { font-family: "Literata"; font-weight: 800; src: url("assets/Literata_800ExtraBold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Plex"; font-weight: 400; src: url("assets/IBMPlexSans_400Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Plex"; font-weight: 500; src: url("assets/IBMPlexSans_500Medium.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Plex"; font-weight: 600; src: url("assets/IBMPlexSans_600SemiBold.woff2") format("woff2"); font-display: swap; }

:root {
  --ground: #F7F4EE;      /* paper, the ÀjọÈdè web card's own cream */
  --raised: #FFFFFF;
  --ink: #16120E;
  --quiet: #6B6257;
  --line: #E3DDD2;
  --accent: #00708A;      /* Peacock */
  --accent-ink: #00708A;
  --on-accent: #FFFFFF;
  --soft: #E2F1F4;
  /* the thread: the four colours of the Kowrey icon, the family's one signature */
  --thread: linear-gradient(90deg, #FDBA07 0%, #FC6431 30%, #02AEC4 66%, #0147FA 100%);
  --measure: 34em;
  --page: 1120px;
  --gutter: 20px;
}
:root[data-theme="dark"] {
  --ground: #141311; --raised: #1E1D1A; --ink: #F3EFE7; --quiet: #A69F94; --line: #2E2C28;
  --accent: #00708A; --accent-ink: #5CC0D6; --on-accent: #FFFFFF; --soft: #12333A;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #141311; --raised: #1E1D1A; --ink: #F3EFE7; --quiet: #A69F94; --line: #2E2C28;
    --accent: #00708A; --accent-ink: #5CC0D6; --on-accent: #FFFFFF; --soft: #12333A;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--ground); color: var(--ink); font: 400 17px/1.6 Plex, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; }

.thread { height: 4px; background: var(--thread); }
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }

/* Header: the site's own mark, then at most three plain links */
.top { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.mark { display: flex; align-items: center; gap: 12px; font: 600 16px Plex; letter-spacing: .2px; }
.mark img { width: 40px; height: 40px; border-radius: 50%; }
.nav { display: flex; gap: 22px; font: 500 15px Plex; color: var(--quiet); }
.nav a:hover { color: var(--ink); }

/* Type: Literata for what a person reads first, Plex for everything else */
.eyebrow { font: 600 12px/1 Plex; letter-spacing: 1.6px; text-transform: uppercase; color: var(--quiet); }
.display { font: 800 42px/1.08 Literata, Georgia, serif; letter-spacing: -.6px; max-width: 13ch; margin-top: 16px; }
.lede { font-size: 18px; line-height: 1.6; color: var(--quiet); max-width: var(--measure); margin-top: 18px; }
h2 { font: 800 28px/1.15 Literata, Georgia, serif; letter-spacing: -.3px; }

.hero { padding: 36px 0 56px; }
.hero-art { display: none; }
.section { padding: 48px 0; border-top: 1px solid var(--line); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; }

/* Buttons: one filled (Peacock), one quiet */
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.btn { height: 50px; padding: 0 22px; border-radius: 14px; display: inline-flex; align-items: center; gap: 10px; font: 600 16px Plex; }
.btn-fill { background: var(--accent); color: var(--on-accent); }
.btn-quiet { border: 1px solid var(--line); background: var(--raised); color: var(--ink); }

/* A list of things, each with its own mark as it is */
.things { display: grid; gap: 0; }
.thing { display: grid; grid-template-columns: 60px 1fr 24px; gap: 16px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); }
.thing:last-child { border-bottom: 1px solid var(--line); }
.thing img { width: 60px; height: 60px; border-radius: 15px; }
.thing .name { font: 800 22px/1.2 Literata, Georgia, serif; }
.thing .line { font-size: 15px; line-height: 1.5; color: var(--quiet); margin-top: 3px; }
.thing .go { color: var(--accent-ink); font: 600 20px Plex; }
.plain-mark { width: 60px; height: 60px; border-radius: 15px; background: var(--raised); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font: 800 22px Literata, serif; }

/* Facts, for anyone checking who we are */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; }
.facts dt { font: 600 12px Plex; letter-spacing: 1.2px; text-transform: uppercase; color: var(--quiet); }
.facts dd { font: 500 17px/1.4 Plex; margin-top: 6px; }
.facts a { color: var(--accent-ink); }

.person { display: flex; gap: 16px; align-items: center; }
.person .initial { width: 64px; height: 64px; border-radius: 50%; background: var(--soft); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center; font: 800 26px Literata, serif; flex: none; }
.person .who { font: 800 22px/1.2 Literata, serif; }
.person .what { font-size: 15px; color: var(--quiet); margin-top: 2px; }
.link { color: var(--accent-ink); font: 600 15px Plex; display: inline-block; margin-top: 8px; }

.foot { padding: 36px 0 44px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; font-size: 14px; color: var(--quiet); }
.foot .mark img { width: 28px; height: 28px; }

/* Words not written yet (drafts only; never published) */
.tbd { color: var(--quiet); background: repeating-linear-gradient(90deg, transparent 0 6px, var(--line) 6px 7px) bottom / 100% 1px no-repeat; }

@media (min-width: 880px) {
  :root { --gutter: 48px; }
  body { font-size: 18px; }
  .top { height: 88px; }
  .hero { padding: 72px 0 96px; display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: center; }
  .hero-art { display: block; order: 2; }
  .hero-art img { width: 340px; height: 340px; border-radius: 50%; }
  .display { font-size: 76px; line-height: 1.04; letter-spacing: -1.4px; }
  .lede { font-size: 21px; }
  h2 { font-size: 36px; }
  .section { padding: 72px 0; display: grid; grid-template-columns: 200px 1fr; gap: 40px; }
  .section-head { display: block; }
  .things { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .thing:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line); }
  .facts { grid-template-columns: repeat(4, 1fr); }
  .foot { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* Products: one card each, its own mark as it is */
.products { display: grid; gap: 14px; }
.product { background: var(--raised); border: 1px solid var(--line); border-radius: 22px; padding: 22px 20px 20px; }
.phead { display: flex; align-items: center; gap: 14px; }
.picon { width: 56px; height: 56px; border-radius: 14px; }
.wm { height: 30px; width: auto; }
.wm-white { display: none; }
:root[data-theme="dark"] .wm-ink { display: none; }
:root[data-theme="dark"] .wm-white { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wm-ink { display: none; } :root:not([data-theme="light"]) .wm-white { display: block; } }
.pname { font: 800 28px/1 Literata, Georgia, serif; letter-spacing: -.3px; }
.ptag { font: 800 22px/1.25 Literata, Georgia, serif; margin-top: 18px; }
.ptext { font-size: 16px; line-height: 1.6; color: var(--quiet); margin-top: 8px; }
.pact { margin-top: 18px; }
.plinks { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.store { height: 50px; padding: 0 16px 0 14px; border-radius: 12px; background: #000; color: #fff; display: inline-flex; align-items: center; gap: 10px; border: 1px solid #3a3a3a; }
.store span { display: flex; flex-direction: column; font: 600 17px/1.05 Plex; }
.store small { font: 400 10.5px/1.2 Plex; }
.slot { border-style: dashed; background: transparent; display: flex; align-items: center; min-height: 96px; font-size: 15px; }
.body { font-size: 17px; line-height: 1.65; color: var(--quiet); margin-top: 14px; max-width: var(--measure); }
.body b { color: var(--ink); font-weight: 600; }
.also { list-style: none; display: grid; gap: 14px; }
.also li { font-size: 16px; line-height: 1.55; color: var(--quiet); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.also b { color: var(--ink); font-weight: 600; display: block; }
.facts.two { grid-template-columns: 1fr; }
.foot-a { display: flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 500; }
.foot-b { display: grid; gap: 8px; }
.foot-b a { color: var(--accent-ink); }
.legal { font-size: 12px; line-height: 1.5; }

@media (min-width: 880px) {
  .products { grid-template-columns: 1fr 1fr; gap: 20px; }
  .product { padding: 30px 30px 26px; }
  .slot { grid-column: 1 / -1; min-height: 80px; }
  .also { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .also li { border-bottom: 0; border-top: 1px solid var(--line); padding: 16px 0 0; }
  .facts.two { grid-template-columns: 1fr 1fr; }
  .foot { flex-direction: column; align-items: stretch; }
  .foot-b { grid-template-columns: 1fr auto; align-items: end; }
  .legal { max-width: 34em; }
}

/* Draft 2: the smaller projects and the foundation sit inside "What we build" */
.eyebrow.sub { margin: 36px 0 16px; }
.products.later { margin-top: 28px; }
.pname.small { font-size: 22px; }
.product.wide .ptext { margin-top: 6px; }
.facts.three { grid-template-columns: 1fr; }
.facts.three dd { overflow-wrap: anywhere; }
@media (min-width: 880px) {
  .product.wide { grid-column: 1 / -1; }
  .facts.three { grid-template-columns: repeat(3, 1fr); }
}

.also .link { display: block; margin-top: 6px; }

/* B: kowrey.app. The mark is the Kowrey icon and wordmark, as they are */
.kmark .kicon, .foot .kicon { width: 40px; height: 40px; border-radius: 10px; }
.foot .kicon { width: 28px; height: 28px; border-radius: 7px; }
.kmark .wm { height: 26px; }
.hero-art.square img { border-radius: 22%; }
.features { list-style: none; display: grid; gap: 12px; margin-top: 22px; }
.features li { background: var(--raised); border: 1px solid var(--line); border-radius: 22px; padding: 20px; font-size: 16px; line-height: 1.6; color: var(--quiet); }
.features b { display: block; font: 800 21px/1.25 Literata, Georgia, serif; color: var(--ink); margin-bottom: 6px; }
.follows { display: grid; gap: 6px; margin-top: 22px; }
.follow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; font-size: 15px; color: var(--quiet); }
.follow .link { margin-top: 0; }
.inlink { color: var(--accent-ink); font-weight: 600; }

/* C: the founder's own page. No logo of his own, so his name in type is the mark */
.mark.wordonly { font: 800 19px Literata, Georgia, serif; letter-spacing: -.2px; }
.hero.solo .lede + .lede { margin-top: 10px; }
.things { list-style: none; }
.thing { grid-template-columns: 56px 1fr; align-items: start; }
.thing img, .thing .plain-mark { width: 56px; height: 56px; border-radius: 14px; }
.thing .tname { font: 800 21px/1.2 Literata, Georgia, serif; }
.thing .link { margin-top: 6px; }
.body.from { margin-top: 22px; }
.bigline { font: 800 34px/1.1 Literata, Georgia, serif; letter-spacing: -.5px; }
.email { font: 800 24px/1.2 Literata, Georgia, serif; color: var(--accent-ink); overflow-wrap: anywhere; }

@media (min-width: 880px) {
  .kmark .wm { height: 30px; }
  .hero-art.square img { width: 320px; height: 320px; }
  .features { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
  .features li { padding: 26px 26px 24px; }
  .hero.solo { display: block; padding: 96px 0 104px; }
  .hero.solo .display { font-size: 92px; max-width: none; }
  .hero.solo .lede { max-width: 30em; }
  .roads { display: block; padding: 96px 0; }
  .bigline { font-size: 64px; letter-spacing: -1px; }
  .email { font-size: 36px; }
}

/* fixes after the first B and C renders */
.mark img.wm { width: auto; height: 26px; border-radius: 0; }
.display, h2, .bigline { text-wrap: balance; }
.hero.kowrey .display { max-width: 10ch; }
@media (min-width: 880px) { .mark img.wm { height: 30px; } .hero.kowrey .display { max-width: none; } }