@font-face{font-family:Epilogue;src:url('/assets/epilogue-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.quote-track blockquote,.quote-dialog blockquote{font-family:Epilogue,Arial,sans-serif;font-weight:700;font-style:normal;letter-spacing:-.02em}
.shoutouts .scene-group{width:100%;gap:32px}
.shoutouts h2{font-family:Arial,Helvetica,sans-serif;font-size:12px!important;font-weight:600;letter-spacing:.16em!important;text-transform:uppercase;line-height:1.5!important}
.quote-track{display:flex;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.quote-track::-webkit-scrollbar{display:none}
.quote-track figure{flex:0 0 100%;min-width:0;margin:0;padding:10px 12px;box-sizing:border-box;scroll-snap-align:center}
.quote-track blockquote{font-size:clamp(28px,4vw,48px);line-height:1.3;margin:0 auto 28px;max-width:800px;overflow-wrap:anywhere}
.quote-track figcaption{font-size:18px}
#quote-nav{display:flex;align-items:center;gap:24px;font-size:14px}
#quote-nav[hidden],.quote-track[hidden]{display:none}
#quote-nav button{border:1px solid currentColor;background:transparent;color:inherit;border-radius:50%;width:44px;height:44px;font-size:22px;cursor:pointer}
#quote-nav button:disabled{opacity:.25;cursor:default}
#quote-message{font-size:22px;max-width:550px;line-height:1.5}
.note-dialog{border:0;border-radius:32px;background:white;color:black;width:min(580px,calc(100% - 32px));max-height:85svh;padding:40px 28px;box-sizing:border-box;overflow:auto;text-align:left;font-family:inherit}
.note-dialog::backdrop{background:rgb(0 0 0 / .6)}
.note-dialog h2{font-size:30px;line-height:1.2;margin:0 30px 16px 0}
.note-dialog p{font-size:16px;line-height:1.5}
.note-close{position:absolute;right:12px;top:8px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;border:0;border-radius:50%;color:inherit;font-size:32px;line-height:1;cursor:pointer}
.note-close:focus,.note-dialog h2:focus{outline:none}
.note-close:focus-visible{background:#eee}
.note-dialog label{display:block;font-size:15px;margin:22px 0}
.note-dialog input:not([type=checkbox]),.note-dialog textarea{box-sizing:border-box;width:100%;display:block;margin-top:8px;padding:12px;border:1px solid #aaa;border-radius:6px;font:inherit;font-size:16px;background:white;color:black}
.note-dialog textarea{resize:vertical}
.note-dialog .note-consent{display:flex;align-items:flex-start;gap:10px;line-height:1.5}
.note-honeypot{position:absolute;left:-10000px}
#manage-list article{padding:20px 0;border-top:1px solid #ccc;overflow-wrap:anywhere}
#manage-list button{margin:4px 10px 4px 0;padding:10px 16px;border:1px solid black;border-radius:24px;background:white;color:black;cursor:pointer}
@media(max-width:700px){.shoutouts .scene-content{padding-inline:24px}.quote-track blockquote{font-size:28px}}

.note-dialog .button{appearance:none;border:0;box-shadow:none;width:100%;min-width:0}

.quote-carousel{--quote-size:clamp(28px,4vw,48px);--quote-stage-height:calc(var(--quote-size) * 7.8 + 71px);position:relative;width:100%;padding:0 56px;box-sizing:border-box}
.quote-track figure{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--quote-stage-height)}
.quote-track figcaption{flex-shrink:0;line-height:1.5}
.quote-track blockquote{display:block;flex-shrink:0;width:100%;font-size:var(--quote-size);min-height:0;margin-bottom:24px}
.quote-tail{white-space:nowrap}
.quote-tail[hidden]{display:none}
.quote-more{display:inline-block;vertical-align:baseline;min-height:24px;font:inherit;font-size:clamp(16px,.5em,24px);font-weight:400;line-height:1.3;letter-spacing:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em;border:0;border-radius:3px;background:none;color:#767676;cursor:pointer;padding:0;transition:color 180ms}
.quote-more:hover,.quote-more:focus-visible{color:#222}
.quote-more{font-family:Epilogue,Arial,sans-serif;font-style:normal;letter-spacing:0}
.quote-more:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.shoutouts #leave-note{min-width:0;min-height:44px;padding:10px 14px;border:0;border-radius:4px;background:transparent;box-shadow:none;color:#767676;font-size:16px;font-weight:500;letter-spacing:0;text-decoration:underline;text-decoration-color:#ccc;text-underline-offset:4px;transition:color 180ms,text-decoration-color 180ms}
.shoutouts #leave-note:hover,.shoutouts #leave-note:focus-visible{color:#222;text-decoration-color:currentColor;background:transparent;opacity:1;transform:none}
.shoutouts #leave-note:focus-visible{outline:2px solid currentColor;outline-offset:3px}
#quote-nav{display:block;height:24px;margin-top:16px;text-align:center}
#quote-nav button{position:absolute;top:calc(var(--quote-stage-height) / 2);transform:translateY(-50%)}
#quote-prev{left:0}#quote-next{right:0}
.closing-invitation{font-size:clamp(20px,2.5vw,28px);line-height:1.4;max-width:700px;margin:0 auto 24px}
@media(max-width:700px){.quote-carousel{--quote-size:24px;padding:0 38px}.shoutouts .scene-content{padding-inline:12px}#quote-nav button{width:36px;height:44px}.quote-track figure{padding-inline:4px}.quote-track blockquote{font-size:24px}}
html:has(#quote-dialog[open]){overflow:hidden;scrollbar-gutter:stable}
.quote-dialog{width:min(720px,calc(100% - 32px));overflow:hidden;padding:52px 32px 36px}
.quote-dialog h2{flex-shrink:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;margin:0 24px 24px 0;overflow-wrap:anywhere}
.quote-dialog blockquote{min-height:0;overflow:auto;overscroll-behavior:contain;font-size:clamp(22px,3vw,30px);line-height:1.45;margin:0;overflow-wrap:anywhere;white-space:pre-wrap}
.quote-dialog[open]{display:flex;flex-direction:column;animation:quote-dialog-in 220ms ease-out}
@keyframes quote-dialog-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

#quote-position{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:0}
#quote-nav .quote-dot{position:static;transform:none;width:16px;height:44px;padding:0;border:0;border-radius:22px;display:grid;place-items:center;transition:width 420ms cubic-bezier(.22,1,.36,1)}
#quote-nav .quote-dot[aria-current="true"]{width:32px}
.quote-dot::after{content:'';width:7px;height:7px;border-radius:10px;background:#000;opacity:1;transition:width 420ms cubic-bezier(.22,1,.36,1),background-color 300ms ease}
.quote-dot[aria-current="true"]::after{opacity:1;width:24px;background:var(--yellow)}
.quote-dot:focus-visible{outline:2px solid currentColor;outline-offset:1px}
#quote-nav{height:auto;min-height:28px}
@media(max-width:700px){#quote-prev,#quote-next{display:none}.quote-carousel{padding-inline:4px}.quote-dialog{padding:52px 24px 28px}}
@media(prefers-reduced-motion:reduce){#quote-nav .quote-dot,.quote-dot::after,.quote-more,.shoutouts #leave-note{transition:none}.quote-dialog[open]{animation:none}}
