/* The Bellfy wall. A magazine's back pages: big type up top, then the moments, edge to edge. */

.masthead .wordmark .spark{color:var(--accent);font-size:.62em;vertical-align:top;margin-left:2px;font-style:normal}
.wall-account{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-soft)}
.wall-account button{background:none;border:1px solid var(--line-strong);border-radius:999px;min-height:38px;padding:0 16px;font:600 13px/1 var(--text);color:var(--ink);cursor:pointer}
.wall-account button:hover{background:var(--ink);color:var(--paper-raised);border-color:var(--ink)}

.wall-opening{padding:clamp(28px,5vw,80px) var(--gutter) clamp(24px,3vw,40px);max-width:1280px}
.wall-opening h1{font-size:clamp(48px,8vw,128px);font-weight:250;line-height:.92;letter-spacing:-.04em;margin:20px 0 26px;animation:wall-rise 1.2s var(--ease-out) both}
.wall-opening h1 em{display:block;padding-left:clamp(0px,6vw,120px)}
.wall-opening .lede{max-width:52ch;animation:wall-rise 1.2s var(--ease-out) .12s both}
@keyframes wall-rise{from{opacity:0;transform:translateY(24px)}}

.wall-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.wall-filters button{min-height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--ink-soft);font:600 13px/1 var(--text);cursor:pointer;transition:background .4s var(--ease-out),color .4s var(--ease-out),border-color .4s var(--ease-out)}
.wall-filters button:hover{border-color:var(--ink);color:var(--ink)}
.wall-filters button[aria-pressed=true]{background:var(--ink);color:var(--paper-raised);border-color:var(--ink)}
.wall-filters button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.wall-grid{padding:0 var(--gutter);margin-top:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
/* The first moment on the wall is set larger: the grid breaks once, on the newest story. */
.wall-grid>.moment{animation:wall-rise .9s var(--ease-out) both}
.wall-grid>.moment:nth-child(2){animation-delay:.06s}.wall-grid>.moment:nth-child(3){animation-delay:.12s}.wall-grid>.moment:nth-child(4){animation-delay:.18s}
.wall-grid .moment-media{cursor:zoom-in}

.wall-empty{padding:40px var(--gutter) 80px;max-width:820px}
.wall-empty h2{font-size:clamp(34px,5vw,64px);margin-bottom:18px}
.wall-more{display:flex;justify-content:center;padding:20px var(--gutter) 80px}

.wall-dialog{border:0;padding:0;background:transparent;max-width:min(960px,calc(100vw - 32px));width:100%;color:var(--ink)}
.wall-dialog::backdrop{background:color-mix(in srgb,var(--ink) 72%,transparent);backdrop-filter:blur(6px)}
.wall-focus{position:relative}
.wall-focus .moment{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);border-radius:24px}
.wall-focus .moment-media{aspect-ratio:4/5;cursor:default}
.wall-focus .moment-body{align-content:start;padding:28px}
.wall-focus .moment-who a{font-size:28px}
.wall-focus .moment-caption{font-size:16px}
.wall-close{position:absolute;top:12px;right:12px;z-index:3;width:44px;height:44px;border-radius:50%;border:0;background:rgba(20,10,18,.6);color:#fff8f2;font-size:16px;cursor:pointer}
.wall-close:focus-visible{outline:3px solid #fff8f2;outline-offset:2px}
.wall-form{background:var(--paper-raised);border-radius:24px;padding:clamp(24px,4vw,40px);max-width:480px;margin:auto;display:grid;gap:14px}
.wall-form h2{font-size:clamp(28px,4vw,40px)}
.wall-form label{display:grid;gap:8px;font-size:13px;font-weight:600}
.wall-form input,.wall-form select{min-height:48px;border:1px solid var(--line-strong);border-radius:12px;padding:0 14px;font:16px var(--text);background:var(--paper);color:var(--ink)}
.wall-form input:focus,.wall-form select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.wall-form-actions{display:flex;flex-wrap:wrap;gap:10px}
.wall-status{font-size:13px;color:var(--ink-soft)}
.wall-status:empty{display:none}

#notice{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;max-width:calc(100vw - 32px);width:max-content;background:var(--ink);color:var(--paper);border-radius:999px;padding:14px 22px;font-size:14px;box-shadow:0 14px 40px -12px color-mix(in srgb,var(--ink) 60%,transparent)}
#notice:empty{display:none}

@media (max-width:760px){
 .wall-focus .moment{grid-template-columns:1fr}
 .wall-focus .moment-body{padding:20px}
 .wall-account span{display:none}
}
@media (prefers-reduced-motion:reduce){.wall-opening h1,.wall-opening .lede,.wall-grid>.moment{animation:none}}

.wall-all{padding:clamp(40px,5vw,72px) var(--gutter) 0;font-size:clamp(30px,4vw,52px);font-weight:300}
.reel-empty h3{font-size:24px;margin-bottom:6px}