/* =============================================================================
   podcast.gabrieleromanato.com — Foglio di stile UNICO (tema dark)
   -----------------------------------------------------------------------------
   Unico CSS del sito: nessun overlay, nessun !important. Porta con se' anche le
   fondamenta (reset, tipografia, layout) perche' sostituisce il CSS precedente.
   Solo CSS. Unica icona generata: RSS (SVG inline via mask).

   Tarato sul markup reale di TUTTE le pagine: home/archivio, pagina episodio,
   Stagioni, singola stagione, header, footer.

   UTILITY: il sito usa poche utility in stile Tailwind, solo nell'header
   (flex, flex-wrap, items-center, justify-between, gap-2, p-4, border-b).
   Sono ridefinite qui sotto con gli stessi valori: se un domani reintroduci
   Tailwind, cancella quel piccolo blocco (e la .container) per non duplicarle.

   PALETTE: base slate fredda + accento ambra caldo. Cambia --accent per
   ripigmentare tutto (alternativa azzurra commentata nei token).
   TIPO: stack di sistema; per un carattere tuo cambia --font / --mono.
============================================================================= */

/* -----------------------------------------------------------------------------
   1. Token
-------------------------------------------------------------------------------*/
:root {
  --bg:            #0f141b;
  --surface:       #161d27;
  --surface-2:     #1e2733;
  --border:        #2a3542;
  --border-strong: #3a4757;

  --text:    #e8ecf2;
  --heading: #f5f7fa;
  --muted:   #99a4b2;
  --faint:   #6b7684;

  --accent:          #f0b463;
  --accent-strong:   #ffc87e;
  --accent-contrast: #23160a;
  --accent-soft:     rgba(240, 180, 99, 0.14);

  /* --- Alternativa azzurra (scommenta) ---
  --accent:          #6cb6ff;
  --accent-strong:   #97ccff;
  --accent-contrast: #08131f;
  --accent-soft:     rgba(108, 182, 255, 0.14);
  --------------------------------------- */

  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --container: 48rem;   /* larghezza max del contenuto */
  --measure: 40rem;     /* larghezza di lettura per i testi lunghi */
  --radius: 10px;

  color-scheme: dark;
  accent-color: var(--accent);
}

/* -----------------------------------------------------------------------------
   2. Reset + base
-------------------------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 { color: var(--heading); line-height: 1.25; font-weight: 700; }
h1 { font-size: 1.9rem; letter-spacing: -0.01em; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; }

p { color: var(--text); }
small { font-size: 0.85rem; color: var(--muted); }
strong { color: var(--heading); }

a { color: var(--accent); text-underline-offset: 0.14em;
    text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
a:hover, a:focus { color: var(--accent-strong); text-decoration-color: var(--accent-strong); }
h1 a, h2 a, h3 a { color: inherit; text-decoration: none; }
h1 a:hover, h2 a:hover, h3 a:hover { color: var(--accent-strong); }

ul, ol { padding-left: 1.25rem; }
li { margin: 0.25rem 0; }

hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

blockquote {
  color: var(--muted);
  border-left: 3px solid var(--accent);
  background: var(--surface);
  padding: 0.75rem 1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.25rem 0;
}

code, kbd, samp, pre {
  font-family: var(--mono);
  background: var(--surface-2);
  color: #ffdca8;
  border: 1px solid var(--border);
  border-radius: 6px;
}
code, kbd, samp { padding: 0.1em 0.35em; font-size: 0.9em; }
pre { padding: 1rem; overflow: auto; margin: 1.25rem 0; }
pre code { border: 0; background: transparent; padding: 0; color: inherit; }

table { border-collapse: collapse; width: 100%; margin: 1.25rem 0; }
th, td { border: 1px solid var(--border); padding: 0.5rem 0.7rem; text-align: left; }
thead th { background: var(--surface-2); color: var(--heading); }
tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface) 55%, transparent); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
textarea, select {
  font: inherit; color: var(--text);
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

::selection { background: var(--accent); color: var(--accent-contrast); }
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: 3px; }

* { scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border: 3px solid var(--bg); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #4a586a; }

/* -----------------------------------------------------------------------------
   3. Contenitore + utility (dell'header) + helper
-------------------------------------------------------------------------------*/
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
main { display: block; padding-block: 1.5rem; }

