@charset "UTF-8";
/* The About page.

   No hero photograph: the page is about a person, so her portrait is the first
   picture on it, beside who she is. The working method sits beside a
   photograph of exactly what it describes -- a moment, rather than a room. */

/* ------------------------------------------------------------ Kobi */
.kobi{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(1.8rem,5vw,4.5rem);align-items:center}
.kobi-photo{margin:0;position:relative;isolation:isolate}
/* the portrait on a sage panel, like the photographs elsewhere on the site */
.kobi-photo::before{content:"";position:absolute;inset:6% -6% -6% 10%;z-index:-1;
  background:var(--sage);border-radius:48px}
.kobi-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:24px;box-shadow:0 30px 70px rgba(52,55,47,.14)}
.kobi-photo figcaption{position:absolute;left:1rem;bottom:1rem;
  font:500 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  background:var(--paper);color:var(--deep);padding:.5rem .8rem;border-radius:999px}
.kobi .lede h2{max-width:20ch}

/* ------------------------------------------------------- the working method */
.room{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.room-photo{margin:0}
.room-photo img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;
  border-radius:24px;box-shadow:0 30px 70px rgba(52,55,47,.14)}

@media (max-width:820px){
  .kobi,.room{grid-template-columns:minmax(0,1fr)}
  .kobi-photo{max-width:26rem}
  .kobi-photo::before{inset:5% -3% -4% 8%}
  .room-photo img{aspect-ratio:4/5}
}