:root{
  --canvas-top:#c9e4fb; --canvas-mid:#fbe4f0; --canvas-bot:#fef9f4;
  --cloud:#ffffff; --pink:#f7c6d8; --pink-soft:#fde4ef;
  --violet:#cdb6e6; --violet-soft:#e8dcf5;
  --blue:#a9d4f5; --blue-soft:#dcecfb;
  --gold:#e6c98a; --gold-bright:#f0d9a8; --pearl:#f4eee4;
  --ink:#4a3f5a; --ink-soft:#6b5f7e; --ink-muted:#9a8fa8; --ink-faint:#c4bbd0;
  --line:#e8d8e8; --line-soft:#f0e4f0; --skeleton:#ece4f0;
  --glass:rgba(255,255,255,0.4); --glass-border:rgba(255,255,255,0.6);
  --glow:0 0 30px rgba(255,200,220,0.5);
  --radius:24px; --radius-lg:40px; --radius-pill:80px;
}
*,*::before,*::after{box-sizing:border-box}
html{scrollbar-width:thin; scrollbar-color:#d8c8e8 transparent}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#cdb6e6,#f7c6d8);border-radius:6px}
html,body{margin:0;padding:0}
body{
  font-family:'Quicksand','Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--canvas-top) 0%,var(--canvas-mid) 40%,var(--canvas-bot) 100%);
  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.65;
}
/* floating cloud silhouettes */
body::before,body::after{
  content:""; position:fixed; z-index:0; pointer-events:none;
  width:60vw; height:40vh; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,0.5),transparent 70%);
  filter:blur(40px);
}
body::before{top:-10vh; left:-10vw; animation:drift-a 30s ease-in-out infinite}
body::after{bottom:-10vh; right:-10vw; animation:drift-b 36s ease-in-out infinite}
@keyframes drift-a{50%{transform:translate(8vw,4vh)}}
@keyframes drift-b{50%{transform:translate(-8vw,-4vh)}}
#ambient-canvas{position:fixed; inset:0; z-index:1; pointer-events:none}
main,header,footer{position:relative; z-index:2}
img{max-width:100%; display:block}
a{color:var(--ink-soft); text-decoration:none; transition:color .3s, text-shadow .3s}
a:hover{color:var(--violet)}
.wrap{max-width:1240px; margin:0 auto; padding:0 24px}
h1,h2,h3,h4{font-family:'Baloo 2','Quicksand',sans-serif; font-weight:600; color:var(--ink); margin:0 0 .4em}
p{margin:0 0 1em}
button{font-family:inherit; cursor:pointer}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.35);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.5);
}
.header-inner{max-width:1240px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:24px}
.brand{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.brand .brand-mark{width:44px; height:34px; filter:drop-shadow(0 0 12px rgba(255,200,220,0.6))}
.brand-name{display:block; font-family:'Baloo 2','Quicksand',sans-serif; font-weight:700; font-size:22px; color:var(--ink); letter-spacing:1px}
.brand-tag{display:block; font-size:11px; color:var(--ink-muted); font-family:'Caveat',cursive}
.main-nav{display:flex; gap:6px; margin-left:auto; flex-wrap:wrap}
.main-nav a{
  padding:8px 14px; border-radius:var(--radius-pill);
  font-size:13px; letter-spacing:1px; font-weight:600; color:var(--ink-soft);
  background:rgba(255,255,255,0.3); border:1px solid transparent;
  transition:all .3s;
}
.main-nav a:hover{background:rgba(255,255,255,0.6); color:var(--violet); box-shadow:var(--glow)}
.main-nav a.active{background:var(--pink-soft); color:var(--ink); box-shadow:var(--glow)}
.nav-toggle{display:none; margin-left:auto; padding:8px 14px; border-radius:var(--radius-pill); background:rgba(255,255,255,0.4); border:none; color:var(--ink)}
@media(max-width:820px){
  .nav-toggle{display:block}
  .main-nav{display:none; flex-direction:column; position:absolute; top:100%; right:0; left:0; background:rgba(255,255,255,0.85); padding:12px; gap:8px}
  .main-nav.open{display:flex}
  .main-nav a{text-align:center}
}

/* ---------- Layout ---------- */
.layout-with-sidebar{display:grid; grid-template-columns:1fr 320px; gap:32px; max-width:1240px; margin:0 auto; padding:32px 24px}
.layout-main{min-width:0}
@media(max-width:1024px){.layout-with-sidebar{grid-template-columns:1fr}}

/* ---------- Cloud field (hero) ---------- */
.cloud-field{
  position:relative;
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
  padding:60px 24px 80px;
  max-width:1180px; margin:0 auto;
}
.cloud-field::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:80%; height:140px; border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,236,200,0.5),transparent 70%);
  filter:blur(30px); pointer-events:none;
}
@media(max-width:820px){.cloud-field{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cloud-field{grid-template-columns:1fr}}

.dream-cloud{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:240px; padding:30px 20px;
  filter:drop-shadow(0 0 20px rgba(255,220,240,0.8));
  cursor:pointer; text-decoration:none;
  will-change:transform,filter;
}
/* layered puffs forming a fluffy cloud */
.dream-cloud .cloud-puff{
  position:absolute; border-radius:50%; background:var(--cloud); opacity:0.85;
}
.dream-cloud .cloud-puff.p1{width:70%; height:60%; top:-6%; left:15%; filter:blur(0.5px)}
.dream-cloud .cloud-puff.p2{width:50%; height:55%; top:8%; left:-6%; background:linear-gradient(135deg,#fff,var(--pink-soft))}
.dream-cloud .cloud-puff.p3{width:50%; height:55%; top:8%; right:-6%; background:linear-gradient(135deg,#fff,var(--blue-soft))}
.dream-cloud .cloud-puff.p4{width:60%; height:50%; bottom:-8%; left:20%; background:linear-gradient(180deg,var(--cloud),var(--violet-soft))}

.cloud-poster{
  position:relative; z-index:2;
  width:170px; height:170px; border-radius:32px;
  background:rgba(255,255,255,0.4);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--glass-border);
  overflow:hidden;
  box-shadow:0 0 30px rgba(200,180,255,0.4), inset 0 8px 20px rgba(255,255,255,0.3);
  transition:filter .5s;
}
.cloud-poster img{width:100%; height:100%; object-fit:cover; filter:brightness(1.1) saturate(1.2)}

.dewdrop{
  position:relative; z-index:3; margin-top:18px;
  padding:6px 16px; border-radius:var(--radius-pill);
  background:linear-gradient(135deg,rgba(255,255,255,0.7),rgba(247,198,216,0.5));
  font-size:12px; letter-spacing:0.5px; color:var(--ink-soft);
  backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,0.5);
  box-shadow:0 4px 12px rgba(180,150,200,0.2);
}
.dewdrop b{color:var(--ink); font-weight:600}

/* wandering bubble links */
.bubble-link{
  position:absolute; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.7),transparent 70%);
  border:1px solid rgba(255,255,255,0.5);
  left:var(--bx); top:var(--by);
  transform:scale(var(--s,1));
  animation:bubble-wander var(--dur,12s) ease-in-out infinite;
  pointer-events:none; z-index:1;
}
@keyframes bubble-wander{
  0%{transform:translate(0,0) scale(var(--s,1)); opacity:0}
  15%{opacity:0.8}
  85%{opacity:0.8}
  100%{transform:translate(120px,-80px) scale(var(--s,1)); opacity:0}
}

/* ---------- Section heads ---------- */
.section-head{text-align:center; padding:48px 24px 24px}
.section-head .eyebrow{display:block; font-family:'Caveat',cursive; font-size:18px; color:var(--violet); letter-spacing:1px}
.section-head h2{font-size:34px; margin:6px 0}
.section-head p{color:var(--ink-muted); max-width:620px; margin:0 auto}

/* ---------- Dream stream (bubble / feather / dandelion) ---------- */
.dream-stream{
  position:relative;
  column-count:3; column-gap:28px;
  padding:24px; max-width:1240px; margin:0 auto;
}
@media(max-width:900px){.dream-stream{column-count:2}}
@media(max-width:560px){.dream-stream{column-count:1}}
.dream-stream .stream-card{break-inside:avoid; margin-bottom:32px; display:block}

/* bubble review card */
.bubble-card{
  position:relative; display:block; cursor:pointer; text-decoration:none;
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:rgba(255,255,255,0.25);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  box-shadow:0 0 30px rgba(200,180,255,0.4) inset, 0 8px 20px rgba(100,80,150,0.15);
  padding:22px; overflow:hidden;
  color:var(--ink);
}
.bubble-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg,rgba(255,255,255,0.3),rgba(247,198,216,0.2),rgba(205,182,230,0.2),rgba(169,212,245,0.2));
  background-size:300% 300%;
  animation:iridescent 8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes iridescent{50%{background-position:100% 50%}}
