/* Reset */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family:  'supreme_llregular', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #0f0f10; background: #fff; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

:root{
  --gutter-desktop: 40px;
  --gutter-mobile: 20px;
  --max: 1200px;
  --radius: 10px;
  --ink: #0f0f10;
  --muted: rgba(15,15,16,.72);
}

.wrap{
  width: 100%;
  padding-left: var(--gutter-desktop);
  padding-right: var(--gutter-desktop);
}
@media (max-width: 720px){
  .wrap{ padding-left: var(--gutter-mobile); padding-right: var(--gutter-mobile); }
}

.page{
  min-height: 100vh;
  padding-top: 70px;
  padding-bottom: 160px;
}

/* Header */
.head{
  max-width: var(--max);
  margin: 0 auto 90px;
  text-align: center;
}

.head h1{
  font-family: 'supreme_llthin';
  font-weight:normal;
  margin: 0;
  font-size:80px;
  letter-spacing: -5px;
  color: #000;
}

.head .role{
  margin-top: -6px;
  font-family: 'supreme_llregular';
  font-size: 12px;
  letter-spacing: 0.85px;
  text-transform: none;
  color: #000;
}

/* Two-column layout */
.content{
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .9fr .2fr .9fr;
  grid-template-areas:"bon_portrait . copy";
  align-items: start;
}

/* Portrait */
.portrait{
  border-radius: 8px;
  overflow: hidden;
  background: #f3f3f3;
  box-shadow: 0 0 0 1px rgba(15,15,16,.08) inset;
  grid-area:bon_portrait;
}

.portrait img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Copy column */
.copy {
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.85px;
  color: #000;
  grid-area:copy;
  margin-top:-15px;
  max-width: 62ch;
  text-wrap:pretty;
}

.copySection {
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.85px;
  color: #000;
  max-width: 62ch;
  margin-top:50px;
   text-wrap:pretty;
}


.copySection h2{
  margin: 0 0 10px;
  color: #000;
	font-family: 'helvetica_neue_lt_com43LtEx';
	-webkit-text-stroke: 0.3px #000;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
	line-height:14.5px;
  
}



.list{
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}



/* Responsive: stack */
@media (max-width: 980px){
  .content{
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .copySection{ max-width: 70ch; }
  .head{ margin-bottom: 50px; }
}

/* Responsive: stack */
@media (max-width: 768px){
	.page{
	  min-height: 100vh;
	  padding-top: 44px;
	  padding-bottom: 100px;
	}
	
	.content {
	    grid-template-columns: 1fr;
	    grid-template-areas:"bon_portrait" "copy";
	}
	
	.head h1{
	  font-size:48px;
	  letter-spacing: -3px;
	  color: #000;
	}
}