* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; padding: 0; }
body .page-center { max-width: 720px; margin: 0 auto; padding: 1rem; }
.border-left, .border-right { display: none; min-width: 120px; background-size: cover; background-position: center; background-repeat: no-repeat; }
body.logged-in { display: flex; min-height: 100vh; }
body.logged-in .border-left, body.logged-in .border-right { display: block; flex: 1; background-image: url("istockphoto-509109438-612x612.jpg"); }
body.logged-in .page-center { flex: 0 1 720px; }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.header-links { display: flex; align-items: center; gap: 1rem; }
.header-links a { color: #2563eb; text-decoration: none; font-size: 0.875rem; }
.header-links a:hover { text-decoration: underline; }
h1 { margin: 0; font-size: 1.25rem; }
h2 { font-size: 1rem; margin: 1rem 0 0.5rem; }
.hidden { display: none; }
#auth a { color: #2563eb; text-decoration: none; }
#auth a:hover { text-decoration: underline; }
#logout span { margin-right: 0.5rem; color: #666; }
.intro { display: flex; flex-direction: column; min-height: calc(100vh - 5rem); }
#message { color: #666; margin: 0 0 1rem; }
.intro-image-wrap { flex: 1; min-height: 0; display: flex; }
.intro-image { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.intro.hidden { display: none; }
#pins { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem; margin-top: 0.5rem; }
.pin { border: 1px solid #e2e2e2; border-radius: 8px; overflow: hidden; }
.pin img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.pin .title { padding: 0.5rem; font-size: 0.875rem; word-break: break-word; }
.pin .title:empty { display: none; }
form label { display: block; margin: 0.5rem 0; }
form input, form select, form textarea { width: 100%; padding: 0.4rem; }
form textarea { min-height: 4rem; resize: vertical; }
form button { margin-top: 0.5rem; padding: 0.5rem 1rem; background: #2563eb; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
form button:hover { background: #1d4ed8; }
#create-status { margin-top: 0.5rem; font-size: 0.875rem; }
#create-status.error { color: #c00; }
#create-status.ok { color: #080; }

.site-footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #e2e2e2; font-size: 0.875rem; }
.site-footer a { color: #2563eb; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-title { color: inherit; text-decoration: none; }
.site-title:hover { text-decoration: underline; }
main h3 { font-size: 0.9375rem; margin: 1.25rem 0 0.5rem; }
main ul { margin: 0.5rem 0; padding-left: 1.5rem; }
main li { margin: 0.25rem 0; }

/* Privacy policy page */
.privacy-content { line-height: 1.6; }
.privacy-content .privacy-intro { margin-bottom: 1.5rem; color: #444; }
.privacy-content section { margin-bottom: 2rem; }
.privacy-content section:last-of-type { margin-bottom: 0; }
.privacy-content h2 { font-size: 1.125rem; margin: 2rem 0 0.75rem; padding-bottom: 0.25rem; border-bottom: 1px solid #e2e2e2; }
.privacy-content h2:first-of-type { margin-top: 0; }
.privacy-content h3 { font-size: 1rem; margin: 1.25rem 0 0.5rem; }
.privacy-content h4 { font-size: 0.9375rem; margin: 1rem 0 0.4rem; font-weight: 600; }
.privacy-content p { margin: 0.5rem 0 1rem; }
.privacy-content .privacy-definitions { margin: 0.75rem 0 1.5rem; padding-left: 0; list-style: none; }
.privacy-content .privacy-definitions dt { font-weight: 600; margin-top: 0.75rem; }
.privacy-content .privacy-definitions dt:first-child { margin-top: 0; }
.privacy-content .privacy-definitions dd { margin: 0.2rem 0 0 1.25rem; }
.privacy-content a { color: #2563eb; text-decoration: none; }
.privacy-content a:hover { text-decoration: underline; }