.bubble-img{
  width:120px; height:120px; border-radius:50%; overflow:hidden; margin:0 auto 14px;
  border:2px solid rgba(255,255,255,0.6); box-shadow:0 0 18px rgba(255,200,220,0.5);
}
.bubble-img img{width:100%; height:100%; object-fit:cover}
.bubble-title{font-family:'Baloo 2',sans-serif; font-size:18px; text-align:center; margin-bottom:6px}
.bubble-meta{text-align:center; font-size:12px; color:var(--ink-muted); margin-bottom:10px}
.bubble-excerpt{font-size:13px; color:var(--ink-soft); text-align:center}

/* feather feature card */
.feather-card{
  position:relative; display:block; cursor:pointer; text-decoration:none;
  padding:28px 22px 32px; border-radius:60% 40% 60% 40% / 40% 60% 40% 60%;
  background:linear-gradient(180deg,rgba(255,255,255,0.5),rgba(247,198,216,0.3),rgba(205,182,230,0.25));
  backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.5);
  box-shadow:0 0 24px rgba(255,200,220,0.35);
  color:var(--ink); overflow:hidden;
}
.feather-card .ico-feather{position:absolute; top:8px; right:8px; opacity:0.5; width:46px}
.feather-title{font-family:'Caveat',cursive; font-size:24px; color:var(--ink); margin-bottom:8px}
.feather-img{width:100%; height:130px; object-fit:cover; border-radius:30px; margin-bottom:12px; border:1px solid rgba(255,255,255,0.5)}
.feather-excerpt{font-size:13px; color:var(--ink-soft)}
.feather-axis{height:1px; background:linear-gradient(90deg,transparent,var(--violet),transparent); margin:10px 0}

