/* Bianca Ioppolo — blog. Identità: femminile, elegante, contemporanea.
   Porcellana rosata, rosa petalo protagonista, salvia come cenno botanico,
   Bodoni per i titoli. Niente emoji: solo icone SVG. */
:root{
  --ground:#faf6f4; --card:#ffffff; --ink:#332a30; --muted:#8a7580;
  --rosa:#c9536f; --rosa-soft:#d66a8a1c; --salvia:#7d9a83;
  --line:#ecd9dd; --line-soft:#f3e7ea;
  --serif:'Bodoni 72','Didot','Playfair Display',Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root{
  --ground:#221a20; --card:#2c222a; --ink:#f2e9ee; --muted:#b39aa8;
  --rosa:#e88aa6; --rosa-soft:#e88aa622; --salvia:#93b39a;
  --line:#43333e; --line-soft:#372a33;
}}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:680px;margin:0 auto;padding:0 20px 60px}
a{color:var(--rosa);text-decoration:none}
svg{vertical-align:-0.15em}
img{max-width:100%}
.lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.muted{color:var(--muted)}

header.masthead{padding:26px 0 18px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.wordmark{font-family:var(--serif);font-size:22px;color:var(--ink)}
.wordmark em{color:var(--rosa);font-style:italic}
.langs{display:flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:2px}
.langs a{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.05em;
  padding:4px 6px;border-radius:999px}
.langs a.on{background:var(--ink);color:var(--ground)}
.tagline{font-family:var(--serif);color:var(--muted);text-align:center;
  padding:14px 0 4px;font-size:15px}

.socialbar{display:flex;justify-content:center;gap:22px;padding:10px 0 2px}
.socialbar a{color:var(--muted);transition:color .15s,transform .15s;display:inline-flex}
.socialbar a:hover{color:var(--rosa);transform:translateY(-2px)}

.search{display:flex;align-items:center;gap:9px;background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:10px 16px;
  margin:18px 0 4px;color:var(--muted)}
.search input{border:0;background:none;outline:none;flex:1;font-size:15px;
  color:var(--ink);font-family:var(--sans)}
.topics{display:flex;gap:8px;overflow-x:auto;padding:10px 2px 4px;-webkit-overflow-scrolling:touch}
.topics::-webkit-scrollbar{display:none}
.topics a{flex:none;border:1px solid var(--line);border-radius:999px;padding:6px 14px;
  font-size:13px;font-weight:600;color:var(--ink);background:var(--card)}
.topics a:hover,.topics a.on{background:var(--rosa);border-color:var(--rosa);color:#fff}
.topics-note{font-size:11.5px;padding:2px 4px 0;color:var(--muted)}

.hero{margin:26px 0 8px;text-align:center}
.arch{width:min(76%,300px);margin:0 auto;position:relative}
.arch img{width:100%;display:block;border-radius:170px 170px 22px 22px;
  border:1px solid var(--line);filter:saturate(1.02)}
.arch::after{content:"";position:absolute;inset:-9px;border:1px solid var(--line);
  border-radius:179px 179px 28px 28px;pointer-events:none}
.hero .lbl{color:var(--salvia);display:block;margin:20px 0 8px}
.hero h1{font-family:var(--serif);font-weight:600;letter-spacing:.005em;
  font-size:clamp(31px,7.6vw,42px);line-height:1.14;text-wrap:balance;margin:0 auto;max-width:14em}
.hero .cta{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-weight:600}

.section-rule{display:flex;align-items:center;gap:14px;margin:42px 0 18px;color:var(--muted)}
.section-rule::before,.section-rule::after{content:"";flex:1;border-top:1px solid var(--line)}

.vstrip{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.vstrip::-webkit-scrollbar{display:none}
.vcard{flex:0 0 46%;scroll-snap-align:start;position:relative;border-radius:14px;
  overflow:hidden;border:1px solid var(--line);transition:transform .18s;display:block}
.vcard:hover{transform:translateY(-2px)}
.vcard img{width:100%;aspect-ratio:9/14;object-fit:cover;display:block;background:#3a2733}
.vcard .veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,#3a2733d9)}
.vcard .play{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;
  background:var(--rosa);display:grid;place-items:center;box-shadow:0 4px 12px #0005}
.vcard figcaption{position:absolute;left:10px;right:10px;bottom:9px;color:#f3eef1;
  font-size:12.5px;line-height:1.3;font-weight:600}

.card{background:var(--card);border:1px solid var(--line-soft);border-radius:18px;
  box-shadow:0 2px 12px #d66a8a12;padding:18px 18px 16px;margin-bottom:14px;
  display:block;color:var(--ink);transition:transform .18s,border-color .18s}
.card:hover{transform:translateY(-2px);border-color:var(--line)}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.card .fam{color:var(--salvia)}
.card .time{color:var(--muted);font-size:12px;display:inline-flex;align-items:center;gap:5px}
.card h3{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.3;text-wrap:balance}
.card p{color:var(--muted);font-size:15px;margin-top:6px}
.card .read{margin-top:10px;font-size:14px;font-weight:600;display:inline-flex;
  align-items:center;gap:6px;color:var(--rosa)}

.art-head{padding:34px 0 6px}
.crumb{color:var(--muted);font-size:13px;display:inline-flex;align-items:center;gap:6px}
.art-head .lbl{color:var(--salvia);display:block;margin:22px 0 10px}
.art-head h1{font-family:var(--serif);font-weight:600;font-size:clamp(29px,6.8vw,38px);
  line-height:1.16;text-wrap:balance}
.byline{display:flex;align-items:center;gap:10px;margin-top:16px;color:var(--muted);font-size:13px}
.byline img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.byline b{color:var(--ink);font-weight:600}

.artimg{margin:22px 0 0}
.artimg img{width:100%;border-radius:18px;border:1px solid var(--line);display:block}

.sintesi{background:var(--rosa-soft);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;margin:26px 0}
.sintesi .lbl{color:var(--rosa);display:flex;align-items:center;gap:7px;margin-bottom:8px}
.sintesi p{font-size:15.5px}

.prose h2{font-family:var(--serif);font-weight:600;font-size:23px;margin:30px 0 10px;text-wrap:balance}
.prose p{margin:0 0 16px}
.avviso{display:flex;gap:10px;color:var(--muted);font-size:14px;
  border-top:1px solid var(--line);margin-top:28px;padding-top:14px}
.avviso svg{flex:none;margin-top:2px}

.videocard{position:relative;border-radius:16px;overflow:hidden;margin:26px 0;
  border:1px solid var(--line);display:block}
.videocard img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 20%;display:block;background:#3a2733}
.videocard .veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,#3a2733cc)}
.videocard .play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;background:var(--rosa);display:grid;
  place-items:center;box-shadow:0 8px 26px #0006}
.videocard figcaption{position:absolute;left:16px;right:16px;bottom:12px;color:#f3eef1;font-size:14px}
.videocard .lbl{color:#f2c2d2;display:block;margin-bottom:3px}

.infogfx{margin:26px 0;text-align:center}
.infogfx img{width:min(100%,420px);border-radius:16px;border:1px solid var(--line)}
.infogfx figcaption{color:var(--muted);font-size:12.5px;margin-top:8px;
  font-style:italic;font-family:var(--serif)}

.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{list-style:none;cursor:pointer;padding:14px 0;font-weight:600;font-size:16px;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{transition:transform .2s;flex:none;color:var(--muted)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details p{color:var(--muted);padding:0 0 14px;font-size:15px}

.cta-prod{display:flex;align-items:center;gap:14px;background:var(--rosa-soft);
  border:1px solid var(--line);border-radius:16px;padding:16px;margin:14px 0;color:var(--ink)}
.cta-prod .prodimg{width:52px;height:52px;border-radius:12px;object-fit:contain;
  background:#fff;border:1px solid var(--line);flex:none;padding:3px}
.cta-prod b{display:block;font-size:15px}
.cta-prod span span{color:var(--muted);font-size:13px}
.cta-prod .go{margin-left:auto;color:var(--rosa);flex:none}

.minivids{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.minivid{display:flex;align-items:center;gap:12px;background:var(--card);
  border:1px solid var(--line-soft);border-radius:14px;padding:8px;color:var(--ink);
  transition:transform .15s}
.minivid:hover{transform:translateY(-1px)}
.minivid .th{position:relative;flex:none;width:58px;height:78px;border-radius:10px;
  overflow:hidden;background:#3a2733}
.minivid .th img{width:100%;height:100%;object-fit:cover}
.minivid .th span{position:absolute;inset:0;display:grid;place-items:center;background:#3a273355}
.minivid b{font-size:14px;line-height:1.3;display:block}
.minivid small{color:var(--muted);font-size:12px}

footer{border-top:1px solid var(--line);margin-top:46px;padding:22px 0 8px;
  text-align:center;color:var(--muted);font-size:13px}
footer .socialbar{padding-bottom:10px}
footer small{display:block;margin-top:8px;font-size:11.5px;opacity:.85;line-height:1.5}

/* reel */
body.reelpage{background:#16090e}
.reel-feed{height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch}
.reel-item{height:100dvh;scroll-snap-align:start;position:relative;display:grid;place-items:center}
.reel-item video,.reel-item img.poster{height:100%;width:100%;object-fit:cover;max-width:480px;margin:0 auto;display:block}
.reel-item .shade{position:absolute;inset:0;max-width:480px;margin:0 auto;pointer-events:none;
  background:linear-gradient(180deg,#00000055 0%,transparent 22%,transparent 55%,#16090ee6 100%)}
.reel-top{position:fixed;top:calc(env(safe-area-inset-top) + 14px);left:16px;right:16px;
  z-index:5;display:flex;justify-content:space-between;align-items:center;max-width:448px;margin:0 auto}
.reel-close{width:38px;height:38px;border-radius:50%;background:#00000066;border:0;color:#fff;
  display:grid;place-items:center}
.reel-langs{display:flex;gap:2px;background:#00000055;border:1px solid #ffffff2e;
  border-radius:999px;padding:2px;backdrop-filter:blur(6px)}
.reel-langs button{border:0;background:none;color:#ffffffb3;font-size:10px;font-weight:700;
  letter-spacing:.05em;padding:4px 7px;border-radius:999px;cursor:pointer}
.reel-langs button.on{background:#fff;color:#16090e}
.reel-meta{position:absolute;left:18px;right:74px;bottom:26px;color:#fff;z-index:2;max-width:430px}
.reel-meta .lbl{color:#f2b8cb;display:block;margin-bottom:6px}
.reel-meta h2{font-family:var(--serif);font-size:21px;line-height:1.25;margin-bottom:6px;font-weight:600}
.reel-meta p{font-size:13.5px;opacity:.85;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.reel-meta .more{font-size:13px;font-weight:700;color:#f2b8cb;cursor:pointer;margin-top:4px;display:inline-block}
.reel-side{position:absolute;right:14px;bottom:34px;z-index:2;display:flex;
  flex-direction:column;gap:18px;align-items:center;color:#fff}
.reel-side a,.reel-side button{border:0;background:#ffffff22;width:44px;height:44px;border-radius:50%;
  color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px)}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:8;background:var(--card);color:var(--ink);
  border-radius:22px 22px 0 0;padding:18px 20px calc(env(safe-area-inset-bottom) + 20px);
  max-width:480px;margin:0 auto;transform:translateY(105%);transition:transform .28s ease;
  max-height:72%;overflow-y:auto}
.sheet.on{transform:none}
.sheet .grab{width:38px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 14px;cursor:pointer}
.sheet h3{font-family:var(--serif);font-size:19px;margin-bottom:6px}
.sheet > p{font-size:14px;color:var(--muted);margin-bottom:14px}
.sheet .lbl{color:var(--rosa);display:block;margin:14px 0 8px}
.artlink{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--ink)}
.artlink svg{color:var(--rosa);flex:none}
.sheet details{border-top:1px solid var(--line-soft);margin-top:12px}
.sheet summary{list-style:none;cursor:pointer;padding:12px 0;font-weight:700;font-size:14px;color:var(--rosa)}
.sheet summary::-webkit-details-marker{display:none}
.sheet details p{font-size:13.5px;line-height:1.6;color:var(--muted)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}