/* [guestbook] /guestbook: an elegant visitors' book. Uses the site tokens (--bg, --ink, --acc peach in dark) so light mode works too. */
.gb{--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;--plum:#8f6bd8;padding:0 0 80px;background:radial-gradient(1200px 520px at 85% -10%,color-mix(in srgb,var(--plum) 14%,transparent),transparent 70%)}
.gb-hd{padding:clamp(40px,8vw,96px) 0 clamp(22px,4vw,40px);max-width:820px}
.gb-hd .kick{display:flex;align-items:center;gap:.9rem}.gb-hd .kick::after{content:"";flex:0 0 64px;height:1px;background:currentColor;opacity:.55}
.gb-h1{font:400 clamp(2.4rem,6.4vw,4.6rem)/1.02 var(--serif);letter-spacing:-.015em;margin:.35em 0 .3em;text-wrap:balance}
.gb-h1 em{font-style:italic;color:var(--acc)}
.gb-lede{font:400 clamp(1.05rem,2vw,1.28rem)/1.65 var(--serif);color:var(--mute);max-width:58ch;margin:0}
.gb-grid{display:grid;gap:clamp(36px,6vw,80px);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:960px){.gb-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.gb-sign{position:sticky;top:84px}}
.gb-h2{font:700 .74rem/1.2 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.gb-sign{background:linear-gradient(180deg,color-mix(in srgb,var(--card) 92%,transparent),var(--card));border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3.4vw,34px);box-shadow:0 30px 80px -40px rgba(0,0,0,.6)}
.gb-form{max-width:none;gap:18px}
.gb-form label{font-weight:600;font-size:.82rem;letter-spacing:.04em}
.gb-form textarea{font:400 1.08rem/1.6 var(--serif);min-height:168px;resize:vertical}
.gb-form input,.gb-form textarea{background:var(--bg);transition:border-color .2s,box-shadow .2s}
.gb-form input:focus,.gb-form textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
.gb-form ::placeholder{color:color-mix(in srgb,var(--mute) 70%,transparent);font-style:italic}
.gb-cnt{justify-self:end;font-variant-numeric:tabular-nums}.gb-cnt.is-near{color:var(--acc)}
.gb-fine{font-size:.8rem;line-height:1.55;color:var(--mute);margin:0}
.gb-form .btn.p{width:100%;justify-content:center;letter-spacing:.02em}
@media (min-width:560px){.gb-form .btn.p{width:auto}}
.gb-ok{margin:0 0 16px;padding:.8rem 1rem;border-radius:12px;border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);background:color-mix(in srgb,var(--acc) 10%,transparent);font:italic 400 1.02rem/1.4 var(--serif)}
.gb-err{margin:0 0 16px}
.gb-list{display:grid}
.gb-e{position:relative;scroll-margin-top:140px;padding:28px 0 26px 46px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.gb-e::before{content:"\201C";position:absolute;left:0;top:14px;font:400 3.4rem/1 var(--serif);color:var(--acc);opacity:.75}
.gb-e:first-child{padding-top:8px}.gb-e:first-child::before{top:-6px}
.gb-m{font:400 clamp(1.06rem,1.6vw,1.2rem)/1.7 var(--serif);color:var(--ink)}
.gb-m p{margin:0 0 .7em}.gb-m p:last-child{margin:0}
.gb-by{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .9rem;margin-top:14px;font-size:.8rem;color:var(--mute)}
.gb-n{font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-size:.74rem}
.gb-n::before{content:"— ";letter-spacing:0;color:var(--acc)}
.gb-pl{font-style:italic;font-family:var(--serif);font-size:.92rem}
.gb-by time{margin-left:auto;font-variant-numeric:tabular-nums}
.gb-e.is-new{animation:gbin 1.4s ease-out}
.gb-e.is-new .gb-m{color:var(--ink)}.gb-e.is-new::after{content:"";position:absolute;inset:4px -12px 4px 30px;border-radius:14px;border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);pointer-events:none}
@keyframes gbin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.gb-e.is-new{animation:none}}
.gb-more{margin:28px 0 0;text-align:center}.gb-more .btn[aria-busy=true]{opacity:.6;pointer-events:none}
.gb-empty{text-align:center;padding:clamp(40px,7vw,80px) 20px;border:1px dashed var(--line);border-radius:18px}
.gb-orn{display:block;font-size:1.6rem;color:var(--plum);margin-bottom:10px}
.gb-empty-t{font:italic 400 clamp(1.4rem,3vw,1.9rem)/1.3 var(--serif);margin:0 0 6px;color:var(--ink)}
.gb-empty p{color:var(--mute);margin:0}
.gb-coda{margin:clamp(48px,8vw,90px) auto 0;max-width:60ch;text-align:center;font:italic 400 .95rem/1.6 var(--serif);color:var(--mute)}
.gb-coda span{color:var(--plum);font-style:normal;margin-right:.3rem}
.gb .hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
@media (max-width:640px){.gb-e{padding-left:34px;scroll-margin-top:170px}.gb-e.is-new::after{inset:4px -8px 4px 22px}.gb-e::before{font-size:2.6rem}.gb-by time{margin-left:0;flex-basis:100%}}

/* ---------- polish (r4) ---------- */
.gb-form label{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.45em;row-gap:7px}
.gb-form label>input,.gb-form label>textarea{flex:1 1 100%;width:100%}
.gb-form label>small:not(.gb-cnt){font-weight:500;font-size:.76rem;letter-spacing:.02em;color:var(--mute)}
.gb-form label>.gb-cnt{flex:1 1 100%;text-align:right;font-weight:500}
.gb-form input,.gb-form textarea{min-height:48px}
.gb-form input:hover:not(:focus),.gb-form textarea:hover:not(:focus){border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.gb-form .btn{min-height:48px;padding-inline:1.4rem}
.gb :focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.gb-form input:focus-visible,.gb-form textarea:focus-visible{outline:none}
.gb-e{transition:background-color .25s ease}
.gb-n{letter-spacing:.01em}
.gb-empty{background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--acc) 7%,transparent),transparent 70%)}
@media (max-width:640px){.gb-form textarea{min-height:140px}.gb-form .btn{width:100%}}