/* Phone layout (loaded only up to 640px wide, after site.css and community.css). Wide screens never read this file.
   Page margin on phones is 20px; full-bleed rows use margin-inline:-20px to reach the screen edge. */

/* Page header: a compact large title so content starts on the first screen. */
.page-hero{padding:18px 0 26px}
.page-hero .breadcrumb{display:none}
.page-hero .eyebrow{font-size:10px;letter-spacing:1.8px;margin-bottom:10px;max-width:none}
.page-hero h1{font-size:40px;line-height:1.02;letter-spacing:-.6px}
.page-hero p{font-size:14px;line-height:1.55;margin-top:10px;max-width:none}
.page-hero-pattern{right:-150px;top:-40px;opacity:.07}

/* Archive toolbar: chips pinned under the top bar while scrolling, like a video app. */
.library-section{padding-top:0}
.library-toolbar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto;gap:10px;margin-inline:-20px;padding:12px 20px;
  border-bottom:1px solid #e3dfd3;background:#f8f6f0e8;-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.library-toolbar .filter-tabs{grid-column:1/-1;order:-1;display:flex;gap:8px;margin:0 -20px;padding:0 20px 2px;overflow-x:auto;scrollbar-width:none;scroll-padding-inline:20px}
.library-toolbar .filter-tabs::-webkit-scrollbar{display:none}
.filter-tab{flex:none;min-height:36px;padding:0 15px;border-radius:999px;background:#ebe8df;color:#262622;font-size:13px;font-weight:600}
.filter-tab.selected{background:#151513;color:#f4ecdb}
.library-toolbar .search-field{flex:none;min-width:0;border:0;border-radius:999px;background:#ebe8df;padding:0 14px;min-height:42px}
.library-toolbar .search-field:focus-within{outline:2px solid #151513}
.library-toolbar .search-field input{height:42px;border:0;border-radius:0;background:transparent;padding:0;font-size:16px}
.library-toolbar .search-field input:focus{outline:0}
.library-toolbar select{flex:none;width:auto;max-width:none;min-height:42px;padding:0 30px 0 14px;border:0;border-radius:999px;background-color:#ebe8df;font-size:13px;font-weight:600;color:#262622}
.results-heading{margin-block:14px 16px;font-size:12.5px;color:#77776f}
.results-heading>span:last-child{display:none}

/* Recording cards: thumbnail, then a two-line title and one info line. */
.library-section .media-grid,.media-grid{gap:26px}
.card-art{aspect-ratio:16/9;border-radius:14px}
.card-art:after{background:linear-gradient(0deg,#0d0d0c4d,transparent 45%)}
.card-format,.card-play{display:none}
.card-duration{left:auto;right:8px;bottom:8px;padding:3px 7px;border-radius:6px;background:#000000c7;color:#fff;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.card-copy{padding:12px 2px 0}
.card-meta,.card-copy>p:not(.card-sub),.card-text-link{display:none}
.media-card .card-copy h3{margin:0;font-size:21px;line-height:1.18;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-sub{display:block;margin-top:5px;font-size:13px;color:#77776f}
.media-card:active .card-art>img{transform:scale(.985)}
.pagination{gap:14px;margin-top:30px;font-size:13px}
.pagination .btn{min-height:44px;border-radius:999px;padding-inline:18px}

/* Text pages: content in a soft card, with tappable quick-link rows. */
.editorial-page{gap:20px;padding-block:20px 44px}
.editorial-page>div:last-child{padding:24px 20px;border-radius:18px;background:#fffefa;border:1px solid #e6e2d6}
.editorial-page h2{font-size:32px;line-height:1.08;margin:8px 0 16px}
.editorial-page .prose{font-size:15px;line-height:1.75;color:#4f4f48}
/* Page-to-page buttons move into the quick-link rows on phones; the donation button stays. */
.editorial-page .btn:not(.btn-donate){display:none}
.editorial-page .btn-donate{display:flex;justify-content:center;width:100%;min-height:52px;margin-top:22px;border-radius:999px;font-size:15px}
.editorial-page .btn-donate+.small{margin-top:10px;font-size:12px;text-align:center}
/* The icon tile sits inside the top of the content card that follows it. */
.editorial-emblem{position:relative;z-index:1;width:52px;height:52px;aspect-ratio:auto;border-radius:14px;align-self:flex-start;margin:0 0 -66px 20px;background:#151513;color:#e3c48d;border:0}
.editorial-emblem+div{padding-top:84px!important}
.editorial-emblem svg{width:26px;height:26px}
.editorial-portrait{width:min(220px,62vw);margin:0 auto;border-radius:999px 999px 18px 18px;box-shadow:0 18px 40px -22px #000000aa}
.editorial-portrait img{height:230px}
.editorial-portrait>span{padding:13px;font-size:10px}
.editorial-page .notice-box{margin-top:18px;border-radius:12px;font-size:13px}
.privacy-copy{font-size:14px}
.page-links{display:flex;flex-direction:column;margin:22px -20px -24px;border-top:1px solid #ece8dc}
.page-links>a,.page-links>button{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 20px;background:none;text-align:left;color:var(--ink);border-bottom:1px solid #ece8dc}
.page-links>:last-child{border-bottom:0;border-radius:0 0 18px 18px}
.page-links>:active{background:#f1eee4}
.page-link-icon{flex:none;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:#151513;color:#e3c48d}
.page-link-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.page-link-text strong{font:600 18px/1.2 var(--serif)}
.page-link-text small{font-size:12.5px;color:#7d7d74}
.page-links>*>.icon:last-child{flex:none;color:#a9a597}

/* Empty states read as a card rather than a bare block of text. */
.empty-state{margin-top:8px;padding:40px 22px;border-radius:18px;background:#fffefa;border:1px solid #e6e2d6;gap:14px}
.empty-state h2{font-size:28px}
.empty-state p{font-size:14px;line-height:1.6}
.empty-state .btn{min-height:48px;border-radius:999px;padding-inline:22px}

/* Memories */
.memories-section{padding-top:20px;padding-bottom:110px}
.memory-card{border-radius:18px;padding:20px 18px;gap:14px}
.memory-card h2{font-size:25px}
.memory-body{font-size:15px}
.memory-photos img{border-radius:10px}
.memory-card video{border-radius:12px}
.share-fab{position:fixed;z-index:40;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;
  min-height:52px;padding:0 24px;border-radius:999px;background:linear-gradient(180deg,#1d1d1a,#0f100e);color:#f4ecdb;font-size:15px;font-weight:700;
  box-shadow:0 14px 34px -12px #000000b3,0 0 0 1px #e3c48d40;white-space:nowrap}
.share-fab{transition:opacity .25s ease,transform .25s ease}
.share-fab.is-tucked{opacity:0;pointer-events:none;transform:translate(-50%,16px)}
.share-fab .icon{color:#e3c48d}
.share-fab:active{transform:translateX(-50%) scale(.97)}
body.menu-open .share-fab{display:none}

/* Footer: tighter, with the links in two even columns. */
.footer-main{padding:26px 20px 18px;gap:16px}
.footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.footer-nav a{padding-block:11px;font-size:16px}
.footer-bottom{padding-inline:20px}

@media(prefers-reduced-motion:reduce){.media-card:active .card-art>img{transform:none}.share-fab,.share-fab:active,.share-fab.is-tucked{transition:none;transform:translateX(-50%)}}