* { box-sizing: border-box; }
body { margin: 0; }

html {
  font-family: 'Cormorant Infant', serif;
	background: #e4e4d5;
}
header {
	margin: 4rem;
}
h1 {
	text-transform: uppercase;	
	font-size: 4rem;
	border: 8px solid #d55349;
	text-align: center;
}

.D header {
	margin: 3rem;
	display: grid;
	grid-template-columns: 0 max-content 5rem auto;
	grid-template-rows: 1.5rem 50px min-content auto auto;
	gap: 0 1rem;
}
.D h1 {
	grid-column: 1 / 3;
	grid-row: 1 / 5;
	border: none;
	margin: 0;
	font-size: 2.5rem;
}
.D nav {
	writing-mode: vertical-rl;
	grid-column: 3 / 5;
	grid-row: 3;
	background: #d55349;
}
.D .red-box {
	border: 8px solid #d55349;
	grid-row: 2 / 5;
	grid-column: 2 / 4;
	z-index: -1;
}
.D ul {
	padding: 1rem;
}
.D li {
	list-style: none;
}
.D a { 
	color: black; 
	text-transform: uppercase; 
	text-decoration: none; 
	font-size: 1.3rem;
	font-weight: 800;
}

h2 {
  -webkit-writing-mode: sideways-lr;
      -ms-writing-mode: sideways-lr;
          writing-mode: sideways-lr;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  float: left;
  margin: 1.5rem 0 0 -3.8rem;
  font-size: 1.8em;
  background: #d55349;
  padding: 8px 0; }


main { 
  width: 80%;
  max-width: 52ch;
  margin: 0 auto;
  border-left: 5px solid black;
  padding: 3rem 1rem 1rem 3.8rem; }

h1 {
  margin: 0 0 1rem -3rem;
  font-size: 4em; }

p {
  margin: 0 0 1em;
  font-size: 110%; }

h2 + p {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid black; }

a {
  color: #d55349; }

/* img {
  width: 100%; }
 */