/* Utility Tailwind usate nell'header (valori identici a Tailwind).
   Se reintroduci Tailwind, cancella questo blocco e .container qui sopra. */
.flex            { display: flex; }
.flex-wrap       { flex-wrap: wrap; }
.items-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2           { gap: 0.5rem; }
.p-4             { padding: 1rem; }
.border-b        { border-bottom: 1px solid var(--border); }

/* Helper tuoi (non-Tailwind) */
.row   { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.mono  { font-family: var(--mono); }
.muted { color: var(--muted); }

/* -----------------------------------------------------------------------------
   4. Atomi condivisi
-------------------------------------------------------------------------------*/
.eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--accent); font-size: 0.9rem; letter-spacing: 0.01em; }
.dot { display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }

/* Pulsanti: hero (.btn-signal) e paginazione (.btn / .btn.is-disabled) */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { border-color: var(--accent); color: var(--accent-strong); }
.btn svg { flex: 0 0 auto; }
.btn-signal { background: var(--accent); color: var(--accent-contrast); border-color: transparent; }
.btn-signal:hover { background: var(--accent-strong); color: var(--accent-contrast); border-color: transparent; }
.btn.is-disabled { color: var(--faint); background: transparent; border-color: var(--border); cursor: default; pointer-events: none; }

