:root {
  font-family: system-ui, sans-serif;
  color: #223038;
  background: #f4f6f6;
  line-height: 1.5;
}

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

header {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.1rem 2rem;
  border-bottom: 1px solid #cbd3d5;
  background: #fff;
}

.brand {
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}

.brand span {
  display: block;
  font-size: .8rem;
  font-weight: 400;
  color: #52656e;
}

nav { display: flex; gap: 1.5rem; flex: 1; }
header nav { flex-wrap: wrap; row-gap: .5rem; }
a { color: #17576b; }
a[aria-current=page] { font-weight: 700; text-underline-offset: .4rem; }

main {
  max-width: 65rem;
  margin: 3rem auto;
  padding: 0 2rem;
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.2rem; margin-top: 0; }

.card {
  max-width: 36rem;
  border: 1px solid #cbd3d5;
  border-radius: .4rem;
  padding: 1.6rem;
  background: #fff;
}

label { display: block; font-weight: 600; margin-bottom: .4rem; }

input, textarea {
  display: block;
  width: 100%;
  padding: .7rem;
  margin-bottom: 1.2rem;
  border: 1px solid #80949e;
  border-radius: .2rem;
  font: inherit;
}

textarea { min-height: 6rem; resize: vertical; }

button {
  font: inherit;
  background: #17576b;
  color: white;
  border: 0;
  border-radius: .25rem;
  padding: .65rem 1rem;
  cursor: pointer;
}

button:hover { background: #103e4c; }
:focus-visible { outline: 3px solid #bf7200; outline-offset: 3px; }

.error {
  max-width: 36rem;
  border-left: 4px solid #a32929;
  padding: .8rem 1rem;
  background: #ffeded;
}

@media (max-width: 600px) {
  header { padding: 1rem; gap: 1rem; flex-wrap: wrap; }
  nav { order: 3; flex-basis: 100%; }
  header form { margin-left: auto; }
  main { margin: 1.5rem auto; padding: 0 1rem; }
  .card { padding: 1rem; }
}

[hidden] { display: none !important; }
.gallery-pagination { justify-content: space-between; margin: 1.5rem 0; }
.gallery-actions { margin-bottom: 1rem; }
.media-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.media-card { border: 1px solid #cbd3d5; background: #fff; border-radius: .3rem; min-width: 0; }
.media-preview { display: flex; min-height: 14rem; height: 18rem; align-items: center; justify-content: center; background: #e8edee; }
.media-preview img { width: 100%; height: 100%; object-fit: contain; }
.media-caption { padding: .8rem; overflow-wrap: anywhere; font-size: .9rem; }
.media-caption p { margin: .4rem 0; }
.media-caption button { margin: .4rem 0; font-size: .85rem; }
.media-caption details { margin-top: .6rem; }
.asset-error { color: #912323; }
.detail-preview { display: block; max-width: min(100%,640px); max-height: 640px; width: auto; height: auto; object-fit: contain; }
.media-metadata { display: grid; grid-template-columns: 12rem minmax(0,1fr); gap: .6rem 1rem; }
.media-metadata dt { font-weight: 600; }
.media-metadata dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 850px) { .media-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 500px) {
  .media-grid { grid-template-columns: 1fr; }
  .media-preview { height: 22rem; }
  .media-metadata { grid-template-columns: 1fr; gap: .2rem; }
  .media-metadata dd { margin-bottom: .6rem; }
}