/* oriiahq.com/isola: the founder's page, a page of the same site (Ẹwà, 2026-11-12).
   Shares ../style.css. Short, personal, quiet: his words, then the projects in the company page's
   order and weight, the foundation as its own entry, the studio as one line. No photo until he picks one. */
.me { background: var(--coral); color: #16120E; padding: 40px var(--m) 72px; display: grid; gap: 28px; }
.me h1 { font: 800 clamp(48px, 13vw, 84px)/.98 Literata, serif; letter-spacing: -.03em; }
.me-words { max-width: 32em; display: grid; gap: 20px; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.55; }
.me-words .first { font: 500 clamp(28px, 3.2vw, 46px)/1.2 Literata, serif; }

.built { padding: 72px var(--m); }
.built h2, .hello h2 { text-wrap: balance; font: 800 clamp(40px, 6vw, 92px)/1 Literata, serif; letter-spacing: -.025em; }
.made { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 36px var(--g); }
.made li { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: start; }
.made img { width: 96px; height: 96px; border-radius: 8px; object-fit: cover; }
.made h3 { font: 800 clamp(26px, 2.2vw, 34px)/1.1 Literata, serif; margin-bottom: 6px; }
.made li p { margin-bottom: 10px; }
.fdn { margin-top: 56px; background: var(--teal); color: #F3EFE7; border-radius: 12px; padding: 32px 24px; display: grid; gap: 18px; }
.fdn h3 { font: 800 clamp(30px, 3vw, 48px)/1.05 Literata, serif; }
.fdn > p { font-size: clamp(18px, 1.5vw, 21px); max-width: 34em; }
.also-line { margin-top: 40px; max-width: 50em; }
.all { margin-top: 20px; font: 500 clamp(24px, 2.2vw, 32px)/1.3 Literata, serif; }
.all a { text-underline-offset: 6px; text-decoration-thickness: 2px; }

.roads { background: var(--blue); color: #fff; padding: 88px var(--m); }
.roads p { font: 800 clamp(40px, 7vw, 112px)/1 Literata, serif; letter-spacing: -.025em; }
.hello { padding: 88px var(--m); display: grid; gap: 24px; }
.mail { font: 800 clamp(26px, 4.4vw, 64px)/1.1 Literata, serif; text-decoration: none; overflow-wrap: anywhere; }
.mail:hover { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 3px; }

@media (min-width: 700px) { .made { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .me { grid-template-columns: repeat(12, 1fr); column-gap: var(--g); padding: 96px var(--m) 128px; }
  .me h1 { grid-column: 1 / -1; font-size: min(9vw, 148px); }
  .me-words { grid-column: 6 / -1; }
  .built { padding: 112px var(--m); }
  .made { margin-top: 64px; row-gap: 48px; }
  .made li { grid-template-columns: 140px 1fr; gap: 24px; }
  .made img { width: 140px; height: 140px; }
  .fdn { margin-top: 80px; padding: 48px 44px; grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .fdn h3, .fdn > p { grid-column: 1; }
  .fdn blockquote { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .roads { padding: 128px var(--m); }
  .hello { padding: 128px var(--m); }
}