/* Liquid glass surfaces are shared by the directory and reading pages. */
:root {
  --ink: #1a1830;
  --mut: #55576c;
  --p: #524193;
  --glass: linear-gradient(120deg, #ffffffbd, #f7f6ff8f 56%, #fff5ffac);
  --glass-line: 1px solid #ffffffed;
  --glass-shadow: inset 0 1px 2px white, 0 5px 16px #6259951a;
}
body { color: var(--ink); background: #edf1ff; isolation: isolate; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/liquid-sky.webp") center / cover no-repeat, linear-gradient(135deg, #d4f4ff, #e5deff 55%, #fbe1fa);
}
:focus-visible { outline: 3px solid #7152ad; outline-offset: 3px; }
.frost, .site-header, .panel, .card, .trust, .cookie-bar, .cat-tile {
  background: var(--glass); border: var(--glass-line); box-shadow: var(--glass-shadow);
}
.site-header {
  width: min(1060px, calc(100% - 40px)); margin: 18px auto 0; top: 8px; z-index: 1030;
  border-radius: 30px; backdrop-filter: blur(17px);
}
.site-header .navbar { width: 100%; min-height: 52px; padding: 5px 18px; }
.site-header .brand { font-size: 1.28rem; letter-spacing: -.05em; }
.brand-mark { position: relative; width: 37px; height: 28px; background: none; box-shadow: none; }
.brand-mark::before, .brand-mark::after {
  content: ""; position: absolute; width: 24px; height: 27px; top: 1px; left: 0;
  background: radial-gradient(at 28% 18%, white, transparent 31%), linear-gradient(135deg,#adf8ff,#5dd0ed 55%,#ab9df2);
  border: 1px solid #fff; border-radius: 52% 48% 50% 48%; box-shadow: inset -2px -2px 4px #ffffff9c;
}
.brand-mark::after { left: 13px; background: radial-gradient(at 32% 20%,#fff,transparent 32%),linear-gradient(135deg,#a5abff,#e6a4ef,#ffaecb); opacity: .86; }
.navbar .nav-link { color: #303048; font-size: .85rem; }
.nav-finder { position: relative; }
.nav-finder summary, .round-link {
  width: 35px; height: 35px; display: inline-grid; place-items: center; cursor: pointer;
  background: var(--glass); border: var(--glass-line); border-radius: 50%; box-shadow: var(--glass-shadow); color: #343348;
}
.nav-finder summary { list-style: none; }
.nav-finder summary::-webkit-details-marker { display: none; }
.nav-finder form { position: absolute; right: 0; top: calc(100% + 12px); display:flex; gap:5px; padding:7px; background: #f5f4ff; border:var(--glass-line); border-radius:24px; width:min(350px,82vw); box-shadow:var(--glass-shadow); }
.nav-finder .search-input { min-width:0; }
.lens { display:inline-block; position:relative; width:15px; height:15px; border:1.6px solid #44435a; border-radius:50%; flex:none; }
.lens::after { content:""; position:absolute; top:100%; left:82%; width:7px; height:1.6px; background:#44435a; transform:rotate(48deg); transform-origin:left; }
.liquid-home { width:min(1160px, calc(100% - 56px)); margin:24px auto 0; }
.intro-bar { position:relative; z-index:4; display:grid; grid-template-columns:1.2fr 1fr 1.2fr; align-items:center; padding:10px 14px 10px 22px; gap:16px; border-radius:30px; }
.intro-bar h1 { font-size:clamp(.96rem,1.35vw,1.17rem); font-weight:700; margin:0; display:flex; align-items:center; gap:10px; line-height:1.22; }
.prism { font-size:2rem; color:#a98ce1; line-height:1; text-shadow:-2px -1px 0 #99e3ff, 1px 2px 0 #ffc3ec; }
.intro-bar > p { border-left:1px solid #9385b15e; margin:0; padding-left:15px; font-size:.78rem; line-height:1.4; color:#44455c; }
.discovery-search { position:relative; display:flex; align-items:center; padding:3px 3px 3px 12px; gap:9px; border-radius:30px; background:#ffffffa6; border:var(--glass-line); box-shadow:var(--glass-shadow); }
.discovery-search .lens { width:12px; height:12px; }
.discovery-search input { width:100%; min-width:0; flex:1; border:0; background:transparent; font-size:.8rem; padding:6px 0; }
.glass-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; white-space:nowrap; color:#281a3f; font-weight:650; font-size:.83rem; padding:7px 16px; border:var(--glass-line); border-radius:24px; background:linear-gradient(112deg,#f7ebff,#ffc6e8 70%,#f1b5ef); box-shadow:var(--glass-shadow); }
.glass-button:hover { background:#ffd6f2; color:#431b5c; }
.spotlight { display:flex; align-items:center; gap:22px; margin:30px 0 12px; }
.feature-stage { flex:1; min-width:0; }
.feature-slide { display:grid; grid-template-columns:minmax(160px,.94fr) minmax(170px,1fr); align-items:center; gap:clamp(16px,3vw,40px); }
.feature-slide[hidden], .next-profile[hidden], .cookie-bar[hidden] { display:none; }
.feature-photo { justify-self:center; width:min(100%,280px); position:relative; isolation:isolate; }
.feature-photo::before {
  content:""; position:absolute; z-index:-1; inset:8% -12% -6% -17%; border-radius:42% 61% 37% 62%;
  border:2px solid #fffc; background:linear-gradient(158deg,#fff 1%,#88ebff 15%,#bfafff 42%,#fff7 59%,#fcc1fa 76%,#b1c9fa 86%,white);
  box-shadow:inset 5px 4px 10px #fffd,inset -5px -3px 8px #ac9de9,0 8px 18px #b9a2ca38;
  transform:rotate(-10deg); animation:float-ribbon 9s ease-in-out infinite alternate;
}
@keyframes float-ribbon { to { transform:translateY(-5px) rotate(-6deg); } }
.feature-image, .mini-image, .row-image, .story-image { display:block; width:100%; height:100%; object-fit:cover; object-position:center 32%; }
.feature-image { aspect-ratio:1.1; height:auto; border-radius:clamp(20px,3vw,38px); border:2px solid white; box-shadow:0 8px 20px #6e658826; }
.feature-copy h2 { margin:12px 0 2px; font-weight:700; font-size:clamp(1.5rem,2.5vw,2.15rem); line-height:1.12; }
.feature-role { margin:0; color:#4a435b; font-size:.84rem; }
.feature-intro { max-width:38ch; margin:14px 0 19px; font-size:.89rem; line-height:1.55; }
.feature-label, .story-tag { display:inline-block; color:#4e244e; padding:3px 12px; font-size:.7rem; font-weight:650; background:linear-gradient(110deg,#f5ddfd,#ffc1e9); border-radius:14px; }
.feature-picker { width:30%; padding-left:20px; border-left:1px solid #a898be66; display:flex; gap:10px; align-items:center; }
.mini-grid { flex:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.mini-photo { position:relative; overflow:hidden; display:block; border:var(--glass-line); border-radius:18px; box-shadow:var(--glass-shadow); aspect-ratio:1.12; }
.mini-photo > span:last-child:not(.mini-image) { position:absolute; inset:auto 0 0; padding:10px 5px 4px; color:white; background:linear-gradient(transparent,#171229da); text-align:center; font-size:.72rem; line-height:1.2; }
.mini-photo[aria-current="true"] { outline:2px solid #9178c5; outline-offset:1px; }
.next-profile { flex:none; }
.home-block { margin-top:30px; }
.block-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:12px; }
.block-heading h2 { font-size:clamp(1.2rem,1.9vw,1.54rem); line-height:1.2; font-weight:700; margin:0; letter-spacing:-.045em; }
.block-heading a { display:inline-block; padding:4px 11px; border-radius:20px; background:var(--glass); border:var(--glass-line); box-shadow:var(--glass-shadow); color:#41394e; font-size:.73rem; }
.category-shelf { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:11px; }
.category-glass { display:grid; justify-items:center; align-content:center; text-align:center; gap:4px; padding:12px 6px; min-height:99px; border-radius:22px; color:var(--ink); background:linear-gradient(145deg,#e3f9ffed,#fff8 55%,#d5dfffba); }
.category-glass:nth-child(3n+2) { background:linear-gradient(145deg,#ffe1f7df,#fff9 55%,#efc8f5bf); }
.category-glass:nth-child(3n) { background:linear-gradient(145deg,#e9e0ffef,#fff8 55%,#c9f5f8c7); }
.category-glass strong { font-size:.86rem; line-height:1.2; }
.glass-symbol { width:46px; height:46px; filter:drop-shadow(0 3px 3px #7f72ac45); }
.directory-grid, .magazine-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.person-row, .story-row { display:grid; min-width:0; align-items:center; border-radius:18px; color:var(--ink); padding:7px; gap:13px; }
.person-row { grid-template-columns:clamp(68px,6.8vw,92px) minmax(0,1fr) 26px; padding-right:11px; }
.row-image { aspect-ratio:1; height:auto; border-radius:12px; }
.person-row h3, .story-row h3 { font-weight:700; line-height:1.22; letter-spacing:-.028em; font-size:1rem; margin:0; }
.person-row small { font-size:.75rem; color:#52456c; }
.person-row p, .story-row p { color:#4f4f67; font-size:.75rem; line-height:1.38; margin:5px 0 0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.person-row .round-link { width:26px; height:26px; font-size:.85rem; }
.story-row { grid-template-columns:33% minmax(0,1fr); align-items:stretch; padding-right:12px; }
.story-image { min-height:125px; max-height:162px; border-radius:12px; }
.story-row > div { align-self:center; padding:3px 0; }
.story-row .story-tag { background:#e9ddf9; font-size:.62rem; margin-bottom:6px; }
.story-row time { display:block; color:#5b5669; font-size:.69rem; margin-top:8px; }
.media-art { display:grid; place-items:center; background:radial-gradient(ellipse at 20% 0%,#fff9,transparent 55%),linear-gradient(130deg,var(--tile-a,#bae4fb),var(--tile-b,#d2bce9)); color:#423059; font-family:Outfit,system-ui,sans-serif; font-weight:600; }
.feature-image.media-art { font-size:3.5rem; }.row-image.media-art,.mini-image.media-art {font-size:1.35rem}
.tone-1 {--tile-a:#f3c8ed;--tile-b:#b7cef7}.tone-2 {--tile-a:#aff0df;--tile-b:#b9c9fa}.tone-3 {--tile-a:#f8d7cd;--tile-b:#d7c6ef}.tone-4 {--tile-a:#dccef7;--tile-b:#9ddce9}
.category-glass, .person-row, .story-row, .mini-photo { transition:transform .22s ease,box-shadow .22s ease; }
@media (hover:hover) {
  :is(.category-glass,.person-row,.story-row,.mini-photo):hover { transform:translateY(-3px); color:#4b3587; box-shadow:inset 0 1px 2px white,0 9px 20px #7970ae30; }
}
.page-hero, .profile-hero { background:linear-gradient(100deg,#fff8,#efeaff66,#d7f1ff73); border-block:1px solid #fffc; }
.site-header + main > :is(.profile-hero,.page-hero) { margin-top:18px; }
main .prose { color:#35384c; background:#ffffffb8; border:var(--glass-line); border-radius:16px; padding:clamp(16px,3vw,30px); }
.site-footer { background:linear-gradient(130deg,#f8faffed,#f6eeffdf); }
.site-footer .text-muted,.site-footer a { color:#565568!important; }
@media (max-width:991px) {
  .site-header .navbar { padding-inline:16px; }.nav-finder form { position:relative; top:0; width:100%; margin-top:8px; }.nav-finder .search-input { margin:0; }
  .intro-bar { grid-template-columns:1fr 1.15fr; }.intro-bar > p { grid-column:1; border:0; padding:0; }.intro-bar > form { grid-column:2; grid-row:1 / 3; }
  .feature-picker { width:28%; padding-left:10px; gap:5px; }.feature-picker .round-link { width:28px;height:28px; }
  .category-shelf { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .directory-grid,.magazine-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .liquid-home { width:calc(100% - 30px); margin-top:15px; }.site-header { width:calc(100% - 24px); margin-top:10px; }
  .intro-bar { display:block; padding:15px; border-radius:20px; }.intro-bar > p { margin:5px 0 12px; }.intro-bar h1 { font-size:1.03rem; }.prism { font-size:1.4rem; }
  .discovery-search input,.nav-finder input.search-input { font-size:16px; }
  .spotlight { display:block; margin-top:20px; }.feature-slide { grid-template-columns:minmax(105px,.7fr) minmax(0,1fr); gap:15px; }.feature-photo { width:87%; }.feature-copy h2 { font-size:1.4rem; margin-top:5px; }
  .feature-intro { font-size:.77rem; margin:7px 0 9px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }.feature-label {font-size:.63rem}
  .feature-picker { width:100%; margin-top:16px; padding:0; border:0; justify-content:center; gap:8px; }.mini-grid { flex:0 1 320px; grid-template-columns:repeat(4,minmax(0,1fr)); }.mini-photo { border-radius:12px; aspect-ratio:1.25; }.mini-photo > span:last-child:not(.mini-image) {font-size:.6rem}
  .home-block { margin-top:24px; }.category-glass { min-height:82px; border-radius:16px; }.category-glass strong {font-size:.77rem}.glass-symbol {width:36px;height:36px}
  .category-shelf,.directory-grid,.magazine-grid { gap:8px; }.directory-grid,.magazine-grid { grid-template-columns:1fr; }
  .person-row { grid-template-columns:66px minmax(0,1fr) 26px; }.story-image {min-height:102px;max-height:135px}
  .block-heading { gap:5px; }.block-heading a { padding:4px 7px; font-size:.68rem; }.block-heading h2 {font-size:1.2rem}
}
@media (prefers-reduced-motion:reduce) { .feature-photo::before { animation:none; } }