@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;1,500&family=Instrument+Serif:ital@0;1&family=Montserrat:wght@400;500;600;700&display=swap');
@font-face{font-family:Lovelo;src:url(lovelo.woff2) format('woff2');font-weight:900;font-display:swap}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:#f7f6f1;color:#312319;font:500 1rem/1.75 Montserrat,sans-serif}
header{text-align:center;background:#241910;color:#fff8f4;padding:clamp(2rem,8vw,5rem) 1rem}
header::after{content:"";display:block;width:3rem;height:1px;background:#b88a5d;margin:2rem auto 0}
.byline{font-size:.8rem;letter-spacing:.16em}
h1{font:500 clamp(2.65rem,10vw,7.5rem)/.88 'Cormorant Garamond',Georgia,serif;letter-spacing:-.045em;margin:.25em 0 .4em} 
h1 em{display:inline-block;margin-top:.08em}
header .byline{margin:1.1rem 0 .65rem}
h1 em{color:#efc593}
h2{font:900 1.35rem/1.2 Lovelo,sans-serif}
article h2,.tile{font:400 clamp(2rem,5vw,3.5rem)/1.1 'Instrument Serif',Georgia,serif}
main{width:min(100% - 2.5rem, 44rem);margin:3rem auto}
.tile{display:block;background:#eee1d0;border:1px solid #d7bd9f;padding:1.5rem}
a{color:inherit}
form{margin:1.5rem 0}
label{display:block;margin:.6rem 0}
input:not([type=checkbox]){display:block;width:100%;max-width:28rem;font:inherit;padding:.5rem}
button{background:#edc18b;color:#241910;border:1px solid #825738;padding:.5rem .9rem;font:inherit;cursor:pointer;margin:.3rem .3rem .3rem 0}
header{position:relative}
#reply-bell{position:absolute;top:.7rem;right:.7rem}
#reply-notifications,#discussion{margin-block:2rem}
#discussion textarea{display:block;width:100%;font:inherit}
.diary-comment{border-left:2px solid #d7bd9f;padding-left:1rem;margin-block:1rem;overflow-wrap:anywhere}
.diary-comment p{white-space:pre-wrap}
#voice-activation{margin-block:2rem;padding:1.25rem;background:#eee1d0;border:1px solid #d7bd9f}
#voice-activation h2{margin-top:0}
#voice-activation audio{display:block;width:100%}

#reply-bell{background:transparent;border:0;color:#efc593;padding:.4rem;display:inline-flex;align-items:center;gap:.25rem}
#reply-count{font-size:.75rem}
footer{text-align:center;padding:1rem 1rem 2rem;font-size:.8rem}
#settings-link{color:#604b3b;text-underline-offset:.2em}
#email-settings{max-width:min(28rem,90vw);background:#f7f6f1;color:#312319;border:1px solid #d7bd9f;padding:1.5rem}
#email-settings::backdrop{background:#24191088}

#discussion{margin-top:4rem;padding:clamp(1rem,4vw,2rem);background:#eee1d0;border:1px solid #d7bd9f;border-top:4px solid #825738}
#discussion h2{margin:0;font-size:clamp(1.4rem,4vw,2rem)}
#discussion h3{font-size:1rem;margin:1.5rem 0 .75rem}
.discussion-composer,.diary-comment{background:#f7f6f1;border:1px solid #d7bd9f;padding:clamp(.8rem,3vw,1.25rem)}
#discussion textarea{border:1px solid #ad9174;border-radius:2px;padding:.6rem;background:#fffdf9;color:inherit}
.diary-comment strong{font-size:.95rem}
.diary-comment p{margin:.35rem 0 .65rem}
.diary-comment button[type=button]{background:transparent;border:0;text-decoration:underline;padding:0;font-size:.85rem}
.diary-reply{border-left:3px solid #ad794a;background:#fffdf9}
.diary-comment:target{outline:2px solid #825738;outline-offset:2px}

footer a{color:#604b3b;text-underline-offset:.2em}
footer a+a{margin-inline-start:1rem}

.tile{background:transparent;border:0;border-block-start:1px solid #d7bd9f;padding:1.5rem 0;text-decoration:none}
.tile:last-child{border-block-end:1px solid #d7bd9f}
.tile h3{font:600 clamp(1.2rem,4vw,1.65rem)/1.35 Montserrat,sans-serif;margin:0;letter-spacing:-.025em}
.tile:hover h3{color:#825738}
.tile-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;font:500 .85rem/1.5 Montserrat,sans-serif;color:#604b3b;margin:.55rem 0 0}

#entry h2{font:600 clamp(1.8rem,6vw,3.4rem)/1.12 Montserrat,sans-serif;letter-spacing:-.035em;margin:.65em 0 .25em}

/* Diary cards and form controls */
#tiles{display:grid;gap:1rem}
.tile,.tile:last-child,#gate,#discussion{
  border:1px solid #dbc5ad;border-radius:1rem;background:#fffbf5;
  box-shadow:0 8px 28px #3924170c;padding:clamp(1.15rem,4vw,2rem)
}
.tile{transition:background-color .15s,border-color .15s}
.tile:hover{background:#f4e8da;border-color:#a97d54}
#gate{margin-block:2rem;background:#f2e7d9}
#gate h2,#discussion h2{margin-top:0}
#auth{display:grid;gap:.8rem;margin-bottom:0}
#auth label,#discussion label{font-weight:600;font-size:.875rem}
#auth label{margin:0}
#auth input:not([type=checkbox]),#discussion input:not([type=checkbox]),#discussion textarea{
  max-width:none;margin-top:.35rem;padding:.7rem .85rem;border:1px solid #a98c70;
  border-radius:.55rem;background:#fffdf8;color:#312319;font:inherit
}
#discussion textarea{resize:vertical;min-height:6rem}
#auth button,#discussion button[type=submit],#discussion form button:not([type]){
  border-radius:.55rem;padding:.7rem 1rem;background:#312319;color:#fff8ef;border:1px solid #312319;font-weight:700
}
#auth button{width:100%;margin:0}
#auth button[value=signup]{background:transparent;color:#312319;border-color:#a27b55}
#auth label:has(input[type=checkbox]){display:flex;align-items:flex-start;gap:.55rem;font-weight:500}
#auth input[type=checkbox]{accent-color:#825738;margin-top:.3rem}
#discussion{background:#f2e7d9}
.discussion-composer,.diary-comment{border-radius:.7rem;background:#fffbf5}
.diary-reply{background:#f7efe4}
.diary-comment button[type=button]{padding:.25rem .4rem;color:#694425;text-underline-offset:.2em}
:where(a,button,input,textarea):focus-visible{outline:2px solid #825738;outline-offset:3px}