@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500&display=swap');

:root{
    --paper:#f4f1e9;
    --ink:#141714;
    --muted:#77776f;
    --line:#d9d5ca;
    --green:#62d49d;
    --dark:#101411;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body.locked{overflow:hidden}
button,input,textarea{font:inherit}
button{cursor:pointer}
.quiet-header{
    width:min(1180px,calc(100% - 36px));
    margin:0 auto;
    height:88px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.quiet-mark{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--ink);
    text-decoration:none;
    font-weight:700;
    font-size:18px;
}
.quiet-mark img{width:34px;height:34px;border-radius:9px}
.leave-button{
    border:1px solid var(--ink);
    background:transparent;
    border-radius:999px;
    padding:10px 15px;
    color:var(--ink);
    font-weight:600;
}
.leave-button span{margin-right:4px}
main{width:min(1180px,calc(100% - 36px));margin:0 auto}
.hero{padding:82px 0 92px;max-width:880px}
.eyebrow{
    margin:0 0 20px;
    font-size:11px;
    letter-spacing:.2em;
    font-weight:700;
}
.hero h1{
    margin:0;
    font-family:"Source Serif 4",Georgia,serif;
    font-weight:400;
    letter-spacing:-.035em;
    font-size:clamp(48px,8vw,104px);
    line-height:.94;
}
.hero-line{
    margin:32px 0 0;
    font-family:"Source Serif 4",Georgia,serif;
    font-style:italic;
    font-size:clamp(22px,3vw,32px);
    color:#53564f;
}
.random-button{
    margin-top:38px;
    border:0;
    background:var(--dark);
    color:#fff;
    padding:14px 19px;
    border-radius:999px;
    font-weight:600;
}
.random-button span{margin-left:14px;color:var(--green)}
.notice{
    max-width:720px;
    border-radius:14px;
    padding:15px 18px;
    margin:-42px 0 58px;
    line-height:1.5;
}
.notice.success{background:#dff4e8}
.notice.error{background:#f6dfdc}
.quotes-stream{
    border-top:1px solid var(--line);
}
.quote-item{
    display:grid;
    grid-template-columns:minmax(0,1fr) 260px;
    gap:80px;
    padding:68px 0 72px;
    border-bottom:1px solid var(--line);
}
.quote-item blockquote{
    margin:0;
    max-width:780px;
    font-family:"Source Serif 4",Georgia,serif;
    font-weight:400;
    font-size:clamp(29px,4.5vw,55px);
    line-height:1.13;
    letter-spacing:-.02em;
}
.book{
    align-self:end;
    padding-bottom:5px;
}
.book strong,.book span{display:block}
.book strong{font-size:15px;line-height:1.4}
.book span{font-size:13px;color:var(--muted);margin-top:6px}
footer{
    padding:90px 0 110px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
}
footer p{
    margin:0;
    font-family:"Source Serif 4",Georgia,serif;
    font-size:clamp(25px,3vw,36px);
    line-height:1.2;
}
footer button,.empty button{
    border:0;
    background:none;
    border-bottom:1px solid currentColor;
    padding:0 0 4px;
    color:var(--ink);
}
.empty{padding:90px 0;text-align:center}
.empty p{font-family:"Source Serif 4",Georgia,serif;font-size:32px}

.modal{
    position:fixed;inset:0;z-index:50;
    pointer-events:none;opacity:0;
    transition:opacity .18s ease;
}
.modal.open{pointer-events:auto;opacity:1}
.modal-backdrop{position:absolute;inset:0;background:rgba(15,18,15,.48)}
.form-sheet{
    position:absolute;right:0;top:0;height:100%;width:min(560px,100%);
    overflow:auto;background:#fbfaf6;padding:54px 42px 42px;
    transform:translateX(100%);transition:transform .25s ease;
}
.modal.open .form-sheet{transform:translateX(0)}
.close{
    position:absolute;right:22px;top:18px;border:0;background:none;
    font-size:34px;font-weight:300;color:#333;
}
.form-sheet h2{
    margin:0;
    font-family:"Source Serif 4",Georgia,serif;
    font-weight:400;font-size:48px;letter-spacing:-.03em;
}
.form-intro{color:#696b65;line-height:1.6;margin:12px 0 34px}
.field{display:block;margin:0 0 22px;position:relative}
.field>span{display:block;font-size:12px;font-weight:700;margin-bottom:8px}
.field input,.field textarea{
    width:100%;border:1px solid #ccc8bd;background:#fff;color:#111;
    border-radius:12px;padding:14px 15px;outline:none;
}
.field textarea{min-height:155px;resize:vertical;line-height:1.5}
.field input:focus,.field textarea:focus{border-color:#4d9f78;box-shadow:0 0 0 3px rgba(98,212,157,.18)}
.field small{display:block;text-align:right;color:#888;margin-top:6px}
.submit-button{
    width:100%;border:0;background:var(--dark);color:#fff;
    border-radius:999px;padding:15px 18px;font-weight:700;
}
.form-note{text-align:center;color:#888;font-size:12px;margin:12px 0 0}
.trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}

.random-page{
    position:fixed;inset:0;z-index:70;background:var(--dark);color:#fff;
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.random-page.open{opacity:1;pointer-events:auto}
.random-close{
    position:absolute;right:24px;top:20px;border:0;background:none;color:#fff;
    font-size:36px;font-weight:300;
}
.random-inner{width:min(940px,calc(100% - 44px));padding:50px 0}
.random-label{font-size:10px;letter-spacing:.22em;color:var(--green);font-weight:700;margin:0 0 34px}
.random-inner blockquote{
    margin:0;font-family:"Source Serif 4",Georgia,serif;
    font-size:clamp(38px,7vw,82px);line-height:1.05;letter-spacing:-.025em;
}
.random-book{margin-top:40px}
.random-book strong,.random-book span{display:block}
.random-book span{color:#aaa;margin-top:7px}
.again{
    margin-top:38px;border:1px solid #4d514d;background:transparent;color:#fff;
    border-radius:999px;padding:11px 16px;
}

@media(max-width:720px){
    .quiet-header{height:72px}
    .quiet-mark span{display:none}
    .leave-button{font-size:13px;padding:9px 12px}
    .hero{padding:58px 0 66px}
    .hero h1{font-size:clamp(43px,14vw,68px)}
    .quote-item{grid-template-columns:1fr;gap:26px;padding:48px 0 50px}
    .book{padding:0}
    footer{align-items:flex-start;flex-direction:column;padding:70px 0 90px}
    .form-sheet{padding:54px 22px 30px}
    .form-sheet h2{font-size:42px}
}