/* -----------------------------------------------------------------------------
   5. Header   [markup reale]
   header.site-header (p-4 border-b) > .container(flex justify-between)
     > a.brand (span.dot + span.name) + nav.site-nav (flex gap-2 > a...)
-------------------------------------------------------------------------------*/
.site-header { background: color-mix(in srgb, var(--bg) 85%, #000); }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--heading); font-weight: 700; font-size: 1.1rem; text-decoration: none; }
.brand .name { color: var(--heading); }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover, .site-nav a:focus, .site-nav a[aria-current] { color: var(--accent-strong); }
.site-nav button {
  cursor: pointer;
  color: var(--muted);
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
}

.site-nav button:hover,
.site-nav button:focus,
.site-nav button:active {
  outline-style: none;
  color: var(--accent-strong);
}

/* -----------------------------------------------------------------------------
   6. Footer   [markup reale]
   footer.site-footer > .container.row > span.muted + span > a
-------------------------------------------------------------------------------*/
.site-footer { border-top: 1px solid var(--border); padding-block: 2rem; font-size: 0.9rem; }
.site-footer a { color: var(--muted); text-underline-offset: 0.14em; }
.site-footer a:hover, .site-footer a:focus { color: var(--accent-strong); }

/* -----------------------------------------------------------------------------
   7. Home / archivio / Stagioni / singola stagione   [markup reale]
-------------------------------------------------------------------------------*/
/* Hero (home: eyebrow+titolo+dek+cta; Stagioni/singola: solo titolo [+dek]) */
.hero { padding-block: 1rem 1.5rem; }
.hero h1 { font-size: 2rem; margin-top: 0.5rem; }
.dek { color: var(--muted); font-size: 1.05rem; max-width: var(--measure); margin-top: 0.75rem; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 1.25rem; }
.runtime { color: var(--muted); font-size: 0.85rem; }

/* Intestazione sezione: titolo + conteggio */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.5rem 0 1rem; }
.section-head h2 { margin: 0; }
.count { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }

/* Elenco (episodi in home/stagione, stagioni in /seasons) */
.episodes { display: flex; flex-direction: column; gap: 0.75rem; }

/* Riga-card: [indice] [lead: thumb + titolo/sub] [meta] */
.ep-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ep-row:hover, .ep-row:focus-visible { border-color: var(--accent); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }

.ep-index { font-family: var(--mono); font-size: 0.78rem; font-weight: 700; color: var(--accent); white-space: nowrap; }

.ep-lead { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.ep-thumb { margin: 0; flex: 0 0 auto; width: 60px; height: 60px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.ep-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

.ep-main { min-width: 0; }
.ep-title { margin: 0; font-size: 1rem; line-height: 1.3; color: var(--heading); }
.ep-sub {
  margin: 0.2rem 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.ep-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; text-align: right; color: var(--muted); font-size: 0.8rem; white-space: nowrap; }

/* Paginazione: nav.pagination > .btn / span.btn.is-disabled + span.page-ind.mono */
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; }
.page-ind { color: var(--muted); font-size: 0.85rem; }

/* -----------------------------------------------------------------------------
   8. PAGINA EPISODIO   [markup reale]
-------------------------------------------------------------------------------*/
.episode-page .back { display: inline-block; margin-bottom: 1.25rem; color: var(--muted); text-decoration: none; }
.episode-page .back:hover { color: var(--accent-strong); }

.episode-head { display: flex; gap: 1.5rem; align-items: flex-start; margin: 0.5rem 0 1.75rem; }
.episode-head .cover {
  width: 180px; flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.episode-head h1 { margin-top: 0.25rem; }

/* Riga meta a chip */
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.85rem; }
.meta .tag {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.85rem; line-height: 1.4;
}
.meta .tag.mono { font-family: var(--mono); }
.meta .notes-tag { cursor: pointer; color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.meta .notes-tag:hover { color: var(--accent-strong); }
.meta .ep-social-link { color: var(--muted); text-decoration: none; }
.meta .ep-social-link:hover { color: var(--accent-strong); }

/* Player audio custom */
.player { display: flex; align-items: center; gap: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1rem; margin: 1.75rem 0; }
.player .play { width: 2.75rem; height: 2.75rem; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); }
.player .play:hover { background: var(--accent-strong); }
.player .play svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.player .body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.player .scrub { width: 100%; accent-color: var(--accent); }
.player .times { display: flex; justify-content: space-between; }
.player .times .mono { color: var(--muted); font-size: 0.8rem; }

/* Note / trascrizione */
.notes { max-width: var(--measure); margin: 2rem 0; }
.notes p { margin-bottom: 1.1rem; }
.notes p:last-child { margin-bottom: 0; }
.notes a { color: var(--accent); }
.notes a:hover { color: var(--accent-strong); }

/* -----------------------------------------------------------------------------
   9. Modale note episodio   [feature JS]
   Struttura creata da JS e appesa a <body>:
     .ep-notes-modal (overlay)
        > button.ep-notes-modal-close (X)
        > .ep-notes-modal-content (HTML della nota iniettato)
   Il JS apre/chiude aggiungendo/togliendo la classe .show sull'overlay.
-------------------------------------------------------------------------------*/
.ep-notes-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 3.5rem 1.25rem 2rem;
  background: rgba(4, 7, 11, 0.72);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.ep-notes-modal.show { opacity: 1; visibility: visible; pointer-events: auto; }

.ep-notes-modal-content {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  transform: translateY(8px);
  transition: transform 0.2s ease;
}
.ep-notes-modal.show .ep-notes-modal-content { transform: translateY(0); }

/* X di chiusura: sempre in alto a destra della finestra */
.ep-notes-modal-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}
.ep-notes-modal-close:hover,
.ep-notes-modal-close:focus-visible { color: var(--accent-strong); border-color: var(--accent); }
.ep-notes-modal-close svg { width: 1.25rem; height: 1.25rem; }

/* Tipografia del contenuto nota iniettato (intro, h2, elenchi, link, risorse) */
.ep-notes-modal-content > :first-child { margin-top: 0; }
.ep-notes-modal-content h2 { font-size: 1.15rem; color: var(--heading); margin: 1.5rem 0 0.6rem; }
.ep-notes-modal-content p { color: var(--text); margin-bottom: 1rem; }
.ep-notes-modal-content ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.ep-notes-modal-content li { margin: 0.35rem 0; color: var(--text); }
.ep-notes-modal-content a { color: var(--accent); }
.ep-notes-modal-content a:hover { color: var(--accent-strong); }

/* -----------------------------------------------------------------------------
   10. Icona RSS (SVG inline via mask) — link .../feed.xml (nav e footer)
-------------------------------------------------------------------------------*/
a[href$="feed.xml"]::before {
  content: "";
  display: inline-block;
  width: 1em; height: 1em; margin-right: 0.4em; vertical-align: -0.13em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='6.18'%20cy='17.82'%20r='2.18'/%3E%3Cpath%20d='M4%204.44v2.83c7.03%200%2012.73%205.7%2012.73%2012.73h2.83C19.56%2011.4%2012.6%204.44%204%204.44zm0%205.66v2.83c3.9%200%207.07%203.17%207.07%207.07h2.83C13.9%2014.72%209.28%2010.1%204%2010.1z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='6.18'%20cy='17.82'%20r='2.18'/%3E%3Cpath%20d='M4%204.44v2.83c7.03%200%2012.73%205.7%2012.73%2012.73h2.83C19.56%2011.4%2012.6%204.44%204%204.44zm0%205.66v2.83c3.9%200%207.07%203.17%207.07%207.07h2.83C13.9%2014.72%209.28%2010.1%204%2010.1z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* -----------------------------------------------------------------------------
   11. Responsive + preferenze di movimento
-------------------------------------------------------------------------------*/
@media (max-width: 640px) {
  h1 { font-size: 1.6rem; }
  .hero h1 { font-size: 1.7rem; }
  .episode-head { flex-direction: column; gap: 1rem; }
  .episode-head .cover { width: 140px; }
  /* La riga-card impila la meta sotto */
  .ep-row { grid-template-columns: auto 1fr; }
  .ep-meta { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 0.75rem; }
  /* Modale note */
  .ep-notes-modal { padding: 3rem 0.85rem 1.5rem; }
  .ep-notes-modal-content { padding: 1.25rem; }
}

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


/* -----------------------------------------------------------------------------
  12. Ricerca episodi 
-------------------------------------------------------------------------------*/
.search {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 3.5rem 1.25rem 2rem;
  background: rgba(4, 7, 11, 0.72);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.search.show { opacity: 1; visibility: visible; pointer-events: auto; }

.search-form {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  transform: translateY(8px);
  transition: transform 0.2s ease;
}
.search.show .search-form { transform: translateY(0); }

.search-form div {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.search-form input {
  width: 75%;
  display: block;
  padding: 0 0 0.6rem 0;
  font-family: inherit;
  font-size: inherit;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.search-form input:focus {
  outline-style: none;
  border-bottom-color: var(--border-strong);
}

.search-form .btn {
  margin-left: auto;
}


.search-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}
.search-close:hover,
.search-close:focus-visible { color: var(--accent-strong); border-color: var(--accent); }
.search-close svg { width: 1.25rem; height: 1.25rem; }

.search-result {
  margin: 1.25rem 0;
  padding: 1rem;
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.search-result:hover {
  border-color: var(--accent);
}

.search-result a {
  display: block;
  text-decoration: none;
}

.search-result h3 {
  color: var(--heading);
  font-size: 1.25rem;
}

.search-result p {
  color: var(--muted);
  margin-top: 0.6rem;
}

.search-status {
  color: var(--muted);
  margin: 1.25rem 0;
}

/* -----------------------------------------------------------------------------
   13. Icona Spotify (SVG inline via mask) — link (nav e footer)
-------------------------------------------------------------------------------*/
a[href*="spotify.com"]::before {
  content: "";
  display: inline-block;
  width: 1em; height: 1em; margin-right: 0.4em; vertical-align: -0.13em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 305 305'%3E%3Cpath d='M152.441,0C68.385,0,0,68.39,0,152.453C0,236.568,68.385,305,152.441,305C236.562,305,305,236.568,305,152.453C305,68.39,236.562,0,152.441,0z M75.08,208.47c17.674-5.38,35.795-8.108,53.857-8.108c30.676,0,60.96,7.774,87.592,22.49c1.584,0.863,3.024,3.717,3.67,7.27c0.646,3.552,0.389,7.205-0.648,9.105c-1.309,2.438-3.965,4.014-6.768,4.014c-1.389,0-2.61-0.312-3.831-0.972c-24.448-13.438-52.116-20.542-80.015-20.542c-16.855,0-33.402,2.495-49.167,7.409c-0.768,0.233-1.558,0.352-2.348,0.352c-3.452,0.001-6.448-2.198-7.453-5.461C68.612,219.566,71.419,209.667,75.08,208.47z M68.43,152.303c19.699-5.355,40.057-8.071,60.508-8.071c36.765,0,73.273,8.896,105.601,25.739c2.266,1.15,3.936,3.1,4.701,5.49c0.776,2.421,0.542,5.024-0.669,7.347c-2.885,5.646-6.257,9.44-8.393,9.44c-1.514,0-2.975-0.363-4.43-1.09c-30.019-15.632-62.59-23.558-96.811-23.558c-19.035,0-37.71,2.503-55.489,7.435c-0.827,0.224-1.676,0.337-2.521,0.337c-4.277,0.001-8.046-2.888-9.162-7.013C60.336,162.994,63.601,153.616,68.43,152.303z M66.727,115.606c-0.903,0.223-1.826,0.335-2.744,0.335c-5.169,0.001-9.648-3.492-10.892-8.487c-1.559-6.323,2.397-13.668,8.126-15.111c22.281-5.473,45.065-8.248,67.72-8.248c43.856,0,85.857,9.86,124.851,29.312c2.708,1.336,4.727,3.642,5.687,6.493c0.96,2.854,0.748,5.926-0.592,8.64c-1.826,3.655-5.772,7.59-10.121,7.59c-1.677,0-3.399-0.393-4.924-1.109c-35.819-17.921-74.477-27.008-114.9-27.008C108.164,108.014,87.234,110.568,66.727,115.606z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 305 305'%3E%3Cpath d='M152.441,0C68.385,0,0,68.39,0,152.453C0,236.568,68.385,305,152.441,305C236.562,305,305,236.568,305,152.453C305,68.39,236.562,0,152.441,0z M75.08,208.47c17.674-5.38,35.795-8.108,53.857-8.108c30.676,0,60.96,7.774,87.592,22.49c1.584,0.863,3.024,3.717,3.67,7.27c0.646,3.552,0.389,7.205-0.648,9.105c-1.309,2.438-3.965,4.014-6.768,4.014c-1.389,0-2.61-0.312-3.831-0.972c-24.448-13.438-52.116-20.542-80.015-20.542c-16.855,0-33.402,2.495-49.167,7.409c-0.768,0.233-1.558,0.352-2.348,0.352c-3.452,0.001-6.448-2.198-7.453-5.461C68.612,219.566,71.419,209.667,75.08,208.47z M68.43,152.303c19.699-5.355,40.057-8.071,60.508-8.071c36.765,0,73.273,8.896,105.601,25.739c2.266,1.15,3.936,3.1,4.701,5.49c0.776,2.421,0.542,5.024-0.669,7.347c-2.885,5.646-6.257,9.44-8.393,9.44c-1.514,0-2.975-0.363-4.43-1.09c-30.019-15.632-62.59-23.558-96.811-23.558c-19.035,0-37.71,2.503-55.489,7.435c-0.827,0.224-1.676,0.337-2.521,0.337c-4.277,0.001-8.046-2.888-9.162-7.013C60.336,162.994,63.601,153.616,68.43,152.303z M66.727,115.606c-0.903,0.223-1.826,0.335-2.744,0.335c-5.169,0.001-9.648-3.492-10.892-8.487c-1.559-6.323,2.397-13.668,8.126-15.111c22.281-5.473,45.065-8.248,67.72-8.248c43.856,0,85.857,9.86,124.851,29.312c2.708,1.336,4.727,3.642,5.687,6.493c0.96,2.854,0.748,5.926-0.592,8.64c-1.826,3.655-5.772,7.59-10.121,7.59c-1.677,0-3.399-0.393-4.924-1.109c-35.819-17.921-74.477-27.008-114.9-27.008C108.164,108.014,87.234,110.568,66.727,115.606z'/%3E%3C/svg%3E") no-repeat center / contain;
}