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

:root{
  --cream:    #F7F1E8;
  --castiron: #2E261C;
  --cacao:    #A8570C;
  --paper:    #FFF9F1;
  --ash:      #888;
  --oak:      #8B5E34;
}

.home, h1, h2, h3, header > a{
  font-family: "Playwrite US Trad", sans-serif;
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 .5em;
}

body {
  font-family: "Nunito", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
}

.login main form, .login main form * {
  font-size: 1.25rem;
}

h1 {
  font-size: 1.8rem;
  color: var(--cacao);
}

h2, h3 {
  font-size: 1.25rem;
}

h2 {
  color: var(--cacao);
}

dt {
  font-weight: 600;
}

label, input, button {
    font-size: inherit;
}

.description, .ingredients, .steps {
    line-height: 1.25;
}

a {
  color: var(--oak);
  text-decoration: none;
}

a:hover, a:focus {
  color: var(--cacao);
  text-decoration: underline;
}

.tags a::before {
  content: "#";
  color: var(--oak);
}

.button {
  background: var(--cream);
  color: var(--oak);
  padding: .5em 1em;
  border-radius: 9999px;
}

.button:hover {
  background: var(--cacao);
  color: var(--paper);
}

.recipe-photo {
  transform: rotate(2deg);
  border: 5px solid #FFF;
  border-radius: 3px;
}

html, body {
  background-color: var(--cream);
}

main {
  background: var(--paper);
  border: 1px solid var(--castiron);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 1.25rem;
}

header nav ul, .ingredients ul, main ul{
  list-style: none;
}

.visually-hidden {
  display: none;
}

html {
  font-size: 18px;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

header, main {
  width: min(700px, 100% - 1rem);
  margin-inline: auto;
}

main {
  margin-top: 3rem;
  padding: 1rem;
}

main > :first-child {
  margin-bottom: 2rem;
}

.description {
  margin-bottom: 2rem;
}

header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

header > a {
  margin-right: auto;
}

header > p {
  margin-left: auto;
}

header > nav {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 3px solid var(--oak);
  padding-top: .25rem;
}

header nav ul {
  display: flex;
  gap: 1rem;
}

header nav form input[type="search"], header nav form button {
  padding: .25rem;
}

.recipe-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.5rem;
  margin-bottom: 1rem;
}

.recipe-meta-row .tags {
  flex-basis: 100%;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  column-gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ingredients ul {
  padding-left: 1rem;
}

.ingredients li {
  text-indent: -1rem;
  padding-left: 1rem;
}

.steps ol {
  padding-left: 1em;
}

.recipe-photo {
  max-width: 100%;
  height: auto;
  margin-bottom: .5rem;
}

.recipe-meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: .5rem;
  row-gap: .25rem;
}

.recipe-meta dt {
  flex: 0 0 calc(25% - .25rem);
  margin: 0;
  font-weight: 600;
}

.recipe-meta dd {
  flex: 1 0 calc(75% - .25rem);
  margin: 0;
  font-weight: 400;
}

main p:has(> .button) {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

main > section:nth-of-type(2) > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-block: 1rem;
  align-items: flex-start;
}

main > section:nth-of-type(2) > ul > li {
  flex: 1 1 calc((100% - 2rem) / 3);
}

main > section:nth-of-type(2) > ul > li > article img {
  max-width: 100%;
  height: auto;
  display: block;
}

main > section:nth-of-type(2) > ul .tags {
  display: flex;
  flex-wrap: wrap;
  column-gap: .5rem;
  row-gap: 0;
}

main > section:nth-of-type(2) > ul .tags a {
  text-wrap: nowrap;
}

@media (max-width: 500px) {
  header, main {
    width: 100%; margin-inline: 0;
  }

  main {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }

  header {
    padding-inline: .5rem;
  }

  .recipe-top, .recipe-bottom {
    display: block;
  }
  .recipe-top > * + *, .recipe-bottom > * + * {
    margin-top: 2rem;
  }
}

