/* ORIIA, direction 2: "The house" (Ẹwà, Design, 2026-11-12).
   Architectural and picture-led. IBM Plex set large and tight for headings, Literata for names.
   The first screen is a front of six windows, one for each kind of thing we make; the page then
   walks through each room in turn, on alternating white and stone. Every heading ends on the
   peacock dot. Static, no scripts. Motion: a window answers the pointer; nothing moves on its own. */
:root {
  --ground: #FFFFFF; --stone: #ECE8E1; --ink: #16120E; --soft: #5C554D; --accent: #00708A;
  --deep: #0E4D5B; --deep-ink: #FFFFFF; --on-accent: #FFFFFF;
  --m: 16px; --g: 10px; --s1: clamp(17px, 1.25vw, 19px); --s2: clamp(22px, 2vw, 28px); --s3: clamp(28px, 3vw, 44px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --ground: #16120E; --stone: #221D18; --ink: #F3EFE7; --soft: #B8B0A5; --accent: #02AEC4;
  --deep: #0E4D5B; --on-accent: #16120E; color-scheme: dark; } }
:root[data-theme="dark"] {
  --ground: #16120E; --stone: #221D18; --ink: #F3EFE7; --soft: #B8B0A5; --accent: #02AEC4;
  --deep: #0E4D5B; --on-accent: #16120E; 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(--accent); outline-offset: 3px; }
h1, h2, p, ul, blockquote { margin: 0; }
.dot { color: var(--accent); }

/* Bar */
.bar { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--m); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 600 21px/1 Plex; letter-spacing: .01em; }
.brand img { width: 38px; height: 38px; }
.bar nav { display: flex; gap: 28px; font: 600 16px/1 Plex; }
.bar nav a { text-decoration: none; }
.bar nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.bar nav a:first-child { display: none; }
@media (min-width: 768px) { .bar nav a:first-child { display: inline; } }

/* Hero: the plain sentence, then the front of the house. */
.hero { padding: 28px var(--m) 56px; display: grid; gap: 40px; }
h1 { font: 600 clamp(40px, 10.6vw, 64px)/1.02 Plex, sans-serif; letter-spacing: -.035em; text-wrap: balance; }
.lede { margin-top: 24px; max-width: 34em; font-size: clamp(18px, 1.45vw, 21px); }
.open { margin-top: 16px; font: 500 clamp(22px, 2vw, 30px)/1.3 Literata, serif; }
.actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; background: var(--accent); color: var(--on-accent); font: 600 17px/1 Plex; text-decoration: none; border-radius: 4px; }
.btn:hover { background: var(--ink); color: var(--ground); }
.quiet { font: 600 17px/1 Plex; text-underline-offset: 6px; }
.front { display: grid; grid-template-columns: 1fr 1fr; gap: 18px var(--g); }
.win { display: grid; gap: 10px; text-decoration: none; }
.win > img, .win-mark, .win-next { aspect-ratio: 1; width: 100%; border-radius: 4px; object-fit: cover; }
.win-mark { background: #000; display: grid; place-items: center; padding: 14%; }
.win-next { background: var(--deep); color: #fff; display: flex; align-items: flex-end; padding: 14px; font: 500 clamp(20px, 2vw, 28px)/1.1 Literata, serif; }
.win-label { font: 600 17px/1.2 Plex; }
.win:hover .win-label { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; text-decoration-thickness: 2px; }
@media (min-width: 900px) {
  .hero { grid-template-columns: repeat(12, 1fr); column-gap: var(--g); row-gap: 0; padding-top: 64px; padding-bottom: 96px; }
  .hero-words { display: contents; }
  h1 { grid-column: 1 / -1; font-size: min(7vw, 124px); }
  .lede { grid-column: 1 / span 6; margin-top: 40px; }
  .open { grid-column: 8 / -1; grid-row: 2; margin-top: 40px; align-self: start; }
  .actions { grid-column: 1 / span 6; }
  .front { grid-column: 1 / -1; grid-template-columns: repeat(6, 1fr); margin-top: 72px; }
}

/* The rooms */
.room { padding: 72px var(--m); display: grid; gap: 32px; }
.room:nth-of-type(odd) { background: var(--stone); }
.room h2, .who h2, .talk h2 { font: 600 clamp(44px, 8vw, 132px)/.98 Plex, sans-serif; letter-spacing: -.04em; }
.room-words { max-width: 34em; }
.room-words > p + p { margin-top: 16px; }
.room-words > .lead { display: flex; align-items: center; gap: 14px; font: 500 var(--s3)/1.1 Literata, serif; margin: 0 0 18px; }
.lead .icon { width: 48px; height: 48px; border-radius: 11px; }
.lead .wm { height: clamp(34px, 3.2vw, 46px); 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; } }
.room-words b { font-weight: 600; }
.link { font: 600 17px/1.4 Plex; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
.links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.room-words > blockquote { margin: 24px 0; padding-left: 20px; border-left: 4px solid var(--accent); font: 500 var(--s2)/1.35 Literata, serif; }
.room-words > .stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.store { height: 52px; padding: 0 16px 0 14px; background: #000; color: #fff; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; border-radius: 10px; }
:root[data-theme="dark"] .store { background: #F3EFE7; color: #16120E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .store { background: #F3EFE7; color: #16120E; } }
.store span { display: flex; flex-direction: column; font: 600 17px/1.05 Plex; }
.store small { font: 400 11px/1.2 Plex; }
@media (min-width: 900px) {
  .room { grid-template-columns: repeat(12, 1fr); column-gap: var(--g); row-gap: 56px; padding: 120px var(--m); align-items: center; }
  .room h2 { grid-column: 1 / -1; }
  .room-pic { grid-column: 1 / span 7; grid-row: 2; }
  .room-words { grid-column: 9 / -1; grid-row: 2; }
  .room:nth-of-type(even) .room-pic { grid-column: 6 / -1; }
  .room:nth-of-type(even) .room-words { grid-column: 1 / span 4; }
  .room:nth-of-type(even) h2 { text-align: right; }
}

/* Connect */
.phones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); }
.phones img { border-radius: 24px; background: #000; }
.phones img + img { margin-top: 56px; }
@media (min-width: 900px) { .room:nth-of-type(even) .oko { justify-self: end; width: 100%; } .phones { max-width: 640px; } .phones img { border-radius: 36px; } }

/* Learn */
.oko { display: grid; gap: 14px; max-width: 480px; }
.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: 4px; }
#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: 12px 12px 14px; background: var(--ground); cursor: pointer; font: 400 14px/1.2 Plex; border-radius: 4px; }
.room:nth-of-type(even) .oko-picks label { background: var(--stone); }
.oko-picks b { font: 800 clamp(22px, 2vw, 28px)/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(--accent); color: var(--on-accent); }
#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(--accent); outline-offset: 3px; }

/* Watch, Play, Gather */
.wide { border-radius: 4px; width: 100%; }
.plate { background: #000; border-radius: 4px; padding: 16% 12%; }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); }
.shots img { border-radius: 4px; width: 100%; height: 100%; object-fit: cover; }
.shots .big { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.shots img:not(.big) { aspect-ratio: 1; }
@media (min-width: 900px) {
  .r-gather .room-pic { grid-column: 1 / -1; grid-row: 2; }
  .r-gather .room-words { grid-column: 1 / span 6; grid-row: 3; }
  .r-gather .shots { grid-template-columns: 2fr 1fr 1fr; }
  .r-gather .shots .big { grid-column: auto; aspect-ratio: auto; }
  .r-gather .shots img:not(.big) { aspect-ratio: 3 / 4; }
}

/* What comes next: the one deep field. */
.room.r-next { background: var(--deep); color: var(--deep-ink); --accent: #02AEC4; }
.room.r-next .room-words { grid-column: 1 / -1; grid-row: 2; max-width: none; }
.room.r-next h2 { text-align: left; }
.r-next .room-words > .lead { font-size: clamp(36px, 5vw, 72px); }
.r-next .room-words > p:last-child { font-size: var(--s2); }

/* Who, then Talk */
.who { padding: 96px var(--m); display: grid; gap: 28px; }
.statement { font: 500 clamp(22px, 3vw, 44px)/1.25 Literata, serif; max-width: 22em; margin-bottom: 18px; }
.statement b { font-weight: 800; }
@media (min-width: 900px) { .who { padding: 136px var(--m); grid-template-columns: repeat(12, 1fr); column-gap: var(--g); } .who h2 { grid-column: 1 / -1; } .who > div { grid-column: 6 / -1; } }
.talk { background: var(--stone); padding: 96px var(--m); }
.talk-lines { list-style: none; padding: 0; margin-top: 48px; display: grid; gap: var(--g); }
.talk-lines li { display: grid; gap: 8px; padding: 24px 22px 26px; background: var(--ground); border-radius: 4px; }
.talk-lines span { color: var(--soft); }
.talk-lines a { font: 600 clamp(22px, 2.3vw, 34px)/1.15 Plex, sans-serif; letter-spacing: -.015em; text-decoration: none; overflow-wrap: anywhere; }
.talk-lines a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 7px; }
@media (min-width: 600px) { .talk-lines { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .talk { padding: 136px var(--m); } .talk-lines { grid-template-columns: 1fr 1fr; } .talk-lines li { padding: 32px 32px 36px; gap: 14px; } }

/* Footer */
.foot { padding: 48px var(--m) 56px; display: grid; gap: 18px; font-size: 15px; }
.foot-name { display: flex; align-items: center; gap: 12px; font: 600 22px/1 Plex; }
.foot-name img { width: 36px; height: 36px; }
.foot-family span::before { content: ", "; }
.foot-links { display: flex; gap: 24px; font-weight: 600; }
.legal { color: var(--soft); max-width: 60em; }

/* The one motion: a window answers the pointer. */
@media (prefers-reduced-motion: no-preference) {
  .win > img, .win-mark, .win-next { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
  .win:hover > img, .win:hover .win-mark, .win:hover .win-next { transform: translateY(-6px); }
}

@media (min-width: 600px) and (max-width: 899px) { h1 { font-size: 7.4vw; } }