/* kowrey.app (Ẹwà, Design, 2026-11-12). The liveliest room of the ORIIA family, and now its centre.
   Literata for headings, IBM Plex for reading. Kowrey's own colours as whole flat fields, one per thing we do.
   Phones are drawn in CSS; the screens inside are the app's own renders or drawn from the app's own labels.
   Motion: the three phones rise into place once; reduced motion keeps them still. Static, no scripts. */
:root {
  --ground: #FFFFFF; --stone: #ECE8E1; --ink: #16120E; --soft: #5C554D;
  --coral: #FC6431; --blue: #0147FA; --aqua: #02AEC4; --teal: #0E4D5B; --peacock: #00708A;
  --m: 20px; --g: 10px; --s1: clamp(17px, 1.25vw, 19px);
  --a-bg: #FFFFFF; --a-ink: #16120E; --a-soft: #6B645C; --a-card: #F2EFEA; --a-acc: #0E7C93;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --ground: #16120E; --stone: #221D18; --ink: #F3EFE7; --soft: #B8B0A5;
  --a-bg: #121110; --a-ink: #F3EFE7; --a-soft: #A39B92; --a-card: #24201C; --a-acc: #2BB3C8; color-scheme: dark; } }
:root[data-theme="dark"] {
  --ground: #16120E; --stone: #221D18; --ink: #F3EFE7; --soft: #B8B0A5;
  --a-bg: #121110; --a-ink: #F3EFE7; --a-soft: #A39B92; --a-card: #24201C; --a-acc: #2BB3C8; color-scheme: dark; }
@media (min-width: 768px) { :root { --m: 32px; --g: 14px; } }
@media (min-width: 1200px) { :root { --m: 56px; --g: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 var(--s1)/1.6 Plex, system-ui, sans-serif; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
h1, h2, h3, p, ul, figure { margin: 0; }

/* Bar and hero share the coral field */
.bar { background: var(--coral); color: #16120E; display: flex; align-items: center; justify-content: space-between; padding: 16px var(--m); }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand .icon { width: 40px; height: 40px; border-radius: 10px; }
.brand .wm { height: 30px; width: auto; }
.bar-get { font: 600 16px/1 Plex; text-underline-offset: 5px; }
.hero { background: var(--coral); color: #16120E; padding: 28px var(--m) 0; display: grid; gap: 36px; overflow: hidden; }
h1 { font: 800 clamp(54px, 15vw, 152px)/.95 Literata, serif; letter-spacing: -.03em; text-wrap: balance; }
.lede { margin-top: 20px; max-width: 30em; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; }
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.store { height: 54px; padding: 0 18px 0 14px; background: #000; color: #fff; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; border-radius: 10px; }
.store span { display: flex; flex-direction: column; font: 600 18px/1.05 Plex; }
.store small { font: 400 11px/1.2 Plex; }
.fan { display: flex; justify-content: center; align-items: flex-start; height: 430px; margin: 0 calc(var(--m) * -1); }
.fan .phone { flex: none; width: 46%; max-width: 300px; }
.fan .f1 { margin-right: -16%; transform: translateY(56px) rotate(-7deg); }
.fan .f2 { position: relative; z-index: 1; width: 52%; max-width: 330px; }
.fan .f3 { margin-left: -16%; transform: translateY(56px) rotate(7deg); }
@media (min-width: 900px) {
  .hero { grid-template-columns: repeat(12, 1fr); column-gap: var(--g); padding-top: 72px; }
  .hero-words { grid-column: 1 / span 6; padding-bottom: 120px; align-self: center; }
  h1 { font-size: min(8.2vw, 136px); }
  .fan { grid-column: 7 / -1; height: 660px; margin: 0; align-self: end; }
  .fan .phone { max-width: 290px; } .fan .f2 { max-width: 320px; }
}

/* A phone, drawn in CSS. Screen sizes are in cqw: a share of the phone's own width. */
/* The phone is the size container; the screen draws the bezel as its border, so cqw resolves to the phone's width. */
.phone { container-type: inline-size; width: min(300px, 74vw); margin: 0 auto; aspect-ratio: 9 / 19.5; }
.screen { position: relative; height: 100%; border: 3.2cqw solid #000; border-radius: 15cqw; overflow: hidden; box-shadow: 0 0 0 .6cqw #2A2622; background: var(--a-bg); color: var(--a-ink); font: 400 4cqw/1.35 Plex, sans-serif; display: flex; flex-direction: column; padding-bottom: 4cqw; }
.screen::before { content: ""; position: absolute; top: 2.6cqw; left: 50%; width: 27cqw; height: 7.4cqw; margin-left: -13.5cqw; background: #000; border-radius: 99px; z-index: 2; }
.screen.pic { padding: 0; background: #000; }
.screen.pic::before { display: none; }
.screen.pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sb { display: flex; justify-content: space-between; align-items: center; padding: 3.4cqw 8cqw 0; height: 12cqw; font: 600 3.8cqw/1 Plex; flex: none; }
.sb-r { display: flex; gap: 1cqw; align-items: flex-end; }
.sb-r i { width: 1.2cqw; background: currentColor; border-radius: 1px; }
.sb-r i:nth-child(1) { height: 1.6cqw; } .sb-r i:nth-child(2) { height: 2.4cqw; } .sb-r i:nth-child(3) { height: 3.2cqw; }
.ic { display: inline-block; width: 6cqw; height: 6cqw; flex: none; }
.ic svg, .mini svg, .mi svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.mini { display: inline-block; width: 3.8cqw; height: 3.8cqw; vertical-align: -.6cqw; margin-right: 1.6cqw; }
.mi { display: inline-block; width: 3.4cqw; height: 3.4cqw; }
.av { display: inline-grid; place-items: center; width: 11cqw; height: 11cqw; border-radius: 50%; font: 700 3.6cqw/1 Plex; color: #fff; flex: none; }
.av.sq { border-radius: 3cqw; }
.c-coral { background: #FC6431; color: #16120E; } .c-blue { background: #0147FA; } .c-aqua { background: #02AEC4; color: #16120E; }
.c-teal { background: #0E4D5B; } .c-stone { background: #ECE8E1; color: #16120E; }
.top { display: flex; align-items: center; gap: 3cqw; padding: 2cqw 5cqw 1cqw; }
.top b { flex: 1; text-align: center; font: 600 4.4cqw/1.2 Plex; }
.live { background: #FC6431; color: #16120E; font: 700 3cqw/1 Plex; letter-spacing: .06em; padding: 1.2cqw 2.6cqw; border-radius: 99px; }
.cap { margin: 4cqw 6cqw 2.4cqw; font: 600 2.9cqw/1 Plex; letter-spacing: .1em; color: var(--a-soft); }
.chat { margin-top: auto; padding: 4cqw 6cqw 0; display: grid; gap: 2cqw; }
.chat p { font-size: 3.6cqw; }
.chat b { font-weight: 600; margin-right: 1.4cqw; }
.controls { display: flex; gap: 2cqw; align-items: center; padding: 3.4cqw 5cqw 3cqw; }
.say { flex: 1; background: var(--a-card); color: var(--a-soft); border-radius: 99px; padding: 2.8cqw 4cqw; font-size: 3.6cqw; }
.round { display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 50%; background: var(--a-card); }
.round .ic { width: 5.4cqw; height: 5.4cqw; }
.leave { background: var(--a-card); color: #E0502A; font: 600 3.6cqw/1 Plex; padding: 3.2cqw 3.8cqw; border-radius: 99px; }

/* The live circle */
.stage { display: grid; grid-template-columns: 1fr 1fr; gap: 6cqw 2cqw; padding: 1cqw 6cqw 0; }
.sp { display: grid; justify-items: center; gap: 1cqw; text-align: center; }
.sp .av { width: 25cqw; height: 25cqw; font-size: 7cqw; }
.sp b { font: 600 3.8cqw/1.2 Plex; margin-top: 1cqw; }
.sp small { font-size: 3cqw; color: var(--a-soft); }
.talking .av, .av.talking { outline: 1.2cqw solid #02AEC4; outline-offset: 1cqw; }
.crowd { display: flex; align-items: center; padding: 0 6cqw; }
.reader + .crowd { margin-top: 4cqw; }
.crowd .av { width: 11cqw; height: 11cqw; font-size: 3cqw; border: .9cqw solid var(--a-bg); margin-right: -2.4cqw; }
.more { margin-left: 4.4cqw; font-size: 3.4cqw; color: var(--a-soft); }

/* Reading together */
.page { margin: 3cqw 6cqw 0; background: #F6EFDF; color: #16120E; border-radius: 3cqw; padding: 6cqw 6cqw 4cqw; aspect-ratio: 1 / 1.2; display: flex; flex-direction: column; }
.page small { font-size: 3.2cqw; color: #6B645C; }
.page .yo { margin-top: auto; font: 500 9.4cqw/1.15 Literata, serif; }
.page .en { margin-top: 2.4cqw; font: 400 italic 4.8cqw/1.3 Literata, serif; color: #4A443D; }
.page .pg { margin-top: auto; align-self: flex-end; font-size: 3cqw; color: #6B645C; }
.reader { display: flex; gap: 3.4cqw; align-items: center; padding: 4cqw 6cqw 0; }
.reader .av { width: 12cqw; height: 12cqw; }
.reader b { display: block; font: 600 4cqw/1.2 Plex; }
.reader small { font-size: 3.2cqw; color: var(--a-soft); }

/* Messages and communities */
.head { padding: 3cqw 6cqw 2cqw; display: flex; align-items: baseline; gap: 2cqw; }
.head b { font: 800 7cqw/1.1 Literata, serif; }
.head small { font-size: 3.6cqw; color: var(--a-soft); }
.chips { display: flex; gap: 1.6cqw; padding: 1cqw 6cqw 2cqw; overflow: hidden; }
.chips span { flex: none; font: 600 3.3cqw/1 Plex; padding: 2cqw 3.2cqw; border-radius: 99px; background: var(--a-card); }
.chips .on { background: var(--a-acc); color: #fff; }
.rows { list-style: none; padding: 0 6cqw; }
.rows li { display: flex; gap: 3.4cqw; align-items: center; padding: 2.6cqw 0; }
.rows .av { width: 12.5cqw; height: 12.5cqw; font-size: 3.8cqw; }
.rows li > div { flex: 1; min-width: 0; }
.rows b { display: block; font: 600 4cqw/1.25 Plex; }
.rows small { display: block; font-size: 3.4cqw; color: var(--a-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows time { font-size: 3cqw; color: var(--a-soft); align-self: flex-start; margin-top: 1cqw; }
.fab { position: absolute; right: 6cqw; bottom: 26cqw; width: 13cqw; height: 13cqw; border-radius: 50%; background: var(--a-acc); color: #fff; display: grid; place-items: center; }
.tabbar { position: absolute; left: 4cqw; right: 4cqw; bottom: 4cqw; background: var(--a-card); border-radius: 8cqw; display: flex; justify-content: space-around; align-items: center; padding: 2.2cqw 3cqw; }
.ajo { width: 10cqw; height: 10cqw; border-radius: 50%; border: .7cqw dotted var(--a-soft); display: grid; place-items: center; font: 800 2.8cqw/1 Literata, serif; color: var(--a-soft); }
.tab { display: grid; justify-items: center; gap: .4cqw; color: var(--a-soft); }
.tab .ic { width: 5cqw; height: 5cqw; }
.tab b { font: 700 2.8cqw/1 Plex; } .tab small { font-size: 2.3cqw; line-height: 1; }
.tab.on { color: var(--a-ink); }
.me { width: 9cqw; height: 9cqw; border-radius: 50%; background: #ECE8E1; color: #16120E; display: grid; place-items: center; font: 700 3.4cqw/1 Plex; }
.create, .join { background: var(--a-acc); color: #fff; font: 600 3.2cqw/1 Plex; padding: 1.8cqw 3.2cqw; border-radius: 99px; }
.search { margin: 1cqw 6cqw 0; background: var(--a-card); color: var(--a-soft); border-radius: 99px; padding: 2.8cqw 4cqw; font-size: 3.6cqw; }
.s-comm .rows small, .s-comm .rows b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The event */
.cover { margin: 1cqw 6cqw 0; aspect-ratio: 16 / 8; border-radius: 3cqw; background: #0E4D5B; color: #F3EFE7; display: flex; align-items: flex-end; padding: 4cqw 5cqw; }
.cover span { font: 800 9cqw/1 Literata, serif; }
.ev { padding: 4cqw 6cqw 0; }
.ev-h { display: flex; gap: 3.4cqw; align-items: center; margin-bottom: 2cqw; }
.date { display: inline-grid; width: 15cqw; border-radius: 3cqw; overflow: hidden; text-align: center; background: var(--a-card); }
.date small { font: 700 2.6cqw/1 Plex; padding: 1.4cqw 0; }
.date small:first-child { background: #16120E; color: #fff; }
.date b { font: 700 6cqw/1 Plex; }
.ev-t { font: 800 6.6cqw/1.1 Literata, serif; }
.ev > p { font-size: 3.6cqw; padding: .8cqw 0; }
.who { display: flex; align-items: center; margin-top: 2cqw; }
.who .av { width: 8.5cqw; height: 8.5cqw; font-size: 2.8cqw; border: .8cqw solid var(--a-bg); margin-right: -2cqw; }
.who span { margin-left: 4cqw; font-size: 3.4cqw; color: var(--a-soft); }
.rsvp { display: flex; gap: 2cqw; padding: 4cqw 6cqw 3cqw; }
.rsvp span { flex: 1; text-align: center; font: 600 3.4cqw/1 Plex; padding: 3cqw 0; border-radius: 3cqw; border: .5cqw solid var(--a-acc); color: var(--a-acc); }
.rsvp .on { background: var(--a-acc); color: #fff; }
.list { margin: 0 6cqw; background: var(--a-card); border-radius: 3cqw; }
.list p { font-size: 3.6cqw; padding: 2.8cqw 4cqw; }
.about { font-size: 3.6cqw; padding: 3cqw 6cqw; }

/* What we do here: seven short cards, each a field of Kowrey colour with a real screen rising from its foot */
.what { padding: 72px var(--m); display: grid; gap: var(--g); }
.what-h { font: 800 clamp(40px, 6.5vw, 96px)/1 Literata, serif; letter-spacing: -.025em; margin-bottom: 24px; }
.row { border-radius: 12px; padding: 28px 24px 0; display: flex; flex-direction: column; gap: 28px; overflow: hidden; }
.row h3 { font: 800 clamp(30px, 2.8vw, 44px)/1.05 Literata, serif; letter-spacing: -.015em; text-wrap: balance; }
.row-words p { margin-top: 12px; font-size: clamp(17px, 1.3vw, 19px); max-width: 30em; }
.row-pic { margin-top: auto; height: 420px; overflow: hidden; }
.row-pic .phone { width: 280px; }
.r-share { background: var(--blue); color: #fff; }
.r-talk { background: var(--teal); color: #fff; }
.r-read { background: var(--stone); }
.r-close { background: var(--aqua); color: #16120E; }
.r-gather { background: var(--coral); color: #16120E; }
.r-comm { background: var(--peacock); color: #fff; }
.r-hear { background: var(--stone); padding-bottom: 28px; }
.r-hear .row-pic { height: auto; overflow: visible; }
.pair { display: flex; justify-content: center; gap: 16px; }
.pair .phone { width: 46%; max-width: 250px; margin: 0; }
.pair .down { margin-top: 48px; }
@media (min-width: 640px) { .what { grid-template-columns: 1fr 1fr; } .what-h, .r-hear { grid-column: 1 / -1; } }
@media (min-width: 900px) {
  .what { grid-template-columns: repeat(12, 1fr); padding: 128px var(--m); }
  .what-h { margin-bottom: 40px; }
  .row { padding: 40px 36px 0; }
  .r-share { grid-column: span 7; } .r-talk { grid-column: span 5; }
  .r-read, .r-close, .r-gather { grid-column: span 4; }
  .r-comm { grid-column: span 5; } .r-hear { grid-column: span 7; padding-bottom: 40px; }
  .row-pic { height: 460px; }
  .r-hear { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
  .r-hear .row-pic { margin-top: 0; }
  .r-share .row-pic { height: 500px; }
  .pair .phone { width: 250px; }
}

/* The oko picker, as on oriiahq.com */
.oko { display: grid; gap: 12px; max-width: 420px; margin: 0 auto; }
.oko input { position: absolute; opacity: 0; pointer-events: none; }
.oko-cards { display: grid; }
.oko-cards img { grid-area: 1 / 1; opacity: 0; transition: opacity .25s ease; border-radius: 6px; }
#oko1:checked ~ .oko-cards .c1, #oko2:checked ~ .oko-cards .c2, #oko3:checked ~ .oko-cards .c3, #oko4:checked ~ .oko-cards .c4 { opacity: 1; }
.oko-picks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.oko-picks label { display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 12px; background: var(--ground); cursor: pointer; font: 400 14px/1.2 Plex; border-radius: 6px; }
.oko-picks b { font: 800 clamp(20px, 1.8vw, 26px)/1 Literata, serif; }
#oko1:checked ~ .oko-picks label[for=oko1], #oko2:checked ~ .oko-picks label[for=oko2],
#oko3:checked ~ .oko-picks label[for=oko3], #oko4:checked ~ .oko-picks label[for=oko4] { background: var(--coral); color: #16120E; }
#oko1:focus-visible ~ .oko-picks label[for=oko1], #oko2:focus-visible ~ .oko-picks label[for=oko2],
#oko3:focus-visible ~ .oko-picks label[for=oko3], #oko4:focus-visible ~ .oko-picks label[for=oko4] { outline: 3px solid var(--blue); outline-offset: 3px; }

/* Bring everyone: today's posts, standing in a row */
.everyone { padding: 72px 0; }
.everyone-words { padding: 0 var(--m); max-width: 44em; display: grid; gap: 16px; }
.everyone h2, .get h2 { font: 800 clamp(40px, 6.5vw, 96px)/1 Literata, serif; letter-spacing: -.025em; text-wrap: balance; }
.everyone-words p { font-size: clamp(19px, 1.6vw, 23px); }
.slips { list-style: none; padding: 0 var(--m); margin: 40px 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: var(--g); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slips::-webkit-scrollbar { display: none; }
.slips li { scroll-snap-align: start; }
.slips img { border-radius: 6px; }
@media (min-width: 900px) { .everyone { padding: 128px 0; } .slips { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); overflow: visible; margin-top: 56px; } .slips li:nth-child(even) { margin-top: 56px; } }

/* Get Kowrey */
.get { background: var(--blue); color: #fff; padding: 72px var(--m); display: grid; gap: 20px; justify-items: start; }
.get-icon { width: 96px; height: 96px; border-radius: 22px; }
.get .stores { margin-top: 8px; }
.follow { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.follow a { font-weight: 600; text-underline-offset: 5px; }
@media (min-width: 900px) {
  .get { padding: 128px var(--m); grid-template-columns: repeat(12, 1fr); column-gap: var(--g); align-content: center; }
  .get > * { grid-column: 1 / span 6; }
  .get .get-icon { grid-column: 8 / -1; grid-row: 1 / span 4; width: min(100%, 420px); height: auto; border-radius: 22%; justify-self: center; align-self: center; }
}

/* Footer */
.foot { padding: 40px var(--m) 48px; display: grid; gap: 16px; font-size: 15px; }
.foot-name { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.foot-name img { width: 32px; height: 32px; border-radius: 8px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-weight: 600; }
.legal { color: var(--soft); }

/* The one motion: the phones rise into place */
@media (prefers-reduced-motion: no-preference) {
  .fan .phone { animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; }
  .fan .f2 { animation-delay: .08s; } .fan .f3 { animation-delay: .16s; }
  @keyframes rise { from { translate: 0 120px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
}