.login main form {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0;
}
.login main form input {
  width: 100%; padding: .25rem;
}

.login main form label[for="password"] {
  margin-top: 1rem;
}

@media (min-width: 700px) {
  .login main form {
    grid-template-columns: auto 80%;
    column-gap: 1rem;
    row-gap: 1rem;
    align-items: baseline;
  }

  .login main form input {
    width: 80%; justify-self: end;
  }

  .login main form button {
    grid-column: 1 / -1;
    justify-self: center;
    width: 50%;
    min-width: 200px;
  }
}

@media (max-width: 600px) {
  main > section:nth-of-type(2) > ul > li {
    flex-basis: calc((100% - 1rem) / 2);
  }
}

@media (max-width: 500px) {
  header {
    padding-inline: .5rem;
  }
  header > nav {
    margin-inline: -.5rem;
    padding-inline: .5rem;
  }
}

@media (max-width: 400px) {
  main > section:nth-of-type(2) > ul > li {
    flex-basis: 100%;
  }
}

header nav form {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

main > section:nth-of-type(2) > ul > li > article {
  display: flex;
  flex-direction: column;
  gap: .5rem;

  background: #FFF;
  border: 1px solid var(--castiron);
  border-radius: .5rem;
  padding: .5rem;
  width: 100%;
}

body.profile main > section:first-of-type {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1rem;
  row-gap: .75rem;
  align-items: start;
}

body.profile main > section:first-of-type img {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: start;
  width: 5rem;
  height: 5rem;
  object-fit: cover;
}

.recipe-top {
  margin-bottom: 2rem;
}

.sr-only {
  position:absolute!important; width:1px; height:1px; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.title-input {
  color: var(--cacao);
  width:100%;
  font-family:"Playwrite US Trad", cursive;
  font-size:3rem; line-height:1.1;
  padding:.25rem .5rem;
}

.recipe-top {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1rem;
  align-items:start;
}

.recipe-top .media {
  align-self:start;
}

.description textarea {
  width:100%;
}

.recipe-bottom {
  display:flex;
  gap:1rem;
  align-items:flex-start;
}

.recipe-bottom > .ingredients {
  flex: 0 1 33%;
  min-width: 0;
}

.recipe-bottom > .steps {
  flex: 1 1 67%;
  min-width: 0;
}

.ing-list .ing {
  display:flex;
  gap:.5rem;
  align-items:center;
}

.ing-list .ing input[type="number"],
.ing-list .ing input[type="text"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font: inherit;
}

.recipe-meta {
  display:grid; grid-template-columns: auto 1fr; gap:.25rem .5rem;
}

textarea {
  width:100%; resize:vertical; font-family:inherit; font-size:1rem;
}

.step-desc {
  vertical-align:top;
}

.steps ol {
  padding-left:1.25rem;
}

.steps .step {
  padding:1rem 0;
}

.ing-list {
  list-style: disc;
  padding-left: 1.25rem;
}

.ing-list .ing {
  display: grid;
  grid-template-columns: minmax(3.8rem, 5rem) 6rem 1fr;
  column-gap: .5rem;
  align-items: center;
  padding: .25rem 0;
}

textarea {
  width: 100%;
  resize: vertical;
}

.recipe .steps .ing-list .ing input[type="number"] {
  text-align: left;
  width: 4rem;
}

.form-errors {
  color: red;
  margin: .5rem 0 1rem;
}

.form-errors ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.form-errors li + li {
  margin-top: .25rem;
}

.title-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .5rem;
}

.title-bar .title {
  margin: 0;
  flex: 1;
  padding-right: 0;
}

.title-bar .title-actions {
  margin-left: auto;
  display: flex;
  gap: .5rem;
  position: static;
}

.title-bar .title-actions form {
  margin: 0;
}

.login main form .show-password {
  grid-column: 2;
  gap: 0.2em;
}

.login main form .show-password input[type="checkbox"] {
  width: auto !important;
}