/* dandelion news card */
.dandelion-card{
  position:relative; display:block; cursor:pointer; text-decoration:none;
  padding:18px 16px; text-align:center; color:var(--ink);
}
.dandelion-fluff{
  position:relative; width:80px; height:80px; margin:0 auto 8px;
}
.dandelion-svg{width:100%; height:100%}
.dandelion-title{font-size:14px; font-weight:600; margin-bottom:4px}
.dandelion-meta{font-size:11px; color:var(--ink-muted); font-family:'Caveat',cursive}

/* ---------- Wide feature ---------- */
.wide-feature{
  display:grid; grid-template-columns:200px 1fr; gap:24px; align-items:center;
  padding:24px; border-radius:var(--radius-lg);
  background:linear-gradient(120deg,rgba(255,255,255,0.5),rgba(247,198,216,0.3));
  backdrop-filter:blur(10px); border:1px solid var(--glass-border);
  box-shadow:var(--glow); margin-bottom:24px;
}
.wide-feature .wf-img{width:200px; height:260px; border-radius:var(--radius); object-fit:cover; box-shadow:0 0 24px rgba(255,200,220,0.5)}
.wide-feature .wf-body h3{font-size:24px; margin-bottom:8px}
.wide-feature .wf-meta{font-size:12px; color:var(--ink-muted); margin-bottom:12px}
.wide-feature .wf-excerpt{font-size:14px; color:var(--ink-soft)}
@media(max-width:560px){.wide-feature{grid-template-columns:1fr; text-align:center}.wide-feature .wf-img{margin:0 auto}}

