/* v13: spacing, organization and the Tố nữ panels (loaded last) */

/* one spacing rhythm for every section */
section{padding:64px 0}
.head{margin-bottom:40px;gap:10px}
.head p{margin:6px 0 0}
@media (min-width:900px){section{padding:120px 0}.head{margin-bottom:56px}}

/* hero: the place sits with the name, the gloss line stands alone */
.hero .place{margin:14px 0 0;font-size:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-soft)}
.hero .say{margin:22px 0 10px}

/* recent work: three across on a computer, so the flowers are big enough to see */
@media (min-width:900px){.strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 40px}}
.strip figcaption b{font-size:30px}

/* catalog: a little more air between designs */
.cat{gap:44px 18px}
@media (min-width:900px){.cat{grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 44px}}

/* Tố nữ panels: hung like a set of four scrolls beside the story */
.tonu-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:24px 0 0}
.tonu-row img{width:100%;aspect-ratio:1/2;object-fit:cover;object-position:50% 40%;border-radius:4px;border:6px solid #F3E9D3;box-shadow:0 18px 36px rgba(0,0,0,.35)}
.tonu-row img:nth-child(odd){transform:translateY(14px)}
@media (min-width:900px){
  .story .grid{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;row-gap:24px}
  .story .grid>.head{grid-column:1}
  .story .grid>div:not(.head){grid-column:1}
  .tonu-row{grid-column:2;grid-row:1/3;align-self:center;margin:0;gap:16px}
}

/* a pair of panels flanking the paper menu on wide screens only */
.menu-wrap{position:relative;max-width:1180px;margin:0 auto}
.tonu-side{display:none}
@media (min-width:1180px){
  .tonu-side{display:block;position:absolute;top:50%;width:150px;aspect-ratio:1/2;object-fit:cover;object-position:50% 40%;border-radius:4px;border:6px solid #F3E9D3;box-shadow:0 22px 44px rgba(0,0,0,.4)}
  .tonu-side.l{left:0;transform:translateY(-50%) rotate(-2deg)}
  .tonu-side.r{right:0;transform:translateY(-50%) rotate(2deg)}
}

/* the panels' license credit: one small, quiet line */
footer .credit{display:block;margin-top:14px;font-size:13px;opacity:.6}
footer .credit a{color:inherit}