/* ============================================================
   小学生科普问答站 · VAPOR FAQ
   Vaporwave —— 深紫粉渐变 / 复古未来感 / 网格地平线 / 发光字
   ============================================================ */

:root{
  /* —— 蒸汽波配色（严格按规范色值） —— */
  --c-primary:  #de5471;   /* 主色：霓虹粉 */
  --c-secondary:#46ce9a;   /* 辅助：薄荷绿 */
  --c-accent:   #5adbed;   /* 强调：电子青 */
  --c-bg:       #150e10;   /* 页面背景：暗紫黑 */
  --c-surface:  #231a1c;   /* 卡片表面 */
  --c-text:     #f2eeef;   /* 正文 */
  --c-text-dim: #ae989d;   /* 次要文字 */
  --c-border:   #403034;   /* 描边 */

  /* —— 派生色（仅由规范色值混合而来，不引入新色相） —— */
  --purple: color-mix(in srgb, var(--c-primary) 55%, var(--c-accent) 45%);
  --pink-soft: color-mix(in srgb, var(--c-primary) 32%, transparent);
  --cyan-soft: color-mix(in srgb, var(--c-accent) 22%, transparent);
  --green-soft: color-mix(in srgb, var(--c-secondary) 22%, transparent);

  --grad-vapor: linear-gradient(105deg, var(--c-primary), var(--purple) 52%, var(--c-accent));
  --grad-green: linear-gradient(105deg, var(--c-secondary), color-mix(in srgb, var(--c-secondary) 45%, var(--c-accent)));

  --r: 6px;   /* 圆角 6px，全站统一 */
  --font-title: 'Poppins','Noto Sans SC',system-ui,-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --font-mono: 'JetBrains Mono','Fira Code',ui-monospace,'SFMono-Regular','Courier New',monospace;
  --glow-pink: 0 0 14px rgba(222,84,113,.55), 0 0 40px rgba(222,84,113,.22);
  --glow-cyan: 0 0 14px rgba(90,219,237,.5),  0 0 40px rgba(90,219,237,.18);
  --shadow-card: 0 10px 26px rgba(0,0,0,.42);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-mono);
  color:var(--c-text);
  background:var(--c-bg);
  min-height:100vh;
  line-height:1.8;
  overflow-x:hidden;
  position:relative;
}
/* 背景：紫粉辉光 */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 520px at 12% -6%, rgba(222,84,113,.20), transparent 62%),
    radial-gradient(820px 500px at 88% 4%,  rgba(90,219,237,.14), transparent 60%),
    radial-gradient(760px 620px at 50% 118%, rgba(70,206,154,.12), transparent 60%),
    var(--c-bg);
}
/* 极淡扫描线，增强复古 CRT 味 */
body::after{
  content:"";
  position:fixed; inset:0; z-index:40; pointer-events:none; opacity:.05;
  background:repeating-linear-gradient(to bottom, transparent 0 2px, #fff 2px 3px);
}
::selection{ background:var(--c-primary); color:#0d080a; }
img,svg{ display:block; max-width:100%; }
a{ color:var(--c-accent); text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input{ font-family:inherit; }

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:#120c0d; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--c-primary), var(--purple));
  border:3px solid #120c0d; border-radius:8px;
}
::-webkit-scrollbar-thumb:hover{ background:var(--c-accent); }

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px clamp(16px,4vw,42px);
  background:color-mix(in srgb, var(--c-bg) 78%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--c-border);
}
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--c-primary), var(--purple), var(--c-accent), transparent);
  opacity:.7;
}
.logo{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-title); font-weight:800; letter-spacing:.5px;
  color:var(--c-text); font-size:1.05rem;
}
.logo .logo-sun{ width:30px; height:30px; filter:drop-shadow(0 0 8px rgba(222,84,113,.7)); }
.logo b{ background:var(--grad-vapor); -webkit-background-clip:text; background-clip:text; color:transparent; }
.topnav{ display:flex; align-items:center; gap:6px; }
.topnav a{
  color:var(--c-text-dim); font-size:.86rem; letter-spacing:.4px;
  padding:7px 13px; border-radius:var(--r); border:1px solid transparent;
  transition:.25s;
}
.topnav a:hover{ color:var(--c-text); border-color:var(--c-border); }
.topnav a.on{
  color:var(--c-bg); background:var(--grad-vapor); font-weight:700;
  box-shadow:var(--glow-pink);
}