/* ---------- Dig tags row ---------- */
.dew-tags-row{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px}
.dew-tag{
  padding:8px 16px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,0.4); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.5); font-size:12px; color:var(--ink-soft);
  text-decoration:none; box-shadow:0 4px 12px rgba(180,150,200,0.15);
  transition:all .3s;
}
.dew-tag:hover{background:var(--pink-soft); color:var(--ink); transform:translateY(-2px)}
.dew-tag b{color:var(--ink)}

/* ---------- Genre strip ---------- */
.genre-strip{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:16px 24px; max-width:1240px; margin:0 auto}
.genre-strip a{
  padding:6px 14px; border-radius:var(--radius-pill); font-size:12px; font-weight:600;
  background:rgba(255,255,255,0.4); color:var(--ink-soft); border:1px solid rgba(255,255,255,0.5);
  transition:all .3s;
}
.genre-strip a:hover,.genre-strip a.active{background:var(--pink-soft); color:var(--ink); box-shadow:var(--glow)}

/* ---------- Pagination ---------- */
.pagination{display:flex; justify-content:center; gap:8px; padding:32px 24px}
.pagination a,.pagination span{
  padding:8px 14px; border-radius:var(--radius-pill); font-size:13px;
  background:rgba(255,255,255,0.4); color:var(--ink-soft); border:1px solid rgba(255,255,255,0.5);
}
.pagination a:hover{background:var(--pink-soft); color:var(--ink)}
.pagination .current{background:var(--violet-soft); color:var(--ink); font-weight:600}

/* ---------- Sidebar ---------- */
.layout-sidebar{display:flex; flex-direction:column; gap:28px; position:sticky; top:90px; align-self:start}
@media(max-width:1024px){.layout-sidebar{position:static}}
.side-block{
  padding:22px; border-radius:var(--radius-lg);
  background:rgba(255,255,255,0.35); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.5); box-shadow:var(--glow);
}
.side-block h3{font-size:16px; margin-bottom:14px; text-align:center}

