:root { --ink:#171714; --paper:#f1efe8; --line:#cbc8bc; --accent:#d44a2b; --serif:"Italiana",serif; --sans:"DM Sans",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); }
header { min-height:76px; display:flex; justify-content:space-between; align-items:center; padding:0 4vw; border-bottom:1px solid var(--line); }
header>div { display:flex; align-items:center; gap:2rem; } header form { display:inline; }
a { color:inherit; } .logo { font:1.7rem var(--serif); text-decoration:none; }
button { font:inherit; cursor:pointer; } header button { border:0; padding:0; background:none; text-decoration:underline; }
main { max-width:1200px; margin:auto; padding:5rem 4vw; }
.intro { margin-bottom:4rem; } .eyebrow { color:var(--accent); font-size:.72rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase; }
h1 { margin:.5rem 0; font:clamp(3.5rem,7vw,7rem)/.9 var(--serif); } h2 { font:2rem var(--serif); font-weight:400; }
.forms { display:grid; grid-template-columns:1fr 1fr; gap:6vw; }
.forms section { border-top:1px solid var(--ink); }
form { display:flex; flex-direction:column; }
label { margin:1.2rem 0 .35rem; color:#67645c; font-size:.75rem; letter-spacing:.09em; text-transform:uppercase; }
input,textarea,select { width:100%; border:0; border-bottom:1px solid #918e84; border-radius:0; padding:.65rem; background:#e7e4db; color:var(--ink); font:inherit; }
input[type="file"] { max-width:100%; overflow:hidden; }
textarea { resize:vertical; } input:focus,textarea:focus,select:focus { outline:1px solid var(--accent); }
.date-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.check { display:flex; align-items:center; gap:.6rem; text-transform:none; letter-spacing:0; }
.check input { width:auto; }
.primary { margin-top:1.5rem; border:0; padding:1rem; background:var(--ink); color:white; }
.primary:hover { background:var(--accent); }
.error { margin:.25rem 0; color:#b22f1b; font-size:.82rem; } .notice { padding:1rem; background:#d9dfcf; }
.notice-error { background:#ead0c9; color:#8a3323; }
.hero-settings { display:grid; grid-template-columns:1fr 1fr; gap:6vw; margin-bottom:6rem; padding-top:1rem; border-top:1px solid var(--ink); }
.hero-settings h2 { margin-top:0; }
.hero-preview { display:grid; min-height:18rem; place-items:center; background:#e7e4db; }
.hero-preview img { width:100%; max-height:28rem; object-fit:cover; }
.description-settings { margin-bottom:6rem; padding-top:1rem; border-top:1px solid var(--ink); }
.description-settings form { max-width:48rem; }
.records { margin-top:6rem; border-top:1px solid var(--ink); }
.records article { display:flex; align-items:center; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.records img { width:64px; height:64px; object-fit:cover; }
.records article>div { display:flex; flex:1; flex-direction:column; gap:.3rem; }
.records small,.muted { color:#77746a; } .stars { color:var(--accent); letter-spacing:.14em; }
.delete { border:0; background:none; color:#8a3323; text-decoration:underline; }
.records article>.record-actions { flex:0; flex-direction:row; align-items:center; gap:1rem; }
.record-editor summary { cursor:pointer; text-decoration:underline; }
.record-editor[open] {
  position:fixed;
  z-index:10;
  inset:50% auto auto 50%;
  width:min(560px,calc(100vw - 2rem));
  max-height:calc(100vh - 2rem);
  overflow:auto;
  padding:1.5rem;
  border:1px solid var(--line);
  background:var(--paper);
  box-shadow:0 1.5rem 5rem #17171440;
  transform:translate(-50%,-50%);
}
.record-editor[open] summary { margin-bottom:1rem; text-align:right; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:2rem; }
.login-card { width:min(100%,460px); padding:3rem; border:1px solid var(--line); }
.login-card .logo { display:block; margin-bottom:5rem; }.login-card h1 { font-size:4rem; margin-bottom:2rem; }
@media(max-width:700px){
  header { align-items:flex-start; gap:1rem; padding:1rem; }
  header .logo { font-size:clamp(1.3rem,7vw,1.7rem); }
  header>div { flex-wrap:wrap; justify-content:flex-end; gap:.75rem 1.25rem; }
  header a,header button { min-height:44px; display:inline-flex; align-items:center; }
  main { padding:3rem 1rem; }
  h1 { overflow-wrap:anywhere; font-size:clamp(2.8rem,15vw,5rem); }
  .intro { margin-bottom:3rem; }
  .forms,.hero-settings { grid-template-columns:minmax(0,1fr); gap:4rem; }
  .hero-settings,.description-settings,.records { margin-bottom:4rem; }
  input,textarea,select { min-height:44px; font-size:1rem; }
  .primary { min-height:48px; }
  .records article { align-items:flex-start; flex-wrap:wrap; }
  .records article>div { min-width:calc(100% - 80px); }
  .records article>.record-actions { min-width:100%; }
  .stars { margin-left:0; }
  .delete,.record-editor summary { min-height:44px; padding:.5rem 0; }
  .login-page { padding:1rem; }
  .login-card { padding:1.5rem; }
  .login-card .logo { margin-bottom:3rem; }
  .login-card h1 { font-size:clamp(2.8rem,15vw,4rem); }
}

@media(max-width:480px){
  .date-row { grid-template-columns:1fr; gap:0; }
}