/* ---------- 主按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  border:none; border-radius:var(--r);
  padding:10px 18px; font-size:.9rem; font-weight:700; letter-spacing:.4px;
  color:#170d0f; background:var(--grad-vapor);
  box-shadow:var(--glow-pink); transition:.25s;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.btn:active{ transform:translateY(0); }
.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--c-border); border-radius:var(--r);
  background:transparent; color:var(--c-text);
  padding:9px 16px; font-size:.86rem; transition:.25s;
}
.btn-ghost:hover{ border-color:var(--c-accent); color:var(--c-accent); box-shadow:var(--glow-cyan); }
.btn-ghost .spin{ display:inline-block; transition:transform .5s; }
.btn-ghost:hover .spin{ transform:rotate(360deg); }

/* ============================================================
   首页 · HERO（网格地平线 + 发光太阳 + 星星 + 发光标题）
   ============================================================ */
.hero{
  position:relative; overflow:hidden; text-align:center;
  padding:72px 20px 96px;
}
/* —— 网格地平线 —— */
.horizon{
  position:absolute; left:-28%; right:-28%; bottom:-14px; height:290px;
  background-image:
    linear-gradient(to right, rgba(90,219,237,.42) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(90,219,237,.42) 1px, transparent 1px);
  background-size:46px 46px;
  transform:perspective(340px) rotateX(60deg);
  transform-origin:center top;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.85), transparent 86%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.85), transparent 86%);
  opacity:.55; z-index:0;
}
/* —— 发光切片太阳 —— */
.hero-sun{
  position:absolute; left:50%; bottom:150px; z-index:0;
  width:230px; height:230px; transform:translateX(-50%);
  -webkit-mask:radial-gradient(circle at 50% 50%, #000 58%, transparent 59%);
  mask:radial-gradient(circle at 50% 50%, #000 58%, transparent 59%);
  background:
    radial-gradient(circle at 50% 38%, #ef7d96 0 16%, var(--c-primary) 46%, color-mix(in srgb, var(--c-primary) 60%, #000) 82%);
  animation:sunpulse 5s ease-in-out infinite;
  filter:drop-shadow(0 0 26px rgba(222,84,113,.6));
}
.hero-sun::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(to bottom, transparent 0 24px, rgba(21,14,16,.92) 24px 30px);
  -webkit-mask:radial-gradient(circle at 50% 50%, #000 58%, transparent 59%);
  mask:radial-gradient(circle at 50% 50%, #000 58%, transparent 59%);
}
@keyframes sunpulse{
  0%,100%{ filter:drop-shadow(0 0 22px rgba(222,84,113,.55)); }
  50%{ filter:drop-shadow(0 0 40px rgba(222,84,113,.85)); }
}
/* —— 星星 —— */
.stars{ position:absolute; inset:0 0 40%; z-index:0; pointer-events:none; }
.stars i{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:var(--c-accent); box-shadow:0 0 8px rgba(90,219,237,.9);
  animation:twinkle 2.6s ease-in-out infinite;
}
.stars i:nth-child(3n){ background:var(--c-primary); box-shadow:0 0 8px rgba(222,84,113,.9); }
.stars i:nth-child(4n){ background:var(--c-secondary); box-shadow:0 0 8px rgba(70,206,154,.9); }
@keyframes twinkle{
  0%,100%{ opacity:.2; transform:scale(.7); }
  50%{ opacity:1; transform:scale(1.25); }
}
.hero-inner{ position:relative; z-index:2; max-width:820px; margin:0 auto; }
.kicker{
  font-size:.78rem; letter-spacing:2.5px; color:var(--c-text-dim);
  text-transform:uppercase; margin-bottom:18px;
}
.kicker b{ color:var(--c-accent); text-shadow:var(--glow-cyan); font-weight:600; }
/* —— 发光 / 金属渐变标题 —— */
.hero-title{
  font-family:var(--font-title); font-weight:800;
  font-size:clamp(2.2rem, 6.4vw, 3.9rem); line-height:1.15; letter-spacing:.5px;
  color:var(--c-text); margin-bottom:16px;
  text-shadow:0 0 22px rgba(222,84,113,.45);
}
.hero-title .chrome{
  background:linear-gradient(100deg, var(--c-primary), var(--purple) 40%, var(--c-accent) 72%, var(--c-primary) 110%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 6s linear infinite;
}
@keyframes shimmer{ to{ background-position:-200% 0; } }
.hero-sub{ color:var(--c-text-dim); max-width:560px; margin:0 auto 26px; font-size:.96rem; }

/* —— 搜索框 —— */
.searchwrap{
  display:flex; align-items:center; gap:10px;
  max-width:620px; margin:0 auto 18px;
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r);
  padding:8px 10px 8px 16px; transition:.25s;
  box-shadow:var(--shadow-card);
}
.searchwrap:focus-within{
  border-color:var(--c-accent);
  box-shadow:var(--glow-cyan), var(--shadow-card);
}
.search-mark{ color:var(--c-secondary); font-weight:700; animation:blink 1.1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:.25; } }
.searchwrap input{
  flex:1; min-width:0; background:transparent; border:none; outline:none;
  color:var(--c-text); font-size:.96rem; font-family:var(--font-mono);
}
.searchwrap input::placeholder{ color:var(--c-text-dim); opacity:.7; }
.searchwrap .clear-btn{
  border:none; background:transparent; color:var(--c-text-dim); font-size:1rem; line-height:1;
  padding:4px 6px; border-radius:var(--r);
}
.searchwrap .clear-btn:hover{ color:var(--c-primary); }
.hero-stats{
  display:flex; justify-content:center; gap:clamp(14px,4vw,34px); flex-wrap:wrap;
  margin-top:26px; font-size:.82rem; color:var(--c-text-dim);
}
.hero-stats b{ color:var(--c-text); font-family:var(--font-title); font-size:1.05rem; }
.hero-stats span b{ display:inline-block; color:var(--c-accent); text-shadow:var(--glow-cyan); }

/* ============================================================
   区块通用
   ============================================================ */
.section{ padding:34px clamp(16px,5vw,56px) 0; max-width:1240px; margin:0 auto; }
.sec-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-bottom:18px;
}
.sec-head h2{
  font-family:var(--font-title); font-weight:700; font-size:1.35rem; letter-spacing:.4px;
  position:relative;
}
.sec-head h2::before{
  content:""; display:inline-block; width:10px; height:10px; border-radius:2px;
  background:var(--grad-vapor); margin-right:10px; transform:rotate(45deg);
  box-shadow:var(--glow-pink); vertical-align:middle;
}
.count{ color:var(--c-text-dim); font-size:.82rem; }
.count b{ color:var(--c-accent); font-family:var(--font-title); font-weight:800; }

/* —— 分类胶囊 —— */
.chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.chip{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--c-border); border-radius:var(--r);
  background:var(--c-surface); color:var(--c-text-dim);
  padding:8px 14px; font-size:.85rem; transition:.25s; position:relative; overflow:hidden;
}
.chip::before{
  content:""; position:absolute; inset:0; opacity:0; transition:.25s;
  background:var(--grad-vapor); z-index:0;
}
.chip span,.chip em{ position:relative; z-index:1; font-style:normal; }
.chip:hover{ transform:translateY(-3px); border-color:transparent; color:#170d0f; }
.chip:hover::before{ opacity:1; }
.chip.on{ border-color:transparent; color:#170d0f; box-shadow:var(--glow-pink); }
.chip.on::before{ opacity:1; }
.chip.on span,.chip.on em{ color:#170d0f; }

/* —— 问答卡片网格 —— */
.grid-cards{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fill, minmax(290px,1fr));
}
.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r);
  overflow:hidden; cursor:pointer; text-decoration:none; color:var(--c-text);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .3s;
}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--c-primary);
  box-shadow:var(--glow-pink), var(--shadow-card);
}
.card .art-svg{ height:150px; padding:14px; display:flex; align-items:center; justify-content:center; }
.card .art-svg svg{ width:auto; height:100%; filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.card-body{ padding:4px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card .badge{ align-self:flex-start; }
.card h3{
  font-family:var(--font-title); font-weight:600; font-size:1.06rem; line-height:1.4;
  color:var(--c-text);
}
.card h3 mark{
  background:var(--c-primary); color:#170d0f; border-radius:3px; padding:0 2px;
}
.card .preview{ color:var(--c-text-dim); font-size:.82rem; line-height:1.7;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card .card-foot{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  color:var(--c-text-dim); font-size:.76rem; border-top:1px dashed var(--c-border); padding-top:10px;
}
.card .card-foot .go{ color:var(--c-accent); transition:transform .25s; }
.card:hover .card-foot .go{ transform:translateX(4px); }
.card .emoji-big{ position:absolute; top:10px; right:12px; font-size:1.3rem; opacity:.85; filter:drop-shadow(0 0 8px rgba(222,84,113,.5)); }
.card.is-hidden{ display:none; }

/* 徽章 */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; letter-spacing:.5px; font-weight:700;
  padding:3px 10px; border-radius:var(--r);
  color:var(--c-text); background:color-mix(in srgb, var(--c-primary) 22%, var(--c-surface));
  border:1px solid color-mix(in srgb, var(--c-primary) 55%, var(--c-border));
}
.badge.accent{ background:color-mix(in srgb, var(--c-accent) 22%, var(--c-surface)); border-color:color-mix(in srgb, var(--c-accent) 55%, var(--c-border)); }
.badge.green{ background:color-mix(in srgb, var(--c-secondary) 22%, var(--c-surface)); border-color:color-mix(in srgb, var(--c-secondary) 55%, var(--c-border)); }

/* 空状态 */
.empty{
  text-align:center; color:var(--c-text-dim); padding:56px 20px; font-size:.92rem;
  border:1px dashed var(--c-border); border-radius:var(--r);
}
.empty .big{ font-size:2.4rem; display:block; margin-bottom:10px; filter:drop-shadow(0 0 12px rgba(90,219,237,.5)); }

/* ============================================================
   随机一问卡片
   ============================================================ */
.random-card{
  display:grid; grid-template-columns:210px 1fr; gap:22px; align-items:center;
  background:
    radial-gradient(340px 200px at 8% 0%, var(--pink-soft), transparent 60%),
    radial-gradient(340px 200px at 100% 100%, var(--cyan-soft), transparent 60%),
    var(--c-surface);
  border:1px solid var(--c-border); border-radius:var(--r);
  padding:24px; box-shadow:var(--shadow-card); position:relative; overflow:hidden;
}
.random-card::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,255,255,.018) 22px 24px);
}
.random-card .art-svg{ height:200px; display:flex; align-items:center; justify-content:center; }
.random-card .art-svg svg{ height:100%; width:auto; filter:drop-shadow(0 10px 16px rgba(0,0,0,.4)); }
.random-card h3{ font-family:var(--font-title); font-weight:700; font-size:clamp(1.1rem,2.6vw,1.5rem); line-height:1.4; margin:10px 0 8px; }
.random-card p{ color:var(--c-text-dim); font-size:.88rem; }
.random-card .rc-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.art-wrap.swap{ animation:swapin .5s cubic-bezier(.2,.8,.3,1.2); }
@keyframes swapin{ 0%{ opacity:0; transform:rotate(-8deg) scale(.85); } 100%{ opacity:1; transform:none; } }