/* dreamcatcher hot list */
.dreamcatcher{position:relative; width:100%; aspect-ratio:1; max-width:240px; margin:0 auto}
.dreamcatcher-svg{width:100%; height:100%}
.dc-rank{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,0.3); margin-bottom:8px; text-decoration:none; color:var(--ink);
  transition:all .3s;
}
.dc-rank:hover{background:rgba(255,255,255,0.6); transform:translateX(4px)}
.dc-rank .dc-pos{
  flex:0 0 28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; color:#fff;
}
.dc-rank[data-rank="1"] .dc-pos{background:linear-gradient(135deg,#e6c98a,#f0d9a8)}
.dc-rank[data-rank="2"] .dc-pos{background:linear-gradient(135deg,#cdb6e6,#e8dcf5)}
.dc-rank[data-rank="3"] .dc-pos{background:linear-gradient(135deg,#f7c6d8,#fde4ef)}
.dc-rank[data-rank] .dc-pos{background:linear-gradient(135deg,#a9d4f5,#dcecfb)}
.dc-rank .dc-thumb{width:38px; height:38px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,0.6)}
.dc-rank .dc-title{font-size:13px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dc-rank .dc-score{font-size:11px; color:var(--ink-muted); font-family:'Caveat',cursive}

/* star-sand bottle */
.star-bottle{
  position:relative; min-height:160px; padding:16px; border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,0.25),rgba(205,182,230,0.2));
  border:1px solid var(--glass-border); cursor:pointer; overflow:hidden;
  box-shadow:inset 0 8px 20px rgba(255,255,255,0.3);
}
.star-bottle::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(2px 2px at 20% 30%,#fff,transparent),
    radial-gradient(2px 2px at 60% 50%,#f7c6d8,transparent),
    radial-gradient(2px 2px at 80% 70%,#e6c98a,transparent),
    radial-gradient(2px 2px at 40% 80%,#cdb6e6,transparent),
    radial-gradient(2px 2px at 70% 20%,#a9d4f5,transparent);
  background-size:100% 100%;
  animation:sand-drift 6s ease-in-out infinite alternate;
}
@keyframes sand-drift{to{transform:translateY(-6px)}}
.sand-comment{
  position:absolute; bottom:12px; left:12px; right:12px; font-size:11px; color:var(--ink-soft);
  font-family:'Caveat',cursive; opacity:0; text-align:center; pointer-events:none;
}
.star-bottle .sb-hint{position:relative; z-index:2; text-align:center; font-size:12px; color:var(--ink-muted); margin:0}

/* silk thread vote */
.silk-vote{display:flex; flex-direction:column; gap:10px}
.silk-options{display:flex; gap:10px; justify-content:center}
.silk-option{
  width:36px; height:36px; border-radius:50%; cursor:pointer; border:2px solid rgba(255,255,255,0.5);
  box-shadow:0 0 12px rgba(255,200,220,0.4); transition:transform .3s;
}
.silk-option:hover{transform:scale(1.15)}
.silk-option.tied{box-shadow:0 0 18px rgba(230,201,138,0.9)}
.silk-hint{text-align:center; font-size:11px; color:var(--ink-muted); font-family:'Caveat',cursive}
.silk-knot{position:absolute; width:8px; height:8px; border-radius:50%; box-shadow:0 0 12px rgba(255,220,140,0.8)}

/* music box */
.music-box{display:flex; flex-direction:column; align-items:center; gap:8px}
.music-box-svg{width:70px; height:60px}
.mb-note{position:absolute; width:10px; height:10px; opacity:0}
.mb-note::after{content:"♪"; font-size:14px; color:var(--violet)}
.music-box .mb-text{font-size:12px; color:var(--ink-muted); text-align:center}

/* ---------- Footer (pillow & blanket) ---------- */
.site-footer{
  margin-top:80px;
  background:linear-gradient(180deg,var(--canvas-mid) 0%,var(--pink-soft) 100%);
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,0.04) 0 2px,transparent 2px 8px),
                   linear-gradient(180deg,var(--canvas-mid) 0%,var(--pink-soft) 100%);
  position:relative; padding-top:60px;
}
.pillow{
  position:relative; max-width:960px; margin:0 auto 40px;
  padding:48px 40px; border-radius:var(--radius-pill);
  background:linear-gradient(180deg,#fff,#f4eee4);
  box-shadow:0 20px 40px rgba(0,0,0,0.05), inset 0 -10px 20px rgba(0,0,0,0.02);
}
.pillow::before,.pillow::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:60px; height:120px; border-radius:50%;
  background:linear-gradient(135deg,#fff,#fde4ef); filter:blur(2px);
}
.pillow::before{left:-30px}
.pillow::after{right:-30px}
.pillow h3{text-align:center; font-family:'Caveat',cursive; font-size:28px; margin-bottom:8px}
.pillow .pillow-sub{text-align:center; color:var(--ink-muted); font-size:13px; margin-bottom:24px}

/* embroidered classics */
.embroidery-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:16px}
.embroidery{
  padding:14px; border-radius:18px; border:2px dashed rgba(205,182,230,0.5);
  background:rgba(255,255,255,0.3); text-align:center; text-decoration:none; color:var(--ink);
  transition:all .3s;
}
.embroidery:hover{box-shadow:0 0 18px rgba(230,201,138,0.7); background:rgba(255,255,255,0.5)}
.embroidery .em-frame{
  width:80px; height:80px; margin:0 auto 8px; border-radius:12px; overflow:hidden;
  border:2px dashed rgba(247,198,216,0.6); padding:3px;
}
.embroidery .em-frame img{width:100%; height:100%; object-fit:cover; border-radius:8px}
.embroidery .em-title{font-size:12px; font-weight:600}
.embroidery .em-meta{font-size:10px; color:var(--ink-muted); font-family:'Caveat',cursive}

.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; max-width:1240px; margin:0 auto; padding:0 24px 32px}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr}}
.footer-col h4{font-size:14px; margin-bottom:12px; color:var(--ink)}
.footer-col ul{list-style:none; padding:0; margin:0}
.footer-col li{margin-bottom:8px}
.footer-col a{font-size:13px; color:var(--ink-soft)}
.footer-col a:hover{color:var(--violet)}

/* dream envelope subscribe */
.dream-envelope{position:relative; max-width:420px; margin:24px auto 0}
.env-flap{
  position:absolute; top:0; left:0; right:0; height:48px; z-index:3;
  background:linear-gradient(180deg,var(--pink),var(--pink-soft));
  border-radius:12px 12px 0 0; transform-origin:top; transition:transform .5s;
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.env-body{
  background:rgba(255,255,255,0.5); border:1px solid var(--glass-border);
  border-radius:12px; padding:20px; min-height:120px;
  box-shadow:var(--glow);
}
.env-form{display:none; flex-direction:column; gap:10px; opacity:0}
.env-form.open{display:flex}
.env-form input{
  padding:10px 14px; border-radius:var(--radius-pill); border:1px solid var(--line);
  background:rgba(255,255,255,0.6); font-family:inherit; font-size:13px; color:var(--ink);
}
.env-form button{
  padding:10px 18px; border-radius:var(--radius-pill); border:none;
  background:linear-gradient(135deg,var(--pink),var(--violet)); color:#fff; font-weight:600;
  cursor:pointer; box-shadow:0 4px 14px rgba(205,182,230,0.5);
}
.env-seal{
  position:absolute; top:24px; left:50%; transform:translateX(-50%); z-index:4;
  width:40px; height:40px; border-radius:50%;
  background:radial-gradient(circle,#e6c98a,#b88c4a);
  box-shadow:0 0 16px rgba(230,201,138,0.7); cursor:pointer;
}
.env-seal::after{content:"✶"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px}
.env-hint{text-align:center; font-size:12px; color:var(--ink-muted); margin-top:12px; font-family:'Caveat',cursive}
.env-fairy,.env-sparkle{position:absolute; top:30px; left:50%; width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold); pointer-events:none}

.tagline-line{
  text-align:center; padding:24px; font-family:'Caveat',cursive; font-size:18px; color:var(--ink-soft);
  animation:breathe 4s ease-in-out infinite;
}
@keyframes breathe{50%{opacity:0.5}}
.footer-bottom{padding:16px 24px; text-align:center; font-size:12px; color:var(--ink-muted)}

.exit-arrow{
  position:fixed; right:24px; bottom:24px; z-index:60;
  width:44px; height:44px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.5); backdrop-filter:blur(10px); color:var(--violet);
  box-shadow:var(--glow); display:flex; align-items:center; justify-content:center;
  transition:transform .3s;
}
.exit-arrow:hover{transform:translateY(-4px)}

/* ---------- Detail page ---------- */
.detail-breadcrumb{padding:24px; font-size:13px; color:var(--ink-muted); max-width:1240px; margin:0 auto}
.detail-breadcrumb a{color:var(--violet)}
.detail-hero{
  position:relative; max-width:1100px; margin:0 auto; padding:40px 24px;
  display:grid; grid-template-columns:340px 1fr; gap:32px; align-items:center;
}
@media(max-width:760px){.detail-hero{grid-template-columns:1fr; text-align:center}}
.detail-hero-frame{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--glow); border:1px solid var(--glass-border);
  aspect-ratio:2/3;
}
.detail-hero-img{width:100%; height:100%; object-fit:cover; filter:brightness(1.1) saturate(1.2)}
.detail-hero-mist{position:absolute; inset:0; background:radial-gradient(circle at 50% 30%,transparent,rgba(255,255,255,0.3))}
.detail-hero-meta .detail-shape{font-family:'Caveat',cursive; color:var(--violet); font-size:18px}
.detail-hero-meta h1{font-size:36px; margin:8px 0}
.detail-stats{display:flex; flex-wrap:wrap; gap:12px; margin:16px 0}
.detail-stats .stat{padding:6px 14px; border-radius:var(--radius-pill); background:rgba(255,255,255,0.4); font-size:13px; color:var(--ink-soft)}
.detail-stats .stat b{color:var(--ink)}
.detail-tags{display:flex; flex-wrap:wrap; gap:8px}
.detail-tag{padding:4px 12px; border-radius:var(--radius-pill); background:var(--pink-soft); font-size:11px; color:var(--ink); border:1px solid rgba(255,255,255,0.5)}

.detail-body{display:grid; grid-template-columns:1fr 320px; gap:32px; max-width:1240px; margin:0 auto; padding:24px}
@media(max-width:1024px){.detail-body{grid-template-columns:1fr}}
.detail-content h2{font-size:24px; margin:24px 0 12px}
.detail-desc{font-size:15px; color:var(--ink-soft); line-height:1.8}
.diary-page{
  margin-top:24px; padding:24px; border-radius:var(--radius-lg);
  background:rgba(255,255,255,0.4); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.5);
  box-shadow:var(--glow);
}
.diary-coord{font-family:'Caveat',cursive; color:var(--violet); font-size:14px}
.diary-text{font-size:14px; color:var(--ink-soft); margin:12px 0}
.diary-sign{display:block; text-align:right; font-family:'Caveat',cursive; color:var(--ink-muted); font-size:13px}

.detail-related{max-width:1240px; margin:0 auto; padding:24px}
.detail-related h3{font-size:22px; margin-bottom:16px}
.pottery-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px}

/* ---------- Static / search pages ---------- */
.page-static,.page-search{padding:48px 24px}
.static-head{text-align:center; margin-bottom:32px}
.static-head .eyebrow{display:block; font-family:'Caveat',cursive; color:var(--violet); font-size:18px}
.static-head h1{font-size:34px; margin-top:6px}
.static-body{max-width:760px; margin:0 auto; font-size:15px; color:var(--ink-soft); line-height:1.8}
.static-body h2{font-size:22px; color:var(--ink); margin:28px 0 12px}
.static-lead{font-size:17px; color:var(--ink)}
.contact-form{display:flex; flex-direction:column; gap:14px; margin-top:24px}
.contact-form label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink-soft)}
.contact-form input,.contact-form textarea{
  padding:10px 14px; border-radius:var(--radius); border:1px solid var(--line);
  background:rgba(255,255,255,0.6); font-family:inherit; color:var(--ink);
}
.contact-submit{
  padding:12px 24px; border-radius:var(--radius-pill); border:none;
  background:linear-gradient(135deg,var(--pink),var(--violet)); color:#fff; font-weight:600;
  box-shadow:0 4px 14px rgba(205,182,230,0.5);
}
.search-box{max-width:560px; margin:0 auto 32px; position:relative}
.search-box input{
  width:100%; padding:14px 20px; border-radius:var(--radius-pill);
  border:1px solid var(--glass-border); background:rgba(255,255,255,0.5);
  backdrop-filter:blur(8px); font-family:inherit; font-size:15px; color:var(--ink);
  box-shadow:var(--glow);
}
.search-hint{display:block; text-align:center; font-size:12px; color:var(--ink-muted); margin-top:8px; font-family:'Caveat',cursive}
.search-results{max-width:760px; margin:0 auto}
.search-result{
  display:flex; gap:16px; padding:16px; border-radius:var(--radius); margin-bottom:12px;
  background:rgba(255,255,255,0.35); backdrop-filter:blur(6px); text-decoration:none; color:var(--ink);
  border:1px solid rgba(255,255,255,0.5); transition:all .3s;
}
.search-result:hover{background:rgba(255,255,255,0.6); transform:translateY(-2px)}
.search-result-thumb{flex:0 0 80px; height:110px; border-radius:12px; background-size:cover; background-position:center}
.search-result-title{font-weight:600; font-size:16px; display:block}
.search-result-meta{font-size:12px; color:var(--ink-muted); display:block; margin:4px 0}
.search-result-desc{font-size:13px; color:var(--ink-soft)}
.search-empty{text-align:center; color:var(--ink-muted); font-family:'Caveat',cursive; font-size:16px}

.muted{color:var(--ink-muted)}
.eyebrow{font-family:'Caveat',cursive; color:var(--violet); font-size:18px}