:root {
    color-scheme: light;
    --paper: #f0f4f1;
    --white: #fff;
    --ink: #173043;
    --muted: #526473;
    --border: #c9d6d2;
    --green: #235a43;
    --blue: #113e5a;
    --red: #822d29;
    font: 100%/1.55 system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
.guestbook { width: min(100% - 2rem, 52rem); margin: 2rem auto 3rem; }
.intro { border-left: .3rem solid var(--green); padding-left: 1.15rem; margin-bottom: 1.75rem; }
.eyebrow { margin: 0; color: var(--green); font-weight: 700; }
h1, h2, h3 { line-height: 1.2; overflow-wrap: anywhere; }
h1 { margin: .2rem 0; color: var(--blue); font-size: clamp(2rem, 6vw, 3rem); }
h2 { margin: 0 0 .75rem; }
h3, .intro p:last-child { margin: .35rem 0 0; }
.card, .entry { background: var(--white); border: 1px solid var(--border); border-radius: .75rem; }
.card { padding: clamp(1rem, 4vw, 1.65rem); }
form, .fields { display: grid; gap: 1rem; }
.fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
label { display: block; font-weight: 650; margin-bottom: .3rem; }
.hint, time { color: var(--muted); font-weight: 400; }
input:not([type="checkbox"]), textarea {
    width: 100%;
    border: 1px solid #83999b;
    border-radius: .35rem;
    padding: .55rem .65rem;
    color: inherit;
    background: var(--white);
    font: inherit;
}
textarea { resize: vertical; }
.check { display: flex; align-items: baseline; gap: .4rem; font-weight: 400; }
.check input { accent-color: var(--green); }
button { justify-self: start; background: var(--blue); color: var(--white); border: 0; border-radius: .4rem; padding: .65rem 1rem; font: inherit; font-weight: 700; cursor: pointer; }
button:hover { background: var(--green); }
:focus-visible { outline: 3px solid #a15016; outline-offset: 3px; }
.history { margin-top: 2rem; }
.entry { margin: .7rem 0; padding: 1rem 1.2rem; overflow-wrap: anywhere; }
.entry-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; }
.entry-header h3 { margin: 0; }
.entry a, .pagination a { color: var(--blue); }
.message { margin: .6rem 0 0; white-space: pre-wrap; }
.pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1rem; }
.notice { border: 1px solid var(--border); background: var(--white); border-radius: .4rem; padding: .65rem .8rem; margin: .75rem 0; }
.notice ul { margin: 0; padding-left: 1.25rem; }
.error { color: var(--red); background: #fff3f1; border-color: #e3b8b1; }
.success { color: var(--green); background: #e5f3e9; }
@media (max-width: 40rem) {
    .fields { grid-template-columns: minmax(0, 1fr); }
    .guestbook { width: min(100% - 1.25rem, 52rem); margin-top: 1.25rem; }
}