/* ============================================================
   分类浏览页
   ============================================================ */
.page-head{ text-align:center; padding:52px 20px 6px; }
.page-head h1{
  font-family:var(--font-title); font-weight:800; font-size:clamp(1.7rem,4.6vw,2.6rem); letter-spacing:.5px;
}
.page-head h1 .chrome{ background:var(--grad-vapor); -webkit-background-clip:text; background-clip:text; color:transparent; }
.page-head p{ color:var(--c-text-dim); margin-top:8px; font-size:.9rem; }
.cat-hero{
  position:relative; overflow:hidden; text-align:center;
  padding:64px 20px 70px; margin-bottom:8px;
}
.cat-hero .mini-horizon{
  position:absolute; left:-30%; right:-30%; bottom:-10px; height:190px;
  background-image:linear-gradient(to right, rgba(90,219,237,.34) 1px, transparent 1px);
  background-size:42px 42px;
  transform:perspective(300px) rotateX(60deg); transform-origin:center top;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.8), transparent 85%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.8), transparent 85%);
  opacity:.5;
}

/* ============================================================
   详情页
   ============================================================ */
.detail-wrap{ max-width:880px; margin:0 auto; padding:38px clamp(16px,4vw,40px) 70px; }
.crumb{ display:flex; align-items:center; gap:8px; color:var(--c-text-dim); font-size:.8rem; margin-bottom:24px; flex-wrap:wrap; }
.crumb a{ color:var(--c-accent); }
.crumb .sep{ color:var(--c-border); }
.detail-card{
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow-card); position:relative;
}
.detail-art{
  display:flex; justify-content:center; align-items:center;
  padding:34px 20px 18px; position:relative;
  background:
    radial-gradient(420px 240px at 50% -20%, var(--pink-soft), transparent 65%),
    radial-gradient(420px 240px at 100% 120%, var(--cyan-soft), transparent 65%);
  border-bottom:1px dashed var(--c-border);
}
.detail-art svg{ height:250px; width:auto; filter:drop-shadow(0 14px 22px rgba(0,0,0,.45)); animation:floaty 5s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.detail-body{ padding:28px clamp(20px,5vw,46px) 40px; }
.detail-body .badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.detail-body h1{
  font-family:var(--font-title); font-weight:800;
  font-size:clamp(1.35rem,4vw,1.9rem); line-height:1.35; letter-spacing:.4px;
  margin-bottom:18px;
}
.detail-body h1::before{ content:"Q · "; color:var(--c-primary); text-shadow:var(--glow-pink); }
.answer{
  position:relative; border-left:3px solid var(--c-primary);
  padding:14px 18px 14px 20px; background:color-mix(in srgb, var(--c-primary) 8%, var(--c-surface));
  border-radius:0 var(--r) var(--r) 0; font-size:.95rem; line-height:2;
}
.answer .a-mark{ color:var(--c-primary); font-weight:700; margin-right:6px; }
.funbox{
  margin-top:20px; border:1px solid color-mix(in srgb, var(--c-secondary) 45%, var(--c-border));
  border-left:4px solid var(--c-secondary); border-radius:var(--r);
  background:var(--green-soft); padding:14px 18px;
}
.funbox .f-title{ color:var(--c-secondary); font-weight:700; font-size:.82rem; letter-spacing:1px; margin-bottom:6px; }
.funbox p{ font-size:.88rem; color:var(--c-text); }
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.tag{
  font-size:.74rem; color:var(--c-text-dim);
  border:1px solid var(--c-border); border-radius:var(--r); padding:3px 10px;
  background:transparent; transition:.25s;
}
.tag:hover{ color:var(--c-accent); border-color:var(--c-accent); box-shadow:var(--glow-cyan); }
.pager{
  display:flex; justify-content:space-between; gap:14px; margin-top:26px;
}
.pager a{
  flex:1; display:block; border:1px solid var(--c-border); border-radius:var(--r);
  background:var(--c-surface); padding:14px 16px; transition:.25s; text-decoration:none;
}
.pager a:hover{ border-color:var(--c-accent); box-shadow:var(--glow-cyan); }
.pager .p-dir{ font-size:.72rem; color:var(--c-text-dim); letter-spacing:1px; }
.pager .p-q{ font-size:.86rem; color:var(--c-text); margin-top:4px; font-weight:600; font-family:var(--font-title); }
.pager .p-next{ text-align:right; }

/* ============================================================
   页脚
   ============================================================ */
footer{
  margin-top:64px; text-align:center; padding:30px 20px 40px;
  border-top:1px solid var(--c-border); position:relative;
}
footer::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--purple), transparent);
}
footer p{ color:var(--c-text-dim); font-size:.8rem; }
footer .heart{ color:var(--c-primary); text-shadow:var(--glow-pink); }

/* ---------- 入场动画 ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- 无障碍 ---------- */
:focus-visible{ outline:2px dashed var(--c-accent); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 760px){
  .hero-sun{ width:170px; height:170px; bottom:190px; }
  .random-card{ grid-template-columns:1fr; text-align:center; }
  .random-card .art-svg{ height:150px; }
  .random-card .rc-actions{ justify-content:center; }
  .pager{ flex-direction:column; }
  .detail-art svg{ height:190px; }
}
@media (max-width: 520px){
  .topnav a{ padding:6px 9px; font-size:.78rem; }
  .logo{ font-size:.92rem; }
  .section{ padding-top:24px; }
}