/* 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; }