/* Malcia — one page, black on white, light only. The photographs carry the only colour. */
:root {
  --paper: #ffffff; --ink: #000000; --grey: #6e6e6e; --rule: #dadada; --field: #efefef;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --gutter: 16px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.45; padding: 0 var(--gutter) 4rem; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
img { display: block; max-width: 100%; }

/* masthead */
.mast { padding-top: 1.25rem; }
.wordmark { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.75rem, 13vw, 7rem); line-height: .9; letter-spacing: -.03em; text-indent: -.03em; }
.wordmark span + span::before { content: " "; }
.tagline { max-width: 34ch; margin: .75rem 0 0; font-size: 1rem; color: var(--ink); text-wrap: pretty; }

/* a piece */
.piece { display: block; }
.piece figure { margin: 0; }
.piece .frame { aspect-ratio: 4 / 5; overflow: hidden; background: var(--field); }
.piece img { width: 100%; height: 100%; object-fit: cover; }
.piece .frame.noimg { display: grid; place-items: end start; padding: .75rem; font-family: var(--serif); font-size: 1.5rem; line-height: 1; }
.piece .frame.noimg img { display: none; }
.meta { margin: .6rem 0 0; font-size: .8125rem; color: var(--grey); line-height: 1.3; }
.meta .outlet { color: var(--ink); text-transform: uppercase; white-space: nowrap; }
.meta .outlet::after { content: "\00B7"; margin: 0 .45em; color: var(--grey); font-family: var(--sans); font-weight: 400; letter-spacing: 0; }
/* each outlet set in the spirit of its own masthead, all to one cap height */
.outlet.vogue { font-family: "Bodoni Moda", "Didot", serif; font-weight: 500; font-size: .875rem; letter-spacing: .12em; }
.outlet.marieclaire { font-family: "Playfair Display", serif; font-weight: 800; font-size: .75rem; letter-spacing: .05em; }
.outlet.lofficiel { font-family: "Josefin Sans", sans-serif; font-weight: 300; font-size: .8125rem; letter-spacing: .16em; }
.outlet.bnn { font-family: "Oswald", sans-serif; font-weight: 500; font-size: .75rem; letter-spacing: .06em; }
.piece h2, .piece h3 { margin: .2rem 0 0; font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
.piece h3 { font-size: 1.3125rem; }
.with { margin: .25rem 0 0; font-size: .8125rem; color: var(--grey); font-style: italic; font-family: var(--serif); font-size: .95rem; }

/* the wall */
.wall { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--gutter); row-gap: 2.25rem; margin-top: 1.5rem; }
.year { grid-column: 1 / -1; margin: .5rem 0 -1rem; padding-top: .75rem; border-top: 1px solid var(--ink); font-family: var(--serif); font-size: 1.5rem; line-height: 1; }
.year:first-child { margin-top: 0; }

.foot { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--ink); font-size: .9375rem; }
.foot p { margin: 0 0 .5rem; }
.foot a { text-decoration: underline; text-underline-offset: .2em; }
.quiet { color: var(--grey); font-size: .8125rem; }


/* about: her face, small, and her words */
.about { margin-top: 5rem; padding-top: 1rem; border-top: 1px solid var(--ink); }
.portrait { width: 40%; max-width: 180px; margin: 0 0 1.25rem; }
.portrait .frame { aspect-ratio: 4 / 5; overflow: hidden; background: var(--field); }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.about h2 { margin: 0 0 1rem; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1; }
.about p { max-width: 44ch; margin: 0 0 1rem; font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; text-wrap: pretty; }
.about a { text-decoration: underline; text-underline-offset: .2em; }
.about .link { font-family: var(--sans); font-size: 1rem; }

@media (min-width: 720px) {
  :root { --gutter: 28px; }
  .mast { padding-top: 1.75rem; }
  .wordmark { font-size: clamp(4rem, 7vw, 6.5rem); }
  .tagline { font-size: 1.0625rem; margin-top: 1rem; }
  .wall { grid-template-columns: repeat(3, 1fr); row-gap: 3rem; margin-top: 2.25rem; }
  .piece h3 { font-size: 1.5rem; }
  .about { display: grid; grid-template-columns: 1fr 3fr; column-gap: var(--gutter); }
  .about h2 { grid-column: 1 / -1; }
  .portrait { width: auto; max-width: 220px; margin: 0; }
  .about p { grid-column: 2; font-size: 1.3125rem; }
}
@media (min-width: 1100px) {
  :root { --gutter: 36px; }
  .wall { grid-template-columns: repeat(4, 1fr); }
}